The Basics of Web-Design Layout

Learn How To Describe Your Design With HTML & CSS

Instructed by Rich Armstrong

  • Includes all Standard Features
  • Get Unlimited access to all the courses
  • No Contract. Cancel Anytime
Starting in just $19 / mo see all plans
Subscribe Now
$ 299
Annual Subscription
  • One year Unlimited Access
  • Access to all courses
    You will be able to access all the courses from any category on the platform.
  • Learning paths access
  • Access Assignments & Projects
  • Access on Mobile, PC and Tablet
  • Pause & Resume Courses Anytime
  • Offline viewing
  • Instructor Support
  • Course Completion Certificates
  • Cancel Anytime
Subscribe Now
  • Learn to make use of a bunch of layout techniques to make awesome websites. Below are some of the topics we cover.
  • HTML & CSS terminology
  • The 5 different types of positioning
  • Depth management
  • Common display types
  • Padding
  • Margins
  • Borders
  • TranslateX and Y

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.

  • You should know a little bit of HTML & CSS.
  • Get yourself a code editor like Sublime Text or use an online one like CodePen
  • Beginner web-developers
  • Web-designers
  • Backend developers
  • Anyone who want to know more about HTML and CSS
View More...

Section 1 : Introduction

  • Lecture 1 :
  • Lecture 2 :
  • Things You May Want & Need

Section 2 : HTML & CSS Theory

  • Lecture 1 :
  • HTML Box Theory
  • Lecture 2 :
  • HTML & CSS Terminology
  • Lecture 3 :
  • Box-model & Box-sizing

Section 3 : Web-Design Layout Topics

  • Lecture 1 :
  • Margin, Padding & Border
  • Lecture 2 :
  • Display Types, Default Styling & Overriding
  • Lecture 3 :
  • Floating
  • Lecture 4 :
  • Transform & Translate
  • Lecture 5 :
  • Position Terminology
  • Lecture 6 :
  • Static Positioning
  • Lecture 7 :
  • Relative Positioning
  • Lecture 8 :
  • Absolute Positioning
  • Lecture 9 :
  • Depth & Z-Index
  • Lecture 10 :
  • Fixed Positioning
  • Lecture 11 :
  • The Calc Function
  • Lecture 12 :
  • Sticky Positioning

Section 4 : The Project

  • Lecture 1 :
  • Putting It All Together
  • Lecture 2 :
  • The Setup
  • Lecture 3 :
  • The HTML
  • Lecture 4 :
  • The Hero Banner CSS
  • Lecture 5 :
  • Sticky Nav & The Read More Section
  • Lecture 6 :
  • The Story Section
  • Lecture 7 :
  • The Popup
  • Lecture 8 :
  • Share It With Others
  • Lecture 9 :
  • Your Brief

Section 5 : Conclusion

  • Lecture 1 :
  • Conclusion

Rich Armstrong,

Rich's title is Product Designer but he's more of a jack-of-all-trades / generalist / unicorn. He designs, animates and codes. He's studied multimedia design and graphic design, and is a self-taught programmer. He's freelanced, worked for agencies and startups, and now runs Studio Armstrong, an Amsterdam-based creation company, with his wife. He also doodles all the time, has super ginger-powers and can touch his nose with his tongue! He spends most of his working day researching and experimenting, much like his hero, Lucius Fox, does. Rich likes to think he's a minimalist, but he's fooling himself – he's as messy and unorganised as the any other creative genius. Rich has been teaching online classes since 2015 – and he likes it a lot :) He's since created the weirdly named Tap Tap Kaboom brand that showcases his experiments, designs and classes.
View More...
develop-your-own-chrome-extension-firefox-plugin

Develop your own Chrome Extension &...

By : Harshit Srivastava

Lecture 15

the-extreme-web-development-course

The Extreme Web Development Course

By : Paul Carlo Tordecilla

Lecture 124

superb-advance-javascript-become-javascript-professional

Superb Advance Javascript - Become ...

By : Paul Carlo Tordecilla

Lecture 28

application-development-with-ibm-watson

Application development with IBM Wa...

By : Harshit Srivastava

Lecture 14

learn-react-16-and-redux-by-building-real-world-application

Learn React 16 and Redux by buildin...

By : Haider Malik

Lecture 74

jquery-for-beginner-to-advanced-12-projects-included

jQuery for Beginner to Advanced: 12...

By : Sandip Bhattacharya

Lecture 15

Buy

$15

Enjoy Limitless Learning. Get Access to Unlimited Courses with Premium Subscrption Subscribe Now

Sign up and start learning
By signing up. you agree to our Terms of Use and Privacy Policy
Forget Password