Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

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

      1:56
    • HTML Box Theory

      2:30
    • HTML & CSS Terminology

      1:59
    • Box-model & Box-sizing

      3:26
    • Margin, Padding & Border

      9:06
    • Display Types, Default Styling & Overriding

      4:38
    • Floating

      13:28
    • Transform & Translate

      2:49
    • Position Terminology

      1:09
    • Static Positioning

      1:24
    • Relative Positioning

      2:33
    • Absolute Positioning

      10:12
    • Depth & Z-Index

      2:47
    • Fixed Positioning

      5:57
    • The Calc Function

      4:10
    • Sticky Positioning

      4:36
    • Putting It All Together

      0:17
    • Project: The Setup

      6:17
    • Project: The HTML

      21:27
    • Project: The Hero Banner CSS

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

      19:47
    • Project: The Story Section

      20:08
    • Project: The Popup

      23:30
    • Share It With Others

      2:57
    • The End

      0:32
51 students are watching this class

About This Class

a0cd65ed

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:

16 of 16 students recommendSee All

One of the best tutorial videos on how to design in a web browser. It is the most efficient and the fastest approach to prototype a website, and the instructor did a fabulous job explaining the process in the most straight-forward way possible. Kudos to the instructor!
Thanks!
Very instructive and easy to follow class! Rich has also included lots of examples to help us understand how to implement the theory he teaches. Definitely worth the time!
Chantelle Armstrong

Art Teacher

659

Students

3

Projects

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