Back to courses

Complete Web & Mobile Designer in 2023: UI/UX, Figma + more

Go from complete beginner to getting hired as a Designer in 2023! This is the only design bootcamp you need to learn and master web design, mobile design, Figma, UI & UX, and HTML + CSS.

Last updated: March 2023

Course overview

We guarantee you that this is the best online design course and design bootcamp that you can find if you want to go from an absolute beginner with zero design knowledge to getting hired as a Web Designer making $100,000+.

What you'll learn

  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023
  • Immediate access to 100+ assets and premium design templates that you can keep and use to customize all your future projects
  • Learn Figma from scratch for all types of design needs and then how to convert your designs into a live HTML and CSS website
  • Master both Web design and Mobile design principles and how to go from sketching to fully-fledged high fidelity designs that will wow customers
  • Learn design best practices and expert tips & tricks that would take you years to learn working full-time
  • Learn UI/UX best practices using the latest trends in the industry

This Zero To Mastery design course is very hands-on. This course focuses on efficiently getting you from being a complete beginner to a point where you can get hired or win freelance contracts.

You will learn:

  • The principles and fundamentals of graphic design
  • The latest best practices in Web Design and Mobile Design
  • User Interface and User Experience Design (UI/UX) fundamentals and best practices
  • How to create your own beautiful, professional designs (not just watch us!) using the most in-demand, modern design tools and best practices for 2023
  • The skills to convert your designs into actual websites or apps using HTML and CSS

Along the way, you are going to go through the full design process and design an actual product for a company that you will be able to add to your portfolio.

We cover everything you need to know so that the next time you are in charge of designing a product, you will have a step-by-step outline and guide to follow.

Bonus: You’ll also get instant access to 100+ assets and premium design templates that you can keep and use to customize all your future projects.

Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, Uber, Facebook, Shopify + other top tech companies (seriously, google it. Check reddit. Look on Youtube).

They are also working as top freelancers getting paid while working remotely around the world.

This can be you.

By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Active. Thriving. Supportive. Helpful. Friendly. Motivating. Essential.

These are just a few of the words students use to describe the ZTM Discord community.

Most importantly, you will learning from industry experts that have actual real-world experience working for companies in Toronto And Silicon Valley.

Here are the many topics you'll learn in this Design Bootcamp

We told you this is the best, most comprehensive design course online. So let's prove it by taking a look at everything you're going to learn.

0. Web & Mobile Design Principles & Design vs Web Development

1. GETTING STARTED – Sketching, Inspiration + Structure

  1. Sketching

    • Intro to sketching
    • Sketching UX flows
    • Sketching tips
  2. Inspiration

    • How to stay inspired
    • How to find design inspiration online
  3. User Flows

    • What are user flows?
    • The do’s and don’ts
    • Speeding up your workflow with components
    • Creating your own user flows: Registration (Part 1)
    • Creating your own user flows: Search (Part 2)
    • Creating your own user flows: Checkout (Part 3)
  4. Sitemaps

    • An intro to sitemaps
    • Creating a basic sitemap
    • What you should be doing before you start
    • Creating a sitemap (Part 1)
    • Creating a sitemap (Part 2)
    • Tips for getting started

2. EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

  1. Wireframes

    • What is a wireframe?
    • How do I create a wireframe?
    • Speeding up your workflow in Figma
    • Creating a home page
    • Creating a product page
    • Creating a checkout page
  2. Prototyping using Figma

    • Prototyping basics in Figma: Device + Triggers
    • Prototyping basics in Figma: Actions
    • Prototyping basics in Figma: Overflow
    • Prototyping basics in Figma: Presentation + Collaboration
    • Linking together a quick user flow in Figma
    • Working on small interactions with Figma
  3. Getting feedback on your designs

    • Why is feedback so important?
    • How to get constructive design feedback

