Microsoft Homepage Clone - CSS Grid, Flex & Media Queries

[@andresvidoza]

For those who would like to fix the issue of scrolling while menu is open, just add this to your code: > style.css .fixedPosition{ position: fixed; } > //modify the function as such document.querySelector('.menu-btn').addEventListener('click', () => { document.querySelector('.main-menu').classList.toggle('show'); // When menu is open, prevent from scrolling if(document.querySelector('.main-menu').classList.contains('show')){ document.body.classList.add('fixedPosition'); }else{ document.body.classList.remove('fixedPosition'); } }); Like this so Brad can PING this! Thank you so much for the tutorial Brad!

[@realchrishawkes]

Good video Brad! I've been writing everything in Flex these days.

[@TraversyMedia]

Thanks Chris...Yeah I use flex for menus, inner elements, etc and the grid for things like cards.

[@iromashko]

You should make a video "Why I don`t like CSS GRIDS"))))

[@infinteuniverse]

Hey, I'm a beginner right now. I rewatched a few of your videos for beginners like 5 times each, followed along wrote your code a few times over until I was able to do it myself without looking. Now watching this video, I can begin to pause and make some of the components myself before seeing the solution. Thanks for these videos man.

[@pexeixv]

70 minutes of footage. Watched it on 2x. Understood every bit. Still better than watching Netflix. Love you, Brad!

[@FlorinPop]

This is amazing! Well done Brad! 😃

[@beardmcweird5667]

Florin pop ur videos are also great :)

[@FlorinPop]

@@beardmcweird5667 Aww... 😍thank you!

[@TraversyMedia]

Thanks buddy

[@hectorserrano9314]

@@TraversyMedia Anyone knows what happens behind the scenes when you shred the log for example just by setting a lower width. I mean when he does that, it also affects its height. How come it behaves that way?

[@fahadrafiq1126]

Same for your videos.

[@stevendornan7979]

This is awesome! Thanks Brad. Also to mention, last week i accepted a Software Engineer job :D and I would like to thank you for the content you provide, making my dream possible and for being a great instructor!

[@jackfrost8969]

I'm really struggling with CSS. Could you plz mention the techniques that helped you better understand it?

[@jackfrost8969]

@@dishonored1855 lol. I'm decent in it now.

[@somebodyneeds6247]

@Jack Frost im still a beginner where do you recommend learning css?

[@jackfrost8969]

@@somebodyneeds6247 search for css position and display property by web dev simplified on youtube coz that's the only hard part to understand. After that follow the web page design tutorials then after completing it try to replicate on your own without the help of video, when you get stuck search your query on google and try to figure it out that way. After certain repetition you should have a good grasp on it.

[@ericzong1189]

@@jackfrost8969 we happen to agree on the technique for learning front end (watching tutorials then replicating on your own ), do you confirm that it works? i'm kinda confused by the whole 'you should work on your own projects' advice as a beginner.

[@cheapczad]

I'm 53. I've just started my adventure with web design (I'm "print" art director and designer)...You're my GURU:)) Many Many Thanks! for the way you're explaining the maze;) I wish I had all teachers like you. Greetings from Warsaw, Poland

[@wiskassaquetas123]

I'm a software engineering student and I just have to thank you because all your videos motivate me more to learn code than any class I've ever had (your videos also teach me WAY more than college, should be paying you instead haha) I'm binge watching your videos! Subscribed for sure

[@honecode2120]

Learning CSS grid made creating responsive webpages a lot more fun for me. So much flexibility. I have read there can be issues with accessibility if you’re not careful in the way you layout your HTML relative to how your grid is actually displayed though.

[@keldaniel234]

brad you are just too talented for this generation...everything you put on your platform is awesome.

[@Light-zr1ny]

Just when I'm struggling with media queries, thank you for yet another spot on content Brad!

[@newyorker6669]

This one is a game changer! Thanks brad! I’m going to do this one right after I get home from my local dev meet up!! Btw, thanks to you and front end masters I am now doing more and more on my own! I can somewhat read documentation and I’m pretty good with react on my own thanks to your JavaScript course, and your react course! Thank you so much❤️

[@TraversyMedia]

Awesome! glad to hear that :)

[@newyorker6669]

Traversy Media Thanks man! You are a genuine dude💯

[@OmarAhmed-xc7bs]

You mean the JAVASCRIPT UDEMY COURSE ? Can anybody tell me what is the difference between these JAVASCRIPT videos and the JAVASCRIPT course on UDEMY , please?

[@davidspooner4684]

@@OmarAhmed-xc7bs The Udemy course has around 20 hours (I think) of content that is organized and detailed and includes projects. Sure,, you can watch 20 hours of content here. But it won't all be organized in way that is meant to carry you from beginner/intermediate to advanced (with projects chosen along the way) in the way that the Udemy course is.

[@srfioo3139]

All thanks to traversy, I'm on my way to become full stack web developer, I have taken Html and Css courses from Traversy on Udemy and I'm learning Javascript now from brad course on Udemy. Je is a great teacher and very good explainer.

[@abdulhamidosman9156]

Brad from Traversy media and Quincy Larson from Freecodecamp. The Tech life changers of all time. Salute from Bangalore and Nairobi.

[@alakhdar100]

you always make css looks so easy and you manage to avoid all of its complexities, thank you brad.

[@perkin524]

Even though there was nothing exactly new here for me, I watched every minute and got so much from it. The workflow, the approach, the priorities, the economy/speed etc were all outstanding. Brad you are a star and have taught me so much! More of this sort of stuff please.

[@bankoleesan2129]

Thank you so much Mr. Traversy. I really love these clone projects, and I've coded along and built every one on your channel. They're such an important (and refreshing) back-to-the-basics type code along content that there's just far too little of on KZbin imho. Keep doing what you do Brad. You're such a treasure to the dev community worldwide, and I don't know what we'd do without you...

[@vain_za]

I am not a beginner, so I know most of the stuff in the video. But there's just something about watching Brad building websites that relaxes me.

[@ciggysiggy2765]

Can you plz tell me what flex 1 does

[@lep2525]

Brad, you're a lifesaver. I'm almost ready to move on from CSS to JS, but I've been struggling with Grid.

[@edcarino2166]

So easy for you Brad. No sweat! You are just like narrating a story.

[@drhastings]

Traversy Media is sitting on 991K , 1M here we come 👌...One of the best lecture on KZbin, The University of everything😁

[@bobghodsi8009]

Enjoyed watching your video by putting together the complete codes for the application. It is, in my humble opinion, the best examples for use of flexbox and grid. Thanks for all your efforts

[@leandrobalmaceda5631]

I've just finished it. Took a while because I wanted to comment everything lol. But I could finish it. So Thank you very much for your effort, as always. I love learning with you. Greetings from Argentina!

[@josephmsafiri4950]

You make Coding so easy man. i love how you explain this in step by step and in details. thank you. your video have a blessing to me.

[@roter13]

the way you explain stuff makes it so easy to follow along. This is an incredible tutorial.

[@RedFox-st1yw]

I have been watching Traversy for a while. Thank you Brad for having me get out of my comfort zone and learn something I'd always want.

[@NicholasAsher]

Man.. I love your content. Im a fully self taught UX designer now teaching myself web dev and your channel has been pretty instrumental to my motivation and learnings. I can't wait to do this one but im doing some of your previous sites before i do this one :). Thank you!

[@JordanAF808]

Another amazing tutorial here, Brad! This has been really helping me understand how to write css! If anyone wants to display the sidebar menu when you hover over the menu-bar(.menu-btn) add this code to your css: .menu-btn:hover + .container .main-menu { transform: translateX(-20px); }

[@eashan2405]

Why did we give a fixed height of 60px to ? Shouldn't we avoid giving heights and use padding / min-height instead for responsive design?

[@mohammedehtesham2661]

I am so excited... When I find a Brad's video that makes a webpage(s) project, I kinda get the feeling of a lion when he is hungry and sees a deer.

[@janvier3871]

That should be comment too, hey Brad too much excitement

[@mohammedehtesham2661]

@@janvier3871 I didn't get you

[@janvier3871]

@@mohammedehtesham2661 Mohammed sir , we are both motivated by the same contents which sounds perfect

[@mohammedehtesham2661]

@@janvier3871 gotcha

[@CsRazeel]

This is great, even for people who know how to do all of this, it could be useful as a reference/refresher. Some of the very common components are shown and it's always great to see someone else do it their way, because sometimes you learn to do something a certain way and you keep wondering if it's the "right way" or not so it also helps to see how someone else is doing it

[@gabrielmg3582]

Amazing Brad 😀 just when I was searching for a grid css refresh

[@LearnToCodeAcademy]

Brad all the way... You are a blessing to our generation... Your tutorials made me what I am today

[@joeyvico]

Absolutely brilliant! Learned so much on this video alone! Thanks Brad, please keep bringing more clones like this one. Will now start with the Netflix clone right away!!

[@MovieHeretic]

OMG could you just stop Brad. This morning we decided to change our static out of date review site and one of the suggestions was something like the MS or Netflix layouts. The two of us developers, back end here, sort of mumbled about achieving it and then went crazy looking up how to do things on the webz. Out of pure desperation decided to see if Brad had already done something similar on youtube!!! Dude awesome we are both going to learn so much from this tutorial. And only joking, keep the tutorials rolling dude, currently doing your udemy courses as well! P.S. hope everything is okay on the home front with the current cluster we all find ourselves in.

[@milanchandro3484]

Congratulations Brad. One million subscribers on Traversy Media! Very well deserved.

[@mubirucharles574]

This is really cool, a few weeks back i bought your udemy course of 20 Web Projects With Vanilla JavaScript. its really worth it if you want to practice javascript. Thanks Brad for your effort & brilliance...

[@eliekaz9542]

Been working on this myself and I just came on KZbin for some tips and fell on my exact project 😭You’re the man Brad! You’re my man 💪🏾

[@ts3798]

Love these kinds of projects Brad. Even if you "know" this stuff it is always good to get some repetition. Thanks!

[@kenthefley2226]

This is probably one of the best videos you've ever done.

[@adeisaac]

I appreciate how you really do some somewhat ambitious projects, I love it. Thanks alot.

[@industrialhomestead4028]

Thanks a ton for all your hard work. You're my favorite teacher on KZbin.

[@kjragg1099]

Brad you are without doubt the best web dev teacher out there. Really amazing stuff!! I'm so very thankful for all that you do. Keep up the good work my friend.

[@clink50]

Thank you Brad! Love these cloning tutorials! Really teaches us the basics of CSS and how to use it effectively by copying a real world site/application. Keep up the great work!

[@soflogator]

This was a good tutorial! I gave it a go on my own before watching the solution and got pretty close with everything. Feeling a lot more confident with responsive layouts now, thanks for the help!

[@tebbythomas1809]

Wow! Man you keep putting out fantastic varied content. All I can say is thanks! You’re a truly special developer and teacher!

[@bradyrodgers6411]

Love your videos man, unlike a lot of other online videos you really take the time to explain what the code will actually do while you're writing it and I understand a hell of a lot more by watching you compared to other videos, keep up the good work :). Plus on a side note even though i live in Scotland im also a patriots / redsox fan so even more reason to watch you lol

[@zalodias123]

I absolutely love these website cloning projects! Please make some more Brad!

[@NicksIdeaEngine]

Uploaded about an hour ago and already almost 500 likes. On top of that, Brad is closing in on 1m subscribers. This is an awesome thing to see.

[@MrSuedog]

Thanks so much , it’s been years since I did any sort of coding , this is a great refresher to get back

[@randymurray934]

This is so good.. I love how you detail all the steps and explain what the css values are doing.. Cheers

[@thiagonunesbatista6887]

Hey Brad, How Are You? I did your Modern HTML & CSS course from Udemy, I started watching this tutorial for take the initial styles, after that I continued the development alone and I finished the homepage, except for the menu that I still needs to know how to do, but I am here to give you a thanks from Brazil for your teaching!!!

[@Roccatin]

Thank you Brad, this tutorial helped me to understand, acknowledge and refresh the basic concepts for CSS. Thank you for devoting your time to this.

[@folorunso]

hats off on this brad!! love the way you mixed flexbox and grid together.

[@DmitrySafarov]

Very useful code to refresh knowledge and write clean pure code to develop templates from scratch. Thank you very much, Brad!

[@ademineshat]

Nice and Clean. That's how experienced developer does things. Thank you !

[@Ash-em5pm]

9k subs more and traversy media will be the next million subs dev channel. Can't wait!

[@unchart_d]

God father of youtube programming thank you brad.

[@Rm_rm_bjp]

Hai i am Indian,Hyderabad your Explanation very Good video Brad!, And thank you so much Brad!

[@jwchavez]

Thanks Brad for this great video. I always learn something interesting/new/different from your videos, this is so didactic ! I had no idea how the hiding menus where implemented, this was so clear. Regards from México!

[@TheNerdyDev]

That looks elegant. I got the idea for my coming videos. Superb as always, Brad. 1 million almost done.🙏🏻

[@floralforest5898]

I do really appreciate all your work! I am so happy to find your tutorials!

[@uzoruchenna4863]

Thanks boss. This video really came at a time I needed to learn how to use the grid system. You're the master.

[@IsaacAsante17]

Brad doing what he does best. Keep up the great job, man

[@abdullahabd7677]

More content like this. I would surely appreciate contents about wireframing, and creation of websites from wireframes.

[@frankvos9774]

Quite funny, just finished doing the same project for you to upload this like 5 weeks later. We had similar results so i suppose i did well! :)

[@qi_kayon]

This was insanely helpful! Thank you for the nice mix of speed and level of detail 🙏

[@its_just_me_]

Man!! You are awesome... Looking forward for more clone tutorials. Learning is easier this way. ❤️ You well wisher from 🇮🇳 India.

[@franciscoguerrero493]

Amazing video! I've learned so much from coding along to this one and the Netflix Clone video.

[@isaacbraun1366]

Clean video as always! I've been working on improving my web dev skills during the extra time inside

[@rangabharath4253]

Thank u so much, Brad. Congratulations for your effort in making the awesome content. 1M Subscribers coming soon. All the Best.

[@Iamjoelangel]

what a wonderul project, made me understand a lot of html and css

[@warodomwerapun616]

Well done, you presented CSS fundamental skills needed with a proper html5 structure in an interesting project. Easy to follow. Clearly explain Thank you very much.

[@SahilKumar-rw3sh]

One of the best CSS practice clones. Thank you Brad 🙏

[@edmundo5450]

Love it! Now i have a clear, simple template i can understand.. thank you Brad.

[@100XPercentX]

thats odd. so around 12:42 you wanted to push the line down a bit on hover state, what i want to ask is why didnt you add padding to that same one instead of copy pasting the elements with hover then adding it??

[@atmanvisual190]

Awesome stuff. I worked through it and cleared out some doubts I had. Thanks a lot!

[@f7167382]

Wonderful vid! Helped alot with grasping flexbox and grid a little better for me

[@SwapnilSoni]

I'm a big fan of CSS grid

[@rishabhraj2446]

Swapnil soni?

[@SwapnilSoni]

@@rishabhraj2446 Yes sir

[@rishabhraj2446]

@@SwapnilSoni XDA ❤️

[@SwapnilSoni]

@@rishabhraj2446

[@sommie4935]

Peru Saaar

[@logiconabstractions6596]

Hey quick comment - just saying I really got a lot from those live coding videos. Just little things that makes your better and improves the workflows - like the side-tools you use to get random image placeholders, fontawesome etc.... Also I didn't know you could do stuff like div.someclass and it'll auto-complete your tag with the class properly. Works directly in Pycharm (which is my IDE, or Jetbrains stuff more generally). Also just sometimes confirming that what I'm doing isn,t completely stupid, since some dude with much more experience than I seems to function similarly. Always reassuring.... I think there is value in those live coding vids that are hard to get otherwiser.

[@Gatechsq21]

@52:26 Media Queries @57:34 Menu Creation

[@downtown9508]

The man makes it look so easy 😅

[@al_peterson]

Many thanks Brad! It was very helpful. You just forgot to add some margin-right in .footer div for 700px screens. But, it's a trifle.

[@jackfrost8969]

15:18 why display:inline-block; ? without it the background color was crossing its above element. What it does exactly?

[@william8751]

Just what I've been waiting for, great work Brad

[@manasmahanand732]

I like the video before I watch it, love your videos traversy! I love your udemy courses!

[@ShahnewazTameem]

Amazing Brad! You are a great gift for me.Learning a lot from your channel

[@avneet12284]

So amazing, Brad ! Loved it. Thank you for all you do.

[@jskim3886]

sending gratefulness from Korea! thanks alot!

[@daaumarius]

I learned a lot of things doing this project, thank you !

[@kabirsumn3517]

46:32 links inner is not a flex container. is it? so how does he align items to flex-start and use justify-content to center?

[@HusseinBFawaz]

Thank you very much , I literally learn so much CSS from this video ❤️

[@felipecruz3061]

Nearly one million subs.... 👍🏼👍🏼👍🏼👍🏼

[@K2k172]

Thanks Brad! Wish you all the best!

[@siyabdev]

I always like your video before watching 😀. BTW, great one

[@digigoliath]

I know I am going to enjoy it. Can't wait to get started!!

[@tejaskulkarni100]

Hi Brad...Once again a great video....Thanks for sharing....it really gave me some good info on grids. 👍

[@mrlogig]

I think this is the best web design video that I've ever seen. Thank you. Subbed with notifications on!

[@zerosandones7547]

Thank you so much Brad! This is such a treasure!

[@MassScratchers838]

Thanks for everything you do Brad!!

[@nikitabeletskiy]

Thanks to you Brad for such a cool content! It would be nice if you also make a video about how this dynamics thing in websites works: how multypage websites are made (obviously not by creating a ton of .html files) and what the approaches to make that dynamics are. I like the way you explain things, everything is clear enough for me when I watch you, regardless of my not good enough English. Appreciate your business much