Skip to main content

✏️ Practice: HTML Divs and Spans, and CSS Sizing Units

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.