Build Responsive Real World Websites with CSS3 v20

Build Responsive Real World Websites with CSS3 v20

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 lessonsOver 140 tasks (found at the end of each lesson)My CSS Masterclass e-book that has interactive code examplesOver 25 self contained modules so you can skip around if you likeDirect access to me through the Q&A sectionUnlimited 24/7 Access through the website, the app, your phone or even your TVA certificate of completionAccess to my Developer Support Group where you can ask me questions directlyQuizzes at the end of each moduleThis 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:TransitionsGradientsTransformations Animations FlexboxResponsive Web DesignCSS 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!

Overview

Section 1: CSS Introduction

Lecture 1 CSS Introduction

Lecture 2 How To Get The Most From This Course

Lecture 3 Support Group

Lecture 4 Syntax Introduction

Lecture 5 Very Important

Lecture 6 Editors

Lecture 7 How to Ask Great Questions

Lecture 8 CSS Masterclass e-book (free)

Lecture 9 What is Inline CSS?

Lecture 10 What is Internal CSS?

Lecture 11 What is External CSS?

Section 2: Getting Started

Lecture 12 Color Types

Lecture 13 Background Colors

Lecture 14 Background Images

Lecture 15 Repeating Background Images

Lecture 16 Borders

Lecture 17 The Box Model (Extremely Important!)

Lecture 18 Padding

Lecture 19 Margin

Lecture 20 Centering an Element

Lecture 21 Outline

Lecture 22 Cursor

Lecture 23 A Quick Checkup

Lecture 24 Mini Project

Lecture 25 Mini Project: Solution

Section 3: Text Formatting

Lecture 26 Text Color

Lecture 27 Text Alignment

Lecture 28 Text Decoration

Lecture 29 Text Transform

Lecture 30 Text Indent

Lecture 31 Letter Spacing

Lecture 32 Line Height

Lecture 33 Direction

Lecture 34 Word Spacing

Section 4: Fonts and Font Styling

Lecture 35 Serif vs. Sans Serif

Lecture 36 Font Family

Lecture 37 Lots of Free Fonts

Lecture 38 Font Style

Lecture 39 Font Size

Lecture 40 Font Weight

Lecture 41 Font Variant

Lecture 42 Font Awesome Icons

Section 5: Links and their “States”

Lecture 43 Links Introduction

Lecture 44 Hover Over Links

Lecture 45 Visited Links

Lecture 46 Active Links

Section 6: Better Selectors

Lecture 47 Grouping Selectors

Lecture 48 Descendant Selectors and Specificity

Lecture 49 Child Selectors

Lecture 50 Adjacent Selectors

Section 7: Lists

Lecture 51 List Style Type

Lecture 52 List Style Position

Lecture 53 List Style Image

Section 8: Tables

Lecture 54 Tables

Lecture 55 Table Borders

Lecture 56 Table Cell Vertical Align

Lecture 57 Table Row Hover Effect

Lecture 58 Mini Project

Lecture 59 Mini Project: Solution

Section 9: Display

Lecture 60 Display Introduction

Lecture 61 Display Block

Lecture 62 Display Inline

Lecture 63 Display Inline-Block

Lecture 64 Display None

Section 10: Sizing Elements

Lecture 65 Width

Lecture 66 Height

Section 11: Positions

Lecture 67 Position Introduction

Lecture 68 Position Relative

Lecture 69 Position Absolute

Lecture 70 Position Fixed

Lecture 71 Overlapping Elements with Z-Index

Section 12: Overflow

Lecture 72 Overflow Introduction

Lecture 73 Overflow Scroll

Lecture 74 Overflow Auto

Lecture 75 Overflow Hidden

Section 13: Float & Clear

Lecture 76 Float Introduction

Lecture 77 Float Left & Right

Lecture 78 Clear

Lecture 79 Clearfix Hack

Lecture 80 Opacity

Section 14: Advanced Selectors

Lecture 81 Advanced Selectors Introduction

Lecture 82 Attribute Selector

Lecture 83 Exact Value Selector

Lecture 84 Contains Value Selector

Lecture 85 Starts With Selector

Lecture 86 Ends With Selector

Section 15: Pseudo Selectors

Lecture 87 Pseudo Selector Introduction

Lecture 88 Hover Selector

Lecture 89 First Child Selector

Lecture 90 Last Child Selector

Lecture 91 Focus Selector

Lecture 92 Checked Selector

Lecture 93 Disabled Selector

Lecture 94 Enabled Selector

Lecture 95 Not Selector

Section 16: Pseudo Elements

Lecture 96 Before Selector

Lecture 97 After Selector

Section 17: Project: Use What You Have Learned So Far

Lecture 98 The Project

Lecture 99 The Solution Part 1

Lecture 100 The Solution Part 2

Lecture 101 The Solution Part 3

Lecture 102 CSS1 and CSS2 Summary

Section 18: CSS3 Introduction

Lecture 103 CSS3 Introduction

Section 19: CSS3 Rounding Corners

Lecture 104 Border Radius

Lecture 105 Round Images

Lecture 106 Individually Rounded Corners

Section 20: CSS3 Background Images

Lecture 107 Background Sizes

Lecture 108 Multiple Background Images at the Same Time

Section 21: CSS3 New Color Properties

Lecture 109 RGBA

Lecture 110 HSL and HSLA

Lecture 111 Opacity vs. Alpha

Section 22: CSS3 Gradients

Lecture 112 Linear Gradients

Lecture 113 Linear Gradient Colors and Transparency

Lecture 114 Repeating Linear Gradients

Lecture 115 Radial Gradients

Lecture 116 Repeating Radial Gradients

Lecture 117 Amazing Gradient Tools

Lecture 118 Two Favorite Gradient Tools

Section 23: CSS3 Shadows

Lecture 119 Shadow Introduction

Lecture 120 Text Shadows

Lecture 121 Box Shadows

Lecture 122 Mini Project: Creating a CSS Card

Section 24: CSS3 Text Formatting

Lecture 123 Text Introduction

Lecture 124 Text Overflow

Lecture 125 Word Wrap

Lecture 126 Word Break

Lecture 127 Text Align Last

Lecture 128 Self-Hosted Custom Fonts

Section 25: CSS3 Transitions

Lecture 129 Transition Introduction

Lecture 130 Transitioning Sizes

Lecture 131 Transitioning Colors

Lecture 132 Transition Timing Functions (Speed Curves)

Lecture 133 Transition Delay

Section 26: CSS3 Transformations

Lecture 134 Transform Introduction

Lecture 135 Translate

Lecture 136 Rotate

Lecture 137 Scale

Lecture 138 Skew

Lecture 139 Multiple Transformations

Lecture 140 3D Transformations

Section 27: CSS3 Animations

Lecture 141 Animation Introduction

Lecture 142 Animation Keyframes

Lecture 143 Your First Animation

Lecture 144 Animation Fill Mode

Lecture 145 Create a Blinking Animation

Lecture 146 Animation Iteration Count

Lecture 147 Animation Delay

Lecture 148 Animation Direction

Lecture 149 Animation Timing Functions (Speed Curves)

Lecture 150 Animation Mini Project

Lecture 151 Animation Mini Project: Solution

Section 28: CSS3 Misc. Lessons

Lecture 152 Columns

Lecture 153 Resize

Lecture 154 Box Sizing (Extremely Important!)

Section 29: CSS3 Flexbox

Lecture 155 Flexbox Introduction

Lecture 156 Equal Sized Columns

Lecture 157 Flexbox Order

Lecture 158 Flexbox Rows and Columns

Lecture 159 Flexbox Reversed Rows and Columns

Lecture 160 Flexbox Basis

Lecture 161 Flexbox Wrap

Lecture 162 Flexbox Vertical Alignment

Lecture 163 Flexbox Align Items

Lecture 164 Flexbox Justify Content

Lecture 165 Flexbox Align Self

Lecture 166 Flexbox Align Content

Lecture 167 Responsive Flexbox Layout Project Part 1

Lecture 168 Responsive Flexbox Layout Project Part 2

Lecture 169 Responsive Flexbox Layout Project Part 3

Section 30: Responsive Web Design

Lecture 170 Responsive Web Design (RWD) Introduction

Lecture 171 Responsive Web Design (RWD) Meta Tag

Lecture 172 A Quick Demo

Lecture 173 Responsive Layout with Flexbox

Lecture 174 Responsive Layout with Flexbox Part 2

Lecture 175 Responsive Web Design (RWD) Print Mode

Lecture 176 Multiple Media Queries

Lecture 177 Responsive Images

Lecture 178 Responsive iFrames

Lecture 179 Responsive Web Design (RWD) Summary

Section 31: Summary

Lecture 180 Summary & What To Learn Next

Lecture 181 Course Summary

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 Information:

Udemy | English | 12h 58m | 5.65 GB
Created by: Kalob Taulien

You Can See More Courses in the Developer >> Greetings from CourseDown.com