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

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: