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!
I built my first ever project following with the Odin Project syllabus:
I used HTML and CSS to re-create the Google homepage. The project focuses on arranging the page visually and not actually building in any functionality (so the links don’t go anywhere and the search box doesn’t work).
It was much, much more difficult than I expected.
I also used the command line and Git and GitHub the whole time, so you can see all of my commits. I tried to copy the rules for making commits and writing commit messages.
I kept using a lot of trial and error and I still feel like I don’t quite understand all the display and position attributes fully and their behavior sometimes confused me.