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

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!