CF

Advanced CSS for Web Design

5h 9m 38s
English
Paid

Advanced CSS for Web Design helps you move past basic styles. You learn how to shape layouts, add life to pages, and work with tools that modern sites use each day.

What You Learn

You explore visual effects that you can build with pure CSS. You see how each feature works in clear steps. You then use these tools to build small projects.

Modern Visual Tools

You work with gradients, blend modes, and clipping paths. These let you create smooth color shifts, layered images, and custom shapes without extra files.

CSS Houdini Basics

You learn how Houdini gives you deeper control of the browser. You see how to draw shapes, handle custom styles, and create effects that feel native.

How This Helps You

This course shows you how to move from simple layouts to richer designs. You learn patterns you can use on real client sites. You also gain skills that help you read and write complex CSS with confidence.

Additional

All the resources for this course are available in the course handbook on Notion, under - Module 16: Advanced CSS Techniques

https://sweet-tellurium-e16.notion.site/Advanced-CSS-Handbook-5944ab3053984cc7847f1a4e87538d74

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 31 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 31 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (31)
#Lesson TitleDurationAccess
1
Introduction Demo
03:45
2
Bruno
01:33
3
Introduction
09:27
4
CSS Pseudo Selectors
11:24
5
AI Image Generation
06:28
6
Gradients and Patterns
10:15
7
Clipping and Masking
12:44
8
Blend Modes and Filters
16:50
9
Cursor Types and Custom Cursors
09:41
10
CSS Houdini
10:25
11
Developer Portfolio V1 - Preview
03:47
12
Developer Portfolio V1 - Mockups
09:39
13
Developer Portfolio V1 - AI Generation
07:02
14
Developer Portfolio V1 - Home - Part 1
16:26
15
Developer Portfolio V1 - Home - Part 2
08:52
16
Developer Portfolio V1 - About
17:05
17
Developer Portfolio V1 - Projects
17:28
18
Developer Portfolio V1 - Contact - Part 1
13:02
19
Developer Portfolio V1 - Contact - Part 2
12:35
20
Developer Portfolio V1 - Navigation
05:18
21
Developer Portfolio - Responsive Design - Part 1
11:07
22
Developer Portfolio - Responsive Design - Part 2
11:03
23
Developer Portfolio - Responsive Design - Part 3
07:39
24
Let's Keep Learning Together!
01:19
25
Introduction
05:02
26
Mac / Linux Device Setup
05:35
27
Windows Device Setup
06:58
28
VSCode Setup & Template
19:27
29
VSCode Extensions
09:11
30
DevTools
13:57
31
GitHub
14:34
Unlock unlimited learning

Get instant access to all 30 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites do I need before taking this course?
Before enrolling, you should have a basic understanding of CSS and web design principles. Familiarity with HTML is also recommended as the course builds on foundational CSS skills to explore more advanced techniques such as gradients, blend modes, and CSS Houdini.
What types of projects will I build during this course?
Throughout the course, you will work on building a Developer Portfolio. This includes designing the Home, About, Projects, and Contact sections, as well as integrating responsive design. Additionally, you'll use tools like gradients, clipping paths, and custom cursors to enhance the visual appeal of the portfolio.
Who is the target audience for this course?
This course is designed for web developers who have mastered basic CSS and wish to advance their skills. It is ideal for individuals looking to enhance their ability to create visually rich and complex web designs using modern CSS techniques.
How does the depth of this course compare to similar offerings?
This course provides a deep dive into modern visual tools and CSS Houdini, offering a unique opportunity to gain deeper control over browser rendering and create effects that feel native. It goes beyond basic styling to equip you with skills necessary for complex CSS tasks.
What specific tools or platforms will I learn to use?
The course covers a variety of modern CSS tools such as gradients, blend modes, clipping paths, and CSS Houdini. You will also learn to set up development environments using VSCode and DevTools, enhancing your ability to design and debug complex CSS.
What topics are not covered in this course?
The course focuses specifically on advanced CSS techniques and does not cover other web development areas such as JavaScript, backend programming, or HTML beyond its role in structuring content for CSS styling.
How can the skills learned in this course benefit my career?
Skills gained from this course can significantly enhance your ability to design visually compelling websites. Understanding advanced CSS will make you a more competitive candidate for web development roles and enable you to tackle complex projects confidently, benefiting careers in web design and front-end development.