3. VISUAL DESIGN – Design Theory & Accessibility

  1. Grids + Spacing

    • Spacing and Grid Basics
    • Responsive Grids in Figma
    • Creating your own grid in Figma
    • The rules of the grid
  2. Typography

    • Typography basics (Part 1)
    • Matching typefaces to an era
    • Typography basics (Part 2)
    • Selecting the right typeface
    • Typography basics (Part 3)
    • Picking a typeface
    • Does your typeface suit your scenario?
    • Expanding an existing type system
    • Choosing typefaces in Google Fonts
    • Narrowing down your typography choices
    • Creating a type system in Figma
  3. Color

    • Color schemes
    • Important questions to ask before picking colors
    • Helpful tips for creating color palettes
    • Creating a monochromatic color palette
    • Applying your simple color palette
    • Expanding a strict color palette
    • Creating your own color palette
  4. Forms + UI Elements

    • What are UI Elements?
    • Best Practices Part 1: Forms
    • Best Practices Part 2: Inputs (Part 1)
    • Best Practices Part 2: Inputs (Part 2)
    • Best Practices Part 2: Inputs (Part 3)
    • Best Practices Part 2: Inputs (Part 4)
    • Best Practices Part 3: Buttons
    • How to create components in Figma
    • Using atomic elements in Figma
    • Using Instances in Figma
    • Editing instances to create new components
    • Using constraints to create responsive components
    • Creating a registration form in Figma
  5. Imagery + Iconography

    • Resources and techniques to create great visual assets
    • Working with photos in Figma (Part 1)
    • Working with photos in Figma (Part 2)
    • Working with illustrations in Figma
    • Using Figma plugins to find Icons quickly
    • Creating your very own custom icons
  6. Accessibility

    • What is accessibility?
    • Assistive technologies
    • Visual patterns for accessibility (Part 1)
    • Tools to make your design accessible
    • Visual patterns for accessibility (Part 2)

4. DESIGN EXPLORATION – Application Design & Design Systems

  1. Design Patterns

    • What are design patterns?
    • Why are design patterns valuable?
    • How to apply design patterns
    • Analyzing design patterns together
    • Dissecting and choosing design patterns together
  2. Mobile Design

    • Mobile design best practices (Part 1)
    • Mobile design best practices (Part 2)
  3. Applying Visual Design

    • Design Fidelity
    • Style Exploration (Navigation)
    • Style Exploration (Cards)
    • Style Exploration (Interests)
    • Style Exploration (New Elements)
  4. Motion Design Basics (you'll also get access to Daniel's full Motion Design course)

    • The importance of motion
    • The purpose of motion
    • Intro to Figma Smart Animate
    • Showcasing the power of Figma Smart Animate
  5. Microinteractions

    • What are microinteractions?
    • Why are microinteractions so important?
    • Creating your own microinteractions (Part 1)
    • Creating your own microinteractions (Part 2)
    • Using Figmotion (Part 1)
    • Using Figmotion (Part 2)

5. PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

  1. Design Systems

    • What is a design system?
    • Foundation (Color)
    • Foundation (Grids and Spacing)
    • Foundation (Typography)
    • Foundation (Iconography)
    • Components (Buttons)
    • Components (Inputs)
    • Components (Cards)
    • Recipes (Card Layouts)
    • Recipes (Search)
    • Recipes (Orders)
  2. Final Compositions

    • Using our design system (Search)
    • Using our design system (Product Description)
    • Using our design system (Cart)
    • Using our design system (Checkout)
  3. Working with Developers

    • Why is handoff so important?
    • Collaboration in Figma

6. FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)

7. HTML + HTML5

8. CSS + CSS3 - CSS basics, CSS Grid, Flexbox, CSS Animations

9. PUTTING YOUR WEBSITE ONLINE

What matters most is that by the end of this course, you will have learned everything you need to become a Designer that can get hired.

What's the bottom line?

Design is a valuable skill that doesn’t get outdated easily like many technical skills. Trends change, but the skills and fundamentals you learn in this course will take you many years into the future.

This course is not about making you just watch along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial. No!

This course will push you and challenge you to go from an absolute beginner to someone that is a top designer that can get hired by world-class companies and allow you to charge a lot of money for your time 💪!

And you have nothing to lose. You can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. The sooner, the better. So start learning design today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Start learning now
Expand Overview

What you'll design & build

The best way you learn is by doing. Not just watching endless tutorials. That's why a key part of this course is the real-world projects that you'll get to design & build. Plus they'll look great on your portfolio.

Photo Inspiration App

Photo Inspiration App

Test your Figma Smart Animate skills. You'll jump right into Figma to create some smooth transitions in your very own photo app.

Bouncy

Bouncy

