DEV Community: Chamod Madhushan

How I'm Leveling Up My HTML Skills Using AI as a Beginner 🚀

Chamod Madhushan — Wed, 02 Sep 2026 05:33:54 +0000

Hey everyone! 👋

I just joined Dev.to recently, and I’m currently on a journey to learn web development. Like many beginners, I started with the basics of HTML.

At first, HTML felt pretty straightforward—just tags like

, and . But as I started building actual small layouts, I realized there's a big difference between knowing what a tag does and knowing how to structure a clean, semantic web page.

Since I'm learning solo most of the time, I started experimenting with AI tools to help me practice. Surprisingly, it has been a game-changer for my learning process. Here is how I use AI to level up my HTML game every day, and maybe it can help you too!

Generating Custom Practice Challenges 🛠️ Instead of just watching endless tutorials, I ask AI to give me small, realistic layout challenges based on my current skill level.

My go-to prompt:

"Give me 3 small HTML practice challenges for a beginner who just learned about semantic tags (header, nav, article, footer). Keep them practical, like a blog card or a recipe page."

This stops me from falling into tutorial hell and forces me to actually write code.

Real-Time Code Reviews & "Why" Explanations 🧐 When I finish writing a piece of HTML, I paste it into ChatGPT or Claude and ask for a code review. But instead of just asking it to fix my mistakes, I ask it to explain why.

My go-to prompt:

"Review this HTML code. Point out any bad practices, missing accessibility (a11y) attributes, or non-semantic elements. Explain the fixes simply."

It often points out things I completely miss, like missing alt attributes on images or misusing heading tags (skipping from

straight to

).

Breaking Down Complex Layouts into Simple HTML Skeletons 🦴 Sometimes when I look at a cool website, I get overwhelmed trying to figure out how it's structured. Now, I describe a UI component to AI and ask it to write only the HTML skeleton (no CSS yet) so I can see how semantic tags are nested.

My go-to prompt:

"Show me the HTML semantic structure for a typical e-commerce product card containing an image, product title, price, star rating, and an 'Add to Cart' button."

Seeing how elements are grouped helps me visualize the Document Object Model (DOM) much better.

What I've Learned So Far 💡
Semantics matter: Using

, , and makes code so much cleaner than drowning everything in tags.

Accessibility is not optional: Learning about aria-label, proper form labels, and image alt text early on saves a lot of bad habits later.

AI is a co-pilot, not the driver: If I just copy-paste AI code, I learn nothing. I use it to guide me, find my bugs, and give me ideas.

Final Thoughts 🌟
If you are also starting out with HTML, don't rush into heavy frameworks too quickly. Master the structure of the web first!

How are you using AI in your learning journey? Let me know in the comments below! 👇 Happy coding! ✨

html #beginners #webdev #productivity

Explore Sri Lanka: My New Travel Web Project 🌴🇱🇷

Chamod Madhushan — Tue, 01 Sep 2026 10:45:21 +0000

showdev#
webdev#
wordpress#
travel#

_Building a Travel Website for Sri Lanka _(Front-End Journey)

Sri Lanka is often called the Pearl of the Indian Ocean for a reason. From mist-covered mountains and roaring waterfalls to golden sun-kissed beaches and ancient UNESCO heritage sites, our small island packs an unbelievable amount of diversity.

As a developer who wanted to bring this visual beauty to the web, I recently built and launched a front-end travel platform using WordPress: explore-with-chamod.free.nf.

What is Inside the Platform?
The goal of this project was to design an immersive, clean, and engaging interface that guides travelers through the island’s top highlights:

Majestic Waterfalls: Showcasing gems like Ravana Falls, Baker's Falls, and Devon Falls with scenic layouts.

Golden Beaches: Highlighting coastal paradises such as Mirissa, Unawatuna, and Nilaveli.

Ancient Wonders: Bringing Sri Lanka’s rich history to life through sections dedicated to Sigiriya Rock Fortress, the Temple of the Tooth Relic in Kandy, and the ancient ruins of Anuradhapura.

Hill Country Escapes: Capturing the tea-carpeted landscapes and misty vibes of Ella and Nuwara Eliya.

Why WordPress for a Front-End Layout?
I chose WordPress for this project to experiment with rapid UI design and layout structuring. It allowed me to focus heavily on the visual presentation—choosing the right color palettes, hero sections, responsive image grids, and typography to ensure users feel like they are already taking a virtual trip across the island.

Check It Out
If you want to see how the layout came together or explore some stunning spots in Sri Lanka through a developer's lens, check it out here:
explore-with-chamod.free.nf

Let me know what you think of the design, or if you have any tips for optimizing travel UI layouts!

git commit -m "explore Sri Lanka one pixel at a time"

Hello Dev.to! My Journey Balancing Code, Content Writing, and Freelancing

Chamod Madhushan — Tue, 01 Sep 2026 10:06:13 +0000

Hi everyone! I’m Chamod, a Sri Lankan developer and writer stepping into the Dev.to community. Today, I wanted to share a project that is very close to my heart and has been a massive learning experience for me: Disaster Guard.

Why I Started This Project
Living in Sri Lanka, natural disasters like floods, landslides, and cyclones are heavy realities that affect communities. I wanted to use my front-end and web development skills to build something practical—a centralized web platform that provides clear, accessible safety information, risk dashboards, and community support resources when people need them most.

What I'm Working On

Front-End Architecture: Crafting clean HTML structures and modern, responsive CSS layouts (like custom risk-dashboard UI elements).

Community Integration: Building dedicated modules, including translation-focused donation sections to help drive real-world relief support.

Balancing Multiple Passions: Juggling my love for coding with technical writing, alongside scaling my freelance journey on platforms like Fiverr and Upwork.

Building Disaster Guard taught me that writing code isn't just about syntax—it's about problem-solving and creating tools that actually help people.

I’m super excited to be part of Dev.to to share my building journey, document my mistakes, and learn from all of you. If you're into web development, UI design, or tech writing, let’s connect!

Furthermore, I want to be a professional writer for different online platforms such as Fiverr and Upwork.

What was your very first project when you started coding? Let me know in the comments!