WDI Fundamentals

WDI Fundamentals Unit 5


By the end of this Unit, you'll be able to:
  • Implement the display property to determine whether elements are are displayed as inline or block.
  • Use semantic elements to properly organize your page.
  • Start taking control of your page layout with margin, padding, and borders.
  • Prioritize content based on its placement on a webpage.

Layout Basics

At this point in our journey with HTML and CSS, we'll want to start moving things around a bit on our webpage. But before that, we have to understand that HTML elements function and behave differently within the browser. HTML elements can either be inline or block elements. What's the difference? Is a header tag an inline or a block element? When CSS is applied, how will it render in the browser? These are all questions we'll explore below!

Checkpoint:

  • Which of these are inline elements? block elements?

    • <a>
    • <p>
    • <img>
    • <strong>
    • <h3>
    • <ul>

On to the next lesson.