Dig into one of Figma's greatest plugins, Figmotion to create your very own bouncing notification animation. You'll learn how to animate step-by-step and export a gif for your prototypes.

Habitual Web

Habitual Web

Design a beautiful landing page on the web for your newly created Habitual App!

Habitual Mobile

Habitual Mobile

Learn the fundamentals of UI and UX design while you embark on a design journey from beginning to end. Everything from color theory to prototyping, you'll learn what it takes to design a beautiful app from scratch using modern design principles and trends.

start learning now

Don't just take our word for it

Our courses and community have helped 1,000s of Zero To Mastery students go from zero to getting hired to levelling up their skills and advancing their careers to new heights.

Dian Rizki Yudhistira

ZTM really takes online learning to the next level! This course provided lots of details about UI/UX and Product Design. I love how the lectures were separated into 2 learning pathways and the way instructors delivered the content.

Dian Rizki Yudhistira

The instructor shares some real gems of UX knowledge. It's apparent Daniel is very experienced in the field. If your job entails crafting UX, you will benefit from this course! I have more confidence that I can make informed UX decisions thanks to ZTM.

Matthew Zito

This course is so elaborate and helps you build strong foundation. Daniel goes through every little detail so that you can learn all you need to know about Figma & Web Design. If you're a beginner or looking to improve, you should give this course a try!

Fatima Magsi

Really fun and detailed course. I've always wanted to learn from experienced designers about design principles, work flow, how to work with clients, turn a concept into final prototype, create delightful UX, etc. This course provides all the answers!

Annie Leonhart

Course curriculum

To make sure this course is a good fit for you, you can start learning web and mobile design for free right now by clicking any of the PREVIEW links below.

Introduction

12 lectures

Complete Web & Mobile Design: Zero to Mastery•3:16

PREVIEW

Course Outline•7:00

PREVIEW

Exercise: Meet Your Classmates and Instructor

START

How-to's: Speed up videos, Downloading videos, Subtitles

START

Meeting The Client•4:13

PREVIEW

The 2 Paths•1:55

PREVIEW

Exercise: Building Your Logo•1:28

PREVIEW

Cheatsheet

PREVIEW

Design Resources

PREVIEW

Designer vs Developer•6:53

PREVIEW

Skills To Be A Top Designer•7:06

PREVIEW

Unlimited Updates

START

Sketching

8 lectures

Getting Ready For This Section

PREVIEW

Introduction To Sketching•3:27

PREVIEW

The Sketching Process•7:05

PREVIEW

Sketching User Flows•8:05

PREVIEW

Sketching User Flows 2•5:49

PREVIEW

Sketching User Flows 3•9:49

PREVIEW

Sketching User Flows 4•10:02

PREVIEW

Sketching Tips•8:01

PREVIEW

Inspiration

2 lectures

How To Stay Inspired•7:59

PREVIEW

How To Find Inspiration•13:47

PREVIEW

Figma Basics

28 lectures

Resources

PREVIEW

Introduction•2:49

PREVIEW

Plans and Signup•2:32

PREVIEW

Where to use Figma•1:22

PREVIEW

Figma UI (Structure)•2:45

PREVIEW

Figma UI (Files)•2:42

PREVIEW

Figma UI (Toolbar)•6:57

PREVIEW

Figma UI (Left Sidebar)•7:33

PREVIEW

Figma UI (Right Sidebar)•6:28

PREVIEW

Shapes and Tools (Frames)•3:13

PREVIEW

Shapes and Tools (Groups)•2:44

PREVIEW

Shapes and Tools (Basic Shapes and Boolean Operations)•6:25

PREVIEW

Designing in Figma (Images)•5:51

PREVIEW

Designing in Figma (Getting Started With Text)•6:01

PREVIEW

Designing in Figma (Constraints)•4:35

PREVIEW

Designing in Figma (Using Auto Layout)•5:02

PREVIEW

Designing in Figma (Auto Layout Properties)•7:58

PREVIEW

Resources and Collaboration (Community Files)•3:09

PREVIEW

Resources and Collaboration (Community Plugins)•5:57

PREVIEW

Resources and Collaboration (Sharing and Comments)•5:00

PREVIEW

Project (What We Are Going To Build)•1:24

PREVIEW

Project (Creating a Logo Using Basic Shapes)•5:03

