Staff Pick

The Basics of Web-Design Layout: Learn How To Describe Your Design With HTML & CSS

Rich Armstrong, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
25 Videos (3h 9m)
    • Why You Should Take This Class

    • HTML Box Theory

    • HTML & CSS Terminology

    • Box-model & Box-sizing

    • Margin, Padding & Border

    • Display Types, Default Styling & Overriding

    • Floating

    • Transform & Translate

    • Position Terminology

    • Static Positioning

    • Relative Positioning

    • Absolute Positioning

    • Depth & Z-Index

    • Fixed Positioning

    • The Calc Function

    • Sticky Positioning

    • Putting It All Together

    • Project: The Setup

    • Project: The HTML

    • Project: The Hero Banner CSS

    • Project: Sticky Nav & The Read More Section

    • Project: The Story Section

    • Project: The Popup

    • Share It With Others

    • The End

50 students are watching this class

About This Class


I’ve been making websites since 2007. And one of the largest chunks of knowledge I had to acquire was learning the basics of web-design layout. In design apps we drag and drop. We align. We group. We set widths, heights, and x & y positions. We have a layers panel. We have super-fine control. But the design in the Photoshop or Sketch is not the final website, even if the filename is web-FINAL final.psd. The final website is the one in the browser. It’s the one in front of your customer. And the skill of knowing how to describe a design to a browser using HTML & CSS is one of the best skills you can have.  HTML & CSS are a descriptive design language pair that can learned, just like you learned to use Sketch or Photoshop.

This class will show you how to describe layouts to the browser, what the defaults are, how to override them, and when to override them. You’ll understand more of how the browser works and how it differs from web design apps. It will change how you design, and you may even start designing in the browser more (like I do). Knowing your tools is super beneficial. And as a designer, or developer, knowing how layout in a browser works will allow you to work quicker and more decisively.

This class will cover the following:

  • The 5 different types of positioning
  • Depth management
  • Common display types
  • Padding
  • Margins
  • Borders
  • TranslateX and Y
  • HTML & CSS terminology
  • Lots of examples
  • A walkthrough of creating a web page, where I show that you don’t have to be really good at numbers, or know absolutely everything about developing websites. We debug. We Google for things. We try things out.

If you're new to HTML & CSS, or want to take some similar classes, here they are:

36 of 36 students recommendSee All

Awesome content and examples for beginners and I suspect for those with some experience already too!
His explanations are spot on, easy to understand and follow along and he's NOT boring!!
Sabrina Hoeke

Sabrina Hoeke a.k.a. mubbles

Amazing course. Was glued to the chair from the first lectureto the last one. Perfect for beginners or people who want to review all their knowledge about html/css.





Rich Armstrong

Product Designer

Although Rich calls himself a Product Designer he's more of a jack-of-all-trades / generalist / unicorn. He designs, animates and codes. And if you want to learn how to make stuff unicorn-style then read on! Rich studied multimedia design and graphic design, and taught himself to code. He's freelanced, worked for agencies and startups, and now runs a studio with his wife in Amsterdam. He creates compulsively, has super ginger-powers and can touch his nose with his tongue!

Rich ...

See full profile