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.

Some Context

When I started the #100DaysofCode challenge, I was already working through The Odin Project Foundations pathway. It teaches the basics of HTML, CSS, and JavaScript. One of the projects from the course is to recreate the Google homepage using the skills that were taught thus far (i.e. HTML & CSS). It's not intended to be functional or a perfect replica; it's just a way to get some practice in.

Goals & Accomplishments

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:

• A Complete Guide to Flexbox on CSS-Tricks,
• Basic concepts of flexbox on MDN Web Docs.

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.

How It Started

At the beginning of the week, my project looked like this:

(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.

How It's Going

Working through the W3Schools CSS Tutorial made a huge difference.

Here's a screenshot of the laptop view of the page.

And a screenshot of the simulated iPad view from DevTools.

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.

Next Week's Plan

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 😅)

Shoutouts & Other Dope Content

🗣 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.

😂 This tweet gave me a much-needed laugh as I was struggling with CSS.

From Satyam Sharma via Twitter.

Final Thoughts

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,

Anita ✌🏾

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. 👇🏾👇🏾👇🏾