In this workshop, "CSS Grid & Flexbox, v3 - Jen Kramer", we'll delve deep into CSS layouts, focusing on two powerful tools: Flexbox and Grid. Flexbox excels in creating flexible layouts within a single dimension, making it ideal for arranging items in rows or columns with alignment and distribution control. On the other hand, CSS Grid offers a two-dimensional layout system, enabling precise positioning of elements in both rows and columns. Throughout CSS Grid & Flexbox, v3 - Jen Kramer, we'll dissect the major features and properties of both Flexbox and Grid, equipping you with a thorough understanding of their capabilities and when to utilize each approach.
Additionally, we'll explore responsive image techniques, essential for ensuring images adapt seamlessly to various screen sizes and resolutions. Media queries will also be thoroughly investigated, providing insights into how to tailor styles based on viewport dimensions and other conditions. Furthermore, we'll delve into container queries, a relatively lesser-known aspect of CSS that offers granular control over styles based on the size of a container. By the end of the workshop "CSS Grid & Flexbox, v3 - Jen Kramer", you'll not only grasp these advanced CSS concepts but also gain practical insights into applying them effectively to enhance your website's layout and responsiveness.
CSS Grid & Flexbox, v3 - Jen Kramer Table of Contents:
- Introduction
- Grid properties, structuring HTML to support Grid, different Grid syntaxes
- Grid and media queries
- Overlapping Grid cells, Grid as art, margin and Grid, minmax()
- Subgrid practice
- Flexbox syntax
- Navbars and Flexbox practice
- Responsive images
- Container query intro, container size queries
- Container styles queries
Who is this course for?
- Junior developers new to CSS, with basic knowledge of HTML and CSS (e.g., Frontend Masters Bootcamp)
- Senior developers with limited experience in CSS
Click on the links below to Download CSS Grid & Flexbox, v3 - Jen Kramer!
You are replying to :