From Perfectionism to Progress: Day 1 of my CSS Challenge with ICodeThis
A person with a backpack and walking sticks hikes up a path toward a tall, rugged mountain, taking it step by step.
7 MINUTE READ
In this article:
How I overcame my perfectionism to make consistent progress using the perfectly pitched mini-challenges from icodethis.com. My top 5 mistakes and corrections.
🧐 Using the BEM class-naming convention.
🙋♀️ Giving HTML meaning - using semantic HTML.
📏 How to mix responsive and fixed measurements.
🙌 When to use margin vs Padding and on what elements.
🖉 What I reset in my CSS before I began and why.
“Mastery comes from showing up and doing the work—even when you’re not feeling ready or perfect. It’s through imperfect, repeated effort that progress becomes inevitable.”
After some searching, I decide to choose to complete mini-challenges, following a clear pathway with coding solutions, were the best way to go. Enter icodethis.com and their 30-day CSS challenge.
Here’s what I learned from Challenge One: Build a 404 Error Page, including the top 5 mistakes I made—and how I fixed them:
1. Incorrect BEM Naming
❌ My class names were inconsistent and I forgot how to best use BEM class conventions.
✅ I rewrote them using clear, structured BEM conventions.
2.Lack of Semantic HTML
❌ I used <h3> tags for supporting text.
✅ I considered meaning: brand name in a <header>, descriptive text in <p> tags, used H1 and H2 when appropriate.
3.Unresponsive Container Margins. I wanted a fixed margin but scalable container width and height.
❌ Fixed dimensions weren’t scaling.
✅ Used responsive units and fixed units:
Container -
width: calc(100vw - 60px);
height: calc(100vh - 60px);
Margin-
margin-bottom: 60px;
4. Confusing Padding vs Margin
❌ I used both interchangeably, without being sure as to best practice.
✅ I learned:
Padding = inside spacing
Margin = space between elements, based on which element you want to 'push' the other. The margin-bottom should be set on the original element to the next.
5. No CSS Reset
❌ Default browser styles interfered and I was unsure what to reset.
✅ A simple reset did the trick:
* { margin: 0; padding: 0; box-sizing: border-box; }
Code and an image of a 404 page having completed the icodethis css pathway challenge part one.
💡 Biggest Takeaway:
Step back and consider the meaning of each element. Use semantic tags to improve accessibility and clarity.
I finally made progress without burning out—and got a mini dopamine hit from finishing something. Imperfect effort beats no effort, every time.
