Loading lesson path
CSS
Flexbox, Grid, and responsive design grouped into one practical layout track.
CSS Flexbox (Flexible Box Layout) CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flex…
CSS Grid Layout Module The Grid Layout Module offers a grid-based layout system, with rows and columns. The Grid Layout Module allows developers to easily create complex web layouts. The Grid Layout…
Introduction to Responsive Web Design Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and…
Challenge: Flexbox Intro Test your understanding of CSS Flexbox basics by completing a small coding challenge.
Challenge: CSS Grid Intro Test your understanding of CSS Grid basics by completing a small coding challenge.
CSS RWD Intro Code Challenge
CSS Flex Container Properties The flex container element can have the following properties: display - Must be set to flex or inline-flex flex-direction - Sets the display-direction of flex items flex…
CSS Grid Container A grid container contains one or more grid items arranged in columns and rows. All direct child elements of a grid container automatically become grid items. An element becomes a g…
Responsive Web Design - The Viewport
CSS justify-content Property The justify-content property aligns the flex items along the main-axis (horizontally). This property can have one of the following values: center flex-start (default) fle…
CSS Grid Tracks (Rows and Colums) Inside the grid container you define the number and size of the grid columns and rows. For this, we will use the following properties: grid-template-columns - Define…
Challenge: Viewport Test your understanding of the viewport meta tag by completing a small coding challenge.
CSS align-items Property The align-items property aligns the flex items vertically (on the cross-axis). This property can have one of the following values: normal (default) stretch center flex-start…
CSS Grid Gaps The space between the rows and columns in a grid container are called gaps (or gutters ). The gaps are created between the grid rows and columns, not on the outer edges of the grid cont…
Responsive Web Design - Building a Grid View
Challenge: Flex Container Test your understanding of CSS Flex Container properties by completing a small coding challenge.
CSS Grid Container - Align Grid Content Inside the grid container you can define the alignment of the grid content with the following properties: justify-content - Aligns the grid content when it doe…
Challenge: RWD Grid View Test your understanding of RWD Grid View by completing a small coding challenge.
CSS Flex Items The direct child elements of a flex container automatically becomes flex items. Flex items can have the following properties: order - Specifies the display order of the flex items insi…
Challenge: Grid Container Test your understanding of CSS by completing a small coding challenge.
Responsive Web Design - Media Queries
Challenge: Flex Items Test your understanding of CSS Flex Items by completing a small coding challenge.
CSS Grid Items A grid container contains one or more grid items. All direct child elements of a grid container automatically become grid items. Below is a grid container with five grid items: CSS Siz…
Challenge: CSS Media Queries Test your understanding of CSS Media Queries by completing a small coding challenge.
Responsive Flexbox You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create…
CSS Naming Grid Items
Resize the browser window to see how the image scales to fit the page. Using The width Property If the width property is set to a percentage and the height property is set to "auto", the image will b…
Challenge: Responsive Flexbox Test your understanding of Responsive Flexbox by completing a small coding challenge.
CSS Grid Items - Alignment
Challenge: Responsive Images Test your understanding of Responsive Images by completing a small coding challenge.
Set the Visual Order of the Grid Items The CSS order property can be used to define the visual order of the grid items. The first grid item in the HTML source code does not have to appear as the firs…
Using The width Property If the width property is set to 100%, the video player will be responsive and scale up and down: Example video { width: 100%; height: auto; } Notice that in the example above…
Challenge: Grid Items Test your understanding of CSS by completing a small coding challenge.
Challenge: Responsive Videos Test your understanding of Responsive Videos by completing a small coding challenge.
CSS 12-Column Grid Layout A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available ho…
There are many free CSS Frameworks that offer Responsive Design. Using W3.CSS A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS W3.CSS makes it easy to develo…
Challenge: 12-Column Grid Test your understanding of CSS 12-Column Grid layouts by completing a small coding challenge.
Responsive Web Design - Templates
The CSS @supports Rule The @supports rule lets you check if the browser supports a specific CSS property or value, and to define fallback styles if the feature is not supported. This is useful for ap…
Challenge: CSS @supports Test your understanding of CSS @supports by completing a small coding challenge.