HOME > Development > The Basics of Web-Design Layout

The Basics of Web-Design Layout

  • Development
  • May 15, 2025
SynopsisThe Basics of Web-Design Layout, available at $19.99, has an...
The Basics of Web-Design Layout  No.1

The Basics of Web-Design Layout, available at $19.99, has an average rating of 4.19, with 28 lectures, based on 8 reviews, and has 67 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner web-developers or Web-designers or Backend developers or Anyone who want to know more about HTML and CSS It is particularly useful for Beginner web-developers or Web-designers or Backend developers or Anyone who want to know more about HTML and CSS.

Enroll now: The Basics of Web-Design Layout

Summary

Title: The Basics of Web-Design Layout

Price: $19.99

Average Rating: 4.19

Number of Lectures: 28

Number of Published Lectures: 28

Number of Curriculum Items: 28

Number of Published Curriculum Objects: 28

Original Price: 34.99

Quality Status: approved

Status: Live

What You Will Learn

  • 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
  • Who Should Attend

  • Beginner web-developers
  • Web-designers
  • Backend developers
  • Anyone who want to know more about HTML and CSS
  • Target Audiences

  • Beginner web-developers
  • Web-designers
  • Backend developers
  • Anyone who want to know more about HTML and 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.
  • Course Curriculum

    Chapter 1: Introduction

    Lecture 1: Introduction

    Lecture 2: Things You May Want & Need

    Chapter 2: HTML & CSS Theory

    Lecture 1: HTML Box Theory

    Lecture 2: HTML & CSS Terminology

    Lecture 3: Box-model & Box-sizing

    Chapter 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

    Chapter 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

    Lecture 10: A Few Changes

    Chapter 5: Conclusion

    Lecture 1: The End

    Instructors

  • The Basics of Web-Design Layout  No.2
    Rich Armstrong
    Multi-hyphenate Artist
  • Rating Distribution

  • 1 stars: 1 votes
  • 2 stars: 0 votes
  • 3 stars: 1 votes
  • 4 stars: 1 votes
  • 5 stars: 5 votes
  • Frequently Asked Questions

    How long do I have access to the course materials?

    You can view and review the lecture materials indefinitely, like an on-demand channel.

    Can I take my courses with me wherever I go?

    Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!