The Basics of Web-Design Layout

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

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!

Menu