The Struggle: 💪😓
I had an idea for a colorful and organized webpage layout, but my first design didn't match. The result was messy and unorganized, nothing like what I imagined!
Debugging 🐞🔍🛠️:
1️⃣ Initial Insight:
I took a closer look at my code and realized I wasn't using any semantic tags. My layout was just a combination of divs, making the design difficult to control.
2️⃣ Exploring Resources:
After watching a tutorial by CodeWithHarry on YouTube, I discovered that using semantic tags (like <header>, <main>, and <footer>) not only makes the HTML more meaningful but also helps structure the layout more effectively.
3️⃣ Breakthrough Moment:
I replaced my non-semantic tags with proper HTML5 elements, updated my CSS accordingly, and BOOM! My design transformed into exactly what I wanted. The improvement was night and day!
Lesson Learned: 📚✨
The moral of the story: Semantic tags bring both clarity and visual harmony to your web projects. They make your code more readable and your final design more polished.
📸 Attached:
Comparison screenshots: the first image shows the final design, and the second image displays the initial messy layout.
🤔 To My Network:
Who else has realized this after using semantic tags? What were your takeaways?
Top comments (0)