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:
https://traversymedia.com
Timestamps:
0:00 – Intro
1:00 – Project Info & Demo
6:57 – Exporting Images From Figma
8:42 – Downloading The Image Assets
9:43 – Create Files
10:18 – Base HTML & Links
15:55 – Navbar HTML
19:20 – Base CSS
24:15 – Navbar CSS
29:25 – Custom Properties/Variables
31:00 – Buttons & Utility Classes
37:00 – Hero HTML
40:10 – Text Utility Classes
43:50 – Hero CSS
47:16 – Video Section
51:46 – Background Utility Classes
53:11 – Testimonials Section
56:00 – CSS Grid & Cards
1:00:25 – Finish Testimonials CSS
1:01:20 – Pricing HTML
1:06:33 – Pricing CSS
1:12:20 – FAQ HTML
1:17:12 – FAQ CSS
1:25:15 – FAQ JavaScript
1:37:55 – Footer HTML
1:43:30 – Footer CSS
1:47:05 – Mobile Menu HTML
1:49:29 – Mobile Menu CSS
1:58:50 – Mobile Menu JS
2:00:45 – Responsive Hero
2:05:40 – Remaining Responsiveness
2:12:26 – Deploy To Netlify
source
