Skip to main content

Assignment 5: Web Design using HTML, CSS and CSS Framework

Platform-Based Programming (CSGE602022)
Faculty of Computer Science, University of Indonesia
Odd Semester 2025/2026

Assignment Description​

In this assignment, you will implement web design based on concepts learned during tutorials, including CSS and CSS frameworks.

Assignment Checklist​

1. Core Functionality​

  • Implement functions to delete and edit products

2. Design Customization​

Customize the design of HTML templates from previous assignments using CSS or CSS frameworks (Bootstrap, Tailwind, Bulma, etc.):

2.1 Page Customization​

  • Login Page: Make it as attractive as possible
  • Register Page: Make it as attractive as possible
  • Add Product Page: Make it as attractive as possible
  • Edit Product Page: Make it as attractive as possible
  • Product Detail Page: Make it as attractive as possible

2.2 Product List Page​

  • Make the product list page more attractive and responsive
  • Handle the following conditions:
    • No products: Display an image and message indicating no products are registered
    • Products exist: Display each product's details using cards (must be different from tutorial design)

2.3 Product Cards​

  • Create two buttons for each product card:
    • Edit button
    • Delete button

2.4 Navigation Bar​

  • Create a responsive navbar for application features
  • Ensure responsiveness for both mobile and desktop devices

Responsive Navbar Examples (design doesn't need to be identical):

  • Mobile Version: Mobile Navbar

  • Mobile Menu Expanded: Mobile Menu

  • Desktop Version: Desktop Navbar

3. Documentation​

Answer the following questions in README.md (modify your existing README and add subheadings for each assignment):

  • CSS Selector Priority: If multiple CSS selectors target an HTML element, explain the priority order for CSS selector selection
  • Responsive Design:
    • Why is responsive design important in web application development?
    • Provide examples of applications that have and haven't implemented responsive design
    • Explain the reasons behind your examples
  • Box Model: Explain the differences between margin, border, and padding, and how to implement them
  • Layout Systems: Explain the concepts of flexbox and grid layout along with their uses
  • Implementation Steps: Explain how you implemented the above checklist step-by-step (not just following the tutorial)

4. Version Control​

  • Perform git add, git commit, and git push to GitHub

Assignment Deadline​

The deadline for Assignment 5 is Wednesday, October 1, 2025, at 12.00 PM.

Teaching assistants will check the last commit from the lab assignment repository, so you don't need to submit the repository link to the submission slot.