Welcome to the Semantic HTML Portfolio Project! For this project, we'll be converting a portfolio created using basic HTML tags (div, span, etc) to use HTML 5's more semantic tags.
Please follow the instructions below to complete the project. Be sure to run tests to make sure your tests are passing before submitting your code.
To get started with this project, head over to the Semantic HTML Portfolio project on Code School, and begin!
To get setup locally, run the following commands:
npm install
npm start
Complete the following tasks to complete this project.
The element with a class of "header" isn't using the most semantic HTML tag it could be using. Switch it to use an element that most accurately wraps the header content for a page.
Our .nav element in the header of the page isn't using the most semantic HTML tags it could be using. ul is the correct one for this list of navigation items, but we should wrap this element with a more semantic element to indicate it is a navigation. Go ahead and add this.
Each of the main content areas of our portfolio could be switched from using div tags to something that more accurately describes them as sections of our page. Update the .tagline, .skills and .contact sections to use a more semantic HTML tag.
Our 3 main sections make up the focus of our page. Wrap these three sections (tagline, skills and contact) in an HTML element that gives it the correct focus.
Lastly, the element with a class of footer isn't the most semantic use of that area either. Luckily HTML 5 has a much better element we can use for footers. Update this element to use the semantically correct tag.