Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Design
Web Design
CSS
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

Loại khoá học: Web Design

Learn CSS for the first time or brush up your CSS skills and dive in even deeper. EVERY web developer has to know CSS.

image
50.000 VND
100 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

Join this bestselling CSS course to learn all about CSS from the ground up, in great depth!

CSS ( Cascading Style Sheets) is a "programming language" you use to turn your HTML pages into real beautiful websites.

This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.

Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level:

  • The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.

  • The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.

  • The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.

Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.

Talking about the course project - we'll build the frontend (no backend) of a fictional web hosting company. We'll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!

Here's what's inside the course in detail - this is all also applied to the mentioned course project:

  • The basics about selectors, combinators and how you set up styling rules in general

  • Properties, values and decalarations

  • How specifity and inheritance work and why it's called "Cascading" Style Sheets

  • Important theoretical concepts like the "Box Model"

  • How the default position of elements can be changed

  • Styling backgrounds (e.g. gradients) and images

  • Which units and dimensions you typically use in CSS (px, rem, % and more)

  • How JavaScript and CSS interact

  • Responsive design and what "Mobile First" means

  • Styling forms and form inputs

  • Working with text, fonts and text styles

  • Flexbox! How it works and how to use it

  • Using the CSS Grid and how it differs from Flexbox

  • Transforming and animating HTML elements with the help of CSS

  • Writing future-proof CSS with features like CSS variables or best-practice class names

  • Using Sass and what it actually is all about

Is this course for you?

It's for you if

  • you started with learning web development and you want to build more beautiful websites

  • you already know CSS but want to dive deeper

  • you're using CSS in a trial-and-error manner and want to change this (you should!)

You might come back later if

  • you're an absolute CSS pro and you know the CSS working group drafts by heart

  • you're a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)

  • you're a total newcomer to web development and you don't know the basics about HTML

If that sounds good to you, we'd be more than happy to welcome you in this course!

Bạn sẽ học được gì

Learn why CSS is amazing, not something to be afraid of!

Use basic as well as advanced CSS features

Flexbox, grid, animations, transitions, fonts, media queries and much more - it's all included!

Understand the concepts and theory behind CSS and certain CSS features

Build beautiful websites which don't just contain great content but also look good

Yêu cầu

  • You should know the very basics about HTML and web development in general
  • NO advanced HTML or web development knowledge is required though
  • NO CSS knowledge is required at all! You'll learn it all in this course!

Nội dung khoá học

19 sections

Getting Started

11 lectures
Introduction
01:39
What is CSS?
02:59
Join our Online Learning Community
00:25
CSS History, Present & Future
01:50
Course Outline
04:34
Choose Your Track
00:27
Course Prerequisites
00:43
How To Get The Most Out Of This Course
02:49
Recommended Tools
01:26
Where to Find the Source Code
00:09
Useful Resources & Links
00:04

Diving Into the Basics of CSS

15 lectures
Module Introduction
00:55
Understanding the Course Project Setup
02:44
Adding CSS to our Project with Inline Styles
03:53
Understanding the <style> Tag & Creating a .css File
06:27
Applying Additional Styles & Importing Google Fonts
06:51
Theory Time - Selectors
08:56
Understanding the "Cascading" Style & Specificity​
08:14
Understanding Inheritance
05:47
Adding Combinators
06:16
Theory Time - Combinators
05:42
Summarizing Properties & Selectors
03:49
Selectors & Combinators
5 questions
Time to Practice - The Basics
1 question
Wrap Up
02:02
Useful Resources & Links
00:07

Diving Deeper into CSS

27 lectures
Module Introduction
01:19
Introducing the CSS Box Model
03:36
Understanding the Box Model
03:01
Understanding Margin Collapsing and Removing Default Margins
03:05
Deep Dive on "Margin Collapsing"
01:17
Theory Time - Working with Shorthand Properties
03:48
Applying Shorthands in Practice
02:05
Diving Into the Height & Width Properties
06:07
Understanding Box Sizing
06:43
Adding the Header to our Project
05:37
Understanding the Display Property
07:12
display: none vs visibility: hidden
00:42
HTML Refresher: Block-level vs Inline Elements
01:04
Applying the Display Property & Styling our Navigation Bar
06:53
Understanding an Unexpected "inline-block" Behaviour
02:03
Working with "text-decoration" & "vertical-align"
04:54
Styling Anchor Tags
04:00
Adding Pseudo Classes
01:47
Theory Time - Pseudo Classes & Pseudo Elements
05:38
Grouping Rules
01:14
Working with "font-weight" & "border"
02:04
Adding & Styling a CTA-Button
04:09
Adding a Background Image to our Project
01:50
Properties Worth to Remember
01:29
Time to Practice - Diving Deeper into CSS
1 question
Wrap Up
02:31
Useful Resources & Links
00:05

