pick a feature guide!
- home
- 404 Page
- Custom Font
- Hover Effect
- Navigation Bar
- Footer
- Lists
- Special Links
- Links to Other Websites
making a 404 page
step 1: create a 404.html file
just like you have index.html and your two other pages, create a file named 404.html.step 2: add content and styling to your 404.html
you want to make it clear that this person has landed on the wrong page.do not copy the code exactly. you may use it as inspiration or reference.
preview
done!
once the site is finished, if you go to any page that isn't defined (for me, any page not named
index.html, brands.html, or history.html) it will show you the 404
page.
custom fonts!
step 1: go to fonts.google.com, scoll and click on a font you like
step 2: press "Get Font" and then press "Get embed code"
step 3: press Copy Code for the FIRST code snippet. then, paste it inside of your tags
step 4: use the font!
final code for reference:
result!
hover effects
example
based on your knowledge of css, what do you this does?
the answer: it selects an element that has the id chobani and it sets the width to 300 pixels.
the :hover makes it so that if the element is hovered, it's width will increase to 500 pixels
and it will gain a solid red border, 20 pixels wide.
it counts as being hovered when the cursor is over the element.
the element
the result
unhovered:
hovered:
(the yellow-brownish color is the background)
navigation bar
see this example!
a navigation bar is a bar meant to help the user navigate throughout the website. it is declared with the nav element type.
you can put any content inside of the nav! there MUST be content inside of your nav for it to count.
i highly reccomend styling it too!
result
footer
see this example!
a footer is declared with the footer element type. it's usually placed right before your </body> or where your body ends.
you can put any content inside of the footer! there MUST be content inside of your footer for it to count.
i highly reccomend styling it too!
result
(the yellowish-brownish color is part of the background, ignore that)
lists
a list is a collection of items. a grocery list is a collection of items you want to get from the grocery store.
step 1: choose your list
you can either do:
<ul>
</ul>
ul means unordered list. each element inside of the list will have a bullet point to the left of it.
-- or --
<ol>
</ol>
ol means ordered list. each element inside of the list will have a number to the left of it counting from 1.
step 2: make your list and add your items
the ul tags declare an unordered list. each li element declares an item in that list. you have to add content inside of each li about the item.
result
adding special links
there's two main types of special links: mail and call.
mail link example
the format is mailto:<email address>.
if i click on that link, the mail app on my computer opens and creates a draft for an email to that email address.
call link example
the format here is tel:<phone number>.
if i click on that link, my computer will try calling that phone number.
where do i add this?
add this whereever you'd like!! you can put it directly in the <body> or if you have a <footer> or <nav>, you can put it in there too! just remember that HTML renders elements in the order of the code.
links to other websites
step 1: find something to link to
i used a youtube video!
step 2: create the anchor element
a declares a link. the href= attribute describes where that link should lead to.
result
if i press on the link, it will lead me to the youtube video.