Recreating the Facebook Homepage with HTML & CSS (Grid, Flexbox)
Вставка
- Опубліковано 26 сер 2024
- Recreating the Google Homepage: • Recreating the Google ...
Recreating the Twitter Homepage: • Recreating the Twitter...
Recreating the DuckDuckGo Homepage: • Recreating the DuckDuc...
Today I will be trying to recreate the Facebook Homepage with HTML and CSS only, please give me feedback. Hope you enjoy this video.
Also if you have suggestions for projects that I could build, please tell me in the comments below.
Source Code: github.com/lea...
![Lp. Сердце Вселенной #1 НАЧАЛО ПУТЕШЕСТВИЯ [Новый сезон] • Майнкрафт](http://i.ytimg.com/vi/380Q7gLWGvk/mqdefault.jpg)
Leave a like if this video helped you, also give me feedback and suggestions for more projects!
how long have you been programming for dude? this was 2 years ago so id think you'd be pretty good by now maybe even a full time programmer with html css and javascript???
I have one question. Why do you change from using "grid--template-areas" model at the beginning with the main ID but then further down you use "grid-area" and refer to the grid lines for each ID. Do you use the "grid-area" selector because it allows you to put multiple elements in the same grid cells but the "grid-template-areas" doesn't allow for this? Maybe this question isn't very clear/doesn't make any sense but any feedback on this is helpful because now If I am making a website I am not sure whether I should use only "grid-template-area" or only "grid-area" or both and also I am not sure when to use which. Any feedback would be great! And also keep up with the great content; this video has been super helpful for me in understanding the processes/methods for building websites!
Yes, I used it so I can overlap elements inside the grid, im not sure if there is a way to overlap grid items only with "grid-template-areas". I've created a codepen so you can see the difference, maybe that helps. codepen.io/learn-webdevyt/pen/KKdoBZj I commented something for the first "#main" div, try changing the "three" to "two" it will not work but with "grid-area" it easily works. Hope I could help you, if there are still questions, just ask :)
This video was made some time ago but I only use grid-area now.
@@CodePhilipYT Okay that makes perfect sense. Thanks for explanation!
@@CodePhilipYT One other question: Would you say it is better to use Bootstrap to design layouts or is there more flexibility without it and just using "grid-area" yourself?
@@davidallsopp4030 Depends on you preference, you can use Bootstrap if you think its easier or you can also use grid-area if you like to be more flexibel.
learn-webdev okay thanks
Great tutorial!
Is it responsive? I was trying on my own way using grid. But at 900px the right part of the main begins to overlap the left side. And i dont't know why. 😥
Is this homepage or login page?
Only the login page
@@CodePhilipYT If possible,Please make a video on recreating homepage .
@@priyanshasubhadarsini1421 I will probably do that in the future. But I dont know when ^^