Duration 2:18:34

Professional Website From Scratch | HTML & CSS For Beginners

by Traversy Media

115 627 watched

0

3.2 K

Published 16 Oct 2023

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

Category Science & Technology

Show more

Tags

Html

Css

Html css

Html & css

Build a website

Html css tutorial

Html css for beginners

Beginner html css

Website tutorial

Comments - 117

@

@pythonantole98927 months ago Brad is one of the few web dev teachers that has love for newbies and beginners. Kudos Brad! 122
@

@webdevluc7 months ago Great design and love the fact that it's vanilla CSS. These full project videos from design to code are the best to learn from. Thanks for sharing this for free Brad 15
@

@IRgEEK7 months ago Brad's content always great. Thanks Brad. I've never had a good eye or been great on the CSS side. This gives me a good refresher/practice for my Monday. Thanks 13
@

@nimira437 months ago Brad is the best coding teacher and instructor who is engaging, informative and whose approach is no nonsense and straight to the point. I'm a student of his courses on his website and Udemy and anyone who is serious about coding MUST check those out, in particular his own website. Thanks Brad for those courses and all the resources you provide here on YouTube. It's deeply appreciated. Respect. ... 3
@

@ahabion7 months ago Brad is "the beast" of online teachers. Appreciate the content so much and I hope that many more are learning and developing by his instruction. 1
@

@FallenAngelMMA7 months ago This is simple brilliant!
keep up the great work. We are expecting more content like this, beginner friendly tutorials!
Thanks a ton! 1
@

@codingshare99737 months ago I just wanna thank Traversy Media
I've been learning from Traversy Media since 2018 unti now
now I am a Senior Back End Dev in a company
thanks for your quality teaching 1
@

@VirendraBG4 months ago I was desperately waiting for this video from you.
Thanks a lot 🙏🏻
@

@Fuck__Russia7 months ago Brad produces such good content, most of the time, at no cost... Thank you Brad for all you do for us 😉👍 18
@

@wesdavis80114 months ago Perfect timing , i was looking for something like this! Thanks!
@

@Anarxhist07 months ago I've learnt so much from you through your amazing videos.
They are well detailed and explained.
Thanks a bunch 5
@

@ivan86616 months ago This has to be THE BEST Tutorial i have seen yet. Just the perfect Tempo to follow along and the Way you explain Things calmly is great. I understood how to use utility Classes and Variables so well. This just makes the whole Workflow so much easyer and better, then the Way i was doing it. It realy helps a lot for People like me who have done some Html Css Projects but just dont know the best Practices that u gonna need on a Job and how to go from a Figma File to a coded Website. This was great thanks so much! ...
@

@bonchan44047 months ago I love you brad . Im forever grateful to you . Because of you i got hired as a React Developer a year ago and now im in a senior position . Sorry if im not watching some of your videos anymore because i had enough and been stucked for tutorial hell for so long ! Thank you brad . Love from 🇵🇭 ... 3
@

@RockstahRolln7 months ago As always another terrific video from you Brad! Thank You Sir!
@

@user-il5lx4nd5elast month Hey Brad, thank you for this tutorial. The best I have followed so far!
@

@NetlifyApp7 months ago Such a great video! Always providing so much value!
@

@user-os1tf9iw9t7 months ago Hi there,
I just wanted to let you know that I genuinely enjoy your content. It's always a source of joy and knowledge for me. Keep up the fantastic work! 👍
@

@rajiohida71432 months ago When it comes to web design and development, Brad Traversy is the first to look up to. bravo Brad!
@

@paulthomas10527 months ago Hi Brad, another great demo - thanks so much !
@

@danielcastillo2897 months ago Thank You Brad. You are the greatest at explaining the reasoning behind what you do so I can understand the big picture. **BTW I think FAB is for the "brands" library of Font Awesome. Please keep making these videos. I purchased your latest JS and Bootstrap courses and loving it so far. ...
@

@alimansimov1929last month Just perfect, there are needed projects like this about the grid, flex, mobile-first design. Also it would be good about animation projects.
@

@alwaisy7 months ago Every year Brad launches new tutorial of HTML & CSS. It is getting advanced each year.
@

@codinglord17 months ago I love your work and i am able to come this far in my programming career because of your great videos......Thanks traversy media
@

@olebaky91826 months ago Thanks . I learnt many css tricks here. Great teacher. Trust this guy !!
@

@WilmanArambillete7 months ago you are amazing! Congratulations for this video. It is very educational and super well explained!
@

@zn44965 months ago Thank you Brad I really appreciate the content you produce, as I am new to Web dev
@

@rowan52297 months ago I love your content, effortless and easy to follow. ❤
@

@h0ust0nwehaveapr0blem2 days ago Thank you for the vid. It was quite interesting. I did not have to google anything (except for out of curiosity), everything was easy and joyful.
@

@tramparse847 months ago Thanks for the tutorial Brad. I just have a quick question regarding the decision to build it desktop first. Would you generally advise to build mobile-first, then refactor for tablet/desktop? 1
@

@mmelimahlobo76564 months ago It never ceases to amaze that he knows almost everything,frontend,backend,UI you name😅❤
@

@user-iw6by7zc1u7 months ago Thank you for making such great videos 6
@

@daggerv37 months ago Can you make a forum next? Love your videos. Thank you, Brad!
@

