Microsoft Homepage Clone - CSS Grid, Flex & Media Queries
Вставка
- Опубліковано 12 вер 2024
- In this project we will build our own version of the Microsoft homepage using HTML5/CSS and a bit of JS for the menu. You will learn about modern CSS including CSS grid, flexbox and responsive media queries
Code (Get images from here):
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversyme...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
Good video Brad! I've been writing everything in Flex these days.
Thanks Chris...Yeah I use flex for menus, inner elements, etc and the grid for things like cards.
You should make a video "Why I don`t like CSS GRIDS"))))
This is amazing! Well done Brad! 😃
Florin pop ur videos are also great :)
@@beardmcweird5667 Aww... 😍thank you!
Thanks buddy
@@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?
Same for your videos.
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.
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!
I'm really struggling with CSS. Could you plz mention the techniques that helped you better understand it?
@@dishonored1855 lol. I'm decent in it now.
@Jack Frost im still a beginner where do you recommend learning css?
@@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.
@@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.
Just when I'm struggling with media queries, thank you for yet another spot on content Brad!
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❤️
Awesome! glad to hear that :)
Traversy Media Thanks man! You are a genuine dude💯
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?
@@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.
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.
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 UA-cam 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...
70 minutes of footage. Watched it on 2x. Understood every bit. Still better than watching Netflix. Love you, Brad!
Amazing Brad 😀 just when I was searching for a grid css refresh
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
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
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!
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.
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.
you always make css looks so easy and you manage to avoid all of its complexities, thank you brad.
Links for all the images
header - i.ibb.co/zGSDGCL/slide1.png
HomeCard1 - i.ibb.co/LZPVKq9/card1.png
HomeCard2 - i.ibb.co/KjGFHVJ/card2.png
HomeCard3 - i.ibb.co/2cnshH6/card3.png
HomeCard4 - i.ibb.co/G57P0Pb/card4.png
xbox - i.ibb.co/tBJGPD9/xbox.png
HomeCard5 - i.ibb.co/zVqhWn2/card5.png
HomeCard6 - i.ibb.co/mGZcxcn/card6.jpg
HomeCard7 - i.ibb.co/NpPvVHj/card7.png
HomeCard8 - i.ibb.co/LkP4L5T/card8.png
Carbon - i.ibb.co/72cgtsz/carbon.jpg
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
Brad, you're a lifesaver. I'm almost ready to move on from CSS to JS, but I've been struggling with Grid.
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!
So easy for you Brad. No sweat! You are just like narrating a story.
Brad from Traversy media and Quincy Larson from Freecodecamp. The Tech life changers of all time. Salute from Bangalore and Nairobi.
the way you explain stuff makes it so easy to follow along. This is an incredible tutorial.
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.
brad you are just too talented for this generation...everything you put on your platform is awesome.
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?
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!!
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.
Brad all the way... You are a blessing to our generation...
Your tutorials made me what I am today
Very useful code to refresh knowledge and write clean pure code to develop templates from scratch. Thank you very much, Brad!
Traversy Media is sitting on 991K , 1M here we come 👌...One of the best lecture on UA-cam, The University of everything😁
Been working on this myself and I just came on UA-cam for some tips and fell on my exact project 😭You’re the man Brad! You’re my man 💪🏾
Congratulations Brad. One million subscribers on Traversy Media! Very well deserved.
Love these kinds of projects Brad. Even if you "know" this stuff it is always good to get some repetition. Thanks!
Worthy of a comment , covers a lot of css concepts
That looks elegant. I got the idea for my coming videos. Superb as always, Brad. 1 million almost done.🙏🏻
I absolutely love these website cloning projects! Please make some more Brad!
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
Wonderful vid! Helped alot with grasping flexbox and grid a little better for me
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!
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.
That should be comment too, hey Brad too much excitement
@@janvier3871 I didn't get you
@@mohammedehtesham2661 Mohammed sir , we are both motivated by the same contents which sounds perfect
@@janvier3871 gotcha
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.
Can you plz tell me what flex 1 does
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.
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
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); }
I appreciate how you really do some somewhat ambitious projects, I love it. Thanks alot.
Thanks a ton for all your hard work. You're my favorite teacher on UA-cam.
what a wonderul project, made me understand a lot of html and css
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!!!
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!
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!
More content like this. I would surely appreciate contents about wireframing, and creation of websites from wireframes.
Wow! Man you keep putting out fantastic varied content. All I can say is thanks! You’re a truly special developer and teacher!
Thanks for everything you do Brad!!
This is so good.. I love how you detail all the steps and explain what the css values are doing.. Cheers
hats off on this brad!! love the way you mixed flexbox and grid together.
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.
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...
Brad doing what he does best. Keep up the great job, man
you are great in this aspect Brad👍
I'm a big fan of CSS grid
Swapnil soni?
@@rishabhraj2446 Yes sir
@@SwapnilSoni XDA ❤️
@@rishabhraj2446
Peru Saaar
Hi Brad...Once again a great video....Thanks for sharing....it really gave me some good info on grids. 👍
Very very good video! Brad thank you!!!
This is probably one of the best videos you've ever done.
This was insanely helpful! Thank you for the nice mix of speed and level of detail 🙏
Thanks so much , it’s been years since I did any sort of coding , this is a great refresher to get back
GREAT TUTORIAL ALWAYS LOVE TO WATCH YOUR SUPER STUFF
Awesome. Very enjoyable and definitely learned new stuff. Thank you very much.
I do really appreciate all your work! I am so happy to find your tutorials!
that is treasure for front end developers!!!!!!!!!!!!!!
Nearly one million subs.... 👍🏼👍🏼👍🏼👍🏼
God father of youtube programming thank you brad.
Nice and Clean. That's how experienced developer does things. Thank you !
9k subs more and traversy media will be the next million subs dev channel. Can't wait!
Thanks boss. This video really came at a time I needed to learn how to use the grid system. You're the master.
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.
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.
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!
The man makes it look so easy 😅
Please more of these. Awesome Thanks
Very good video, Brad. I would to like it more than one times 👍👍👍
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.
One of the best CSS practice clones. Thank you Brad 🙏
Amazing video! I've learned so much from coding along to this one and the Netflix Clone video.
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.
Great tutorial Brad! Do you have any idea why the navigation flickers when the mobile breakpoint is hit? It seems to be an issue with the transition because if I remove that I don't see it anymore.
Love it! Now i have a clear, simple template i can understand.. thank you Brad.
Awesome stuff. I worked through it and cleared out some doubts I had. Thanks a lot!
Thank you legend teacher
Amazing Brad! You are a great gift for me.Learning a lot from your channel
I always like your video before watching 😀. BTW, great one
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! :)
Man!! You are awesome... Looking forward for more clone tutorials. Learning is easier this way. ❤️
You well wisher from 🇮🇳 India.
Thank you very much , I literally learn so much CSS from this video ❤️
sending gratefulness from Korea! thanks alot!
Bruh i cant tell u how much i really learn from these 1 hire long videos.
Also, i was wondering how u would make the apple.com website with those characters animated around their products and interacting with them.
Thanks Brad! Wish you all the best!
Just what I've been waiting for, great work Brad
I learned a lot of things doing this project, thank you !
Thanks for sharing your knowledge, Brad. :)
Can you plz tell me what flex 1 does
Just amazing brad.