Who wants cookies?! Let's create the frontend of our website to sell our hottest cookie products!
Use HTML Elements and CSS Styling to create the home page for our cookie site.
To complete this project, students should have the following:
- Basic understanding of HTML structures and attributes.
- Basic understanding of CSS (Selectors, properties).
HTML | Description |
---|---|
HTML | H yper T ext M arkup L anguage used to create the structure of web pages. |
element | An element is an individual part, or a building block, of a web page. |
attribute | A modifier of an element. |
div | A container element. |
nav | A navigation element. |
ul | An unordered list element. |
li | A list item element. |
img | An image element. |
a | A link element. |
href | An attribute used to specify the link destination. |
CSS | Description |
---|---|
CSS | C ascading S tyle S heets that describes how HTML elements are displayed. |
margin | The outer space of an element. |
padding | The inner space of an element. |
text-align | The alignment of text in an element. |
To complete Part I, fulfill the following requirements:
- Set up your project file structure through the command line.
- Create the following:
- HTML file
- CSS file
- Link all of your files correctly.
To complete Part II, fulfill the following requirements:
- Create a
div
with aclass
of container. - Inside of this div, create the following 4 elements:
-
nav
with anid
of "nav-bar".
- Inside of this nav, create the following:
ul
with 3li
- Each
li
has ana
element - Each
a
element has the text Home, Cookies, and About Us. Each href attribute will be "#top", #middle" and "#bottom" respectively: Ex.<li><a href="#top">Home</a></li>
-
div
with anid
of "top".
- Inside of this div, create an
img
of your store's cookies. Find one online!
-
div
with anid
of "middle".
- Inside of this div, create 4 more
div
elements like below to showcase your 4 hottest cookies!-
- Create a div with an
id
of "cookie1".
- Inside of this
div
, create anh1
element to give the cookie a name,img
element to give the cookie a picture, andh3
element to give the cookie a price like the example below.
- Create a div with an
-
- Create a div with an
id
of "cookie2".
- Inside of this
div
, create anh1
element to give the cookie a name,img
element to give the cookie a picture, andh3
element to give the cookie a price.
- Create a div with an
-
- Create a div with an
id
of "cookie3".
- Inside of this
div
, create anh1
element to give the cookie a name,img
element to give the cookie a picture, andh3
element to give the cookie a price.
- Create a div with an
-
- Create a div with an
id
of "cookie4".
- Inside of this
div
, create anh1
element to give the cookie a name,img
element to give the cookie a picture, andh3
element to give the cookie a price.
- Create a div with an
-
-
div
with anid
of "bottom".
-
Inside of this div, create another
div
with anid
of "about-us".- Inside of this new div, create an
h1
,h2
, andh3
element like the ones below. Change up the words to spice up your site!
Email us at [email protected]
- Inside of this new div, create an
Done with HTML already?! To complete Part III, fulfill the following requirements:
- Target the
id
of "nav-bar".
- Set the height to 100px.
- Set the width to 100%.
- Center the text! Research how to do that by looking up "center text css" in the search engine!
- Add padding so that your text isn't so close to the edge of the page. What is padding? Research it online https://www.w3schools.com/css/css_padding.asp.
- Target the
li
element.
- Take away all of the bullet points! How do we do that? https://www.w3schools.com/cssref/pr_list-style-type.asp
- Target the
id
of "top".
- Center the items! For now, you can use the same technique that you used before.
- Target the
id
of "middle".
- Center the items! For now, you can use the same technique that you used before.
- Target the
id
of "bottom".
- Center the items! For now, you can use the same technique that you used before.
Great job!
-
Make this the best cookie selling site ever and choose new fonts, images, and styles to best fit the page. Create a color scheme and figure out how to get the nav bar looking like a real nav bar! Hint: Try CSS Flexbox!
-
Create a button anywhere on your page that says "Buy Now!".