Build a Starbucks Landing Page Clone

No video

Build a Starbucks Landing Page Clone

Рет қаралды 121,308

Күн бұрын

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

Пікірлер: 147

@abmj5856 2 жыл бұрын

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 2 жыл бұрын

You are very welcome

@futhi5075 2 жыл бұрын

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

@abmj5856 2 жыл бұрын

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

@mrekullitenumeriketekurani3555 2 жыл бұрын

@@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 2 жыл бұрын

@@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 2 жыл бұрын

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

@josephwong2832 2 жыл бұрын

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

@hectorserrano9314 2 жыл бұрын

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 2 жыл бұрын

@@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 2 жыл бұрын

@@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 2 жыл бұрын

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

@hectorserrano9314 2 жыл бұрын

@@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.

@bartoszjanprzybyszewski1891 11 ай бұрын

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!

@CubanFireball81 2 жыл бұрын

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 2 жыл бұрын

How to add that?

@LoveEachDay94 2 жыл бұрын

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 2 жыл бұрын

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

@proteus1 2 жыл бұрын

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.

@maripychavez5035 2 жыл бұрын

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

@jordanryanethanowona2974 2 жыл бұрын

cute

@aravindg9644 2 жыл бұрын

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

@techboytutorials4733 2 жыл бұрын

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 KZfaq channel to give tutorials so I can help people too. Just so friendly, helpful and inspiring. Thank you for everything Brad.

@chrisxlemus 2 жыл бұрын

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.

@armankabir8737 2 жыл бұрын

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.

@Bella_Will 2 жыл бұрын

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

@blackpanda5093 2 жыл бұрын

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

@Speedy4you10 2 жыл бұрын

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.

@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.

@LahiruNikolin 2 жыл бұрын

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

@Fixable383 2 жыл бұрын

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

@alkhemist6631 2 жыл бұрын

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

@tinatwine137 2 жыл бұрын

Great video!! Happy New Year!

@jitendrakumarsingh1137 2 жыл бұрын

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

@marcinzale 2 жыл бұрын

As usual very good tutorial. Well explained. Thanks!

@TheXxD4RK3RxX 2 жыл бұрын

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

@ssatriyaa 2 жыл бұрын

Thanks brad, always like this kind of tutorial

@georgepynadath2025 Жыл бұрын

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

@scoppyeah 2 жыл бұрын

Phenomenal as always

@MeezanTheFairBloke 2 жыл бұрын

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!

@sonoftroy8572 2 жыл бұрын

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

@Arabian_Abomination 2 жыл бұрын

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

@Fred-my9er Жыл бұрын

I learnt so much, thank you

@UsmanTheDev 2 жыл бұрын

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!

@katm1884 2 жыл бұрын

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

@mohammadaminnassari6458 7 ай бұрын

i love this projects thanks a lot

@mikejakusz1493 Жыл бұрын

Awesome video!

@jimjuris 2 жыл бұрын

Thank you for creating this great video.

@yousafwazir286 2 жыл бұрын

Nice really helped me understand

@mohammedabdulaziz3658 2 жыл бұрын

Great sir, helpful for me in CSS & Js

@chaybislam 2 жыл бұрын

Thank you sooo much you are changing lives :)

@wetsand7379 2 жыл бұрын

this was awesome! thank you so much!

@margosdesarian 10 ай бұрын

Fantastic!

@rainerhamann3938 2 жыл бұрын

Thank you!

@iwokssama4772 2 жыл бұрын

Well, it's very good realisation.

@ezekielswanson7813 2 жыл бұрын

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

@RomanBehroz 2 жыл бұрын

great work buddy, thanks alot

@julianvelez6563 2 жыл бұрын

Nice work

@Mrjiggyspuggy 2 жыл бұрын

Sure has been awhile. Missed ya 🤗🤗🤗

@Star-hw8bh 2 жыл бұрын

Thanks for the tutorials

@danielbabu6010 2 жыл бұрын

Brad is Late ! Happy To Get Tutorial ! Thanks !

@HtopSkills 2 жыл бұрын

Well explained

@smithivory8154 2 жыл бұрын

My man! Thanks dude!

@marcielledepaula3373 2 жыл бұрын

Love It 😍😍

@sraynitjsr 2 жыл бұрын

Thanks a lot, loved it

@TedyProduction 2 жыл бұрын

I love it thank you

@mohammadthousif5373 2 жыл бұрын

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

@himanshukatiyar4282 2 жыл бұрын

you are my inspiration

@ezevalentine7610 2 жыл бұрын

Thanks Brad

@sumeyyeusluerdeniz148 2 жыл бұрын

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

@zachfenton608 2 жыл бұрын

very well done

@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

@hassaneoutouaya 2 жыл бұрын

Thank you Sir!

@mkhululimtshali7576 2 жыл бұрын

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.

@lecterpsy 2 жыл бұрын

Thanks for so a cool video.

@aureliojmnz2959 2 жыл бұрын

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)

@adrianmontilla3095 2 жыл бұрын

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

@bertrand00956 2 жыл бұрын

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).

@mahmudulhasanovi5621 2 жыл бұрын

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

@adrianmontilla3095 2 жыл бұрын

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

@georgegeorgio70 2 жыл бұрын

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

@forbidden_lion 2 жыл бұрын

Love you boss!

@caipyear644 2 жыл бұрын

Not all hero's wear capes!

@berkaygurcan141 2 жыл бұрын

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?

@georgehammond867 2 жыл бұрын

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.

@fbnx4219 2 жыл бұрын

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

@adrianmontilla3095 2 жыл бұрын

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?

@theaestheticgenius 2 жыл бұрын

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

@stevenARTify 7 ай бұрын

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

@dragonore2009 2 жыл бұрын

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?

@yousafwazir286 2 жыл бұрын

Nice

@milen4610 2 жыл бұрын

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

@vlr9999 2 жыл бұрын

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

@putraharianja9095 2 жыл бұрын

nice one

@brunacontino9525 2 жыл бұрын

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

@user-fc1kl2pf4y Жыл бұрын

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

@cubedev4838 2 жыл бұрын

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

@rishadali2866 2 жыл бұрын

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

@kenroyarcher2496 2 жыл бұрын

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

@denhamk 8 ай бұрын

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?