Save for later

Mastering CSS Grid 2022 - With 3 cool projects

CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies.

In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:-

  • All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.

  • Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level.

  • The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.

  • Grid areas and how it helps simplify responsive web design

  • The concept of implicit and explicit grids and what the differences are

  • A deep look into the Autoplacement algorithm

  • Animation at a high level and what works currently with CSS Grid

  • How to convert some layouts in Flexbox to use CSS Grid instead

  • When to use Flexbox over CSS Grid

  • Once we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:-

  • Column based layout

  • Basic Sidebar layout

  • Vertical Text alignment

  • Modal alignment

  • Stick footer layout

  • Formatting form fields

  • And hopefully in future much more. We then look at some advance layout topics such as:-

  • The Holygrail layout

  • The Media Objects layout

  • A Viewport Friendly Image Gallery

  • A Responsive Image Gallery

  • An Animated Sidebar

  • A Monthly Calendar layout

  • A Newspaper Cover layout

  • A Responsive Twitter Clone Layout

  • A Responsive Movie Gallery

  • Then if you haven't had enough, we have 3 real life application examples that will give you the experience you need. They are:-

  • A Chat UI interface

  • An Uber Eats Clone Responsive Application

  • A YouTube Clone Responsive Application

  • Get Details and Enroll Now

    OpenCourser is an affiliate partner of Udemy and may earn a commission when you buy through our links.

    Get a Reminder

    Send to:
    Rating Not enough ratings
    Length 17.5 total hours
    Starts On Demand (Start anytime)
    Cost $13
    From Udemy
    Instructor Daryl Duckmanton
    Download Videos Only via the Udemy mobile app
    Language English
    Tags Web Development Development

    Get a Reminder

    Send to:

    Similar Courses

    Careers

    An overview of related careers and their average salaries in the US. Bars indicate income percentile.

    Angular JS, CSS, Javascript $53k

    CSS, Programming/Mark up languages , HTML $55k

    Junior CSS $76k

    ASIC Power Grid Integrity Engineer $88k

    UI / CSS Developer $94k

    Smart Grid Technical Assessment Analyst $94k

    Senior Smart Grid Analyst $98k

    Grid Integration Engineer $109k

    RF Field Engineer, Smart Grid Services & Operations $137k

    Program Manager, Grid Operations and Planning $161k

    Senior Program Manager, Grid Operations and Planning Manager $169k

    Senior Manager Smart Grid BASE Product $175k

    Write a review

    Your opinion matters. Tell us what you think.

    Rating Not enough ratings
    Length 17.5 total hours
    Starts On Demand (Start anytime)
    Cost $13
    From Udemy
    Instructor Daryl Duckmanton
    Download Videos Only via the Udemy mobile app
    Language English
    Tags Web Development Development

    Similar Courses

    Sorted by relevance

    Like this course?

    Here's what to do next:

    • Save this course for later
    • Get more details from the course provider
    • Enroll in this course
    Enroll Now