PREVIEW

Project (Auto Layout Buttons)•5:05

PREVIEW

Project (Creating a Responsive Navigation)•9:06

PREVIEW

Project (Responsive Text)•5:32

PREVIEW

Project (Imagery and Gradients)•5:34

PREVIEW

Project (Strokes and Shapes)•4:40

PREVIEW

Project (Layout and Responsiveness)•7:50

PREVIEW

User Flows

7 lectures

Getting Ready For This Section

START

User Flows Explained•5:11

START

The DOs and DON'Ts•2:27

START

What We Are Going To Build•2:06

START

Reusable User Flow Assets•6:54

START

User Flows in Figma (Onboarding)•10:58

START

User Flows in Figma (Search)•8:54

START

Sitemaps

10 lectures

Getting Ready For This Section

START

Introduction To Sitemaps•1:44

START

Creating A Basic Sitemap•4:16

START

What We Are Going To Learn•1:18

START

Reusable Sitemap Assets•9:32

START

Figma Check In (Basic Components and Variants)•8:51

START

Sitemaps in Figma (The Top Layer)•5:53

START

Sitemaps in Figma (Digging Deeper)•4:39

START

Sitemaps in Figma (Digging Deeper Cont.)•7:43

START

Tips for Creating Great Sitemaps•3:06

START

Wireframes

10 lectures

Getting Ready For This Section

START

What Is A Wireframe?•6:51

START

How To Create A Wireframe•6:43

START

What We Are Going To Learn•1:58

START

Figma Check In (Basic Button Component)•3:56

START

Figma Check In (Variants)•5:34

START

How To Use Our Wireframe Components•5:32

START

Wireframes (Home)•13:02

START

Wireframes (Cart)•7:04

START

Wireframes (Profile)•5:47

START

Prototyping

13 lectures

Getting Ready For This Section

START

What We Are Going to Learn•1:19

START

Figma Check In (Prototyping in Figma - Intro)•1:56

START

Prototyping in Figma (Flows and Starting Points)•5:05

START

Prototyping in Figma (Connections)•2:51

START

Prototyping in Figma (Interactions)•2:57

START

Prototyping in Figma (Animations)•3:30

START

Prototyping in Figma (Prototype Settings)•3:12

START

Prototyping in Figma (Prototype Presentation)•5:29

START

Project (Navigation)•3:40

START

Project (Removing an Item from Your Wishlist)•6:16

START

Project (Finding a Product)•6:13

START

Exercise: Imposter Syndrome•2:56

START

Feedback

2 lectures

Why Is Feedback Important?•4:18

START

Constructive Feedback•6:48

START

Spacing and Grids

10 lectures

Getting Ready For This Section

START

What Is A Grid?•4:03

START

Grid Basics•5:56

PREVIEW

What We Are Going to Learn•0:51

START

Figma Check In (Fixed and Fluid Grids)•4:32

START

Figma Check In (Breakpoints)•5:22

START

Figma Check In (Grid Style)•4:28

START

Project (Mobile Layout Grid)•6:56

START

Project (Desktop Layout Grids)•4:51

START

Simple Rules to Follow•6:32

START

Typography

15 lectures

Getting Ready For This Section

START

Serifs•3:21

START

Sans Serifs•3:41

START

Display & Mono•4:38

START

Picking Typefaces•1:39

START

What We Are Going to Learn•0:48

START

Figma Check In (Text Properties)•7:35

START

Exercise (Elevating a Brand)•9:55

START

Exercise (Typeface Scenarios)•7:13

START

Exercise (Google Fonts)•4:37

START

Project (Typeface Exploration)•5:46

START

Project (Pairing Font Families)•6:35

START

Project (Headings, Body and Labels)•6:35

START

Project (Typeface System)•4:29

START

Figma Check In (Text Styles)•7:12

START

Color

12 lectures

Getting Ready For This Section

START

Color Schemes•3:53

START

Important Questions To Ask•2:44

START

Creating Color Palettes•2:55

PREVIEW

What We Are Going to Learn•0:58

START

Figma Check In (Paints)•4:59

START

Exercise (Expanding Upon a Strict Color Palette)•10:36

START

Exercise (Creating a Color Palette)•3:59

START

Figma Check In (Color Styles)•6:04

START

Exercise (Using Color Styles)•8:20

