Summary
Keywords
Full Transcript
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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
