Last week, I announced that I was committing to the #100DaysOfCode challenge. Here's how Week 1 went.
TLDR: I set out to recreate the Google homepage, failed, and then decided to spend more time learning CSS basics. Best decision ever.
My Week 1 goal was to complete the Google homepage project. However, as I was working through it, I quickly realized that I did not have a good grasp of CSS. In fact, I was so weak in it, that it did not make sense to continue.
I decided to take a step back and focus on strengthening my CSS skills. After googling some tutorials, I ultimately selected the W3Schools CSS Tutorial. I chose this tutorial because it was comprehensive, free, and from a trusted source. It also includes exercises that allow you to test your knowledge.
I also looked at some tutorials on flexbox, which is what Google uses to layout their homepage. After sifting through several, the following tutorials are what helped me get unstuck:
All of these tutorials allowed me to greatly improve my understanding of CSS and flexbox as well as the quality of my code.
Here are some screenshots to illustrate the point.
(Note: I use the background colors to help me see how my divs are behaving.)
While it looks pretty okay, it took HOURS to create, and the HTML and CSS were absolutely janky. The HTML file had 103 lines of code and the CSS file had 239 lines. Additionally, it was not fully responsive; some things would behave correctly when resizing the screen and others would not.
These issues are what drove me to seek out a CSS tutorial.
Working through the W3Schools CSS Tutorial made a huge difference.
As the images show, the webpage is responsive and changing as expected based on the screen size. However, the best part is what you can't see. I achieved this with 70 lines of HTML and 120 lines of CSS, and I actually understand why I've included each CSS declaration.
My goals for next week:
🔳 Finish the W3Schools CSS Tutorial.
🔳 Finish the Google homepage project.
🔳 Work on #CNC2021 Mission 2 email. (I'm behind on this 😅)
🗣 Last week, Robert Lin @r002 asked if I'd be interested in joining his study group. I'm so glad I said yes because it's been a lot of fun and he's been super supportive. We're still looking for members, so check out his post for deets on how to join us.
🗣 Jeff Mitchell @sentinel1909 wrote a really cool blog post called Pillars that discusses the importance of having a solid grasp of the basics. It was a nice confirmation that my decision to slow down and focus on CSS was a solid one.
From Satyam Sharma via Twitter.
I think that's everything. 🤔 As you can tell, I had quite the week. I am excited to see what challenges and wins next week brings.
See you then,
P.S. How are your coding sessions going? Are you making breakthroughs or banging your head against the wall?
Let me know below in the comments. 👇🏾👇🏾👇🏾