START

Project (Primary and Neutrals)•6:36

START

Project (Accents)•6:31

START

Imagery and Iconography

13 lectures

Getting Ready For This Section

START

Visual Assets Introduction•3:37

START

What We Are Going to Learn•0:59

START

Figma Check In (Image Plugins)•3:15

START

Figma Check In (Image Styles)•4:20

START

Figma Check In (Masks)•2:39

START

Exercise (Image Exploration)•9:07

START

Exercise (Text and Imagery Working Together)•8:33

START

Figma Check In (Illustration Plugins)•3:49

START

New Exercise (Adding Illustrations to Your Designs)•8:05

START

Figma Check In (Icon Plugins)•2:20

START

Figma Check In (Pen Tool)•5:05

START

Exercise (Custom Icons with the Pen Tool)•11:05

START

Forms and UI Elements

16 lectures

Getting Ready For This Section

START

What Are Forms + UI Elements?•4:19

START

What We Are Going to Learn•1:53

START

Best Practices (Forms)•7:08

START

Best Practices (Basic and Advanced Inputs)•5:24

START

Best Practices (Inputs)•11:30

START

Best Practices (Buttons)•3:52

START

Figma Check In (Component Properties)•4:10

START

Properties vs. Variants•2:13

START

Figma Check In (Button Component Properties)•5:18

START

Figma Check In (Button Variants)•5:20

START

Figma Check In (Combining Components)•6:25

START

Figma Check In (Form Component Possibilities)•6:51

START

Project (Registration Flow Part 1)•10:38

START

Project (Registration Flow Part 2)•8:24

START

Project (Registration Flow Part 3)•6:42

START

Accessibility

6 lectures

Getting Ready For This Section

START

What Is Accessibility?•2:30

START

Assistive Technologies•2:51

START

Visual Patterns For Accessibility•4:30

START

Tools To Make Your Design Accessible•6:24

START

Visual Patterns For Accessibility Part 2•6:42

START

Design Patterns

5 lectures

What Are Design Patterns•6:00

START

Why Are Design Patterns Valuable•2:24

START

How To Apply Design Patterns•4:29

START

Analyzing Design Patterns•5:39

START

Dissecting And Choosing Design Patterns•6:13

START

Mobile Design

2 lectures

Mobile Design Best Practices Part 1•6:58

START

Mobile Design Best Practices Part 2•11:10

START

Visual Style and Exploration

10 lectures

Getting Ready For This Section

START

What We Are Going to Learn•1:47

START

Design Fidelity•4:57

START

Visual Exploration (Navigation)•13:20

START

Visual Exploration (Buttons)•8:56

START

Figma Check In (Effect Styles)•2:42

START

Visual Exploration (Product Cards)•11:10

START

Visual Exploration (Text Cards)•8:51

START

Screen Design (Home)•13:04

START

Screen Design (Product Page)•7:35

START

Motion and Microinteractions

16 lectures

Getting Ready For This Section

START

The Importance Of Motion•7:03

START

What Is A Microinteraction?•10:23

START

Why Microinteractions Are Important•9:14

START

What We Are Going To Learn•1:41

START

Figma Check In (Intro to Smart Animate)•2:07

START

Figma Check In (Smart Animate Properties)•3:50

START

Exercise (Parallax)•5:21

START

Exercise (New Message)•5:13

START

Exercise (Overlays)•5:17

START

Figma Check In (Interactive Components)•4:43

START

Exercise (Interactive Buttons)•7:54

START

Project (Parallax Welcome Screen)•5:19

START

Project (Drag Onboarding)•7:19

START

Project (Cart Overlay)•6:52

START

Project (Button Microinteraction)•12:56

START

Design Systems

12 lectures

Getting Ready For This Section

START

What We Are Going to Learn•1:07

START

Foundational Styles and Components vs. Product Specific Components•3:44

START

Building Fidelity and Organizing Potential Components and Styles•3:28

START

Foundational Styles and Components•6:23

START

Components (Buttons)•7:18

START

Components (Cards)•8:41

START

Components (Headers)•6:32

START

Components (Inputs)•6:08

START

Components (List Items)•4:42

START

Components (Navigation)•8:27

START

Components (Misc. Elements)•5:41

START

Execution

15 lectures

Getting Ready For This Section

