Question: Creating a static page using HTML and CSS In this project, you are asked to create a product page in an online shop using proper
Creating a static page using HTML and CSS
In this project, you are asked to create a product page in an online shop using
proper HTML and CSS. The use of CSS to style your websites in a way its appealing to
the user is very important.
Your project should include:
- A sketch of the web page you made before you start making your webpage
- One index.html file
- One or more css files
- The pictures, more html files, or other files you might have referenced in your
html file.
Your page should include:
- Logo and name of the online shop
- At least one picture of the product
- Some text to describe the product
- A list pointing out different characteristics of the product
- Buttons to choose between different variations of the product in terms of color,
size, model, etc (based on the product you choose to present)
- A button to add the product to the cart
- A button to view the cart
- A search field for searching for new items
- A navigation bar to navigate to other pages (or at least the main page of the
shop)
- A section promoting similar/suggested products
- the buttons do not do anything, they are just there to show(and in the future when
the functionalities are implemented, select) the different models a product might
have
Pay attention that:
Your page should be fully static, meaning that the buttons are not yet
implemented, but the design should be complete.
In creating your website, you might need to use more html elements and css
properties than explained in the lectures. You can use your textbook or
w3schools to learn more about them.
You should lay out your content using
tags and position them as you see
fit. The number of columns and exact layout is up to you.
Proper implementation of the tags and contents is very important. Think about
exceptional cases when the pictures cannot be loaded, etc
Bonus points
Get up to 5% bonus using Git in your project
Get up to 5% bonus making your web page responsive
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
