CSS Grids and Flexbox for Responsive Web Design

Frontend Masters CSS Grids and Flexbox for Responsive Web Design 10/2020

[FrontendMasters] CSS Grids and Flexbox for Responsive Web Design

[FrontendMasters] CSS Grids and Flexbox for Responsive Web Design

CSS Grids and Flexbox for Responsive Web Design Starting with a review of floats for context, but quickly moving into Flexbox and CSS grids, this important course is for net builders that need to construct responsive, beautiful web applications faster using much less code and best practices. Master CSS Grid and Flexbox, the newest tools and methods to layout lovely, responsive web applications with much less code.

Introduction and Setup

  • CSS Grids and Flexbox for Responsive Web Design Introduction After introducing herself, Jen offers an outline of the course.
  • Assets The GitHub repository for this course is explored and described by Jen.
  • Defining Responsive Design Jen defines responsive design's three principal traits: grid-based structure, photos that resize, and media queries.


  • CSS Grids and Flexbox for Responsive Web Design Overview of Floats Jen provides a quick overview of floats, together with its historical past, its traits, professionals and cons, and a few examples are reviewed.
  • Float Train Setup The train information are outlined and described by Jen as she units up this coding problem. She additionally covers a border declaration field to assist with resizing components.
  • Float Train Resolution Jen provides us a walkthrough of the answer, and the way it works at totally different display screen sizes.


  • CSS Grids and Flexbox for Responsive Web Design Introducing Flexbox Jen introduces Flexbox, the place it got here from, what its necessities are, flex row vs. flex column and what its professionals and cons are.
  • Historical past and Browser Assist Three earlier variations of Flexbox are explored, and Jen exhibits examples of prefixing for browser assist, earlier than getting right into a dialogue of present Flexbox assist.
  • Code Demo: Flexbox Setup Jen units up a demo the place that explores how Flexbox can change the web page layouts by going by means of the totally different CSS properties. As a part of the setup ’li’ HTML content material is positioned inside a ‘ul’.
  • Code Demo: Flexbox Properties Explored The Flexbox properties Jen demonstrates right here have an effect on the ‘ul’, and embody ‘flex', 'flex-direction', 'flex-wrap’, and ‘flex-flow’ for shorthand.
  • Code Demo: Flexbox Justification Jen explores Flexbox properties that justify content material throughout the container ‘ul’ utilizing ‘justify-content’.
  • CSS Grids and Flexbox for Responsive Web Design Code Demo: Flexbox Alignment Utilizing the Flexbox properties below ‘align-items’, Jen exhibits the totally different alignment choices accessible throughout the container ‘ul’ in our instance.
  • Code Demo: Particular person flex-items Switching to Flexbox properties that have an effect on the person flex-items, or the ‘li’ HTML components in our instance, Jen opinions ’flex-grow’, flex-shrink’, ‘flex-basis’.
  • CSS Grids and Flexbox for Responsive Web Design Code Demo: Questions & Solutions Jen solutions query from the viewers relating to the Flexbox code demo thus far.
  • Flexbox Video games and Train Jen introduces two nice sources for taking part in with and training Flexbox properties.

Flexbox Grid

  • CSS Grids and Flexbox for Responsive Web Design Sensible Use of Flexbox in a Grid System To assessment sensible functions of Flexbox in a grid system, Jen opinions ‘flexboxgrid.com’, a framework that permits you to discover numerous layouts to assessment the naked HTML and CSS to see whats attainable with the properties.
  • CSS Grids and Flexbox for Responsive Web Design Flexbox Evaluate As a assessment, and beginning to apply Flexbox properties to the floating code train coated earlier, Jen covers some code we are able to use on the flex containers and flex objects within the upcoming code demo.
  • Code Demo: Train Resolution for Desktop Transforming the code examples of the pie web site structure achieved earlier with floats, Jen exhibits learn how to arrange containers and objects in HTML and take management of them in CSS for a desktop pleasant grid system structure.
  • CSS Grids and Flexbox for Responsive Web Design Code Demo: Train Resolution for Responsive Jen works by means of learn how to structure the code instance for Pill and Cell codecs.

