Exercise Thursday

Goal: Practice using the the tags we learned in the previous lesson:

  • <div> tags — places to add classes to large parts of our page and separate out content
  • <span> tags — places to add classes to content within block elements

And practice using the CSS sizing units we learned in the previous lesson:

  • px
  • %
  • vh and vw

Warm Up


  • What is the difference between a div and a span?
  • When would you use a span but not a div?
  • When would you use a div but not a span?
  • Between px and %, which sizing unit will cause an element to change size in relation to its parent element?

Code


Meet the goal by completing one of these projects. Make sure to make commits regularly and push to the project's remote repository on GitHub.

Boring Lecture

  • Rewrite the boring-lecture page and remove the intro class from the elements themselves, and create a <div> with the intro class to hold the elements.
  • Use two sizing units of your choice to size two or more HTML elements.

Blogging Site

  • Create a new blogging website about whatever you want and use <div>s to group together and style each blog post.
  • On the blogging website, create an "about me" section that's styled differently from the rest of the page.
  • Use two sizing units of your choice to size two or more HTML elements.

Resume Site

  • Start a new webpage to house your resume. Use <div>s and <span>s to style sections for your education, work experience, skills, etc.
  • Use two sizing units of your choice to size two or more HTML elements.