START

What We Are Going to Learn•1:43

START

Working Towards Our Final Designs•6:18

START

Execution (Introduction Screen)•6:00

START

Execution (Onboarding Screens)•10:08

START

Execution (Registration Screens)•16:02

START

Execution (Home Screen)•10:02

START

Execution (Wishlist Screens)•8:14

START

Execution (Profile Screen)•10:02

START

Execution (Cart and Checkout)•14:50

START

Prototypes (Registration)•9:47

START

Prototypes (Adding to Cart)•6:06

START

Prototypes (Checkout)•5:10

START

Prototypes (Lottie Files Plugin)•4:18

START

Prototypes (Search and Filters)•7:52

START

Working With A Client Revisited

8 lectures

Getting Ready For This Section

START

The Product Alignment Canvas•5:02

START

Project Goals•8:30

START

Target Users•8:39

START

User Journey Map•10:22

START

Risky Assumptions•4:32

START

What is a User Story Map?•5:56

START

Creating a User Story Map•7:40

START

Where To Go From Here?

8 lectures

Is Bruno Happy?•1:11

START

Project Handoff•3:41

START

Next Step: Project Handoff

START

Thank You!•1:17

START

Review This Course!

START

Learning Guideline

START

LinkedIn Endorsements

START

Become An Alumni

START

Web Portfolio

4 lectures

Getting Ready For This Section

START

How To Export And Place Designs•9:51

START

Content For Your Portfolio•10:57

START

Where To Host Your Web Portfolio•4:58

START

From Figma To Website: Building Our Landing Page

4 lectures

Quick Note: Upcoming Videos

START

Initial Setup - Figma Handoff•12:57

START

Build UI - Adding Image Assets•9:24

START

Build UI - Styling Image Assets•9:17

START

Bonus: How The Internet Works

10 lectures

Quick Note: Upcoming Videos

START

Browsing the Web•6:00

START

Breaking Google•2:59

START

Exercise: Break Google Yourself

START

The Internet Backbone•5:29

START

Traceroute•2:24

START

Exercise: Running traceroute

START

DEVELOPER FUNDAMENTALS: I•3:08

START

What Does A Developer Do?•1:39

START

Web Developer Monthly

START

Bonus: History Of The Web

6 lectures

WWW vs Internet•3:30

START

HTML, CSS, Javascript•5:04

START

DEVELOPER FUNDAMENTALS: II•2:55

START

Developer History•3:08

START

Exercise: Adding CSS and JavaScript to Tim's website

START

Optional Resource: More About the History of the Web

START

Bonus: HTML 5

21 lectures

Build Your First Website•7:48

START

Resources: Your Text Editor

START

DEVELOPER FUNDAMENTALS: III•3:31

START

Quick Note About w3schools

START

How To Ask Questions

START

HTML Tags•8:39

START

HTML Tags 2•1:49

START

Self Closing HTML Tags•5:34

START

Anchor Tag•4:52

START

Q&A: index.html•2:05

START

Q&A: Relative vs Absolute Path•3:46

START

HTML Forms•10:57

START

HTML Forms 2•3:09

START

Submitting A Form•8:18

START

HTML Tags 3•3:51

START

HTML vs HTML 5•6:38

START

Copy A Website•2:26

START

HTML Challenge•1:07

START

HTML Lesson Files

START

Exercise: HTML Quiz

START

Optional Exercise: More HTML

START

Bonus: CSS 3

23 lectures

Exercise Files: Code-Along

START

Your First CSS•13:48

START

CSS Properties•10:31

START

CSS Selectors•16:28

START

Optional Exercise: CSS Selectors

START

Text and Font•7:37

START

Images In CSS•4:15

START

Box Model•5:06

START

px vs em vs rem•3:03

START

Optional: PX, EM, REM, %, VW, and VH

START

Exercise: CSS Quiz

START

Critical Render Path•4:04

START

Exercise File: Code-Along Images

START

Flexbox•8:29

START

Optional Exercise: Flexbox Froggy

START

CSS 3•8:24

START

Optional Exercise: Mastering Transitions and Transforms

START

Responsive UI•1:40

START

Image Gallery Files

START

Exercise: Robot Animation•0:55

START

Exercise: Robot Animation Starter Files

START

Solution: Robot Animation

