- Become an Expert in CSS and CSS3 With Styling, Grid, Flexbox, Animations, Transitions, and more; No experience needed!
- Free tutorial
- Rating: 4.1 out of 54.1 (1,195 ratings)
- 31,718 students
- 6hr 17min of on-demand video
- Created by VideoLab by Jad Khalili
- English
What you’ll learn
- You will learn how to apply CSS to any type of website or project.
- You will learn about basic styling and formatting in CSS.
- You will learn about CSS Theory and some of the concepts that power CSS.
- You will learn about layout in CSS and ways of manipulating it (Flexbox, Grid, etc.)
- You will learn about animations and transitions in CSS.
Requirements
- Must have basic knowledge of HTML (Avaliable to learn in my free HTML course)
- Will to learn!
Description
Do you want to learn how to style websites? Do you want to learn the industry-standard techniques that web developers use? Do you want to be able to take your website to the next level? If you are asking one of these questions, then CSS is the perfect skill for you to learn.
CSS, or Cascading Style Sheet, is responsible for the styling of a website. It can completely change its look and feel, taking a website from the amateur level, to an industry website that can be shown off to clients.
In this course, we cover CSS from the ground up; starting with basics skills, such as coloring and text, to highly advanced skills, custom animations. Overall, we cover over 10 major topics of CSS, including:
- Coloring
- Formatting
- Text
- Layout
- Grid
- Flexbox
- Animations
- Transitions
- And many more!
Even with all of these topics, you do not need any experience in CSS! This course is packed with content-both interactive and informational- to help you achieve your goals. Each section contains an in-depth quiz with 10 questions covering each unit, allowing you to diagnose yourself and your skill. The videos are filmed in an interactive way to help you ‘learn while doing’.
On top of that, at the end of the course, you get to style a website from scratch using all of the techniques you learned!
With 6+ hours of video and everything mentioned above, you are bound to become a CSS wizard by the end of the course, regardless of your previous knowledge of the topic. The only tool you need is a basic understanding of HTML (Which can be learned through my free course!)
So, are you ready to start upgrading your web development career?
Who this course is for:
- Anyone looking to progress their front-end web development skills
- Those looking to open opportunities or create a basis in the development industry.
- Anyone who wants to revisit or relearn CSS concepts.
Show less
Course content
10 sections • 60 lectures • 6h 17m total lengthCollapse all sections
Introduction5 lectures • 15min
- Course Achievements & Results02:35
- Introduction to Course08:45
- Course Prerequisites (MUST READ)00:15
- Downloading Necessary Software01:08
- Where to Find Project Files01:55
CSS Introduction3 lectures • 8min
- What is CSS?02:42
- Creating & Linking a CSS Stylesheet03:27
- How to Test a Stylesheet01:31
- Chapter Quiz3 questions
Selectors & Properties8 lectures • 55min
- What is a Selector?03:43
- Classes & ID’s in HTML05:56
- Specificity & When to use Selectors07:18
- Pseudoselectors08:43
- Advanced Selectors11:30
- Attribute Selectors10:05
- What are Properties?03:20
- The CSS General Rule04:36
- Chapter Quiz10 questions
Coloring & Formatting7 lectures • 46min
- Types of Colors07:14
- Coloring Text07:35
- Background Colors04:24
- Images/URL’s in CSS05:32
- Other Background Properties06:27
- Opacity/Transparency03:15
- Gradients11:53
- Chapter Quiz10 questions
Fonts & Text Manipulation6 lectures • 45min
- Introduction to Types of Units11:43
- Text Manipulation07:56
- Font Size, Bolding & Style06:37
- Font Families06:33
- Including External Fonts w/ Google Fonts06:04
- Using External Fonts05:52
- Chapter Quiz10 questions
Layout5 lectures • 39min
- The CSS Box Model04:12
- Changing Content Size05:47
- CSS Borders06:42
- Margin & Padding09:24
- Float & Display Types12:28
- Chapter Quiz10 questions
CSS Flexbox8 lectures • 40min
- What is Flexbox?03:49
- Creating a Flex Container02:32
- Flex Direction & Wrap04:15
- Content Alignment06:17
- Flex Item Order04:45
- Shrink, Grow, & Basis10:30
- The ‘flex’ Property03:15
- Item Alignment04:53
- Chapter Quiz10 questions
CSS Grid8 lectures • 36min
- Grid vs Flexbox02:59
- Creating a Grid02:14
- Template Columns & Rows07:39
- Justify & Align Grid06:56
- Note about Next Lecture00:07
- Row & Column Gaps05:01
- Column & Row Lines07:31
- Grid Area03:50
- Chapter Quiz10 questions
Animations & Transitions6 lectures • 50min
- The Transition Property13:25
- Note about New Property Prefixes00:09
- Transformation Functions14:19
- Creating Animations w/ Keyframes08:03
- Adding an Animation02:51
- Animation Properties11:24
- Chapter Quiz10 questions
Final Exam & Challenge4 lectures • 44min
- CSS Final Exam30 questions
- Website Transformation Challenge03:31
- Website Transformation: SOLUTION35:09
- What to Learn Next04:42
- Bonus Lecture: Continue your Learning00:19
