MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

CSS Layout Basics

Course Summary

Learn to work with common layout and positioning methods used in web design. In this course, you'll get hands-on practice with basic CSS layout techniques like display modes and floats. You'll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.

  • +

    Course Syllabus

    Getting Started with CSS Layout

    This stage covers layout tips and techniques used by web designers. You'll learn about CSS resets, layout wrappers, creating a sticky footer, and more. 9 steps
    • What to Expect 1:37
    • CSS Reset with Normalize 5:24
    • Creating a Layout Wrapper 3:27
    • Why Vertical Margins Collapse 3:42
    • Centering Page Content and Creating a Full-width Header 4:48
    • Layout Wrapper Challenge 2 objectives
    • Using a Mobile First Approach 6:32
    • Creating a Sticky Footer 5:12
    • Getting Started with CSS Layout Review 6 questions

    Controlling Layout with CSS Display Modes

    Learn to control elements in your layout using common CSS display modes like block, inline, and inline-block. Understanding the differences between these display settings will help take your CSS layouts to the next level. 7 steps

    Page Layout with the Float Property

    Learn how to use the float property for positioning and layout. You'll also learn about the default browser quirks you'll face when using floats and how to prevent them. 8 steps

    CSS Layout Project

    Now it's time to challenge your new layout skills and put them to use by completing a CSS layout project. 5 steps

    Positioning Page Content

    Now that you know the basics of CSS layout, it's time to learn another important CSS layout technique. In this stage, you'll learn to position elements anywhere on the page with relative, absolute, and fixed positioning. 7 steps

Course Fee:
USD 25

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url