How to Make the Google Home Page with HTML and CSS (Flexbox)
Вставка
- Опубліковано 5 лис 2024
- Learn how to recreate the Google home page with HTML and CSS. Specifically, we will make the Google home page using HTML & CSS flexbox and we will use media queries to make it responsive.
The Google Logo Font Family:
@font-face {
font-family: 'Product Sans';
font-style: normal;
font-weight: 400;
src: url(fonts.gstatic....) format('woff2');
}
Install Live Server VS Code:
marketplace.vi...
Become a Better Developer
📚 courses.wittco...
My Software
📡 WittCepter - chromewebstore...
🪵 ConsoleLog - chromewebstore...
Download Code
👨💻 blog.wittcode.com
Amazing tutorial! You have a knack for teaching. I really liked that you explained why were using this property and what this property does etc. Most tutorials out there usually just tell you what to do without explaining what the code is doing. I learned so much! Thank you!!! Please make more videos about recreating websites!
Thanks so much Daryll! I will definitely be recreating more websites in the future! 😃
Great stuff
Bro you deserve more subs. Thank you.
Thanks so much Lucas! Glad you found it useful! 😀
Awesome video!!!!! the notes included in the video were really informative... Thank you!
Anytime gokul and thanks! I think reading and hearing it really solidifies the info in your mind 🤓🤓
Cleanest explanations and straight to the point. Amazing video !
Thanks a ton Saud! Glad you found it helpful! 😀
good job bro
I wish you know how much ur video helped me.
I had a project i was meant to submit today and i was completely confused , coincidentally, it was to create a replica of the google homepage, so when i saw this video i was overjoyed.
Thank you and nice work❤
Nice coincidence that's great to hear! Thanks for watching
can't thank you enough for this step by step tutorial! thanks so much for taking the time to make this and sharing it with the world :)
Hey there! Thanks so much! Glad it helped! 😄
best tutorial i have ever watch about css
Thanks for the kind words! That's great to hear! 😀
nice job !!!
Thanks so much! 😃
Very comprehensive video tutorial. Nicely done! Keep up the good work mate!
Thanks so much Gershon! Glad it was useful!
Very cool!
Thanks for the continued support Freddie!
Your Explanation is awesome and clear to the point. Really enjoyed it.
Thanks so much Syamkumar! Glad you enjoyed it! 🤠
Bruh! your tutorial is so good it is explained very well with a clear voice, that's a sub for me. +1
Hey Gil! That's awesome to hear thanks so much! 🤠
this tutorial is so good. please do more html and css tutorials with details.I subscribed.
That's great to hear! Thank you! And yes I am working on a video about recreating the Facebook login page! 😀
Can you make this a series? Recreating websites or something?
Hey Cursed Trousers love the name lol and yeah I'm definitely gonna be recreating other websites! 🧐
Amazing tutorial/class. I could learn a lot with the infos. Thanks million
Thanks for the kind words Luri! Glad it helped!
@@WittCode i am new in html and css and i have a biiiiig problem to make the elements lined properly. And we make it looks very simple. Thanks a lot
@@iuridebarros6959 oh yeah aligning elements is really annoying when you first start 🤠
cooool
Thanks for the support! 🤓
Thanks so much for sharing this is an amazing tutorial! I learned so much!
Hey Ray! Thanks a bunch for watching! Glad it helped! 😀
Great video very informative! Could you make a video on how to use flexbox? I like the way you explained it
Hey John thanks! I think flexbox is a great display property so I will definitely be making more videos about it in the future! 🤠
Thats perfect!
what color theme are you using in vs code thanks
omg! I love this so much! Please keep making more videos!
Thanks so much Gabrielle! I am working on remaking the facebook homepage currently! 😃
thanks alot the video was really great, much appreciated it
Excellent! Thanks for watching!
Well understood! Thanx!
Great to hear! Thanks for watching Brenda! 😁
thanks dude!
Amazing !
Hey good to hear from you again! Thanks for watching 🤠
@@WittCode no problem
Thank you so much bro, video helped out alot on the parts I was stuck on like the media queries haha
Thanks a ton man! Yeah those media queries can be pretty tricky! 😄
@WittCode your video is very helpful, thank you!
Of course Yaneth! Thank you for watching!
thank you
wittcode can u make videos about android app development,plzz
Hey! I will definitely be making more android videos in the future! I have some web dev stuff to be made but I will definitely be making more android! I still gotta finish the Facebook API series haha
@@WittCode thanks wittcode and also make videos about android game development
I'm not too familiar with android game development but I can look into it!
@@WittCode thanks but !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Hi, how do i download the icons you used for apps and google logo?
Great video and the pop ups about the attributes are very helpful as well... but where do you download the google icons from or icons in general.
Hey thanks for watching! And I just use the windows snipping tool and then a background remover software. All the icons I used are on my GitHub in the video description if you want to use them!
@@WittCode cool... and thanks for the reply
@@WittCode Hey 1 more question, idk if its easy to explain, but what determines if you decide to give an element an #id or .class for styling purposes in css. I'm pretty new to web development. i never know which one to use.
@@MrNaturalgamer good question! Classes should be used for elements that share a common theme. You can have the same class for multiple elements. Like you make a class that has a red background and assign it to lots of elemts. But an ID is unique to only one element. Does this help?
@@WittCode copy... that's a great way to understand it. Thanks for the help
that was so helpful. thank you so much. :)))
Anytime Ashis! Thank you for watching! 😃
Can you upload the icons used in the website?
Hey Ryan! The icons should be in my GitHub link in the description! They are under a folder called pics.
when doing the footers, why did you used margin right for the footer-right but used padding left for footer-left?
Hey Rafael! Could you provide a timestamp? But most likely it wouldn't make a difference I probably just did it to show you could use either. However, I usually use margin instead except when I have a border or background and want to increase the space inside the box those are a part of. Hope this helps!
@@WittCode you can see it in 25:50 I also noticed you used justify-self for the left and justify-content for the right. is this also because would work the same way? Btw awesome video thanks a lot!
When I upload images, they are massive and take up a huge portion of the screen. Yours load as small icons automatically. Can you explain this?
Hey Zachary! I actually got those images by just going to the google home page and using the windows snipping tool so their size didn't really need adjusting. However, if you want the images to be smaller you can style the tag with CSS such as setting the height and width. But this could alter the aspect ratio. Hope this helps!
Please I can't find the source code can you share
What code editor is he using? I want it!
Hey there! It's called VS Code! I'd definitely recommend it, it's really lightweight and has a ton of options/extensions! 😁
@@WittCode I have VS code (the free version) it doesn't do all that stuff. Maybe because I'm new to coding
@@teeg431 Hey! Are you talking about that live server thing I have? You can add it as an extension. That's the great thing about VS Code! It's on the left pannel with the cube looking icon. Click there and search for live server or whatever it is you want to add on! 😃
@@WittCode you know what. I'm not entirely sure but you got yourself a new subscriber.
@@teeg431 Haha awesome! Thanks so much!
How do you save images on VSC?
Hey Matthew! What I do is just open up my vs code project in file explorer and then copy and paste the image into the directory. Then you can just access it from within your project! Let me know if this helps! 🤠
@@WittCode ok so when i go to add a file to my pics folder, i just name it logo.png then i paste the code of the image into the page? Im super confused
@@WittCode I keep gettin "an error occured while loading the image"
@@matthewbass1587 it could be that the path you're specifying for the image is wrong. If it is in a pics folder are you doing src="./pics/mypic.png"? Basically your folder structure could be wrong?
@@WittCodeso i downloaded the pic from the internet. Now i want to add a file on VSC with that pic, to where i can then add the path to my html like you did.
The footer on my code will not flex. I even cheated and copy and pasted from your github I have watched and rewatched this video what can I be doing wrong
Hey George! Hmmm... by footer flexing do you mean when it stacks on top of itself with the breakpoints? Is the rest of the CSS being applied?
@@WittCode The Items at the bottom will not pull across all the footer "buttons" are on the left and will not stretch across as you showed in the video. I like I said even went into your git after clearing out my code and retyping and actually coping and pasting the code in to my vscode and still stuck on the left.
@@GeorgeMaupinGeorgethevapeguy Hey George sorry for the delay! But it is hard to tell without using the chrome dev tools to inspect it. Are you using the chrome browser to run your application or a different browser? Also do your IDs and classes in the CSS file match with the ones in the HTML file?
I'm so lost... :(
Hey no worries! CSS is really hard to learn in my opinion! Is there something you are struggling with in particular?
@@WittCode mainly specific css for imgs.
@@zankeekee Meaning how to change/alter the image in an image tag based on css?
@@WittCode yes
@@zankeekee Is there something specific you are trying to do you want me to explain?