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

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

Staff Pick

Rich Armstrong, Product Designer

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

      1:56
    • 2. HTML Box Theory

      2:30
    • 3. HTML & CSS Terminology

      1:59
    • 4. Box-model & Box-sizing

      3:26
    • 5. Margin, Padding & Border

      9:06
    • 6. Display Types, Default Styling & Overriding

      4:38
    • 7. Floating

      13:28
    • 8. Transform & Translate

      2:49
    • 9. Position Terminology

      1:09
    • 10. Static Positioning

      1:24
    • 11. Relative Positioning

      2:33
    • 12. Absolute Positioning

      10:12
    • 13. Depth & Z-Index

      2:47
    • 14. Fixed Positioning

      5:57
    • 15. The Calc Function

      4:10
    • 16. Sticky Positioning

      4:36
    • 17. Putting It All Together

      0:17
    • 18. Project: The Setup

      6:17
    • 19. Project: The HTML

      21:27
    • 20. Project: The Hero Banner CSS

      21:13
    • 21. Project: Sticky Nav & The Read More Section

      19:47
    • 22. Project: The Story Section

      20:08
    • 23. Project: The Popup

      23:30
    • 24. Share It With Others

      2:57
    • 25. The End

      0:32
85 students are watching this class

Project Description

For your class project, make a simple webpage that makes use of what you learn in the class!
Use some or all of the following:

  • Margins
  • Padding
  • Borders
  • Display types
  • Positioning (static, relative, absolute, fixed, and sticky elements)
  • Translate X and Y
  • Box-sizing

And then, share your sites URL, as well as a screenshot of it in your Project Gallery!
Check out what other students have done, leave some feedback on their projects, start a discussion, and make some friends!


Here are a few links for apps and websites we use during the class:

  • Github – for backing up and keeping versions of your project
  • Github Desktop – the app for backing up and creating versions of your project
  • CodePen – an awesome online code editor. It also has a lot of great content and a cool community
  • Surge – for super-easy static website deployment (need to use the Terminal app though)
  • Sublime Text – my favourite code editor


Here's the project I made during the class.

Clone/fork/copy/inspect the code as you wish!

And there should be 2 attachments! 1 has my positioning terms. The other has a zip file full of character .png files – feel free to use them in your project!

Resources(2)

Student Projects

Oxana Köhler
1 comment
Alexandra Yasny
3 comments
Yaya Guz
3 comments
Andrés Patiño
3 comments
Zac Farmer
1 comment