More on Selectors & CSS Features

9 lectures
Module Introduction
00:41
Using Multiple CSS Classes & Combined Selectors
07:09
Classes or IDs?
04:05
(Not) using !important
03:15
Selecting the Opposite with :not()
03:29
CSS & Browser Support
03:51
Wrap Up
01:06
Rounding up the Basics
4 questions
Useful Resources & Links
00:04

Practicing the Basics

21 lectures
Module Introduction
00:37
Adding Style to our Plans
08:34
Working on the Recommended Plan
06:33
Styling the Badge with "border-radius"
03:22
Styling our List
03:02
Working on the Title and the Price of our Packages
04:33
Improving our Action Button
06:40
Understanding Outlines
02:17
Presenting the Core Features to the User
01:22
Styling the Headline of the Core Features Section
03:38
Preparing the Content of the Key Feature Area
07:15
Adding the Footer
06:49
What we Achieved so Far
01:46
Adding the Packages Page
06:24
Your Challenge
01:31
Styling the Links
03:55
Styling our Package Boxes
07:15
Adding "float" to our Package
05:14
Fixing the Hover Effect
04:11
Adding the Final Touches
03:01
Useful Resources & Links
00:01

Positioning Elements with CSS

17 lectures
Module Introduction
02:44
Why Positioning will Improve our Website
02:32
Understanding Positioning - The Theory
05:54
Working with the "fixed" Value
09:50
Creating a Fixed Navigation Bar
03:54
Using "position" to Add a Background Image
06:03
Understanding the Z-Index
06:59
Adding a Badge to our Package
08:00
Styling & Positioning our Badge with "absolute" and "relative"
03:10
Diving Deeper into Relative Positioning
04:03
Are you a "position" expert?
4 questions
Working with "overflow" and Relative Positioning
04:17
Introducing "sticky" Positioning
06:53
Understanding the Stacking Context
05:53
Time to Practice - Positioning
1 question
Wrap Up
04:12
Useful Resources & Links
00:06

Understanding Background Images & Images

17 lectures
Optional: Advanced Track Introduction
02:22
Module Introduction
01:05
Understanding "background-size"
08:41
Working with "background-position"
05:00
The "background" Shorthand - Theory
02:12
Applying "background" Origin, Clip & Attachment
05:51
Using the "background" Shorthand on our Project
02:19
Styling Images
07:33
Adding the Customers Page to our Website
03:19
Working on the Image Layout
08:07
Understanding Linear Gradients
06:16
Applying Radial Gradients
05:41
Stacking Multiple Backgrounds
04:50
Understanding Filters
04:00
Adding & Styling SVGs - The Basics
04:20
Wrap Up
02:14
Useful Resources & Links
00:02

Sizes & Units

20 lectures
Module Introduction
02:35
What's Wrong With Our Project Units?
05:21
Where Units Matter
06:02
An Overview of Available Sizes & Units
04:24
Rules to Remember: Fixed Positioning & "%"
04:15
Rules to Remember: Absolute Positioning & "%"
08:14
Rules to Remember: Relative / Static Positioning & "%"
08:53
Fixing the Height 100% Issue
12:02
Defining the Font Size in the Root Element
02:18
Using "min-width/height" & "max-width/height"
05:27
Working with "rem" & "em"
12:47
Adding "rem" to Additional Properties
08:17
Finishing "rem"
05:21
Understanding the Viewport Units "vw" &"vh"
09:47
Windows, Viewport Units & Scrollbars
00:44
Choosing the Right Unit
05:30
Using "auto" to Center Elements
01:42
Cleaning Up our Code
01:06
Wrap Up
04:23
Useful Resources & Links
00:04

Working with JavaScript & CSS

12 lectures
Module Introduction
01:16
Adding a Modal
04:13
Selecting & Manipulating Styles with JavaScript
10:34
Adding an Event Listener
06:05
Time to Practice - Adding Styles with JavaScript
1 question
Adding a Side Navigation Bar
07:14
Opening and Closing the Hamburger Menu
03:57
Manipulating Element Classes
06:40
Understanding Property Notations
03:12
Cleaning Up our Code
05:31
Wrap Up
01:15
Useful Resources & Links
00:01

Making our Website Responsive