Flexbox Exercises

  • CSS Grids and Flexbox for Responsive Web Design Flexbox Train 1 Setup: Content material Manipulation On this coding train, Jen provides one other row into the HTML code instance and creates new necessities for this content material to be solved with Flexbox CSS properties.
  • Flexbox Train 1 Resolution Jen and the viewers assessment an answer for this coding problem.
  • Re-ordering Content material and Structure Utilizing 'flex-direction: row-reverse', and a few CSS properties Jen rearranges the instance content material and structure in ways in which have been extraordinarily tough with floats.
  • CSS Grids and Flexbox for Responsive Web Design Flexbox Questions and Solutions Jen leads a dialogue round totally different approaches to the earlier train and content material, and present finest practices.
  • Flexbox Train 2 Setup: Full Webpage Structure Jen’s problem on this train is to take a full webpage laid out with floats and restyle it with the grid system utilizing Flexbox.
  • Flexbox Train 2 Resolution Jen walks by means of learn how to resolve this train and solutions questions from the viewers.
  • CSS Grids and Flexbox for Responsive Web Design Flexbox Train three Setup: Picture Gallery This train problem is to search out two options to Jen's proposed picture gallery downside. Primary is permitting photos on the web page in any quantity per row with any alignment you select, and quantity two is permitting photos to show in a set quantity per row for a given display screen dimension.
  • Flexbox Train three Resolution Utilizing Flexbox, Jen creates two forms of photos galleries to resolve this train.

Responsive Images

  • CSS Grids and Flexbox for Responsive Web Design Introducing Responsive Photographs Introducing responsive photos, Jen describes the totally different challenges across the desktop, cellular, and pill in right now's trendy net. She then covers learn how to use the brand new <image> tag launched in HTML 5.1 to resolve these issues, together with learn how to deal with backward compatibility.
  • Code Demo: Responsive Photographs Software Utilizing the HTML components <image> and <supply>, together with media queries, Jen demonstrates learn how to loading totally different photos based mostly on dimensions.
  • Picturefill for Older Browser Compatibility Since older browsers don't work with the <image> tag, Jen demonstrates a instrument referred to as "Picturefill" which can be utilized as a shiv.
  • CSS Grids and Flexbox for Responsive Web Design Picture Downloads and Efficiency Jen explores what photos your browser downloads based mostly on the code you write.
  • Code Demo: Background Photographs Utilizing media queries in CSS, Jen applies a background picture to the instance web site, together with answering some observe up questions from the viewers.
  • CSS Grids and Flexbox for Responsive Web Design Responsive Photographs Train Jen units up an train to check your data of responsive photos, the <image> tag, Picturefill and extra.
  • Responsive Photographs Train Resolution Jen demonstrates her code options to the challenges of this train.

