CodeNewbie Community 🌱

Anita Beauchamp
Anita Beauchamp

Posted on

Week 1 Recap - 100DaysofCode

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:

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:
Screen Shot 2021-05-09 at 9.41.37 PM

(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.
Screen Shot 2021-05-09 at 12.02.16 AM

And a screenshot of the simulated iPad view from DevTools.
Screen Shot 2021-05-09 at 12.05.24 AM

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.
Screen Shot 2021-05-09 at 10.30.42 PM

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. πŸ‘‡πŸΎπŸ‘‡πŸΎπŸ‘‡πŸΎ

Oldest comments (3)

mccurcio profile image
Matt C

Awesome! ;)

P.S. May I suggest checking your links.
Are they routed thru twitter? It might be my browser, so let me know if it is or not...

anitabe404 profile image
Anita Beauchamp • Edited

Hi Matt,
πŸ˜– Thank you for catching this. You are a lifesaver! I have updated the links, and they are all working now. It was a newbie markdown error on my part. πŸ˜…

r002 profile image
Robert Lin

Great write-up, Anita! And thank you for the shout-out! πŸ˜€
It's been wonderful being study buddies though-- the learning process is so much more enjoyable in a group! πŸ₯³

Btw, today, Matt also just joined our study group too! We're three-people strong now! πŸš€

Welcome, Matt! πŸ€—

Look at all this progress!!

Seven days down, 93 more to go!! βœŠπŸŽ‰