Practice making high-quality mockups a reality in the browser with five stunning projects created by a UI expert and coded by you.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
View Figma designs
Use ems and rems
Structure HTML
Flexbox
CSS Grid
Responsive development
Animated navigations
Mobile-first development
Use SVGs
Media queries
Forms
Advanced backgrounds
Burger menus
Logos
Icons
Dropdowns
Like functionality
Complex grid layouts
01. Welcome & First Project - Simple Card
- Welcome & Course Introduction
- Using Figma
- Saving the Figma Prototypes Locally
- Ems and Rems
- Simple Card – Challenge Intro
- Simple Card – HTML
- Simple Card – CSS
- Simple Card – Finishing Up
- Deploying to Netlify
02. Simple Landing Page
- Challenge Intro
- CSS: Initial Styles
- CSS: Finishing Mobile Styles
- CSS: Desktop Styles
- A Note About Accessibility
03. Data Analytics Dashboard
- Data Analytics Dashboard – Challenge Intro
- HTML for Our Dashboard
- CSS: Initial Styles
- CSS: Typography, Buttons, and More
- CSS: Styling the Nav Bar
- JS: Adding Functionality to the Nav Bar
- CSS: Desktop Styles
04. Car Sales Site
- Car Sales Site – Challenge Intro
- Initial HTML
- Finishing the HTML
- CSS: Initial Mobile Styles
- CSS: Finishing Up the Mobile Styles
- CSS: Styling the Dropdown Menu
- CSS/JS: Wiring Up the Options Panel
- Adding the Like Functionality
- CSS: Desktop Styles
05. Drone Event Landing Page
- Drone Page – Challenge Intro
- Initial HTML
- Continuing the HTML
- Finishing Up the HTML
- Starting the CSS
- CSS: Hero Section
- CSS: Animating the Drone
- CSS: Mobile Navigation
- CSS: Styling the Quote Section
- Styling the Photo Gallery
- Finishing the Mobile CSS
- CSS: Starting the Responsive CSS
- CSS: Desktop Navigation Styling
- Finishing the Project
- Congratulations & Closing Thoughts
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
View Figma designs
Use ems and rems
Structure HTML
Flexbox
CSS Grid
Responsive development
Animated navigations
Mobile-first development
Use SVGs
Media queries
Forms
Advanced backgrounds
Burger menus
Logos
Icons
Dropdowns
Like functionality
Complex grid layouts
COURSE OUTLINE
01. Welcome & First Project - Simple Card
- Welcome & Course Introduction
- Using Figma
- Saving the Figma Prototypes Locally
- Ems and Rems
- Simple Card – Challenge Intro
- Simple Card – HTML
- Simple Card – CSS
- Simple Card – Finishing Up
- Deploying to Netlify
02. Simple Landing Page
- Challenge Intro
- CSS: Initial Styles
- CSS: Finishing Mobile Styles
- CSS: Desktop Styles
- A Note About Accessibility
03. Data Analytics Dashboard
- Data Analytics Dashboard – Challenge Intro
- HTML for Our Dashboard
- CSS: Initial Styles
- CSS: Typography, Buttons, and More
- CSS: Styling the Nav Bar
- JS: Adding Functionality to the Nav Bar
- CSS: Desktop Styles
04. Car Sales Site
- Car Sales Site – Challenge Intro
- Initial HTML
- Finishing the HTML
- CSS: Initial Mobile Styles
- CSS: Finishing Up the Mobile Styles
- CSS: Styling the Dropdown Menu
- CSS/JS: Wiring Up the Options Panel
- Adding the Like Functionality
- CSS: Desktop Styles
05. Drone Event Landing Page
- Drone Page – Challenge Intro
- Initial HTML
- Continuing the HTML
- Finishing Up the HTML
- Starting the CSS
- CSS: Hero Section
- CSS: Animating the Drone
- CSS: Mobile Navigation
- CSS: Styling the Quote Section
- Styling the Photo Gallery
- Finishing the Mobile CSS
- CSS: Starting the Responsive CSS
- CSS: Desktop Navigation Styling
- Finishing the Project
- Congratulations & Closing Thoughts
