Build a Starbucks Landing Page Clone

In this video, we will build the homepage of Starbucks.com from scratch with HTML, CSS and a bit of JavaScript
Code:
github.com/bradtraversy/starb...
👇 Website & Courses:
traversymedia.com
freelancemastery.dev
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
1:27 - Navbar HTML
7:05 - Base & Navbar CSS
18:41 - Button Styles
23:33 - Box A & Utility Classes
35:10 - Other Boxes & Grids
50:13 - Footer & Social Icons
55:13 - Responsive Grid Styles
58:05 - Hamburger Icon & Transition
1:03:00 - Nav Toggle JavaScript
1:07:50 - Mobile Menu

[@josephwong2832]

great to see people still building with pure css / minimal JS

[@hectorserrano9314]

I doubt he'd simply use html and CSS for an actual project if this was a paid one or freelance. He's doing it for the purpose of just recreating the landing page with it but an actual project he'd likely use Next JS (SSR).

[@andrenations1]

@@hectorserrano9314 you right, but why 90 percent of the job out there says that you must to have a lot of knowledge in html css and javascript?

[@hectorserrano9314]

@@andrenations1 Because knowing the fundamentals is crucial. Yes, you may use a pre-processor or something like css-in-js but it all boils down to know the behind-the-scenes. The libraries will help with speed and make it less verbose but won't tell you where you're running into an specificity problem, a flex-container wrongly applied, something overflowing or something like that. You still need the fundamentals down.

[@scrappleful]

@@hectorserrano9314 Is it bad for a jr only know Css and Sass?

[@hectorserrano9314]

@@scrappleful I'd say you need to learn Javascript too and to be job-ready need to have dove at least a bit in a framework or library.

[@abmj5856]

Hi Brad, I just want to say thank you. Your courses are helping me provide for my family. Thank you! May god bless you and your family

[@TraversyMedia]

You are very welcome

[@futhi5075]

Have you found a job in coding due to these videos?

[@abmj5856]

@@futhi5075 A Job No. Lots of freelancing clients Yes.

[@mrekullitenumeriketekurani3555]

@@abmj5856 brother,hope you are having a great time.. im a complete beginner,i have learned html,and now learned css a bit too.... Can you give me any advice to learn faster,and to get freelancing clients?? How many months do i have to learn css and javascript before trying to get a freelance client??? thanks

[@abmj5856]

@@mrekullitenumeriketekurani3555 Hi Brother, Thanks! Well I would say as soon as you can build a good looking website than that's the time that you should be freelancing don't wait to learn everything and than start your freelance journey instead learn on your journey. Also you don't need to know everything. A way to learn faster as by building projects for imaginary businesses in my opinion that helped me a lot. I hope this helped answer what you wanted to know 😁

[@borgestheborg]

I love these mock-up tutorials. Really helps with keeping up my CSS and JS skills.

[@LoveEachDay94]

i learned more practical knowledge from you in 3 minutes than anyone else on the entire internet. when i get the xtra money im buying ur courses

[@sathiranipun]

Highly recommended for anyone interested in improving their CSS and JS skills. Thank you, @Traversy Media, for your clear and concise content.

[@Bella_Will]

Thank you Brad, you made me to love css and you always know how to easy my stress and expectations.

[@maripychavez5035]

This came in the exact moment to practice my skills with CSS!🤩

[@jordanryanethanowona2974]

cute

[@LahiruNikolin]

Hi brad, your contents are top quality. you rock!

[@aravindg9644]

Kudos Brad!! Great thinking for the grid reversed concept. You play a huge role in sharpening my CSS & HTML skills a lot.

[@proteus1]

I spent time learning html and css 12years ago. I kinda forgot a lot and I learned a lot about css and html from you. Thanks for the educational videos and have a good Xmas.

[@chrisxlemus]

Hey Brad, just found your channel and it's amazing! I understand what HTML, CSS, and JS does so this is super helpful! It gives me a new perspective whenever I access websites now.

[@CubanFireball81]

I really enjoyed coding along with this tutorial, I learned so much and many things were solidified for me. On top of this clone site, I added falling snow to my webpage just for an added touch of holiday cheer.

[@Abdullah-Md]

How to add that?

[@marcinzale]

As usual very good tutorial. Well explained. Thanks!

[@blackpanda5093]

Finally learned how to create that hamburger menu... thanks alot Brad.

[@Fixable383]

I am happy to see a drop I am gradually improving thank very much

[@bartoszjanprzybyszewski1891]

