Build Modern Layouts with CSS Grid

• Understanding the CSS Grid Layout and its two-dimensional grid system.
• Placing elements on the grid within columns and rows.
• Working with the fr unit to define grid sizing.
• Differentiating between Flexbox and CSS Grid layouts.
• Exploring the implicit and explicit grid.

This course introduces the CSS Grid Layout, a powerful tool for creating modern and responsive layouts. You will learn to define columns, rows, and sizes, and build a fully responsive landing page. The course is structured with practical examples and hands-on exercises to solidify your understanding of CSS Grid.

• Beginners and intermediate developers interested in mastering CSS Grid layouts.
• Web developers looking to enhance their skills in creating responsive designs.

• Basic knowledge of HTML and CSS.
• Familiarity with web design principles.

• Define Root Colors Variables and Set up Box-Sizing for a CSS Layout.
• Introduction to CSS Grid Rows and Columns with display: grid.
• Specify a Gutter in CSS Grid with gap (grid-gap).
• Utilize Firefox Developer Tools to Visualize CSS Grid Styles.
• Determine CSS Grid Sizing with the Fraction Unit (fr).
• Define a Page Layout with CSS Grid Using grid-template-areas.
• Align Content by Adding Styling to a CSS Grid Layout.
• Build a Navigation Bar with CSS Grid Using grid-auto-flow.
• Create a Nested CSS Grid Layout.
• Use the repeat() CSS Function to Efficiently Define CSS Grid Rows and Columns.
• Define Size Range with the minmax() CSS Function to Create Responsive Grid Items.
• Create a Responsive Layout Using Media Queries with CSS Grid.
• Use grid-auto-flow and Media Queries to Flip Navigation from Horizontal to Vertical.