Skip to main content

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

Platform-Based Programming (CSGE602022) — conducted by the Faculty of Computer Science, University of Indonesia, Odd Semester 2024/2025

Assignment Description​

In this assignment, you will implement a web design based on several things you have learned during the tutorial (CSS, Framework, etc.).

The checklist for this assignment is as follows:

  • Implement functions to delete and edit products.

  • Customize the design of the HTML templates that have been created in previous assignments using CSS or a CSS framework (such as Bootstrap, Tailwind, Bulma) with the following conditions:

    • Customize the login, register, and add product pages to be as attractive as possible.
    • Customize the product list page to be more attractive and responsive. Then, consider the following conditions:
      • If there are no products saved in the application, the product list page will display an image and a message that no products are registered.
      • If there are products saved, the product list page will display details of each product using cards (must not be exactly the same as the design in the Tutorial!).
    • For each product card, create two buttons to edit and delete the product on that card!
    • Create a navigation bar (navbar) for the features in the application that is responsive to different device sizes, especially mobile and desktop.
      • Example of a responsive navbar (Does not need to be exactly the same!):

        • Navbar condition for mobile version: Example of Mobile Navbar Display When the hamburger button is clicked: Example of Mobile Navbar Display (Expanded)

        • Navbar condition for desktop version: Example of Desktop Navbar Display

  • Answer the following questions in README.md in the root folder (please modify the README.md you have created before; add subheadings for each assignment).

    • If there are multiple CSS selectors for an HTML element, explain the priority order of these CSS selectors!
    • Why does responsive design become an important concept in web application development? Give examples of applications that have and have not implemented responsive design!
    • Explain the differences between margin, border, and padding, and how to implement these three things!
    • Explain the concepts of flex box and grid layout along with their uses!
    • Explain how you implemented the checklist above step-by-step (not just following the tutorial)!

  • Perform add-commit-push to GitHub.

Assignment Deadline​

The deadline for Assignment 5 is Wednesday, October 2, 2024, at 12:00 PM.

The 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.