r/webdev•
GALOXITYv2

Google home page Recreation: Tips/Pointers

Discussion

Screenshot of finished Project

Screenshot with errors pointed out

Github link for code (html/css)

​

I recently finished my first Web Dev. College course, and although I originally learned html/css my 8th grade year of school, and re-learned throughout highschool, I would always forget it eventually from not using it (duh.) so this does not happen again, I've decide to start to recreate popular websites. (mainly just html/css eventually ill add JS)

The first webpage I decided to do was google.com, because it is simple and straight forward.

​

Things that were easy:

For the most part I'd say this webpage was quite easy and straight forward, there were things I chose not to do as I deemed them too complicated, and not worth spending more time to complete (It is currently 2 am I need sleep)

Things that were hard:

I would not say anything was hard, but there were certain css elements that needed looking up, as I hadn't used them much and forgot specifics of how they worked (mainly box-shadow)

The one things I had no clue how to do and had to look up was '@font-face' this is part of the reason I believe I could not properly use the font-weight to change the navbar and footer tags (see error image)

Things I didn't do:

I didn't know how to get the two icons inside of the search bar, and figured that was too complicated and just chose to ignore. I also could not figure out how to get the footer tags any lower then they currently are. the last thing was, as stated above, due to never using '@font-family' before the fonts although the correct font, are not weighted properlly as I'm assuming how I imported it did not allow for changes.

Pointers I'd like:

Info on how to complete the tasks I brushed over if you know how to do them, tips on things like making my html/css code look neater (yes I know comments good but it's ate so I brushed over those) as I'm sure I used divs/spans/class/id's in less then best practice.

​

If you have anything else to let me know I'd love to hear it as I'm sure it can only help me, along with website/articles and things you think I should read to help improve my skills.

Thanks in advance for any and all help!

Posted Dec 14, 2019, 8:31 AM UTC

10
Loading comments…