DEV Community

Obasi Lilian U
Obasi Lilian U

Posted on

Week 1: Gradients, SVGs, and the Art of Consistency (#100DaysOfCode)

#learning #100daysofcode #webdev #buildinpublic

Status: ✅ Complete

Focus: CSS Backgrounds, Borders, SVG Basics, Iframes

Project Highlight: The Digital Art Frame.

🛠 What I Built

  1. Savannah Brew Menu (Live Demo)

A fully responsive café menu page.

  • Key Tech: Semantic HTML, CSS Grid/Inline-block, Warm Color Palette (#F3EDE6, #E8DDD0).

  • Win: Successfully embedded live via GitHub Pages and added icons using HTML entities.

  • Link: Savannah Brew Menu

  1. The Digital Art Frame

A compositional experiment to test layering.

  • Key Tech: Linear Gradients, SVG Shapes (<rect>, <circle>), Iframes.

  • Challenge: Positioning an iframe under an SVG frame without Flexbox (solved with negative margins for now).

  • Lesson: SVG is just a coordinate system, not magic.

  1. Portfolio Refinement

Spent time tweaking spacing on existing projects.

  • Focus: Margins, padding, and border consistency.

  • Decision: Identified layout issues I’ll fix once I learn Flexbox (managing technical debt).

🧠 Key Takeaways

  • SVG Coordinates: Learned that cx, cy, and r are just math instructions for position and size. Experimenting with numbers made it click faster than theory.

  • Layering Context: Understanding how z-index and negative margins interact to create overlapping effects.

  • Consistency > Intensity: Posting daily on X, even with small updates, keeps the momentum going without burnout.

  • Technical Debt: It’s okay to leave a “good enough” fix in place if you know why it’s not perfect and have a plan to refactor later.

🚧 Challenges & Solutions
At first, SVG shapes appeared as text, then I realized I saved the file as .txt instead of .html.

When my text was not centering vertically in a div, I used padding-top for moment; flagged Flexbox as the future fix.

I actually felt overwhelmed by new concepts but then broke them down into tiny experiments (e.g., changing one coordinate at a time).

🏪Next Week’s Plan

  • Learning: Diving into Design Principles in CSS course.

  • Building: Continue refining portfolio spacing and typography.

  • Habit: Maintain daily X posts + Sunday Dev.to wrap-ups.

💬 Final Thought
"You don’t have to see the whole staircase. Just take the first step."

This week proved that small, consistent experiments build confidence faster than waiting for perfection.
See you in Week 2! 👋

Top comments (0)