Css3 Responsive Web Design Tutorial With Flexbox And Animations

Tags: HTML

Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!

Last updated 2022-01-10 | 4.5

- Real-world skills to build real-world websites. Including several mini projects!
- Learn the basics
- then learn Advanced Selectors
- Gradients
- Transformations
- Transitions
- Animations
- Flexbox and Responsive Web Design!
- Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen

What you'll learn

Real-world skills to build real-world websites. Including several mini projects!

Learn the basics

then learn Advanced Selectors

Gradients

Transformations

Transitions

Animations

Flexbox and Responsive Web Design!

Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen

Get helpful support in the course Q&A

Downloadable lectures

code and design assets for the entire project

* Requirements

* No coding or design experience necessary
* Any computer will do — Windows
* OSX or Linux
* You don’t need to buy any software — we will use the best free web development editor in the world

Description

You can launch a new career in web development by simply learning HTML and CSS. You don't need a university degree or any paid software, everything can be learned for free with free software and a few hours of your time. This course also comes with my full CSS Masterclass e-book, as an added bonus!

This entire course is designed to take you from a beginner to a CSS expert in order to prepare you for a job as a web developer.

Don't limit yourself with those terrible site-builder tools. They are cool tools, but ultimately the limit your creativity. By learning CSS you'll be able to unleash your creativity!

THIS COURSE COMES WITH:

Over 170 lessons
Over 140 tasks (found at the end of each lesson)
My CSS Masterclass e-book that has interactive code examples
Over 25 self contained modules so you can skip around if you like
Direct access to me through the Q&A section
Unlimited 24/7 Access through the website, the app, your phone or even your TV
A certificate of completion
Access to my Developer Support Group where you can ask me questions directly
Quizzes at the end of each module

This course does not assume any prior knowledge in CSS, but it's also broken up into small section that allow you to skip around (so you don't have to watch everything you already know about).

I've taught over 225,000 students on Udemy, so you know you can trust me and what I'm going to teach you. Here's what some people have said about my other courses:

"This course is worth doing it like what i call baby steps ... i did the course again and practice a lot i sometime refer to some video if i struggle well done"
"very clear explanation how things example with alot of examples. Very good!"
"absolutely love this course! Perfect! You can't go wrong with this Udemy Instructor."
"Great info. I think it breaks a lot of the myth of what you should and need to know to get a job doing front end development. A++"
"It was a good experience. This course was excellent for me as beginner. Now, I am looking to create my first website. Thank you Mr. Kalob Taulien."

Are you looking for the best way to learn how to build beautiful websites with CSS3? What about websites that look even better on your phone?

Do you want to learn everything in one course? (no upgrades, no up-selling .. just me and you, a bunch of code and some great projects)

Have you taken other CSS courses but didn't actually learn how to build beautiful and responsive websites? Or did they teach you things that you can't apply in real life?

If your answer is a big YES... Then this is exactly the course you are looking for! This is the one-stop-shop for all your CSS learning needs!

This course is very hands on. Over 140 lessons have tasks at the end of them so you can gain immediate experience with everything new you've learned.

YOU'RE GOING TO LEARN AMAZING ADVANCED CSS3 SUCH AS:

Transitions
Gradients
Transformations
Animations
Flexbox
Responsive Web Design

CSS Transitions:
You'll learn how to slowly animate website components using transitions. Like when you put your mouse over a link and it slowly changes color (instead of being instant.. it looks like a fading effect!)

Gradients:
No Photoshop required! We'll learn how to master gradients from scratch. It's a lot easier than you think and adds a nice visual aspect to your websites!

Transformations:
You'll learn about 2D and 3D transformations. Like making an element bigger but keeping it's height and width proportional. Rotating elements has never been easier! Change the perspective on an element adds a nice angle to your elements, and can make your text look like the intro to Star Wars.

Animations:
CSS3 animations let you create full CSS-only animations (no JavaScript required). You can do more than just change sizes or colors... you can turn your website into an app-like website with cool animations. And we'll go over each animation property one-by-one with lots of practice in between. By the end of the animations module, you'll be an animation PRO!

Flexbox:
Flexbox is probably the most important CSS3 property. It lets you set an element's base size and allow it to grow or shrink depending on other content. You can vertically align content without tables or CSS "hacks". It makes responsive web design SO EASY. You can re-arrange your HTML elements without writing any HTML (pure css!) With transitions, you can make a VERY nice website. You'll get real life practice with flexbox AND how you can make a website responsive (there's a project based on creating a Flexbox layout!)

Responsive Web Design (RWD):
Learn exactly how we make a website "responsive", which really just means "the website transforms when you view it on a phone or a laptop". We'll dive into Responsive Web Design, media queries, and get hands on practice creating our own responsive website!

Who this course is for:

Complete beginners who want to learn how to build a professional, beautiful and responsive website
Students with some knowledge about HTML and CSS, but who struggle to put together a great website
Designers who want to expand their skill set into HTML5 and CSS3

Course content

31 sections • 209 lectures

CSS Introduction 12 lectures

CSS Introduction Preview 02:10

An introduction into CSS: Cascading Style Sheets

How To Get The Most From This Course Preview 02:58

Support Group Preview 01:02

Syntax Introduction Preview 03:14

Learn what the CSS syntax looks like, and learn about each part.

Very Important Preview 01:32

Editors Preview 02:14

Sublime, Atom, VS Code, Notepad++.. all of these are text editors you can use for writing CSS.

How to Ask Great Questions Preview 03:31

Here's how to ask great questions. Well worded and descriptive questions tend to get answered faster. This is helpful for future questions you'll have in advanced subjects like server-side programming.

CSS Masterclass e-book (free) Preview 00:11

Get your free copy of the CSS Masterclas e-book. Over 180 pages with live, interactive code examples.

What is Inline CSS? Preview 03:28

Learn what the difference between inline, internal and external CSS is.

What is Internal CSS? Preview 03:48

Learn what the difference between inline, internal and external CSS is.

What is External CSS? Preview 09:15

Learn what the difference between inline, internal and external CSS is.

CSS Introduction Quiz

A few questions to see if you were paying attention.

Getting Started 15 lectures

Color Types Preview 10:05

CSS allows you to write hex colors (we'll explore these) and named colors, such as "red" and "blue".

Background Colors Preview 04:15

Websites are made of "blocks", like Lego. And you can change the entire color of a block by changing it's background color. Find out how this is done.

Background Images Preview 04:31

Each HTML element can have a background color and image. Let's explore how to add a background image in this lesson.

Repeating Background Images Preview 03:07

Background images can repeat over and over (like a pattern), or you can tell the browser to only use the image once. In this lesson we'll explore repeating and non-repeating background images.

Borders Preview 08:57

Every HTML element can have a border. It seems ugly at first, but they play an important role in the user experience.

The Box Model (Extremely Important!) Preview 05:08

The Box Model is arguably the most important aspect of CSS. It's the padding, margin, border and overall spacing inside an element. We'll explore how to visually see all of these properties in this lesson.

Padding Preview 05:24

Padding is the spacing inside an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.

Margin Preview 04:40

Padding is the spacing outside of an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.

Centering an Element Preview 04:06

Centering an entire element isn't an intuitive feature in CSS. Here's how we center an element.

Outline Preview 02:56

Outline is the border around the border. Confused? Let's take a dive into what this property is.

Cursor Preview 02:42

A Quick Checkup Preview 01:01

Getting Started Quiz

Test your knowledge with these questions.

Mini Project Preview 01:42

Your first mini project! Get hands on practice with CSS.

Mini Project: Solution Preview 06:58

Here's my solution to the Mini Project lesson. Source code included.

Text Formatting 10 lectures

Text Color Preview 02:07

Here's how you can easily change the text color in any element.

Text Alignment Preview 04:31

There are 4 primary ways to align your text. If you don't know them all off the top of your head you should probably watch this video.

Text Decoration Preview 06:33

If CSS is "decoration", then what is "text decoration"? It's underlines, over lines, and strike-throughs. You can also change the color of the lines so it doesn't match your text color. Here's how..

Text Transform Preview 03:25

There's a way to force all your letters to be uppercase, lowercase or capitalized. In this lesson we learn how to do that.

Text Indent Preview 02:23

Text indenting is more than "just adding a space" before a word. As you learned in middle school, paragraphs should start with an indentation. CSS can handle that for us.

Letter Spacing Preview 04:06

Did you know you can change the spacing between letters using CSS? Yep, you can make letters closer or further apart. We learn how to do that in this lesson.

Line Height Preview 03:34

Sometimes you want more spacing between your lines. CSS makes this easy for us. Learn how in this lesson.

Direction Preview 03:23

Not every language writes from left to right. There are many languages to write sentences the other way. It's important that you know how to change the text direction in today's hyper connected world.

Word Spacing Preview 03:32

Just like letter spacing, there's a way to add word spacing. Word spacing is how we space out, or bring together, words in an element.

Text Formatting Quiz

Test your knowledge with these questions.

Fonts and Font Styling 9 lectures

Serif vs. Sans Serif Preview 03:33

Serif.. Sans Serif... Cursive... These are just 3 different font types. As a front end web developer you need to know the difference between font types.

Font Family Preview 05:37

When you change a font on your website, you need to consider some people can't see every font. You need backup fonts. And a font family is how you provide this backup support.

Lots of Free Fonts Preview 04:18

I'm going to show you the best place to get free fonts. And how you can install them on your website SUPER easily.

Font Style Preview 03:37

Font style is how you make your text italicized.

Font Size Preview 04:48

Font size is how you change the height (and width, proportionally) of your text. This is used every single day, several times a day.

Font Weight Preview 06:19

To bold, or not to bold, that is the font weight... and more! You can even make your fonts the opposite of bold using font weights!

Font Variant Preview 02:36

Never heard of this one? Let's dive into font variant and explore what it can do for you.

Font Awesome Icons Preview 06:04

By far the best icon set on Earth. It's free, it's amazing, they scale perfectly, and they're made with a font file. In this lesson we learn about Font Awesome and how to install it, then we learn how to make the icons appear on our website and how we can change the sizes of our new icon set.

Font and Font Styling Quiz

Test your knowledge with these questions.

Links and their "States" 5 lectures

Links Introduction Preview 02:08

Do you know how to style a link? This section focuses on styling the link and it's "pseudo" states.

Hover Over Links Preview 01:58

When you put your mouse over a link... what is it going to do? That's the hover state. Let's learn how to style that.

Visited Links Preview 01:49

Learn how to style links you've already clicked on.

Active Links Preview 02:34

When you click on a click, but have not released your mouse button.. this is called the "active" state. And you can style this, too!

Links Quiz

Test your knowledge with these questions.

Better Selectors 5 lectures

Grouping Selectors Preview 05:45

You don't need to write a new selector for every single element. There's a way to group your selectors together.

Descendant Selectors and Specificity Preview 07:53

You can select elements "under" other elements. But be careful, this can lead to a specificity nightmare.

Child Selectors Preview 04:35

How do you select child elements in your HTML DOM? We'll learn about that in this lesson.

Adjacent Selectors Preview 03:46

In this lesson we learn about selecting elements that are "beside" each other. Also known as "siblings".

Better Selectors Quiz

Test your knowledge with these questions.

Lists 4 lectures

List Style Type Preview 05:24

Browsers style lists for you, but often you want to change it. In this lesson we'll learn about the List Style Type and how we can change bullet points into something else.

List Style Position Preview 02:03

Do you want your list position inside the element, or outside the element? This really comes down to padding. We dive deeper into this in this 2 minute video.

List Style Image Preview 01:29

We can change a lists bullet points or numbers to a custom image.

Lists Quiz

Test your knowledge with these questions.

Tables 7 lectures

Tables Preview 01:54

Tables are not preferred in HTML. But they are unavoidable. Here's how you can make the best of tables with CSS.

Table Borders Preview 01:47

Tables have strange border rules. Let's look at removing some of them so they act like regular elements.

Table Cell Vertical Align Preview 01:23

One of the few benefits that comes from using tables is the ability to vertically align content (more on this in the Flexbox module). In this lesson we'll change the vertical alignment of our content inside a table.

Table Row Hover Effect Preview 02:18

Let's take what we know of CSS so far, and create a fun little hover effect over a table. This is a common design and it's good to know how to do this.

Mini Project Preview 01:15

I've given you code, and you have to style it using ONLY CSS. You cannot write any HTML to help you out. The code you need is added as an additional downloadable file.

Mini Project: Solution Preview 08:17

The solution to the Mini Project video that came before this video. Source code added.

Tables Quiz

Test your knowledge with these questions.

Display 6 lectures

Display Introduction Preview 01:56

Welcome to the Display property, arguably one of the most important CSS properties to ever exist.

Display Block Preview 02:15

What's the difference between <span> and <div>? Display Block.

Display Inline Preview 02:45

What's the difference between <div> and <span>? Display Inline.

Display Inline-Block Preview 02:55

There's a middle ground between Display Block and Display Inline. It's called Display Inline Block, and it's amazing.

Display None Preview 02:23

This is how you make elements hide on a page. Not "invisible", but they act like they don't exist at all.

Display Quiz

Test your knowledge with these questions.

Sizing Elements 3 lectures

Width Preview 03:11

Not all HTML elements support a custom width. But you can overwrite their default behavior and force a width on any element. Learn how to add CSS widths in this lesson.

Height Preview 02:55

Not all HTML elements support a custom height. But you can overwrite their default behavior and force a height on any element. Learn how to add CSS heights in this lesson.

Sizing Elements Quiz

Test your knowledge with these questions.

Positions 6 lectures

Position Introduction Preview 01:14

Positioning is how we move an element around the page (out of its default spot).

Position Relative Preview 03:03

Einstein would be happiest with this property. This is how we move an element from it's default location, relative to it's default location.

Position Absolute Preview 06:00

Paired with Position Relative, we can move an element into an exact position (not relative to it's default location)

Position Fixed Preview 06:40

This is how we create navbars and menus that float down the page with us as we scroll down.

Overlapping Elements with Z-Index Preview 07:10

When you have more than one element positioned outside of it's default location, you need to tell the browser which element should be "on top" and which element should be "on the bottom".

Positions Quiz

Test your knowledge with these questions.

Overflow 5 lectures

Overflow Introduction Preview 00:56

Overflow is when your content breaks out of it's container.

Overflow Scroll Preview 02:31

Forcing scroll bars on an element using overflow.

Overflow Auto Preview 01:00

How to add scroll bars to your elements.

Overflow Hidden Preview 02:51

Hide anything that breaks out of it's container using overflow.

Overflow Quiz

Test your knowledge with these questions.

Float & Clear 6 lectures

Float Introduction Preview 01:44

Introduction to the CSS float property.

Float Left & Right Preview 04:54

How to "push" your elements to the left or right of it's container.

Clear Preview 05:03

How to break out of a floating problem.

Clearfix Hack Preview 03:47

Here's a cool little clearfix hack.

Opacity Preview 07:20

How to make your selected element translucent (semi see-through, or entirely see-through)

Float & Clear Quiz

Test your knowledge with these questions.

Advanced Selectors 7 lectures

Advanced Selectors Introduction Preview 01:01

An introduction into advanced selectors.

Attribute Selector Preview 04:50

How to select elements by their attributes.

Exact Value Selector Preview 04:01

How to select elements by an exact value that an attribute has.

Contains Value Selector Preview 04:15

How to select elements that have an attribute containing a small section of the entire value.

Starts With Selector Preview 04:26

Learn how to select elements that start with a certain value.

Ends With Selector Preview 03:50

Learn how to select elements in CSS that end with a certain value.

Advanced Selectors Quiz

Test your knowledge with these questions.

Pseudo Selectors 10 lectures

Pseudo Selector Introduction Preview 01:33

An introduction into CSS Pseudo Selectors

Hover Selector Preview 05:56

Learn how to change element styling when you hover over it.

First Child Selector Preview 04:46

Learn how to select the first child in a group of elements in this lesson.

Last Child Selector Preview 03:35

Learn how to select the last child element in a group of elements.. let's dive in!

Focus Selector Preview 03:59

Learn how to style form fields when you click into them and start typing.

Checked Selector Preview 06:13

How to change the styling of a checked checkbox in CSS.

Disabled Selector Preview 03:27

Enabled Selector Preview 01:58

What is an "enabled" element? Learn how to style any elements that are "enabled".

Not Selector Preview 07:59

In CSS, there's a way to select a broad range of elements, and then filter them down. We do this with the "not" selector. Let's learn about this special CSS selector now.

Pseudo Selectors Quiz

Test your knowledge with these questions.

Pseudo Elements 3 lectures

Before Selector Preview 08:05

Pseudo elements let you add additional HTML to your page without writing any real HTML. In this lesson you'll learn how to add a pseudo element before your selector.

After Selector Preview 09:06

Pseudo elements let you add additional HTML to your page without writing any real HTML. In this lesson you'll learn how to add a pseudo element after your selector.

Pseudo Elements Quiz

Test your knowledge with these questions.

Project: Use What You Have Learned So Far 5 lectures

The Project Preview 03:13

Project time! Use everything you've learned so far with this practice code.

The Solution Part 1 Preview 10:10

Part 1 of 3 of this project's solution. Source code is in part 3.

The Solution Part 2 Preview 09:44

Part 2 of 3 of this project's solution. Source code is in part 3.

The Solution Part 3 Preview 08:38

Part 3 of 3 of this project's solution. Source code included.

CSS1 and CSS2 Summary Preview 04:01

You've learned most of CSS1, CSS2 and even some CSS3. This is the summary video.

CSS3 Introduction 1 lectures

CSS3 Introduction Preview 01:56

An introduction into CSS3

CSS3 Rounding Corners 4 lectures

Border Radius Preview 03:06

Learn how to round corners using CSS3 and Border Radius

Round Images Preview 03:13

In this lesson we learn how to turn square and rectangular images into circles.

Individually Rounded Corners Preview 03:50

Learn how to round just one corner at a time using CSS3.

Rounding Corners Quiz

Test your knowledge with these questions.

CSS3 Background Images 3 lectures

Background Sizes Preview 06:42

How to change your background image sizes.

Multiple Background Images at the Same Time Preview 03:05

Learn how to add two or more background images to the same element at the same time.

Background Images Quiz

Test your knowledge with these questions.

CSS3 New Color Properties 4 lectures

RGBA Preview 04:29

In CSS3 we can make our text translucent by giving it a different kind of color value: RGBA.

HSL and HSLA Preview 03:41

CSS3 comes with a few different types of color formats. In this lesson we learn about HSL: Hue, Saturation and Lightness (with Alpha!)

Opacity vs. Alpha Preview 05:57

What is the difference between opacity and alpha? Find out here.

New Colors Quiz

Test your knowledge with these questions.

CSS3 Gradients 8 lectures

Linear Gradients Preview 06:51

Learn how to create fun and beautiful linear CSS3 gradients in this lesson.

Linear Gradient Colors and Transparency Preview 03:43

Gradients support various color formats, including alphas. Let's explore this with a few demos!

Repeating Linear Gradients Preview 03:27

How to create repeating linear gradients, so your beautiful or fun gradient can be seen more times in less area!

Radial Gradients Preview 04:07

Radial gradients look like circles that fade out to other colors. Watch this video to see how we create them!

Repeating Radial Gradients Preview 03:04

There's a simple and clean way to make radial gradient repeat themselves. Here's how.

Amazing Gradient Tools Preview 04:17

A couple amazing gradient tools you CANNOT live without!

Two Favorite Gradient Tools Preview 00:15

Gradients Quiz

Test your knowledge with these questions.

CSS3 Shadows 5 lectures

Shadow Introduction Preview 01:03

CSS3 support shadows! Say good-bye to terrible Photoshoped background images!

Text Shadows Preview 04:56

Text can have a background color. You can offset the color. You can give it a blurriness factor. In this video we dive into CSS3 text shadows!

Box Shadows Preview 05:56

Elements, just like text, can have shadows as well. But boxes come with a surprise: a new type of shadow you may not have considered before.

Mini Project: Creating a CSS Card Preview 10:05

Mini Project! Let's create a CSS3-only "card". Not a letter, not a happy birthday card.. a designers card!

Shadows Quiz

Test your knowledge with these questions.

CSS3 Text Formatting 7 lectures

Text Introduction Preview 01:56

CSS3 Text Formatting Introduction Lesson

Text Overflow Preview 05:44

When there's too much text in your elements.. what do you? In this lesson you'll learn about 2 elegant ways to handle this situation.

Word Wrap Preview 02:33

CSS3 comes with the ability to wrap your words. Not sure what that means? Explore this CSS property with me and find out!

Word Break Preview 03:14

When your words are too long, do you break then into a different line with dashes? spaces? nothing at all? nothing at all?

Text Align Last Preview 03:09

CSS3 allows us to control the last line of text in a paragraph. You wouldn't believe how useful this is!

Self-Hosted Custom Fonts Preview 06:06

Want to use custom fonts on your own server? In this lesson you'll learn how to do that, AND how to translate it into CSS.

Text Formatting Quiz

Test your knowledge with these questions.

CSS3 Transitions 6 lectures

Transition Introduction Preview 01:53

An introduction lesson into transitions.

Transitioning Sizes Preview 06:01

How to transition height and widths of your elements so they look animated.

Transitioning Colors Preview 04:34

How to transition colors so they look like they're animated.

Transition Timing Functions (Speed Curves) Preview 07:38

Because transitions move, they can have a speed (speed curve). We can speed them up, slow them down, make the movement consistent.. or write our own transition timing function!

Transition Delay Preview 02:39

How to prevent a transition from starting for a specified period of time using the transition delay property.

Transitions Quiz

Test your knowledge with these questions.

CSS3 Transformations 8 lectures

Transform Introduction Preview 01:43

CSS3 transformation introduction lesson

Translate Preview 06:59

CSS3 translate transformation allows you to move elements up or down, left or right.. without using the position property!

Rotate Preview 03:49

CSS3 rotate lets you "Transform" your element by rotating it in several directions.

Scale Preview 04:32

CSS3 Scale allows you to instantly grow or shrink your elements while maintain it's proportion.

Skew Preview 03:11

CSS3 Skew is the ability to change an elements perspective so it looks like you're looking at it from a different angle.

Multiple Transformations Preview 03:44

In this lesson you'll learn how to perform multiple transformations at the same time on the same selector.

3D Transformations Preview 04:50

Learn about CSS3 3D transformations.

Transformations Quiz

Test your knowledge with these questions.

CSS3 Animations 12 lectures

Animation Introduction Preview 01:38

Welcome to CSS3 animations!

Animation Keyframes Preview 03:45

Animations use "keyframes" and transition from frame to frame. This requires a special CSS rule. Let's dive into this and create an animation!

Your First Animation Preview 08:17

Create your first CSS3 animation using keyframes!

Animation Fill Mode Preview 01:31

Animations will snap back do the selectors default styling when it's done. Animation Fill Mode is how we make the animation stop at the last keyframe.

Create a Blinking Animation Preview 02:59

Create another CSS3 animation with keyframes.. this time we'll create a blinking animation.

Animation Iteration Count Preview 03:37

Animations can run forever.. or just once.. of 9 times.. or any number of times you tell it to run when you set the animation iteration count.

Animation Delay Preview 01:36

How to prevent an animation from automatically running.. with CSS3's Animation Delay property!

Animation Direction Preview 04:50

In this lesson you'll learn how to alternate and reverse the direction of your animation. It's like playing a gif backwards!

Animation Timing Functions (Speed Curves) Preview 03:38

Animations have have different speeds. Sometimes you want to speed it up in the start, middle or end. Here's how we accomplish that using animation timing functions.

Animation Mini Project Preview 01:54

Your first Mini Project based purely on CSS3 animations.

Animation Mini Project: Solution Preview 07:50

The solution to the CSS3 Animation Mini Project.

Animations Quiz

Test your knowledge with these questions.

CSS3 Misc. Lessons 4 lectures

Columns Preview 04:40

CSS columns are not the same as framework columns. Learn the difference in this video.

Resize Preview 03:18

With CSS you can prevent the resizing of a textarea, or force it only resize vertically/horizontally. Learn how in this lesson.

Box Sizing (Extremely Important!) Preview 06:50

Box sizing directly effects your box model. It's the only property in CSS that let's you determine how the browser actually works.. and it's VITAL that you learn about box sizing!

Misc. Lessons Quiz

Test your knowledge with these questions.

CSS3 Flexbox 16 lectures

Flexbox Introduction Preview 04:44

Welcome to CSS3's Flexbox Module. You'll learn everything about flexbox and it's properties in this complete mini-course.

Equal Sized Columns Preview 09:55

Learn how to create equal sized columns using flexbox. No floats, no inline-block tricks.. and this is by far the best way to accomplish equal sized columns.

Flexbox Order Preview 03:25

With CSS3's Flexbox, you can change the order of your elements.. without re-writing your HTML!

Flexbox Rows and Columns Preview 02:58

Flexbox is broken into 2 main sections: rows and columns. The rules you'll learn about in future lessons apply to both, but can drastically change your results.

Flexbox Reversed Rows and Columns Preview 02:44

When talking about responsive web design, sometimes you want to simply reverse the rows or columns. Here's how we accomplish that with one simple CSS3 flexbox property.

Flexbox Basis Preview 06:04

CSS3's Flexbox Basis property is kind of like the width property. But it can grow and shrink. It's PERFECT for responsive web design. Let's dive into this!

Flexbox Wrap Preview 04:31

When you write too many flexbox items it can take up more than 100% of your browsers width, and that looks terrible. Instead, you want to break items to new rows. In this lesson we'll explore how to do that.

Flexbox Vertical Alignment Preview 04:49

Up until now vertical alignment was only achievable through CSS hacks, lots of code, or tables.. But thanks to Flexbox, we can do it with just a couple CSS properties!

Flexbox Align Items Preview 05:57

With flexbox you can align your items (child elements) to the start, end, center, spread out or space them out equally. No padding, no margin.. none of that hassle. This is truly game changing CSS!

Flexbox Justify Content Preview 04:47

Flexbox's Justify Content property isn't the same as a text-align: justify; declaration. But it's incredibly important. Explore this CSS3 property with me in this video.

Flexbox Align Self Preview 04:41

CSS3's Flexbox lets you align all it's items (child elements) at the same time. But you can also specify which elements should break the mould and do something different. That's what Flexbox Align Self is all about.

Flexbox Align Content Preview 06:08

Flexbox comes with a way to align it's own content. In this lesson we'll dive into what that means and how you can change the content alignment inside of Flexbox.

Responsive Flexbox Layout Project Part 1 Preview 10:37

Part 1 of 3 of the Responsive Flexbox Layout Project. Source code is in part 3.

Responsive Flexbox Layout Project Part 2 Preview 06:04

Part 2 of 3 of the Responsive Flexbox Layout Project. Source code is in part 3.

Responsive Flexbox Layout Project Part 3 Preview 09:52

Part 3 of 3 of the Responsive Flexbox Layout Project. Source code included.

Flexbox Quiz

Test your knowledge with these questions.

Responsive Web Design 11 lectures

Responsive Web Design (RWD) Introduction Preview 03:54

Welcome to responsive web design. This is where you learn how to take a desktop/laptop website and turn it into a mobile website.. and how you can make the appearance of elements change based on the size of your browser.

Responsive Web Design (RWD) Meta Tag Preview 03:50

To make your web pages properly responsive you need to add a special <meta> tag to your HTML.

A Quick Demo Preview 05:58

Let's take a look at some demo code that actually makes your website responsive.

Responsive Layout with Flexbox Preview 07:08

Properly learn how to make a truly responsive website using CSS3 Flexbox and Media Queries.

Responsive Layout with Flexbox Part 2 Preview 07:57

Properly learn how to make a truly responsive website using CSS3 Flexbox and Media Queries.

Responsive Web Design (RWD) Print Mode Preview 04:07

You wouldn't believe it.. but printing web pages is still a thing! So let's learn how we can remove a lot of color and useless styling so our page looks have decent when someone goes to print it.