educative.io

The Complete Advanced Guide to CSS (Ohans Emmanuel)


Introduction - What to do when you get stuck For many, learning to code is a painful process. It gets even more painful when you're stuck on a problem. How do you fix bugs? How do you not lose your mind while at it? I'll help you answer these questions in this lesson. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5716606839685120). Introduction - {New} Join the Slack Community Help me to help you :) View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5766087547289600). Introduction - What you will learn in this Course A summary of what you'll learn in this course. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5735995932672000). Getting started with CSS - Multiple Declarations and Comments A CSS comment is used to add explanatory notes to a block of code. How do you write these CSS comments? Oh, and how do you include multiple declarations in your CSS rules? We will see these in this lesson. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5732694713434112). Getting started with CSS - Getting Started: Baby Steps CSS stands for Cascading Style Sheets. What does it do? What is CSS and why use it? In this section, we will take a look at a proper introduction to CSS. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5674248798470144). Oh My Selectors! - A Quick Look at CSS Selectors: Type Selectors We will put together all we've learned so far to build something cool. Well, not particularly cool, but a good step in the direction of building some more amazing things. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5703128158568448). Oh My Selectors! - CSS Selectors - again! In this lesson, we will take a look at descendant selectors, combinator selectors and pseudo class selectors. While these may seem strange to you now, I'll show you the important bits you need to know. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5740423507083264). Oh My Selectors! - Best Practices for Selecting Elements There are so many ways to target HTML with CSS, like I have shown you. So, how do you know which selector to use? This lesson contains best practices for selecting HTML elements. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5630721452408832). Introduction - Why I Wrote this Course The real motivation behind this course lies here. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5660850647990272). CSS Fundamentals Everyone Should Know - Understanding Order and Specificity in CSS When you write your styles and something seems not to work as expected, you may want to check your style "order" and "specificity". View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5669283816275968). We all Need Units - Pixels Have questions about Pixels? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5750790484393984). We all Need Units - Percentages In this lesson, we will take a look at the percentage unit in CSS. How it relates to text sizing. How it affects width and height sizing too. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5637489247125504). Typography in CSS - Monospace, Cursive and Fantasy In this lesson we will take a look at the css font families, Monospace, Cursive and Fantasy, with examples! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5136177443110912). The Box Model - The Box Model - in Examples. Understanding the box model is pivotal to writing good CSS. Let's take a deep dive into that. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5735735550279680). The Box Model - The Margin Area Margins in CSS work pretty much like padding, except for one thing... View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5637036128075776). Getting creative with Backgrounds - Sizing Background Images The web is diverse with many different sort of designs. Which is why at the core of web design is flexibilty. In this lesson, we will cover the many ways to size background images in CSS. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5190391741546496). Project: Build a Movie Order Page - Understanding Box Sizing "box-sizing: border-box", what's that? View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5149503652888576). Making Sense of CSS Gradients - Introducing Gradients Gradients let you display smooth transitions between two or more specified colors. If you've worked with design software such as sketch or photoshop, then you should already be used to what gradients are. Let's have a look at gradients in CSS. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5698497110081536). Making Sense of CSS Gradients - Gradients are background Images! Let's discuss the widely misunderstood concept of gradients in CSS as background images. Ready? Go! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5632457692938240). Hands-on Practice with Gradients - Solution: The French National Flag with Gradients My solution to the Create the French National Flag Challenge. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5686003050217472). We all Need Units - Rems Have questions about Rems? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5691726094139392). Typography in CSS - Beginning with Type in CSS In this section, we will concern ourselves with text formatting. You'll get familiar with popular text formatting properties. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5722646637445120). The Box Model - The Padding Area The CSS padding properties are used to generate space around content. What does that mean? We take a playful look at the padding area - with illustrations. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5731972085186560). The Box Model - Practical: Applying Padding and Margins The goal of this lesson is to show you a real world example of how padding and margin work. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5192474800685056). Getting creative with Backgrounds - Getting started with Background Images What would the web be without images? A big pile of boring content. That's it! In this lesson, I will get you started with background images in CSS. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5753341694967808). Project: Build a Movie Order Page - Fixing Our UI problems In this lesson, we will apply the box sizing knowledge from the previous lesson. We will also take a look at how to override some of the default styles on buttons. As described earlier, browsers have an initial default styling on all elements. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5724681378201600). Project: Build a Movie Order Page - How Background Positions Work Have questions about How Background Positions Work? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5719570367119360). Project: Build a Sign Up Page for a Startup - Initial Styling Have questions about Initial Styling? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5746821397741568). Project: Build a Sign Up Page for a Startup - The Final Steps The last lesson for the startup sign-up project focuses on styling the form. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5658091668373504). {New} Teach Me Positioning Like I'm Five - Beginning the Project Before exploring positioning in CSS I want to get you started on the project we will build in this section. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5636904326266880). {New} Teach Me Positioning Like I'm Five - Putting Positioning to Practice Have questions about Putting Positioning to Practice? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5688160465977344). We all Need Units - Ems Have questions about Ems? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5730827476402176). We all Need Units - Exes Have questions about Exes? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5769928858664960). Typography in CSS - 5 Font Tips You Should Know Some very important points to note when working with type in CSS. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5675267779461120). The Box Model - Borders The CSS box model is essentially a box that wraps around every HTML element. Now we will take a look at another major component of the box model. Borders. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5097210278576128). Project: Build a Movie Order Page - What we will Build At the end of this section, you will have built a movie order page for The Superman Movie. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5728757302165504). Project: Build a Movie Order Page - Planning and Investigation Let's continue what we've started. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5648334039547904). Making Sense of CSS Gradients - Linear Gradients How do CSS linear gradients work? Let's take a look in this lesson. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5763711893504000). Hands-on Practice with Gradients - Problem: The French National Flag with Gradients The goal of this challenge is to create the French National flag with CSS linear gradients. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5647906690301952). Project: Build a Sign Up Page for a Startup - Flexbox Crash Course Truly centering an element is something Flexbox does with ease. A lot of ease. Let's take a quick look at what Flexbox is. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5675052494225408). {New} Teach Me Positioning Like I'm Five - Dealing with CSS Generated Content Have questions about Dealing with CSS Generated Content? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5702351037923328). {New} Teach Me Positioning Like I'm Five - The CSS Positioning Lesson You Never Had After this lesson, you'll never have problems with positioning in CSS again. Period! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5670052883857408). Colors, colors, colors! - Practical Color Tools I use these CSS tools daily! They are efficient and prove helpful everytime. After using these, you'll have no more excuses. No more, "I am not a design person", or "I just dont know how colors mix" 😀 View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5655298329018368). We all Need Units - Points and Picas What are Points and Picas in CSS? Points (and Picas) are absolute length units, more like centimeters and millimeters. They aren't widely used in CSS except for print and other traditional media. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5659118702428160). We all Need Units - vh and vw The vh and vw units are based on the user's viewport height and width. Let's take a look at these units. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5704147139559424). Typography in CSS - Serif and Sans-Serif Serif and Sans-Serif are arguably the most popular font families in the world. What do they look like? How exactly do these font families differ? Let's answer these questions in this lesson. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5760820306771968). Challenge: Hands-on Practice with Texts, Margin, Padding and Borders - The Problem Have questions about The Problem? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5713735654047744). Project: Build a Movie Order Page - Initial Styling Let's kick off with some styles! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5630110493310976). Project: Build a Movie Order Page - How to Position Backgrounds in CSS Backgrounds in CSS may be positioned with keywords or percentage values. Let's take a look at how it works. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5156620413698048). Project: Build a Movie Order Page - Final Polish How do I add two background images on a single element? Is there a background shorthand property, and how do I use it? These questions and more will be answered in this concluding section of building the movie page project. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5684961520648192). Making Sense of CSS Gradients - How Linear Gradients really Work In the previous lessons, you had a feel for how linear gradients work. In this lesson, we will go even deeper View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5760293099536384). Project: Build a Sign Up Page for a Startup - Introduction How to build a signup page for a startup. One that may be used for validating a business or product idea 💡 View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5729940565655552). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - Introduction CSS now natively supports variables. Hurray! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5675573259010048). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - Getting Started with Variables Why variables are important and how to get started with them. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5731132955951104). Hands-on Practice with Gradients - Solution: The Republic of Congo National Flag Have questions about Solution: The Republic of Congo National Flag? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5113123132407808). {New} Teach Me Positioning Like I'm Five - Introduction Every now and then a beginner says to me, 'Ohans, I don't understand how positioning in CSS works.' Well, I'll teach you that here. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5169302646816768). {New} CSS Variables Real World Applications - Creating Component Variations using CSS Variables Have questions about Creating Component Variations using CSS Variables? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5745347150217216). {New} Long Live the CSS Grid - Conclusion Have questions about Conclusion? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5697124062724096). Hands-on Practice with Gradients - Problem: The Republic of the Congo Flag with Gradients Have questions about Problem: The Republic of the Congo Flag with Gradients? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5767281011326976). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - Common Mistakes and Gotchas CSS variables are sweet to work with but there are a few gotchas. You don't want to be making these mistakes and struggling with needless bugs. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5646906499792896). {New} Long Live the CSS Grid - Time to Code — CSS Grid, Hands-on Now let’s take baby steps to building a clone of the famous music app, Catty Music 😁 View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5665370564198400). {New} Long Live the CSS Grid - Naming and Positioning Items by Grid Areas In the previous lesson, we explicitly created the grid system. Now, let’s put the grid to use. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5743573328723968). {New} Teach Me Positioning Like I'm Five - I Never Get Satisfied. Do You? Have questions about I Never Get Satisfied. Do You?? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5735267667279872). {New} Long Live the CSS Grid - Grid area placement Story time! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5650665401483264). {New} Long Live the CSS Grid - Introduction How this CSS grid section is structured. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5764017373052928). {New} Long Live the CSS Grid - Placing Content within the Grid. At the end of this section, we will have the built the Catty Music app layout. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5683582030839808). Final Words - The End. Big thanks for following along !! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5761329797267456). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - What you’ll Learn Have questions about What you’ll Learn? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5750683647082496). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - What about Browser Support? Can you CSS Variables today? View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5733170917933056). {New} Long Live the CSS Grid - CSS Grid, Baby Steps Now that you understand the basic terminologies, like an adventurous kid, let’s get kicking! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5141521993039872). {New} Long Live the CSS Grid - Making CSS Grid work with Flexbox In this part, you’ll learn to make Flexbox and the CSS Grid work together — peacefully. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5759826290278400). Final Words - Real World Use Cases We've run all our code examples within the confines of the interactive platform here on educative.io. There are certain things to note when writing CSS in real life. Here they are. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5667168544882688). Final Words - Where To Go From Here Have questions about Where To Go From Here? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5652912474685440). Final Words - {New} The One Thing You Can do For Me Have questions about {New} The One Thing You Can do For Me? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5755685136498688). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - Properties Worthy of Mention Here are some behaviors that are worth mentioning. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5112623305588736). {New} CSS Variables Real World Applications - Building the CSS Variable Booth 🤣 Have questions about Building the CSS Variable Booth 🤣? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5741129492332544). Introduction - How to Get the Most Out of This Course It is my duty to introduce you the ins and outs of CSS in this course. Just before we get into that, this is how to make the most out of this course. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5686683802533888). Getting started with CSS - How CSS rules work What is CSS and what is it used for? The previous lesson answered this question. In this lesson, we will explore CSS selectors, properties, and values. What is the difference between these? View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5752142325350400). Oh My Selectors! - One Final Look at CSS Selectors Yeah, I know we have spent an ample lot of time on selectors, but CSS is nothing without selectors. Every declaration begins with a selector. It is worth the deep study. In this lesson, we will take a look at Pseudo-element Selectors. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5644572721938432). CSS Fundamentals Everyone Should Know - The Concept of Cascade and Inheritance in CSS Understanding the concept of cascade and Inheritance is important to understanding how CSS works. In this lesson we will take a look at what these concepts are. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5647308616105984). We all Need Units - Making Sense of Units in CSS Texts have to be sized. Images have to be sized. Calculated spacing also have to be measured. Point is, this is important stuff as there is no sizing without measurement. Equally, there are no measurements without units. In this section, we will begin by introducing CSS units. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5663741160980480). We all Need Units - The problem with the EM unit. The EM unit can cause unintended results when not understood. Let me save you the stress. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5159696684023808). We all Need Units - vmin and vmax While vh and vw are related to the vieport's height and width, vmin and vmax are related to the minimum and maximum of these values. It does depend on which is larger or smaller. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5670405876482048). Typography in CSS - The font stack Have questions about The font stack? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5143083750522880). The Box Model - Introducing the Box Model The Box model is arguably the most important concept you will learn in CSS as a whole. So, listen up! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5751832013963264). Challenge: Hands-on Practice with Texts, Margin, Padding and Borders - The Solution Have questions about The Solution? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5069507739516928). Getting creative with Backgrounds - To repeat or not repeat? CSS is pretty smart. So there's got to be a way to stop the background images from been repeated. Let's take a look at the background-repreat property. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5712453606309888). Getting creative with Backgrounds - Sizing Backgrounds Using Keywords There are two keywords for sizing backgrounds. "contain" and "cover". Let's see how they work. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5679846214598656). Getting creative with Backgrounds - Sizing Backgrounds Using Length Measurements As opposed to keywords, backgrounds may also be sized using length measurements. Here's how it works. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/6200439200546816). Project: Build a Movie Order Page - The Background Shorthand Property Shorthands exist to make declarations faster and easier. The background shorthand isn't left out too. In this lesson, we will take a look at how the CSS backkground shorthand really works View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5662069344960512). Hands-on Practice with Gradients - Problem: The German National Flag with Gradients Have questions about Problem: The German National Flag with Gradients? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5656058538229760). Hands-on Practice with Gradients - Solution: The German National Flag with Gradients Have questions about Solution: The German National Flag with Gradients? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5695159920492544). Project: Build a Sign Up Page for a Startup - Getting the Document Structure Right Have questions about Getting the Document Structure Right? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5690145009303552). Challenge: Hands-on Practice with Texts, Margin, Padding and Borders - Introducing Challenges Welcome to the challenge section. These sections are geared towards real world application of knowledge. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5631242217193472). Project: Build a Sign Up Page for a Startup - Web Fonts, Rounded Corners and Rounded Images In this lesson we will take a look at how to grab fonts off of the internet, and also spice up the default box we get with the box model with rounded corners. That's not all, we will take a look at the display property in CSS and more... View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5751399832879104). CSS Fundamentals Everyone Should Know - How Default Browser Styles Affect a Document Just before we begin building fun projects, you should be aware that your styles aren't the only styles at play. Most browsers have a default implementation control a default set of styles already applied to the HTML elements. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5697070107197440). {New} Teach Me Positioning Like I'm Five - Building Realistic CSS Effects with Box-shadow Have questions about Building Realistic CSS Effects with Box-shadow? Go for it! View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5706504271298560). Colors, colors, colors! - Making sense of Colors in CSS Colors make up beautiful designs - in most cases. There's not going to be a lot of color theory in this lesson, but you will learn to manipulate colors with CSS. You'll also learn the color units in CSS. Pretty much all the important CSS color stuff. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5743868070854656). {New} A Detailed Look at CSS Variables ( a.k.a Custom Properties ) - Using CSS Variables If you’re coming from the world of preprocessors, you must be used to using a variable by just referencing its name. With native css variables, things are a little different. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5637337312657408). {New} CSS Variables Real World Applications - Creating Themed Sites with CSS Variables I’m sure you’ve come across them before. Themed sites give the user the feel of customization. Like they are in control. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5696101055201280). {New} Long Live the CSS Grid - Basic CSS Grid Terminologies You Should Know Let’s take a look at the CSS grid terminologies you absolutely have to know. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5704471946461184). {New} Long Live the CSS Grid - Responsive Design — Redefining Grid Areas with Media Queries The Grid areas you create within the parent grid container are not set in stone. The grid areas can be changed based on the screen size of the user’s device. View the lesson [here](https://www.educative.io/collection/page/5191711974227968/5641332169113600/5723920363683840).
About the The Complete Advanced Guide to CSS (Ohans Emmanuel) category [The Complete Advanced Guide to CSS (Ohans Emmanuel)] (1)