We will create a professional-looking website from scratch using HTML, CSS and a bit of JavaScript. This project is beginner-friendly, but it's also a fun project for more experienced developers.
Figma File:
https://shismqklzntzxworibfn.supabase.co/storage/v1/object/public/pro-challenges/landing.fig
Final Code:
https://github.com/bradtraversy/saas-landing-page
iCodeThis: Use the promo code BRAD to get 10% off of the Pro plan
https://icodethis.com/?ref=traversy
Check out my courses:
Timestamps:
- Intro
- Project Info & Demo
- Exporting Images From Figma
- Downloading The Image Assets
- Create Files
- Base HTML & Links
- Navbar HTML
- Base CSS
- Navbar CSS
- Custom Properties/Variables
- Buttons & Utility Classes
- Hero HTML
- Text Utility Classes
- Hero CSS
- Video Section
- Background Utility Classes
- Testimonials Section
- CSS Grid & Cards
- Finish Testimonials CSS
- Pricing HTML
- Pricing CSS
- FAQ HTML
- FAQ CSS
- FAQ JavaScript
- Footer HTML
- Footer CSS
- Mobile Menu HTML
- Mobile Menu CSS
- Mobile Menu JS
- Responsive Hero
- Remaining Responsiveness
- Deploy To Netlify
1:00:21
12:08
52:41
3:23:11