Man, so many people just wouldn't put these tutorials out like that for others to learn from. You are the real GOAT, thanks. I am learning so fast from your vids, great job!

[@jitendrakumarsingh1137]

Thanks again for the tutorial. I am following your CSS custom framework approach since the Heroku website clone project

[@ssatriyaa]

Thanks brad, always like this kind of tutorial

[@TheXxD4RK3RxX]

Thank you Brad for this video. It helped me create and understand my first mobile menu.

[@scoppyeah]

Phenomenal as always

[@alkhemist6631]

Thank you Brad. You've been instrumental in my journey to become a developer. ❤❤❤

[@Speedy4you10]

Brad. Great job doing website videos! Just subscribed and kind of new to the channel. I poped in from time to time looking at videos.

[@smithivory8154]

My man! Thanks dude!

[@jimjurisvideos]

Thank you for creating this great video.

[@yousafwazir286]

Nice really helped me understand

[@margosdesarian]

Fantastic!

[@wetsand7379]

this was awesome! thank you so much!

[@techboytutorials4733]

Once again, great content Brad. This is why you've been the one to inspire me to get into programming and tech, and now I'm trying to set up my own KZbin channel to give tutorials so I can help people too. Just so friendly, helpful and inspiring. Thank you for everything Brad.

[@tinatwine137]

Great video!! Happy New Year!

[@mohammedabdulaziz3658]

Great sir, helpful for me in CSS & Js

[@Star-hw8bh]

Thanks for the tutorials

[@armankabir8737]

Thank you, Sir. Your Tutorials help me to be super_Skilled. Finished this tutorial in 7 hours by writing all the scripts that u have written. Understood clearly and my confidence level got higher. Best wishes to you, Sir.

[@mohammadaminnassari6458]

i love this projects thanks a lot

[@chaybislam]

Thank you sooo much you are changing lives :)

[@sraynitjsr]

Thanks a lot, loved it

[@georgepynadath2025]

Thank you so much. It was very helpful. I learnt a lot.

[@Fred-my9er]

I learnt so much, thank you

[@iwokssama4772]

Well, it's very good realisation.

[@RomanBehroz]

great work buddy, thanks alot

[@mikejakusz1493]

Awesome video!

[@ezevalentine7610]

Thanks Brad

[@soundproffaudiostate]

I honetly and trully cant wait to keep learning from your videos so I can land a job a support your channel through patreon.

[@katm1884]

Good to know how the big dogs do it. Thanks. Love to see a css grid for youtube thumbnails with lazytube

[@himanshukatiyar4282]

you are my inspiration

[@julianvelez6563]

Nice work

[@rainerhamann3938]

Thank you!

[@hassaneoutouaya]

Thank you Sir!

[@HtopSkills]

Well explained

[@MeezanTheFairBloke]

Awesome video, love how you keep stuff simple. Watch some other code along vids, guys are pulling out the weirdest selectors... before you know it, your lost AF. Thanks Brad, keep it up!

[@marcielledepaula3373]

Love It 😍😍

[@Arabian_Epileptic]

Nice!!!! I want some coffee now ☺️

[@TedyProduction]

I love it thank you

[@Mrjiggyspuggy]

Sure has been awhile. Missed ya 🤗🤗🤗

[@zachfenton608]

very well done

[@danielbabu6010]

Brad is Late ! Happy To Get Tutorial ! Thanks !

[@UsmanTheDev]

Hi Brad, it's really helpful. I think you are shifting towards web3 technologies. an in-depth course on DAPPs will be appreciated. Thank You!

[@forbiddenlion7340]

Love you boss!

[@lecterpsy]

Thanks for so a cool video.

[@yousafwazir286]

Nice

[@sumeyyeusluerdeniz148]

Thank you so much for this video. İt's really helpfull and successfully. I hope you will do like this video. 👍☺️

[@mohammadthousif5373]

Excellent tutorial!! Keep more of these coming, very helpful for beginners.

[@ezekielswanson7813]

Thank you so much for this! This will help me land my first every internship as a self taught dev. You're the man.

[@putraharianja9095]

nice one

[@sonoftroy8572]

Love the content Brad! Im at the point, when I’m building apps, if I’m not using htaccess, routes, views, models, controllers, frameworks etc... then I don’t feel like my code base is modernized. And now I have to make sure the person I’m learning from is using the same standards so I can continue learning how to build production level apps. I’d never thought I’d be saying this to someone that I have learned so much from... thanks for being such a great teacher Brad. My knowledge of programming is growing and I’m rising to that next level

