CSS Layout Fundamentals
A course that will teach the fundamentals of layout on the web today. After working through this material you will not only be able to use the available tools we have to create layouts, you will also understand the strengths and weaknesses of each. You’ll be able to make informed choices and also understand the methods being used by a framework, to be able to understand the choices the framework developer has made.
About this course
A course that will give you solid CSS Layout skills for today, and for the browsers from the past you still have to support.
-
Introduction
This course has very simple requirements. You’ll need a text editor and a web browser.
-
The Box Model
The CSS Box Model explained. How to use the alternate box model. Learn how margins and padding work, and why margins collapse.
-
Positioning
How to use absolute, relative and fixed positioning.
-
Stacking Content
Introduction to stacking content in CSS and the
z-indexproperty. -
Floats
What are floats? How to float elements within content, create a navigation bar and use floats for layout.
-
The Display Property
Using display block, inline and inline-block for UI elements and layout. The strengths and pitfalls of
display:table. -
Getting Started with Flexbox
A beginners guide to flexbox, you will learn how to build UI elements such as navigation and cards.
-
Responsive Design
Learn about Media Queries and fluid grids. We’ll create a responsive layout and also learn how best to use images in our responsive designs.
-
Browser Support
Here we will cover cross-browser and device testing, along with techniques for using newer CSS without locking out peope with older browsers. Learn how to make good decisions as to when to embrace new CSS techniques.
-
Debugging CSS Layout Issues
Common problems explained. Learn techniques for debugging issues in-browser and find out how to isolate problems in order to ask for help.