20 lectures
Module Introduction
01:45
Why our Project Should Become Responsive
02:25
Understanding Hardware Pixels vs. Software Pixels
10:29
Comparing the Viewport Metatag (HTML) and Media Queries (CSS)
03:04
Understanding the "viewport" Metatag
07:22
Designing Websites "Mobile First"
01:54
Adding our First Media Queries
12:52
Things to Keep in Mind when Working with Media Queries
08:09
Finding the Right Breaking Points
03:45
Creating the Mobile First Design for our Plans
06:37
Making the Plans Responsive
08:35
Your Challenge
06:06
Time to Practice - Creating a Responsive Design with Media Queries
1 question
Working with Logical Operators
08:13
Improving the Customers Page
14:58
Improving the Packages Page
05:41
Cleaning Up the Navigation Bar
04:39
Positioning our Footer Correctly
10:09
Wrap Up
02:15
Useful Resources & Links
00:04

Adding & Styling Forms

12 lectures
Module Introduction
01:32
Adding the Unstyled Form
02:37
Page Initialization
06:35
Understanding Advanced Attribute Selectors
06:02
Working on the General Layout
07:15
Restyling the Form Elements
06:29
Styling the Checkbox
06:52
Providing Validation Feedback
08:50
Styling the Signup Button
03:42
Fixing a Broken Link
00:13
Wrap Up
01:29
Useful Resources & Links
00:02

Working with Text and Fonts

18 lectures
Module Introduction
01:20
Comparing Generic Families & Font Families
02:56
Understanding the Browser Settings
06:17
Using the Default Font Families
06:53
Understanding the "font-family" Syntax
06:18
Working with Locally Saved Fonts
03:50
Working with Google Fonts
10:28
Understanding Font Faces & "font-style"
06:49
Importing our Custom Fonts
09:03
Understanding Font Formats
05:41
Diving into Font Properties
03:10
Adding "letter-spacing"
04:43
Changing the Line Height
06:07
Applying "text-decoration" & "text-shadow"
05:51
Understanding the "font" Shorthand
08:39
Loading Performance & "font-display"
09:49
Wrap Up
03:47
Useful Resources & Links
00:03

Adding Flexbox to our Project

24 lectures
Optional: Expert Track Introduction
03:23
Module Introduction
01:31
How we Could Improve our Project
02:58
Understanding Flexbox
03:18
Creating a Flex Container
05:33
Using "flex-direction" & "flex-wrap"
05:35
Understanding the Importance of Main Axis & Cross Axis
07:27
Working with "align-items" & "justify-content"
10:59
And What About "align-content"?
02:40
Time for another quiz - are you a Flexbox expert already?
4 questions
Improving the Navigation Bar with Flexbox
12:02
Your Challenge - Working on the Mobile Navigation Bar
04:16
Improving the Footer
05:35
Flexbox and the Z-Index
00:21
Time to Practice - Flexbox
1 question
[OPTIONAL] Assignment Solution
08:32
Adding Flexbox to the Customers Page
03:16
Using the "order" Property for a Flex Item
06:07
Working with "align-self"
02:44
Understanding "flex-grow"
07:35
Applying "flex-shrink"
03:12
Comparing "flex-basis" vs "width" & "height"
08:35
Wrap Up
03:52
Useful Resources & Links
00:04

Using the CSS Grid

30 lectures
Module Introduction
01:14
What is the CSS Grid?
01:27
Getting Started
02:22
Turning a Container into a Grid
03:21
Defining Columns & Rows
05:49
Positioning Child Elements in a Grid
04:13
Using "element-sizing", "repeat" & "minmax"
06:45
Advanced Element Positioning
06:30
Working with Named Lines
03:53
Time to Practice - Grid
1 question
Understanding Column & Row Shorthands
02:54
Working with Gaps
02:33
Adding Named Template Areas
06:39
Time to Practice - Diving deeper into the CSS Grid
1 question
Creating Automatically Generated Grid Areas
07:10
Using the Grid on our Project
09:10
Working with "fit-content"
03:31
Positioning Grid Elements
03:35
Positioning the Entire Grid Content
03:17
Positioning Elements Individually
01:34
Understanding Responsive Grids
05:30
Applying Autoflow
06:39
Comparing the Explicit & Implicit Grid
02:31
Understanding "auto-fill" & "auto-fit"
03:33
Creating a Dense Grid
03:22
Styling the Project Form with Grid
09:45
Comparing Grid & Flexbox
02:27
Next Steps
01:31
Wrap Up
03:49
Useful Resources & Links
00:04

Transforming Elements with CSS Transforms

