Build Responsive Real World Websites with CSS3 v2.0
Created by Kalob Taulien, Last Updated 10-Sep-2020, Language:English
Build Responsive Real World Websites with CSS3 v2.0
Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!
Created by Kalob Taulien, Last Updated 10-Sep-2020, Language:English
What Will I Get ?
- 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
-
CSS Introduction
7 Lectures 00:27:40-
CSS Introduction
Preview00:02:10 -
Syntax Introduction
Preview00:03:14 -
Editors
Preview00:02:14 -
How to Ask Great Questions
Preview00:03:31 -
What is Inline CSS?
00:03:28 -
What is Internal CSS?
00:03:48 -
What is External CSS?
00:09:15
-
-
Getting Started
12 Lectures 01:02:49-
Color Types
Preview00:10:05 -
Background Colors
Preview00:04:15 -
Background Images
00:04:31 -
Repeating Background Images
00:03:07 -
Borders
00:08:57 -
The Box Model (Extremely Important!)
00:05:08 -
Padding
00:05:24 -
Margin
00:04:40 -
Centering an Element
00:04:06 -
Outline
00:02:56 -
Cursor
00:02:42 -
Mini Project: Solution
00:06:58
-
-
Text Formatting
9 Lectures 00:33:34-
Text Color
Preview00:02:07 -
Text Alignment
00:04:31 -
Text Decoration
00:06:33 -
Text Transform
00:03:25 -
Text Indent
00:02:23 -
Letter Spacing
00:04:06 -
Line Height
00:03:34 -
Direction
00:03:23 -
Word Spacing
00:03:32
-
-
Fonts and Font Styling
8 Lectures 00:36:52-
Serif vs. Sans Serif
Preview00:03:33 -
Font Family
00:05:37 -
Lots of Free Fonts
00:04:18 -
Font Style
00:03:37 -
Font Size
00:04:48 -
Font Weight
00:06:19 -
Font Variant
00:02:36 -
Font Awesome Icons
00:06:04
-
-
Links and their "States"
4 Lectures 00:08:29-
Links Introduction
00:02:08 -
Hover Over Links
00:01:58 -
Visited Links
00:01:49 -
Active Links
00:02:34
-
-
Better Selectors
4 Lectures 00:21:59-
Grouping Selectors
00:05:45 -
Descendant Selectors and Specificity
00:07:53 -
Child Selectors
00:04:35 -
Adjacent Selectors
00:03:46
-
-
Lists
3 Lectures 00:08:56-
List Style Type
00:05:24 -
List Style Position
00:02:03 -
List Style Image
00:01:29
-
-
Tables
6 Lectures 00:16:54-
Tables
Preview00:01:54 -
Table Borders
00:01:47 -
Table Cell Vertical Align
00:01:23 -
Table Row Hover Effect
00:02:18 -
Mini Project
00:01:15 -
Mini Project: Solution
00:08:17
-
-
Display
5 Lectures 00:12:14-
Display Introduction
00:01:56 -
Display Block
00:02:15 -
Display Inline
00:02:45 -
Display Inline-Block
00:02:55 -
Display None
00:02:23
-
-
Sizing Elements
2 Lectures 00:06:06-
Width
00:03:11 -
Height
00:02:55
-
-
Positions
5 Lectures 00:24:07-
Position Introduction
Preview00:01:14 -
Position Relative
00:03:03 -
Position Absolute
00:06:00 -
Position Fixed
00:06:40 -
Overlapping Elements with Z-Index
00:07:10
-
-
Overflow
4 Lectures 00:07:18-
Overflow Introduction
00:00:56 -
Overflow Scroll
00:02:31 -
Overflow Auto
00:01:00 -
Overflow Hidden
00:02:51
-
-
Float & Clear
5 Lectures 00:22:48-
Float Introduction
00:01:44 -
Float Left & Right
00:04:54 -
Clear
00:05:03 -
Clearfix Hack
00:03:47 -
Opacity
00:07:20
-
-
Advanced Selectors
6 Lectures 00:22:23-
Advanced Selectors Introduction
Preview00:01:01 -
Attribute Selector
00:04:50 -
Exact Value Selector
00:04:01 -
Contains Value Selector
00:04:15 -
Starts With Selector
00:04:26 -
Ends With Selector
00:03:50
-
-
Pseudo Selectors
9 Lectures 00:39:26-
Pseudo Selector Introduction
Preview00:01:33 -
Hover Selector
00:05:56 -
First Child Selector
00:04:46 -
Last Child Selector
00:03:35 -
Focus Selector
00:03:59 -
Checked Selector
00:06:13 -
Disabled Selector
00:03:27 -
Enabled Selector
00:01:58 -
Not Selector
00:07:59
-
-
Pseudo Elements
2 Lectures 00:17:11-
Before Selector
00:08:05 -
After Selector
00:09:06
-
-
Project: Use What You Have Learned So Far
3 Lectures 00:35:36-
The Project
00:03:13 -
CSS1 and CSS2 Summary
00:04:01 -
The Solution Part
00:28:22
-
-
CSS3 Introduction
1 Lectures 00:01:56-
CSS3 Introduction
00:01:56
-
-
CSS3 Rounding Corners
3 Lectures 00:10:09-
Border Radius
00:03:06 -
Round Images
00:03:13 -
Individually Rounded Corners
00:03:50
-
-
CSS3 Background Images
2 Lectures 00:09:47-
Background Sizes
00:06:42 -
Multiple Background Images at the Same Time
00:03:05
-
-
CSS3 New Color Properties
3 Lectures 00:14:07-
RGBA
00:04:29 -
HSL and HSLA
00:03:41 -
Opacity vs. Alpha
00:05:57
-
-
CSS3 Gradients
6 Lectures 00:25:29-
Linear Gradients
00:06:51 -
Linear Gradient Colors and Transparency
00:03:43 -
Repeating Linear Gradients
00:03:27 -
Radial Gradients
00:04:07 -
Repeating Radial Gradients
00:03:04 -
Amazing Gradient Tools
00:04:17
-
-
CSS3 Shadows
4 Lectures 00:22:00-
Shadow Introduction
00:01:03 -
Text Shadows
00:04:56 -
Box Shadows
00:05:56 -
Mini Project: Creating a CSS Card
00:10:05
-
-
CSS3 Text Formatting
6 Lectures 00:22:42-
Text Introduction
00:01:56 -
Text Overflow
00:05:44 -
Word Wrap
00:02:33 -
Word Break
00:03:14 -
Text Align Last
00:03:09 -
Self-Hosted Custom Fonts
00:06:06
-
-
CSS3 Transitions
5 Lectures 00:22:45-
Transition Introduction
00:01:53 -
Transitioning Sizes
00:06:01 -
Transitioning Colors
00:04:34 -
Transition Timing Functions (Speed Curves)
00:07:38 -
Transition Delay
00:02:39
-
-
CSS3 Transformations
7 Lectures 00:28:48-
Transform Introduction
00:01:43 -
Translate
00:06:59 -
Rotate
00:03:49 -
Scale
00:04:32 -
Skew
00:03:11 -
Multiple Transformations
00:03:44 -
3D Transformations
00:04:50
-
-
CSS3 Animations
11 Lectures 00:41:35-
Animation Introduction
00:01:38 -
Animation Keyframes
00:03:45 -
Your First Animation
00:08:17 -
Animation Fill Mode
00:01:31 -
Create a Blinking Animation
00:02:59 -
Animation Iteration Count
00:03:37 -
Animation Delay
00:01:36 -
Animation Direction
00:04:50 -
Animation Timing Functions (Speed Curves)
00:03:38 -
Animation Mini Project
00:01:54 -
Animation Mini Project: Solution
00:07:50
-
-
CSS3 Misc. Lessons
3 Lectures 00:14:48-
Columns
00:04:40 -
Resize
00:03:18 -
Box Sizing (Extremely Important!)
00:06:50
-
-
CSS3 Flexbox
13 Lectures 01:27:19-
Flexbox Introduction
00:04:44 -
Equal Sized Columns
00:09:55 -
Flexbox Order
00:03:25 -
Flexbox Rows and Columns
00:02:58 -
Flexbox Reversed Rows and Columns
00:02:44 -
Flexbox Basis
00:06:04 -
Flexbox Wrap
00:04:31 -
Flexbox Vertical Alignment
00:04:49 -
Flexbox Align Items
00:05:57 -
Flexbox Justify Content
00:04:47 -
Flexbox Align Self
00:04:41 -
Flexbox Align Content
00:06:08 -
Responsive Flexbox Layout Project Part
00:26:36
-
-
Responsive Web Design
9 Lectures 00:52:08-
Responsive Web Design (RWD) Introduction
00:03:54 -
Responsive Web Design (RWD) Meta Tag
00:03:50 -
A Quick Demo
00:05:58 -
Responsive Layout with Flexbox
00:15:07 -
Responsive Web Design (RWD) Print Mode
00:04:07 -
Multiple Media Queries
00:05:58 -
Responsive Images
00:02:59 -
Responsive iFrames
00:06:05 -
Responsive Web Design (RWD) Summary
00:04:10
-
-
Summary
2 Lectures 00:11:10-
Summary & What To Learn Next
00:04:30 -
Course Summary
00:06:40
-

Kalob Taulien
Head of programming at Coding for Everybody.
He is a professional web developer who's been developing websites and working with startups since 1999. He also has a broad set of skills in software, web development, and information technology.
Teaching over 300,000 students worldwide, he's helped tens of thousands of people learn web development. From zero to hero and novice to ninja, he's considered a top teacher by thousands. With so much experience, why not give his experience and knowledge to others so they can fulfill their dreams?
The passion to learn and to share his knowledge by teaching and helping others is something that drives him. It's a passion he's had since he was born. Kalob's ability to turn complex programming concepts into easy-to-understand bits of knowledge has been called his "superpower".
Throughout the years, Kalob has built hundreds, if not thousands, of websites, and has created multiple companies from his ideas and software. He also provides one-on-one coaching and startup consulting to new organizations.
Teaching isn't an option in Kalob's life, but a moral obligation to pass on knowledge to others.