I am (still) working on the web development 101 section of the Odin Project curriculum.
The first project you are tasked with is using your basic HTML and CSS knowledge to copy the design and layout of the Google Homepage (easier task) and/or the Google Search Results page (difficult task).
I wrote about finishing the easier page just before Halloween. It’s taken me almost a month, but I finally finished the Hard challenge after a full day coding at home today.
I started from planning out the layout on paper and figuring out what I needed to do, how the page would be divided and what sections I would need to create.
Then, I started coding and trying things out.
I also had a chance to practice my terminal and git skills to keep versions of the data as I added and changed things.
I had a hard time getting my head around layouts, so I tried to make the Homepage using floats. And then make the search page mostly using flexbox. It was tricky but I found using cheat sheets like this one helped a lot.
A lot of times I was confused about why something worked or didn’t work. I tried commenting out the CSS (by hitting Command and /) to see what effect taking out the code made.
I’m really happy with the result and it is the first time I really “built” something substantial using my coding skills since I was a kid, so it’s a really proud moment!
It’s live here.