12 lectures
Module Introduction
00:31
Rotating Elements and setting transform-origin
03:45
Using Rotate and Translate
04:57
Working with "skew" and "scale"
06:18
Applying Transformation Shorthands
02:23
Rotating Elements in 3 Dimensions
04:19
Understanding the "perspective" Property
03:37
Moving Elements along the Z-Axis with "translateZ"
03:54
Rotating the Container with "transform style"
03:44
Flipping Elements & "backface-visibility"
01:15
Wrap Up
01:14
Useful Resources & Links
00:01

Transitions & Animations in CSS

14 lectures
Module Introduction
00:22
Understanding and Applying Transitions
07:23
CSS "transition" Property Deep Dive
00:33
Working with Timing Functions
02:50
Transitions & "display"
06:11
Time to Practice - CSS Transitions
1 question
Using CSS Animations
09:00
CSS "animation" Property Deep Dive
00:43
Adding Multiple Keyframes
03:22
Adding Animations to our Customers Page
03:59
Time to Practice - CSS Animations
1 question
Using JavaScript Animation Event Listeners
03:24
Wrap Up
01:35
Useful Resources & Links
00:02

Writing Future-Proof CSS Code

12 lectures
Module Introduction
00:34
CSS Modules & Their Working Groups
01:55
Using CSS Variables
07:31
Understanding & Using Vendor Prefixes
04:47
Which Prefixes Should You Use?
02:58
Detecting Browser Support with @supports
05:09
Polyfills
02:45
Eliminating Cross-Browser Inconsistencies
02:58
How to Name CSS Classes
04:52
Vanilla CSS vs Frameworks
08:36
Wrap Up
04:16
Useful Resources & Links
00:06

Introducing Sass (Syntactically Awesome Style Sheets)

19 lectures
Module Introduction
00:42
What is Sass & Scss?
03:30
Important: Installing Sass
00:11
Installing Sass
04:25
Things to be Improved with Sass
01:33
Nesting Selectors
06:35
Adding Nested Properties
01:27
Understanding Variables
03:05
Storing Lists & Maps in Variables
05:58
Built-In Functions
03:18
Time to Practice - Sass
1 question
Adding Simple Arithmetics
02:24
Adding Better Import and Partials
04:46
Improving Media Queries
02:24
Understanding Inheritance
03:33
Adding Mixins
06:45
Using the Ampersand Operator
02:57
Wrap Up
01:14
Useful Resources & Links
00:01

Course Roundup

2 lectures
Course Roundup
00:55
Bonus: More Content!
00:20

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Master 3D content creation tools in Blender. With 6 projects

Master 3D content creation tools in Blender. With 6 projects

80 VND
50.000 VND
The complete AutoCAD 2018-21 course

The complete AutoCAD 2018-21 course

120 VND
50.000 VND
CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

CSS - The Complete Guide 2024 (incl. Flexbox, Grid & Sass)

100 VND
50.000 VND
Khóa học Figma từ căn bản đến thực chiến

Khóa học Figma từ căn bản đến thực chiến

40 VND
50.000 VND
Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE

Responsive UX/UI Design in Figma 2h deep dive JULY 23 UPDATE

75 VND
50.000 VND
Complete Guide to Marvelous Designer

Complete Guide to Marvelous Designer

79 VND
50.000 VND
Maya Environment Creation for Film

Maya Environment Creation for Film

1.499.000 VND
50.000 VND
PCB Design using OrCAD/Allegro from Basics to Expert level

PCB Design using OrCAD/Allegro from Basics to Expert level

1.149.000 VND
50.000 VND
Make a horror survival game in Unity

Make a horror survival game in Unity

1.899.000 VND
50.000 VND
Complete Altair Hypermesh & Optistruct Course

Complete Altair Hypermesh & Optistruct Course

1.699.000 VND
50.000 VND
AutoCAD Complete Course

AutoCAD Complete Course

90 VND
50.000 VND
Revit Structure Beginners to Advanced (Contractor Services)

Revit Structure Beginners to Advanced (Contractor Services)

1.699.000 VND
50.000 VND
Thiết Kế Slide Powerpoint Trong Doanh Nghiệp (Masterclass)

Thiết Kế Slide Powerpoint Trong Doanh Nghiệp (Masterclass)

60 VND
50.000 VND
How to Self-Publish a Coloring Book

How to Self-Publish a Coloring Book

429.000 VND
50.000 VND
Adobe Photoshop CC – Essentials Training Course

Adobe Photoshop CC – Essentials Training Course

120 VND
50.000 VND
Hard Surface Modelling in Maya

Hard Surface Modelling in Maya

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi