Professional Website From Scratch | HTML & CSS For Beginners

Ғылым және технология

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:
shismqklzntzxworibfn.supabase...
Final Code:
github.com/bradtraversy/saas-...
iCodeThis: Use the promo code BRAD to get 10% off of the Pro plan
icodethis.com/?ref=traversy
Check out my courses:
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

Пікірлер: 116

  • @pythonantole9892
    @pythonantole98927 ай бұрын

    Brad is one of the few web dev teachers that has love for newbies and beginners. Kudos Brad!

  • @TraversyMedia

    @TraversyMedia

    7 ай бұрын

    These tutorials are their introduction to this whole world. I try as best as I can to explain things in a simple way and teach real-life skills. Seasoned devs can follow any tutorial, docs, articles but beginners need things presented in a certain way imo. Also, I learn so many different areas that I am always a beginner in something. So I know how it feels and understand how to convey things in that way.

  • @AvidAfrican

    @AvidAfrican

    7 ай бұрын

    With Him i build my first and second HTML and CSS based website....

  • @WadieGamer

    @WadieGamer

    7 ай бұрын

    Straight facts

  • @borathossain

    @borathossain

    6 ай бұрын

    Google Bard

  • @webdevluc
    @webdevluc7 ай бұрын

    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

  • @IRgEEK
    @IRgEEK7 ай бұрын

    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

  • @nimira43
    @nimira437 ай бұрын

    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 for those courses and all the resources you provide here on KZread. It's deeply appreciated. Respect.

  • @FallenAngelMMA
    @FallenAngelMMA6 ай бұрын

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

  • @ahabion
    @ahabion7 ай бұрын

    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.

  • @VirendraBG
    @VirendraBG4 ай бұрын

    I was desperately waiting for this video from you. Thanks a lot 🙏🏻

  • @wesdavis8011
    @wesdavis80113 ай бұрын

    Perfect timing , i was looking for something like this! Thanks!

  • @codingshare9973
    @codingshare99737 ай бұрын

    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

  • @Anarxhist0
    @Anarxhist07 ай бұрын

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

  • @ivan8661
    @ivan86616 ай бұрын

    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!

  • @RockstahRolln
    @RockstahRolln6 ай бұрын

    As always another terrific video from you Brad! Thank You Sir!

  • @NetlifyApp
    @NetlifyApp7 ай бұрын

    Such a great video! Always providing so much value!

  • @paulthomas1052
    @paulthomas10527 ай бұрын

    Hi Brad, another great demo - thanks so much !

  • @bonchan4404
    @bonchan44046 ай бұрын

    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 🇵🇭

  • @awakenwithoutcoffee

    @awakenwithoutcoffee

    6 ай бұрын

    awesome. How long did you study for and what study path did you take ?

  • @Fuck__Russia
    @Fuck__Russia7 ай бұрын

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

  • @TraversyMedia

    @TraversyMedia

    7 ай бұрын

    Np, thanks for watching!

  • @alwaisy
    @alwaisy7 ай бұрын

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

  • @user-il5lx4nd5e
    @user-il5lx4nd5e29 күн бұрын

    Hey Brad, thank you for this tutorial. The best I have followed so far!

  • @user-os1tf9iw9t
    @user-os1tf9iw9t7 ай бұрын

    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! 👍

  • @danielcastillo289
    @danielcastillo2897 ай бұрын

    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.

  • @rajiohida7143
    @rajiohida71432 ай бұрын

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

  • @tramparse84
    @tramparse846 ай бұрын

    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?

  • @rowan5229
    @rowan52297 ай бұрын

    I love your content, effortless and easy to follow. ❤

  • @olebaky9182
    @olebaky91825 ай бұрын

    Thanks . I learnt many css tricks here. Great teacher. Trust this guy !!

  • @daggerv3
    @daggerv37 ай бұрын

    Can you make a forum next? Love your videos. Thank you, Brad!

  • @codinglord1
    @codinglord17 ай бұрын

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

  • @samsiddique4751
    @samsiddique47517 ай бұрын

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

  • @WilmanArambillete
    @WilmanArambillete7 ай бұрын

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

  • @zn4496
    @zn44964 ай бұрын

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

  • @user-iw6by7zc1u
    @user-iw6by7zc1u7 ай бұрын

    Thank you for making such great videos

  • @alimansimov1929
    @alimansimov192926 күн бұрын

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

  • @DmitrySafarov
    @DmitrySafarov2 ай бұрын

    Thank you, Brad!. It is very useful!

  • @outpost31737
    @outpost317377 ай бұрын

    Thanks Brad. Very helpful indeed.

  • @likandokayombo
    @likandokayombo7 ай бұрын

    Brad thank you for the quality content 👏

  • @Gnajs
    @Gnajs7 ай бұрын

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

  • @mmelimahlobo7656
    @mmelimahlobo76564 ай бұрын

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

  • @muneeb7980
    @muneeb79807 ай бұрын

    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.

  • @adnanamin3666
    @adnanamin36667 ай бұрын

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

  • @tech_channel110
    @tech_channel1107 ай бұрын

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

  • @otunmartins2414
    @otunmartins24146 ай бұрын

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

  • @kasali310
    @kasali3107 ай бұрын

    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.

  • @okiroroobrutheanagho8779
    @okiroroobrutheanagho87797 ай бұрын

    Brad is a great teacher.

  • @yj4105
    @yj41057 ай бұрын

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

  • @ashutosh_tiwari
    @ashutosh_tiwari5 ай бұрын

    Brad is the Dev God🔥

  • @user-ru8hn9hb5c
    @user-ru8hn9hb5c7 ай бұрын

    I know CSS and HTML very well. Still going to watch this video.

  • @leenfares7131
    @leenfares71314 ай бұрын

    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

  • @user-me1lz1bq3i
    @user-me1lz1bq3i12 күн бұрын

    This is what I have been looking for

  • @f.t.5859
    @f.t.58595 ай бұрын

    Thanks Brad, gratitude.

  • @killyoupigs
    @killyoupigs5 ай бұрын

    I love this guy... best teacher I've ever had

  • @kirangubbala8410
    @kirangubbala84107 ай бұрын

    Thank you Brad for ur way of explanation. Request to make java tutorials

  • @keldawott7406
    @keldawott7406Ай бұрын

    This was a great tutorial :3

  • @tonybp
    @tonybp6 ай бұрын

    What VSC theme is being used? looks cool.

  • @Mike-df4ze
    @Mike-df4ze7 ай бұрын

    Good job, congrats.

  • @akshitgaming4808
    @akshitgaming48085 ай бұрын

    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?

  • @UnlistedJs
    @UnlistedJs3 ай бұрын

    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

  • @daggerv3
    @daggerv37 ай бұрын

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

  • @benmahdjoubharoun1467
    @benmahdjoubharoun14677 ай бұрын

    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!

  • @melvinnuslahdtuah269
    @melvinnuslahdtuah2697 ай бұрын

    Long live Brad ❤

  • @SaberYTfarlight
    @SaberYTfarlight7 ай бұрын

    Brad 🐐🐐, please make a 2023 react & Tailwind project! ❤

  • @Saba-cn8gp
    @Saba-cn8gp7 ай бұрын

    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?

  • @MilanSisara-id8vv
    @MilanSisara-id8vv7 ай бұрын

    Lots of love from India

  • @user-vn2ot8pd9r
    @user-vn2ot8pd9r7 ай бұрын

    You are awesome mister traversy ❤🤗

  • @hassaneoutouaya
    @hassaneoutouaya6 ай бұрын

    Thank you so much!

  • @joaquindelrio2806
    @joaquindelrio2806Ай бұрын

    Thank you!

  • @lastspoil5547
    @lastspoil55473 ай бұрын

    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?

  • @raphaeljaggerd3585
    @raphaeljaggerd35857 ай бұрын

    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.

  • @TraversyMedia

    @TraversyMedia

    7 ай бұрын

    Nothing wrong with PHP, in fact I am working on a PHP From Scratch course and a Laravel course now 😉

  • @raphaeljaggerd3585

    @raphaeljaggerd3585

    7 ай бұрын

    Can't wait@@TraversyMedia

  • @nimira43

    @nimira43

    7 ай бұрын

    Can't wait for the Laravel course😊

  • @sujalkhatiwada2267

    @sujalkhatiwada2267

    7 ай бұрын

    @@TraversyMedia, waiting for this, when will the course be released? any prediction? and what project is there using PHP? and also using Laravel?

  • @Yoursyoutuber12
    @Yoursyoutuber123 ай бұрын

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

  • @adrianozuna2149
    @adrianozuna21497 ай бұрын

    TRAVERSY MEDIAAAA LET'S GO

  • @michaelkachiwalajr6381
    @michaelkachiwalajr63817 ай бұрын

    THANK YOU WATCHING FROM MALAWI

  • @lifeisbeautifu1
    @lifeisbeautifu17 ай бұрын

    Amazing!

  • @ghofranedarragi5601
    @ghofranedarragi56016 ай бұрын

    thanks a lot for this video

  • @n4mlss
    @n4mlss7 ай бұрын

    Many thanks 🍻

  • @sanjaybatak3549
    @sanjaybatak35497 ай бұрын

    Thanks Brad

  • @debprasadkafle564
    @debprasadkafle5645 ай бұрын

    I like this very much.👍👍

  • @abzone7306
    @abzone73066 ай бұрын

    Thanks sir, is it possible to download the final code?

  • @Yahya_Umar
    @Yahya_Umar7 ай бұрын

    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.

  • @TraversyMedia

    @TraversyMedia

    7 ай бұрын

    Not an inventory management system exactly, but after I finish up my PHP courses, I am revamping my Next.js course. KZread projects will follow.

  • @Yahya_Umar

    @Yahya_Umar

    7 ай бұрын

    @@TraversyMedia That sounds like a fantastic approach! Mastering both PHP and Next.js is a powerful combination. Your future KZread projects are sure to benefit from this diverse skill set. Best of luck with your learning journey and the exciting content you'll create!

  • @nicanorarce157
    @nicanorarce1572 ай бұрын

    i love you brad.

  • @ShahzadAhmed-kt5zg
    @ShahzadAhmed-kt5zg6 ай бұрын

    You are Awesome love you sir

  • @infinateU
    @infinateU7 ай бұрын

    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.

  • @scoppyeah
    @scoppyeah7 ай бұрын

    Phenomenal

  • @howtopassthat
    @howtopassthat6 ай бұрын

    what about backend with C# or JAVA

  • @danieligbinidu6880
    @danieligbinidu68807 ай бұрын

    Wow 😲😲

  • @user-jr4nc4ig5r
    @user-jr4nc4ig5r5 ай бұрын

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

  • @08Carl
    @08Carl7 ай бұрын

    What are the best challenging websites to learn web dev ?

  • @RidwanSetiawanOfficial
    @RidwanSetiawanOfficial5 ай бұрын

    anyone know which vs code theme he used ?

  • @brandondexter5308
    @brandondexter53083 ай бұрын

    I was disapointed to find that the link to the Figma assets times out.

  • @samuelagbo2947
    @samuelagbo29477 ай бұрын

    I enjoy your object oriented php mvc course on udemy

  • @mrarbaaz658
    @mrarbaaz6586 ай бұрын

    Hey I can't download figma file can anyone help me

  • @andrewshorts1198
    @andrewshorts11987 ай бұрын

    He may not be pregnant, but he always delivers.

  • @vectoralphaAI
    @vectoralphaAI7 ай бұрын

    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.

  • @aidennymes6335
    @aidennymes63357 ай бұрын

    Dashboard next ?

  • @jpodumakwuiwu5813
    @jpodumakwuiwu5813Ай бұрын

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

  • @GodsMan500
    @GodsMan50022 күн бұрын

    My bookmark 6:53

  • @Abu-fp8mg
    @Abu-fp8mgАй бұрын

    Bro your channel is coming in chat gpt

  • @sergeisurin2963
    @sergeisurin29636 ай бұрын

    👍🙏

  • @alimansimov1929
    @alimansimov192920 күн бұрын

    2:10:34

  • @andryrakotonarivo3183
    @andryrakotonarivo31837 ай бұрын

    Hello

  • @webdeveloper4742
    @webdeveloper47426 ай бұрын

    USA got to be the best. No.

  • @user-yu7lr1nt1e
    @user-yu7lr1nt1e7 ай бұрын

    nie!

  • @abenjamin13
    @abenjamin137 ай бұрын

    Absolutely FANTASTIC Brad thank you ❤. I and the rest of the community appreciate you 🫵.

Келесі