Requirements
No prior experience is required. We teach you and show you everything from scratch – from zero to mastery.
Get ready to fall in love with design and start turning your ideas into beautiful, professional projects.
Description
This hands-on curriculum takes you from the fundamentals of working as a designer to creating polished, professional designs and converting them into functional websites or apps using HTML and CSS.
You’ll learn the complete design process, from sketching and wireframing to visual design, prototyping, design systems, accessibility, and development.
Topics Covered
00. Web & Mobile Design Principles + Design vs. Web Development
01. Getting Started – Sketching, Inspiration & Structure
1. Sketching
Introduction to Sketching
The Sketching Process
Sketching User Flows
Sketching Tips
2. Inspiration
How to Stay Inspired
How to Find Inspiration Online
3. Figma Basics
Plans and Sign-Up
Where to Use Figma
Figma UI: Structure, Files, Toolbar, and Sidebars
Shapes and Tools: Frames, Groups, and Boolean Operations
Designing: Images, Text, Constraints, and Auto Layout
Resources: Community Files, Plugins, and Sharing
Projects: Logo, Auto Layout Buttons, Navigation, Responsive Text, Imagery, and Layout
4. User Flows
Getting Ready
DOs and DON’Ts
User Flows in Figma: Onboarding and Search
5. Sitemaps
Introduction and Basics
Reusable Sitemap Assets
Components and Variants
Tips for Creating Great Sitemaps
02. Explore and Iterate – Wireframes, Prototyping & Feedback
1. Wireframes
What Is a Wireframe?
How to Create a Wireframe
Components and Variants
Wireframes: Home, Cart, and Profile
2. Prototyping
Prototyping Flows, Interactions, and Animations
Projects: Navigation, Wishlist, and Product Search
3. Feedback
Importance of Feedback
Giving and Receiving Constructive Criticism
03. Visual Design – Design Theory + Accessibility
1. Spacing and Grids
Grid Basics
Mobile and Desktop Grids
Simple Rules for Effective Spacing
2. Typography
Serif, Sans-Serif, and Display Fonts
Choosing and Pairing Fonts
Projects: Typeface Systems, Font Families, and Styles
3. Color
Color Schemes and Palettes
Paints and Styles
Projects: Primary Colors and Accent Colors
4. Imagery and Iconography
Image Plugins and Masks
Text and Imagery
Illustrations and Icons
Pen Tool and Custom Icons
5. Forms + UI Elements
Best Practices: Forms, Inputs, and Buttons
Button Variants and Component Properties
Project: Registration Flow
6. Accessibility
Assistive Technologies
Accessibility Tools and Visual Patterns
04. Design Exploration – Application Design + Design Systems
1. Design Patterns
What They Are and Why They Matter
Applying and Choosing Design Patterns
2. Mobile Design
Mobile Design Best Practices
3. Visual Style and Exploration
Design Fidelity
Exploration: Navigation, Buttons, Product Cards, and Text
4. Motion and Microinteractions
Smart Animate and Interactive Components
Exercises: Parallax, New Message, Overlays, and Drag Onboarding
Projects: Microinteractions and Cart Overlay
05. Putting It All Together – Design System + Hi-Fi Prototypes
1. Design Systems
Foundational Styles vs. Product-Specific Styles
Buttons, Cards, Headers, Inputs, Navigation, and More
2. Execution
Final Designs: Intro, Onboarding, Registration, Home, Wishlist, Profile, Cart, and Checkout
Prototypes: Registration, Adding to Cart, Checkout, Search, and Filters
06. From Figma to Website
Converting Figma Designs into a Live Website Using HTML and CSS
07. HTML + HTML5
08. CSS + CSS3
CSS Basics, Grid, Flexbox, and Animations
09. Putting Your Website Online
This course starts with the fundamentals of graphic and interface design and takes you all the way to creating complete UX/UI products and websites.
You’ll learn a practical, end-to-end design process that can be applied to real-world projects, helping you develop the skills needed to work professionally as a designer, freelancer, or developer with strong design capabilities.
This Course Is for You If:
You’re a complete beginner wanting to become a designer or freelancer
You’re a designer looking to improve your skills and charge more for your work
You’re a developer looking to strengthen your design skills
Who This Course Is For:
Anyone wanting to start a Web/Mobile Design business or work as a designer at a company
Web/Mobile Developers wanting to add professional design skills to their toolkit
Anyone aiming to become a UI/UX Designer or learn modern HTML5/CSS3 features such as Flexbox, Grid, and Variables