START

Optional Exercise: CSS

START

Bonus: Bootstrap, Templates, And Building Your Startup Landing Page

23 lectures

Evolving Technology•4:47

START

Bootstrap Introduction•3:59

START

Bootstrap•8:51

START

Bootstrap 5 Update•4:18

START

Exercise: Changing Versions

START

Bootstrap Grid•5:18

START

Free Resources For Our Project

START

Exercise: Startup Landing Page•0:54

START

Exercise: Startup Landing Page 2•3:58

START

Exercise: Startup Landing Page 3•8:23

START

Quick Note: The hr tag

START

Exercise: Startup Landing Page 4•8:25

START

Exercise: Startup Landing Page 5•11:33

START

Quick Note: Mailchimp

START

Exercise: Adding Email Subscribe Form With MailChimp•9:21

START

Quick Note: Upcoming Videos

START

Exercise: Putting Your Website Online•5:48

START

Exercise: Putting Your Website Online 2•2:50

START

Quick Note: Upcoming Video

START

DEVELOPER FUNDAMENTALS: IV•7:15

START

Using Templates•3:18

START

Resources for FREE Templates

START

Startup Landing Pages by Students

START

Bonus: CSS Grid + CSS Layout

17 lectures

Section Overview•1:50

START

CSS Grid vs Flexbox vs Bootstrap•4:40

START

Quick Note: grid-gap to gap

START

CSS Grid 1•7:55

START

CSS Grid 2•4:14

START

CSS Grid 3•6:25

START

CSS Grid 4•7:07

START

CSS Grid 5•1:56

START

Optional Exercise: CSS Grid

START

Exercise: CSS Layout•3:37

START

Solution: Navigation Bar•8:37

START

Solution: Navigation Bar 2•4:22

START

Solution: Cover•4:41

START

Solution: Project Grid + Footer•8:54

START

Quick Note: Upcoming Video

START

Solution: Prettify•6:59

START

The Truth About CSS•3:51

START

Meet your instructors

Your instructors aren’t just experts with years of real-world professional experience. They have been in your shoes. They make learning fun. They make complex topics feel simple. They will motivate you. They will push you. And they go above and beyond to help you succeed.

Andrei Neagoie

Hi, I'm Andrei Neagoie!

Andrei, lead instructor of Zero To Mastery Academy, has taught 1,000,000+ students worldwide how to code and get hired. ZTM grads work for world-class companies like Apple, Google, Amazon, Tesla, IBM, Facebook, Shopify and many more.

SEE MY BIO & COURSES

Andrei Neagoie

Senior Software Developer

Daniel Schifano

Hi, I'm Daniel Schifano!

Daniel was most recently the Head of Product Design at Up & Up and is the Design Instructor here at Zero To Mastery. He has over 10 years of experience across many design disciplines (UX, UI, visual design, user research, product strategy and more).

SEE MY BIO & COURSES

Daniel Schifano

Head of Product Design

Frequently asked questions

Are there any prerequisites for this course?

  • Absolutely no prior knowledge needed. We teach you and show you everything from scratch… Zero to Mastery!
  • Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!

Who is this course for?

  • You are a complete beginner and want to become a successful designer or freelancer
  • You want to get hired as a Web Designer, Mobile Designer, UI/UX Designer
  • You are a designer who is looking to learn modern design skills and tools and charge more for your work
  • You are a Web Developer or Mobile Developer and want to improve your design skills or learn from scratch so that you can add another valuable skill to your toolbelt
  • You want to learn about the latest CSS3 features like Flexbox, CSS Grid, CSS Variables, and HTML5

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Can I use the course projects in my portfolio?

Yes, you’d be crazy not to in our slightly biased opinion! All projects are downloadable and ready to use the minute you join.

Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview.

You know what that means? Job offer!

Can I download the videos?

Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun and accessible. Whether that’s on your commute, on a flight or just when you have limited access to good WiFi.

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Take the next step and invest in a better you

Choose your currency:
$ USD • US Dollar
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now
Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$279 / year
$23 / month
You're committed to getting hired and starting a career in tech
Start Learning Now
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, workshops, and career paths
Invite to private Discord with 400,000+ members
Access to private Linkedin networking group
Custom ZTM course completion certificates
Download all lessons for offline learning
Unlimited, priority access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.