@adnanamin36667 months ago Not a noob but whenever I see any content from Brad, I just jump right in! ❤
@

@likandokayombo7 months ago Brad thank you for the quality content 👏
@

@killyoupigs5 months ago I love this guy... best teacher I've ever had 1
@

@otunmartins24147 months ago Great content. You could use absolute positioning for each of the individual images. But there’s also no need for that stress
@

@kasali3107 months ago Hey Brad!Thankyou for your great and helpfull videos! i have learned a lot from you.I would suggest you to have to repos (start and end). So that we fellow a long. 1
@

@muneeb79807 months ago For the iCodeThis challenges, is there any way to view other peoples code for the challenges for situations when I get stuck? Viewing submissions does not let me view the code. 1
@

@Gnajs7 months ago Thanks, Brad! Is this a newer version of the "Build a Responsive Website | HTML, CSS Grid, Flexbox & More" video tutorial from 3 years ago?
@

@yj41057 months ago hi Brad, I am a big fan of you. I watched your JS, Nodejs, Algorithm course. now I am looking forward your new reactjs18...
@

@tech_channel1107 months ago well explained brad
keep helping us
kindly make more videos on react advanced
and next js framework
@

@samsiddique47517 months ago Thanks for the video please upload more content related to frontend, by the way which font and theme you are using in vs code ? 1
@

@user-ru8hn9hb5c7 months ago I know CSS and HTML very well. Still going to watch this video. 1
@

@UnlistedJs4 months ago thank you alooot for your help sir i learn alot from you in this one video can you make more things about css please your the besttt love you
@

@kirangubbala84107 months ago Thank you Brad for ur way of explanation. Request to make java tutorials
@

@benmahdjoubharoun14677 months ago If you could walk us through a successful deployment of a mern stack, the app sometimes works all perfectly with all its features then it doesn't if not at all after deployment. Thanks Traversy!
@

@leenfares71315 months ago Hi Brad , thanks for your awesome videos I have learnt a lot . but I have question, Why didn't you use the measurements like width, height , font sizes from figma file , why aren't exactly the same ? thanks
@

@raphaeljaggerd35857 months ago I love your stuff. Just finished your php mvc course (Don't ask why i'm learning php). I was wondering if you could do more low-level tutorials, under the hood stuff. For example building tools and libraries instead of just using them. I think that would help people become better developers. ... 3
@

@tonybp7 months ago What VSC theme is being used? looks cool.
@

@Alexffire48086 months ago how would we know that if we will give max-width of 1100px then the navbar items will come in the center? it could be any pixels with number of width sir?
@

@SaberYTfarlight7 months ago Brad 🐐🐐, please make a 2023 react & Tailwind project! ❤
@

@Yahya_Umar7 months ago I enjoyed your videos! Do you have any plans to create a tutorial on building an inventory management system using Next.js? Your tutorials are fantastic, and I'd love to see one on this topic! I also want to include some as well as utilize free APIs for data integration. ... 2
@

@lastspoil55474 months ago Why did you pick Light 300, Regular 400, SemiBold 600, and Bold 700 for the font Poppins. What's the logic behind picking styles for fonts? 1
@

@Yoursyoutuber124 months ago We did not add the lg and xl class in the HTML so how are we adding them in the CSS.
@

@Saba-cn8gp7 months ago I have taken your courses, and yes, you are an excellent teacher, you helped me as well. Your free content is also very good, but I noticed that you don't use BEM. Can you say why?
@

@daggerv37 months ago When Brad says this is not a JS tutorial but you pick up some handy tips anyway.
@

@infinateU7 months ago This was a nice 2 hr clip. Big thanks.
Is it possible to play out the integration of a fruit vendor into web3 from(already has 2 ORACLE's & play to earn concept) Cardano Network, imagine all sensors/hardware is present. 2 parts? Then Explore dynamics?
1- Start with setting up Network
2- Create Smart Contract between atleast 2 participants?
* Zoom app (nutritional/fasting guide) + fruit vendor app. ...
@

@user-jr4nc4ig5r5 months ago Im having trouble with the my websites logo image... its coming up as broken and im not sure why... can anyone help?
@

@abzone73067 months ago Thanks sir, is it possible to download the final code?
@

@RidwanSetiawanOfficial5 months ago anyone know which vs code theme he used ?
@

@08Carl7 months ago What are the best challenging websites to learn web dev ?
@

@mrarbaaz6587 months ago Hey I can't download figma file can anyone help me
@

@samuelagbo29477 months ago I enjoy your object oriented php mvc course on udemy
@

@brandondexter53084 months ago I was disapointed to find that the link to the Figma assets times out.
@

@vectoralphaAI7 months ago Hey Brad will you or anyone else in your channel be doing a brand new and updated Intro to Django course that focuses on and uses Django 4.2+ anytime soon? I was looking to learn Django from you cause you are so good, but i see the last Django course is over 4 years old and uses Django 2.x. Anyway was just wondering if you were or not. Thanks for all the hard work you do. ... 1
@

@andrewshorts11987 months ago He may not be pregnant, but he always delivers.
@

@jpodumakwuiwu58132 months ago who else is having issue with the figma file. i cant seem to view it
@

@GodsMan500last month My bookmark
@

@alimansimov1929last month
@

@Abu-fp8mglast month Bro your channel is coming in chat gpt