Utah Teachers Project Two

Today we are going to create a basic web page that has a common structure seen in a lot of websites. There isn't any functionality just yet, but we are build off what we learn in a future lesson

Open your text editor and create a new file called index.html
Create a new file called style.css
Set up the basic scaffolding for an HTML document
Inside of the <head> tag, create a <link> tag that will reference the style.css file
Create a new nav element with a class of navbar
Inside of nav, create a span element with a class of my-name
Create a unordered list that is a sibling to the previously created span. Give it a class called nav-links
Create three items inside of the unordered list: Home, About, Contact
Create a new section with the section element. Give it a class of hero
Create a div inside of hero with a class of quote. Enter an inspirational quote between the div
Outside of the hero section, create a new section with a class of qualities
Create three divs inside, each with a class called quality and then another class called one, two and three that are on the respective div.
Outside of of the qualities section, create a new section with the footer element. Give it a class of footer
Inside of the footer, create a div with a class of profile-img.
Inside of profile-img, create an image element. The img element should have a src and a n alt prop. src tells where to find the image and alt is for screen readers to let users know what the image is.
Outside of profile-img, create a new div with a class of about-me.
Inside of about-me, create a p tag with the text "Thanks for visiting my site! Feel free to reach me at [email protected]"
Create an a tag that wraps the email so you can click it and send an email.

Recommend Projects