Have you mastered the basics of HTML and CSS? If so, you're probably wondering what comes next. The idea of starting a new website project from scratch can be intimidating, especially when you find yourself spending hours wrestling with baffling CSS bugs instead of writing code. How do you even begin?
Moving Beyond the Basics
Imagine a scenario where...
- You aren't staring at an empty VS Code editor because you know how to start and which files to create.
- You can transform a design from Figma into a website that looks fantastic on all devices.
- You use Sass capabilities: modules, mixins, variables, and much more.
- You have a clear understanding of when to use flexbox versus grid.
- You organize SCSS files in a way that avoids "spaghetti code," making them understandable months later.
- Most importantly, you comprehend how CSS works, including its quirky and sometimes frustrating features.
Sounds great, but how do you get there?
Your Mentor: Jess Chan
Hello! My name is Jess Chan, and in this course, I will guide you on how a professional developer thinks. Rather than offering disjointed lessons, you'll be led step-by-step through the entire process—from a Figma layout to a finished site with HTML, SCSS, and JavaScript. Most importantly, I'll explain why certain decisions are made, akin to having a senior developer by your side, commenting on the entire process.
My goal is for you to gain confidence in CSS and feel at ease tackling any project, even if tasks are new to you.
Course Levels and Content
BASIC Level (22 hours)
This level includes 17 hours of introductory material and 5 hours of practice, ideal for beginners.
BASIC Topics:
- Semantic HTML tags
- Code organization: BEM, Sass partials, mixins, variables, utility classes
- Understanding the CSS cascade
- Document flow: inline, block, inline-block, and their features
- Flexbox and grid layouts
- CSS units: px, em, rem, %, vw, ch
- Responsive typography using clamp()
- CSS variables (custom properties)
- Responsive images with srcset and DPR
- Working with SVG and inline-SVG
- CSS animations: hover effects, transitions
- Backgrounds with linear-gradient()
- Math operations in CSS with calc()
PREMIUM Level (4 hours)
This level advances by building more complex site sections.
PREMIUM Topics:
- Animated underlines and backgrounds for hover states
- Advanced grid areas and named grid lines
- Using SVG forms
- Utilizing absolute positioning
- Creating alternating blocks with nth-child
- Pseudo-elements ::before and ::after
- Advanced form styling
ULTIMATE Level (6 hours)
This final block introduces advanced techniques and JavaScript.
ULTIMATE Topics:
- Building a responsive burger menu with animation and accessibility
- Managing overlay contexts and z-index
- Creating color themes using CSS variables
- Crafting a block grid using grid, auto-fit, and minmax()
- Overlapping elements with grid and absolute positioning
- Handling images with object-fit and object-position
- Effects with mix-blend-mode
- Introduction to Node, npm, and package.json
- Compiling Sass using Vite and JS modules
By the end of the course, you will have created a real responsive website based on a Figma layout, gaining experience comparable to the work of a professional front-end developer.