CSS Grid

  • CSS Grids and Flexbox for Responsive Web Design Introducing CSS Grid Jen covers each the place CSS Grid comes from, and why it's best to use it.
  • CSS Grid: Browser Compatibility Whereas browser assist is sort of good right now, Jen touches whats at the moment supported on the time of recording, plus polyfills and fallbacks for older browsers.
  • Exploring CSS Grid Examples With each PowerPoint and code demonstrations, Jen walks by means of how grids work with numerous examples and layouts. She additionally briefly covers reordering and syntax.
  • CSS Grids and Flexbox for Responsive Web Design Code Demo: CSS Grid This code demo exhibits learn how to create a Mondrian portray in CSS and HTML utilizing CSS Grid. Jen begins this demo as the primary a part of an train, and he or she makes use of "show: grid", "grid-row" and "grid-column" to begin placement of the HTML components
  • Mondrian Portray Train Setup The category asks a clarifying query on how grids are specified by rows, and Jen units up a brief train the place the second half of the HTML components are laid out from the demo earlier.
  • Mondrian Portray Train Resolution Utilizing ‘grid-row’ and g’rid-column’ for common placement and sizing, Jen lays out the answer for this train.
  • CSS Grids and Flexbox for Responsive Web Design Further CSS Grid Properties Three new properties are launched by Jen to achieve management over the sizes of the grid columns and rows: grid-template rows, grid-template-columns, and grid-gap. Additionally, Jen exhibits an extension for Google Chrome and Firefox for builders to measure components in an online web page. Lastly, Jen additionally solutions some clarifying questions round implicit vs. express grids.
  • CSS Grids and Flexbox for Responsive Web Design Mondrian Portray 2 Train Setup A unique, extra complicated Madrian portray is the idea of the train problem right here, and Jen walks by means of the start line HTML and CSS to get you began.
  • Mondrian Portray 2 Train Resolution Jen opinions her method to this answer and talks by means of the potential CSS pitfalls of this train. She additionally goes into some further structure workout routines that modify the structure for optimum viewing at totally different resolutions with media queries.
  • CSS Grid: Sensible Software Utilizing the instance pie web site coded earlier with floats, after which Flexbox, Jen now needs to fashion this web page utilizing CSS Grids. She introduces the HTML and CSS information beginning factors and makes some adjustments to the primary part of content material for instance.
  • CSS Grids and Flexbox for Responsive Web Design Sensible Software Train Setup To complete work on this instance net web page, Jen's train problem is to finish the laying out the content material utilizing CSS Grid guidelines and lessons.
  • Sensible Software Train Resolution Jen discusses her method to the answer and discusses the potential for utilizing the ‘grid-row’ vs. the ‘order’ properties.
  • Properties Evaluate Masking further properties with a reference doc, Jen opinions 'grid-template', 'grid-column', 'grid-row', together with other ways to indicate widths corresponding to px, fr, % and the way span and repeat work.
  • Grid-area Introduction Jen introduces a way of utilizing to make use of actual names to outline areas of a grid merchandise's location through the use of ‘grid-area’ and ‘grid-template-areas’. Jen codes examples of learn how to use grid space to structure cellular, pill and desktop resolutions.
  • CSS Grids and Flexbox for Responsive Web Design Grid-area Train Setup After explaining learn how to create web page layouts with 'grid-template-area', Jen's problem is to create the desktop structure with this new instrument.
  • Grid-area Train Resolution To resolve this fast train, Jen makes use of lessons across the CSS media question and 'grid-template-areas' properties. She additionally leads a dialogue round how layouts work with totally different ‘grid-template-columns’ choices and ‘fr’ and "..." declarations.
  • Nesting CSS Grids By coding an instance of a nested CSS grid inside a CSS grid at totally different resolutions, Jen discusses the professionals and cons of this method versus Flexbox withing a CSS Grid.
  • Nesting and Offsets Train Setup Jen units up an train that mixes the nesting and offset ideas and solutions a query about how the syntax round repeat and ‘fr’ works within the ‘grid-template-columns’ declaration.
  • CSS Grids and Flexbox for Responsive Web Design Nesting and Offsets Train Resolution Jen’s exhibits the answer to this train which makes use of ‘grid-template-columns’, ‘grid-template-areas’, and the ‘fr’ and ‘…’ syntax. Then she solutions a query on utilizing an method that switches from ‘grid’ show to ‘block’ show for cellular vs. desktop resolutions.
  • Flexbox and CSS Grid Train 1 Setup Returning to the instance pie webpage, Jen introduces this train which focuses on translating the Flexbox method used earlier right into a CSS Grid structure. She additionally recommends some nice tooling in Firefox and the Firefox Developer construct to grasp higher how Flexbox layouts are rendered and interpreted by the browser.
  • Flexbox and CSS Grid Train 1 Resolution Whereas a full instance of the finished answer might be reviewed within the "/finish" folder for this train, Jen does a high-level recap which incorporates including the wrapping components to the HTML. Then she makes use of CSS Grid syntax to rebuild the structure.
  • Grid Fallbacks As a place to begin for cross-browser compatibility, Jen highlights Rachel Andrew’s weblog put up which emphasizes on swish fallbacks for older browsers with out the necessity to fully fork your code.
  • CSS Grids and Flexbox for Responsive Web Design Flexbox and CSS Grid Train 2 Setup On this train, Jen’s problem is to make use of Flexbox in an excellent state of affairs - as a picture gallery. Utilizing the identical picture gallery constructed earlier in Flexbox, this train focuses on integrating that right into a grid structure throughout the instance pie web site.
  • Flexbox and CSS Grid Train 2 Resolution This ensuing answer is notable as a result of, as Jen argues, that is the structure of the longer term with grid laying out the construction of the webpage, and flex laying out the ui components inside. The answer consists of including some HTML to achieve management over components, after which defining their structure by including Flexbox and grid-based kinds.

Wrapping up

  • CSS Grids and Flexbox for Responsive Web Design Optional Practice Exercise: Placing all of it Together Jen units up a problem that may be accomplished later as a observe that makes use of all of the methods coated on this course. The problem is to complete the construct of the instance pie web site utilizing finest judgment incorporating every part taught on this course from scratch. To assist in giving path, Jen goes by means of highlights of her answer, and briefly touches on HTML5 kinds, accessibility, and the <label> and <datalist> tags.
  • Conclusion Jen opens the dialogue up for questions, talks about present and future browser assist and provides her conclusion and get in touch with info.
First release
Last update
0.00 star(s) 0 ratings

More resources from PIRATE

AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock