How to Make the Google Home Page with HTML and CSS (Flexbox)

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 117

  • @daryllmamaril4225
    @daryllmamaril4225 3 ปีที่แล้ว +9

    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!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks so much Daryll! I will definitely be recreating more websites in the future! 😃

  • @roast-salamander
    @roast-salamander 3 ปีที่แล้ว +5

    Bro you deserve more subs. Thank you.

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks so much Lucas! Glad you found it useful! 😀

  • @davidkoo2503
    @davidkoo2503 5 หลายเดือนก่อน

    Great stuff

  • @freddiewittmann1494
    @freddiewittmann1494 3 ปีที่แล้ว +3

    Very cool!

    • @WittCode
      @WittCode  3 ปีที่แล้ว +2

      Thanks for the continued support Freddie!

  • @user-bm8uu5eg5y
    @user-bm8uu5eg5y 3 ปีที่แล้ว +1

    nice job !!!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks so much! 😃

  • @saudmujahid
    @saudmujahid 3 ปีที่แล้ว +3

    Cleanest explanations and straight to the point. Amazing video !

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Thanks a ton Saud! Glad you found it helpful! 😀

  • @gokulj2226
    @gokulj2226 3 ปีที่แล้ว +8

    Awesome video!!!!! the notes included in the video were really informative... Thank you!

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Anytime gokul and thanks! I think reading and hearing it really solidifies the info in your mind 🤓🤓

  • @MrUnderline-dq4ir
    @MrUnderline-dq4ir ปีที่แล้ว +1

    good job bro

  • @soorimy2301
    @soorimy2301 3 ปีที่แล้ว +4

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

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Hey there! Thanks so much! Glad it helped! 😄

  • @kadir3044
    @kadir3044 3 ปีที่แล้ว +1

    best tutorial i have ever watch about css

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Thanks for the kind words! That's great to hear! 😀

  • @user-lk6ld1bq1o
    @user-lk6ld1bq1o 2 หลายเดือนก่อน

    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❤

    • @WittCode
      @WittCode  2 หลายเดือนก่อน

      Nice coincidence that's great to hear! Thanks for watching

  • @gershondevadason4656
    @gershondevadason4656 3 ปีที่แล้ว +1

    Very comprehensive video tutorial. Nicely done! Keep up the good work mate!

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Thanks so much Gershon! Glad it was useful!

  • @ozanyasin6585
    @ozanyasin6585 2 ปีที่แล้ว

    Thats perfect!

  • @SyamkumarMuvalla
    @SyamkumarMuvalla 3 ปีที่แล้ว +2

    Your Explanation is awesome and clear to the point. Really enjoyed it.

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks so much Syamkumar! Glad you enjoyed it! 🤠

  • @gilchristianb.pabilona3891
    @gilchristianb.pabilona3891 3 ปีที่แล้ว +3

    Bruh! your tutorial is so good it is explained very well with a clear voice, that's a sub for me. +1

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Hey Gil! That's awesome to hear thanks so much! 🤠

  • @iuridebarros6959
    @iuridebarros6959 3 ปีที่แล้ว +2

    Amazing tutorial/class. I could learn a lot with the infos. Thanks million

    • @WittCode
      @WittCode  3 ปีที่แล้ว +2

      Thanks for the kind words Luri! Glad it helped!

    • @iuridebarros6959
      @iuridebarros6959 3 ปีที่แล้ว +1

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

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      @@iuridebarros6959 oh yeah aligning elements is really annoying when you first start 🤠

  • @gabriellejackson9736
    @gabriellejackson9736 3 ปีที่แล้ว

    omg! I love this so much! Please keep making more videos!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks so much Gabrielle! I am working on remaking the facebook homepage currently! 😃

  • @Iam_rayhutch
    @Iam_rayhutch 3 ปีที่แล้ว +2

    Thanks so much for sharing this is an amazing tutorial! I learned so much!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Hey Ray! Thanks a bunch for watching! Glad it helped! 😀

  • @rxkshan
    @rxkshan 3 ปีที่แล้ว +2

    cooool

    • @WittCode
      @WittCode  3 ปีที่แล้ว +2

      Thanks for the support! 🤓

  • @daniaayad5874
    @daniaayad5874 3 หลายเดือนก่อน

    thanks alot the video was really great, much appreciated it

    • @WittCode
      @WittCode  3 หลายเดือนก่อน

      Excellent! Thanks for watching!

  • @raidynamics
    @raidynamics 3 ปีที่แล้ว

    Amazing !

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Hey good to hear from you again! Thanks for watching 🤠

    • @raidynamics
      @raidynamics 3 ปีที่แล้ว +1

      @@WittCode no problem

  • @truebangla5342
    @truebangla5342 3 ปีที่แล้ว +3

    this tutorial is so good. please do more html and css tutorials with details.I subscribed.

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      That's great to hear! Thank you! And yes I am working on a video about recreating the Facebook login page! 😀

  • @cursedtrousers8735
    @cursedtrousers8735 3 ปีที่แล้ว +9

    Can you make this a series? Recreating websites or something?

    • @WittCode
      @WittCode  3 ปีที่แล้ว +8

      Hey Cursed Trousers love the name lol and yeah I'm definitely gonna be recreating other websites! 🧐

  • @brendahneumbe9730
    @brendahneumbe9730 3 ปีที่แล้ว

    Well understood! Thanx!

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Great to hear! Thanks for watching Brenda! 😁

  • @JohnSmith-ej1qv
    @JohnSmith-ej1qv 3 ปีที่แล้ว +4

    Great video very informative! Could you make a video on how to use flexbox? I like the way you explained it

    • @WittCode
      @WittCode  3 ปีที่แล้ว +3

      Hey John thanks! I think flexbox is a great display property so I will definitely be making more videos about it in the future! 🤠

  • @josephryan8899
    @josephryan8899 9 หลายเดือนก่อน

    what color theme are you using in vs code thanks

  • @aaasisssx
    @aaasisssx 3 ปีที่แล้ว

    that was so helpful. thank you so much. :)))

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Anytime Ashis! Thank you for watching! 😃

  • @semiramis7596
    @semiramis7596 2 ปีที่แล้ว

    thanks dude!

  • @MPCY577
    @MPCY577 3 ปีที่แล้ว

    @WittCode your video is very helpful, thank you!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Of course Yaneth! Thank you for watching!

  • @jasongeee7180
    @jasongeee7180 3 ปีที่แล้ว

    Thank you so much bro, video helped out alot on the parts I was stuck on like the media queries haha

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Thanks a ton man! Yeah those media queries can be pretty tricky! 😄

  • @zacharyadcock6337
    @zacharyadcock6337 3 ปีที่แล้ว +1

    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?

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      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!

  • @fogfog1000
    @fogfog1000 3 ปีที่แล้ว

    Hi, how do i download the icons you used for apps and google logo?

  • @SalazarRD
    @SalazarRD 3 ปีที่แล้ว

    when doing the footers, why did you used margin right for the footer-right but used padding left for footer-left?

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      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!

    • @SalazarRD
      @SalazarRD 3 ปีที่แล้ว

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

  • @MrNaturalgamer
    @MrNaturalgamer 3 ปีที่แล้ว

    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.

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      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!

    • @MrNaturalgamer
      @MrNaturalgamer 3 ปีที่แล้ว

      @@WittCode cool... and thanks for the reply

    • @MrNaturalgamer
      @MrNaturalgamer 3 ปีที่แล้ว

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

    • @WittCode
      @WittCode  3 ปีที่แล้ว +2

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

    • @MrNaturalgamer
      @MrNaturalgamer 3 ปีที่แล้ว

      @@WittCode copy... that's a great way to understand it. Thanks for the help

  • @rxkshan
    @rxkshan 3 ปีที่แล้ว +3

    wittcode can u make videos about android app development,plzz

    • @WittCode
      @WittCode  3 ปีที่แล้ว +2

      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

    • @rxkshan
      @rxkshan 3 ปีที่แล้ว +1

      @@WittCode thanks wittcode and also make videos about android game development

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      I'm not too familiar with android game development but I can look into it!

    • @rxkshan
      @rxkshan 3 ปีที่แล้ว +1

      @@WittCode thanks but !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @The-Dev-Ninja
    @The-Dev-Ninja 2 ปีที่แล้ว

    thank you

  • @fogfog1000
    @fogfog1000 3 ปีที่แล้ว +1

    Can you upload the icons used in the website?

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

      Hey Ryan! The icons should be in my GitHub link in the description! They are under a folder called pics.

  • @teeg431
    @teeg431 3 ปีที่แล้ว

    What code editor is he using? I want it!

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Hey there! It's called VS Code! I'd definitely recommend it, it's really lightweight and has a ton of options/extensions! 😁

    • @teeg431
      @teeg431 3 ปีที่แล้ว

      @@WittCode I have VS code (the free version) it doesn't do all that stuff. Maybe because I'm new to coding

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      @@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! 😃

    • @teeg431
      @teeg431 3 ปีที่แล้ว

      @@WittCode you know what. I'm not entirely sure but you got yourself a new subscriber.

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      @@teeg431 Haha awesome! Thanks so much!

  • @matthewbass1587
    @matthewbass1587 3 ปีที่แล้ว

    How do you save images on VSC?

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      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! 🤠

    • @matthewbass1587
      @matthewbass1587 3 ปีที่แล้ว

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

    • @matthewbass1587
      @matthewbass1587 3 ปีที่แล้ว

      @@WittCode I keep gettin "an error occured while loading the image"

    • @WittCode
      @WittCode  3 ปีที่แล้ว

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

    • @matthewbass1587
      @matthewbass1587 3 ปีที่แล้ว

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

  • @GeorgeMaupinGeorgethevapeguy
    @GeorgeMaupinGeorgethevapeguy 3 ปีที่แล้ว

    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

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      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?

    • @GeorgeMaupinGeorgethevapeguy
      @GeorgeMaupinGeorgethevapeguy 3 ปีที่แล้ว

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

    • @WittCode
      @WittCode  3 ปีที่แล้ว +1

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

  • @ashwiniadodabanghi7605
    @ashwiniadodabanghi7605 2 ปีที่แล้ว

    Please I can't find the source code can you share

  • @zankeekee
    @zankeekee 3 ปีที่แล้ว

    I'm so lost... :(

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      Hey no worries! CSS is really hard to learn in my opinion! Is there something you are struggling with in particular?

    • @zankeekee
      @zankeekee 3 ปีที่แล้ว

      @@WittCode mainly specific css for imgs.

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      @@zankeekee Meaning how to change/alter the image in an image tag based on css?

    • @zankeekee
      @zankeekee 3 ปีที่แล้ว

      @@WittCode yes

    • @WittCode
      @WittCode  3 ปีที่แล้ว

      @@zankeekee Is there something specific you are trying to do you want me to explain?