[@adrianmontilla3095]

and I would also love you to make a tooltip that contains buttons, images, texts, etc., with html, css and js

[@mkhululimtshali7576]

Very helpful turtorial, Ima go ahead and add the functionality that, when you click on the links on the mobile menu, they hide the entire menu as if you clicked X on the hamburger button.

[@bertrand00956]

Nice ! For the boxes using grid, since the images alternate being shown on right and left, why not use argument section:nth-child(odd/even) grid-col-2 instead of making a class grid-reverse ? wouldn't that be more practical ? I did the following => section:nth-child(even) .box-text{ grid-area:1} (instead of order).

[@aureliojmnz2959]

Awesome as always...love all your content. quick q, wondering why you didnt begin "Mobile First Design" on this one? (God knows this is where I get stumpped on since my habit is desktop first)

[@georgegeorgio70]

Great Video ! What is the font you are using in vsc?

[@kuylievismatulla5118]

Thanks so much that's great looking keep it up great work Brad 👍

[@dragonore2009]

Does anyone know how Brad obtains all the svgs and images to do these clones? I realize there are chrome extensions that extract images, but what about svg files?

[@caipyear644]

Not all hero's wear capes!

[@jamesngari8748]

Great tutorial👍

[@kenroyarcher2496]

Hi. What CSS coder formatted are you using? Or can anyone suggest a good one? Thank you.

[@georgehammond867]

Can class name have 2 or more names inside the same class element? that would make it easy to style in css. Great work from Traversy, really informative, Tanks man. i always learn more from these long and advances Clone Pages build in finding bugs to repair in own projects.

[@berkaygurcan141]

First of all, thank you for the video. I took and finished your html/css course. It helped me a lot. I want to ask you a question. .navbar-nav-left { text-transform: uppercase; flex: 1; margin-left: 20px; } I didn't understand the flex:1 feature here, I watched your videos, I did some research on the internet, but I couldn't understand how it sticks to the left, can you briefly summarize?

[@milen4610]

I would like to become more familiar with visual studio like u ;)

[@stevenARTify]

With that code field, are you able to convert all of that into a theme to install to a wordpress?

[@technologynwal-baru2227]

Hey Brad your tutorial always wonderfully and very clear thank for sharing your marvelous knowledge, but here I have one question when we click on hamburger instead of using html to display the mobile menu can we use JavaScript to display the menu if it is possible can you please make tutor for that

[@adrianmontilla3095]

excellent video travesy media, could you please make the complete shopify navigation menu with its accordions and everything else just the complete menu please, I hope you take it into account and make it, who supports this idea?

[@medaminefh429]

🤩

[@rishadali2866]

Well there's an extension in Chrome called what font which could tell you which font is it

[@mahmudulhasanovi5621]

Hello Sir,which theme are you use.it looks very nice.

[@adrianmontilla3095]

but please mainly make the shopify navigation menu please with all its elements, I think it would be an excellent practice 😂

[@fbnx4219]

Great tutorial! I think you cut out a bit too much at 10:38 though, as you do not mention the img style.

[@theaestheticgenius]

Hey Brad! Could you please do a three.js crash course?

[@user-fc1kl2pf4y]

Questions, If Screen changes the mobile menu stills shows. I have to click refresh button to hide the menu

[@khaleedawaiye6037]

Wow

[@brunacontino9525]

Can someone explain me why setting the flex to 1 moves the item to the left, please? Thanks in advance!

[@scaredcrew]

May I know what theme you are using in vs code?

[@rifatspk]

Hello Brad, Do you have a plan to make a video about framework7 ????

[@vlr9999]

Hi, Brad! What about take some ugly page and makes it look better, not just cloning?

[@denhamk]

Please could you mention the image sizes of the grid cells? My images don't fully fit the cell. They appear smaller and to the top left. How did starbucks get the images to fit into 1fr?

[@cubedev4838]

Hi brad, thank...please make tutorial hoe to set up google Analytics in our website

[@elizduarte6547]

What is the name of this theme used is vscode?

[@pazdyy]

Quality content as always! Thanks to you I started uploading tutorials on KZbin as well.

[@tshepomolete5092]

Could you please do a music website page, where you can listen to and download music?

[@FBmuzic]

Vs code theme name please?

[@tuan9024]

what is your vscode theme ?

[@nitinnangnurkar2840]

In Microsoft clone i don't found images on codepen pls help