DEV Community: Chamod Madhushan

I Taught HTML & CSS to Beginners. Here’s Why Most Tutorials Get It Completely Wrong.

Chamod Madhushan — Tue, 22 Sep 2026 04:59:20 +0000

A few weeks ago, a friend sat next to me and said, "I want to learn web development, but every course feels so dry."

I asked them what they had learned so far. They pulled up a notebook filled with definitions of , , DOCTYPE, and a long list of CSS properties they had tried to memorize like history notes.

They weren’t struggling with coding. They were struggling with how it was being taught.

If you're a developer stepping into teaching, mentoring, or writing tutorials, here is the harsh truth: No beginner cares about syntactical perfection on Day 1. They care about seeing something cool on their screen.

Here is what I learned after rethinking how I teach HTML and CSS.

Ditch the "Tag List" — Start with the Skeleton Analogy When we show a beginner a block of boilerplate code:

HTML
<!DOCTYPE html>

Document

Their eyes instantly glaze over. What is UTF-8? Why is there a doctype?

Instead, I stopped explaining the tags first and started using a simple metaphor:

HTML is the House Structure: The brick walls, doorframes, and roof. It’s bare, but it stands.

CSS is the Interior Design: The paint, wallpaper, furniture placement, and lighting.

JavaScript is the Electricity & Plumbing: The switches that turn on lights when you press them.

Suddenly, the mental model clicks. They aren't memorizing syntax anymore; they are building a house.

Don’t Teach CSS Inline, Internal, and External All at Once When introducing CSS, most courses spend 20 minutes explaining:

Inline styles (style="...")

Internal styles () External stylesheets (<link rel="...">) By the time the student reaches step 3, they are confused about which one they should actually use. My approach? Start directly with an external style.css file. Teach them the best practice from minute one. Show them how editing a separate file instantly changes their webpage. That "aha!" moment when they link their first stylesheet and see a background color change is pure magic. <ol> <li>Move from "Theory" to a Mini-Project in 15 Minutes Instead of teaching 20 different HTML tags, teach them just 5 essential elements:</li> </ol> <h1> (Headings) (Text) <a> (Links) <img> (Images) <div> or <button> (Containers/Actions) Then, immediately build a Personal Bio Card. In less than 15 minutes, they have a working component: a profile image, a name, a bio paragraph, and a working link to their LinkedIn or GitHub. When a student leaves their first session with a finished mini-card instead of a blank file full of half-remembered tags, their confidence skyrockets. <ol> <li>The Golden Rule: Empathy Over Expertise As developers, we suffer from the "Curse of Knowledge." We forget how terrifying a syntax error or a broken relative file path (../images/pic.jpg) felt when we first started.</li> </ol> When teaching: Celebrate broken layouts. When their CSS breaks and text overflows everywhere, laugh with them. Show them that debugging is 80% of our actual jobs. Focus on visual feedback. Use CSS properties with dramatic visual impacts first—background-color, border-radius, font-family—before diving into complex layout mechanics like Flexbox or Grid. Wrapping Up Teaching isn't about showing how much you know; it’s about making the other person feel capable of learning. If you are teaching someone HTML & CSS today, put away the 3-hour theoretical slides. Open a code editor, build a tiny project together, and let them break things. That’s how real developers are made. How do you usually introduce web development to absolute beginners? I’d love to hear your thoughts and teaching hacks in the comments below!

Why AI Coding Agents Didn't Replace Us, But Changed What It Means to Be a Developer

Chamod Madhushan — Mon, 14 Sep 2026 06:36:19 +0000

We spent the last few years arguing over whether AI tools would take our jobs. Every week brought a new benchmark, a flashier demo, or a hot-take about how junior developers were going extinct because an LLM could spit out a React component in three seconds.

Now that the dust has settled, the reality looks completely different.

The coding agents didn’t replace us. Instead, they quietly forced a much more uncomfortable realization: writing raw syntax was never the hardest part of software engineering anyway.

The Shift from Authors to Editors
Most of us didn’t get into programming because we loved typing out boilerplate configuration files, setting up Docker containers for the hundredth time, or manually writing repetitive unit tests. We got into it because we liked solving complex puzzles and building things that work.

Today, using AI coding tools (whether it’s Cursor, Claude Code, or background multi-agent workflows) has flipped our daily routine upside down. We spend less time hammering out syntax from scratch and much more time doing code reviews, evaluating agent outputs, chasing down subtle architectural flaws, and debugging code written by an entity that didn’t understand the business logic context.

In many ways, we’ve gone from being writers of code to being technical editors of very fast, very confident interns.

The New Kind of Exhaustion
This new workflow comes with a hidden tax. Reviewing someone else’s code — especially code generated in bulk by an AI agent that looks pristine on the surface but contains a subtle race condition deep inside — is mentally exhausting.

Join The Writer's Circle event
When you write every line yourself, your brain builds a mental map of the system as you go. When an agent generates an entire multi-file feature in ten seconds, you have to reverse-engineer the logic just to figure out where it might fail.

We aren’t drowning in syntax errors anymore; we’re drowning in cognitive load.

What Actually Matters Now
The developers who are thriving right now aren’t the ones who can type the fastest or memorize the most framework syntax. Those skills have been commoditized.

The real value has shifted entirely toward:

System Architecture: Knowing how pieces fit together at a macro level.
Problem Decomposition: Breaking massive, vague requirements into clean, structured tasks that an agent can actually handle without hallucinating.
Taste and Judgment: Deciding when not to use a tool, when to throw away generated code, and when a simple, human-written loop is better than a complex multi-agent orchestration.

The tools will keep getting better, and the generated diffs will keep getting cleaner. But at the end of the day, someone still has to answer for what the system does when it hits production.

How has your daily workflow shifted over the last year? Are you actually shipping faster, or are you just spending all your saved coding time reviewing agent PRs?

Modern WordPress Web Design: Moving Past the Monolith (And Why It's Actually Good Now)

Chamod Madhushan — Sat, 12 Sep 2026 06:15:35 +0000

Let’s be honest: for a long time, mentioning "WordPress" in a room full of frontend devs was a great way to start an argument.

We’ve all been there—inheriting a bloated theme from 2018, fighting through five different page builders, waiting ten seconds for a single page to load, and drowning in a sea of sketchy plugin dependencies. It’s enough to make anyone swear off CMS development forever and move straight to Markdown files and static sites.

But here is the plot twist: WordPress has changed completely.

If you haven't looked under the hood lately, modern WordPress is an entirely different beast. Thanks to Gutenberg, Full Site Editing (FSE), and headless architectures, it has quietly evolved into a powerful, API-first ecosystem.

If you're ready to give WordPress another chance (or just want to build faster, cleaner sites that your clients can actually manage), here is how modern WordPress web design is actually done.

Ditch the Heavy Page Builders (Seriously) We’ve all suffered through page builders that inject mountains of invisible DOM clutter, inline styles, and redundant JavaScript into your frontend. It tanks your Core Web Vitals before you even write a line of code.

Instead of leaning on bloated third-party builders, the modern approach is all about embracing the native block editor (Gutenberg):

Build Custom Blocks: Stop relying on pre-made plugins for everything. Use ACF Blocks or the @wordpress/create-block package to spin up custom, bespoke blocks using React and JSX.

Give Clients Just Enough: Custom blocks let you build exactly what the client needs—nothing more, nothing less. The backend stays clean and intuitive, and the frontend stays lightning fast.

Embrace Full Site Editing (FSE): Modern block themes let you design templates, headers, footers, and global styles right inside the site editor using a simple theme.json file. Total control, zero bloat.

Let theme.json Be Your Design System Remember scattering hardcoded hex codes, random font sizes, and custom margins across twenty different CSS files? Yeah, let's leave that in the past.

theme.json is basically the command center for modern WordPress design. You define your design tokens once, and WordPress automatically turns them into native CSS custom properties and feeds them right into the editor UI.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0F172A", "name": "Primary Dark" },
        { "slug": "accent", "color": "#3B82F6", "name": "Accent Blue" }
      ]
    }
  }
}

It keeps your design consistent and stops clients from picking neon green text on a bright yellow background. Everyone wins.

Treat Performance Like It Actually Matters A stunning design means nothing if the site takes six seconds to interactive. Modern WordPress dev requires a strict performance mindset:

Conditional Loading: Only load scripts and styles where they are actually needed. If a plugin's stylesheet is only for a contact form, don't load it on the homepage.

Go Headless If You Want: If you're a React/Next.js purist and don't want to touch PHP, use WordPress purely as a headless CMS and serve the frontend via Next.js, Astro, or Nuxt using WPGraphQL or the REST API. Best of both worlds.

Cache Aggressively: Pair your build with modern edge caching (like Cloudflare) and object caching (Redis) to take the heavy lifting off the database.

Write Styles Your Way (Tailwind or SASS) You don't have to write messy, unmanaged CSS just because it's WordPress. Many devs now bake Tailwind CSS or modern SASS right into their theme build pipelines using Vite or Laravel Mix.

Compiling your utility classes into a single, highly optimized stylesheet keeps your codebase as clean as any modern frontend app.

Wrapping Up
Modern WordPress isn't about fighting the system anymore—it's about working with its new ecosystem. By leaning into custom blocks, setting up proper design tokens in theme.json, and keeping performance front and center, you can build sites that are genuinely fun to code and a breeze for clients to maintain.

What’s your current go-to stack for building WordPress sites? Are you loving the block editor era, or are you strictly headless? Let’s talk in the comments!

I changed 5 small things about how I code, and my workflow has never been smoother

Chamod Madhushan — Fri, 11 Sep 2026 06:44:47 +0000

Confession time: For a long time, I thought being a productive developer meant typing faster, memorizing more syntax, and pulling off late-night marathons fueled entirely by coffee and panic.

Spoiler alert: It doesn't.

After burning out a couple of times on projects that shouldn't have been that stressful, I realized the problem wasn't my skills—it was my workflow. I was fighting my own tools, wasting mental energy on repetitive junk, and constantly breaking my own focus.

So, I decided to fix it. I didn't learn a brand-new framework or radically change my stack. I just tweaked a few daily habits. Here are the 5 changes that genuinely made coding fun for me again.

Treating AI like a junior intern, not a magic wand Look, I use AI tools every day, but we need to talk about how easy it is to become lazy. For a while, I was letting AI write whole chunks of logic that I barely bothered to read. That bit me in production more than once.

Now, my rule is simple: AI handles the boring, repetitive grunt work—like boilerplate code, standard regex, or basic unit test layouts. But when it comes to actual architecture or tricky business logic? That's all me. If I don't understand every single line the AI spits out, it doesn't go into the codebase. Simple as that.

Declaring war on local environment lag Nothing kills a brilliant idea faster than waiting 45 seconds for a local dev server to boot or a test suite to finish. We normalize this way too much.

I finally spent a weekend cleaning up my local setup. I deleted a bunch of bloated extensions I never used, wrote a quick shell script to spin up my local databases in one go, and stopped letting background processes hog my RAM. If your laptop sounds like a jet engine every time you open your IDE, take an hour to clean it up. Your mental health will thank you.

Writing the PR description while I'm coding You know that sinking feeling when you finish a massive feature, open a pull request, and then stare at the empty "Description" box for ten minutes because you've already forgotten why you made half those changes? Yeah.

I stopped doing that. Now, I keep a messy scratchpad open while I code. As I figure out a weird edge case or make a tough architectural choice, I jot it down right there. By the time I push the code, the PR description is practically already written. It takes zero extra effort and makes code reviews infinitely smoother for my team.

Embracing the "Two-Minute Rule" for refactoring We've all told ourselves, "Ah, I'll clean up this messy function later." And we both know "later" means never.

Instead, I adopted a lightweight version of the Boy Scout rule: if I'm touching a file and I notice a terrible variable name, some dead code, or a poorly structured helper function, I'll fix it right then—if it takes less than two minutes. It keeps the codebase clean organically without needing massive, painful refactoring sprints later on.

Defending my "Deep Work" time like my life depends on it If you check Slack, email, and Twitter every five minutes, you aren't actually coding—you're just constantly restarting your brain.

I started blocking out a strict 2-hour window every day where my notifications are silenced and my door is metaphorically closed. No meetings, no quick questions, just me and the hardest problem on my plate. Getting into that flow state used to feel rare; now, protecting it has made me twice as productive in half the time.

Wrapping up
At the end of the day, coding isn't just about the code we write; it's about the environment we create for ourselves to think clearly.

Are you making any of these mistakes right now, or do you have a workflow trick that saved your sanity recently? Let’s talk about it in the comments! 👇

The Quiet Storm: Surviving Burnout When You’re Just Tired of Pretending

Chamod Madhushan — Thu, 10 Sep 2026 09:26:26 +0000

Have you ever stared at a blinking cursor on your screen for twenty minutes, completely numb, while a little voice inside your head screams, “Why can’t I just focus?”

We are masters of disguise. We’ve perfected the art of the upbeat Slack emoji, the prompt email reply, and the casual “Yeah, everything’s good!” when someone asks how we’re holding up. We wear our productivity like a heavy suit of armor, convincing ourselves that as long as we’re keeping up appearances, no one will notice how exhausted we actually are.

Then the laptop finally shuts. The room goes dark. And the quiet storm catches up.

Let’s be honest: burnout doesn’t usually look like a dramatic movie scene where someone bursts into tears at their desk. Most of the time, it’s a lot more subtle. It’s that heavy, crushing fatigue that a full night of sleep just won't fix. It’s looking at a project you used to love and feeling absolute emptiness. It’s the constant, low-grade dread of waking up to do it all over again.

The Lie We’ve Been Sold
We’ve somehow convinced ourselves that our minds are machines.

Think about it. When your phone dips to 5% battery, you scramble for a charger without a second thought. When your laptop starts lagging, you restart it immediately. We give technology the grace to slow down and refuel.

Yet, when we run on empty, what do we do? We shame ourselves. We drink another cup of cold coffee, pop open another tab, and tell ourselves to "just push through it." We treat basic human rest like a moral failing—as if taking a break means you're lazy, weak, or falling behind.

What Healing Actually Looks Like on Hard Days
Instagram and TikTok love to sell us a very polished version of mental health care: aesthetic morning routines, expensive teas, and journaling by a sunlit window.

Real mental health care, especially when you’re deep in the trenches, isn't glamorous at all. It’s messy and uncomfortable:

It’s learning to say "no" without over-explaining. You don't need to invent a massive emergency to justify needing a night to yourself. "I can't make it tonight" is a complete sentence.

It’s stepping away from the noise. Closing the tabs, silencing the group chats, and giving yourself permission to spend an hour doing absolutely nothing of "value."

It’s letting someone in. Admitting out loud to a friend or a partner, "Hey, I'm really struggling lately." Saying those words out loud takes way more strength than carrying the weight in silence ever did.

You Are Not a Machine
If you take nothing else away from these words today, please remember this: Your worth is not tied to your output.

You are not on this earth simply to check off to-do lists, hit deadlines, or constantly prove your value to a world that will always demand more of you. You are a living, breathing human being. Your worth is completely intact on the days you write brilliant code, conquer your goals, and feel unstoppable. But your worth is just as valid on the days you spend entirely in bed, wearing sweatpants, just trying to catch your breath.

Take a Breath
If you’re carrying a heavy invisible load right now, please be gentle with yourself. You don’t have to figure your entire life out by tonight. You don’t have to fix everything at once.

Unclench your jaw. Drop your shoulders away from your ears. Take a deep breath.

The storm inside won't last forever. But until it passes, give yourself permission to just be. You are doing the best you can with a heart and a mind that are trying really hard to navigate a very loud world. And right now? That is more than enough.

Why I Stopped Chasing "Full-Stack" Perfection (And Why You Should Too)

Chamod Madhushan — Wed, 09 Sep 2026 04:36:18 +0000

Let’s be honest—if you look at a modern job description for a junior developer today, it feels less like an engineering role and more like a list of every technology invented in the last decade.

React? Required. Node, Docker, Kubernetes, AWS, UI/UX design, and maybe some blockchain just for fun? Yes, please.

For the longest time, I fell into that trap. I thought to truly make it in this industry, I needed to know everything. I’d spend my nights jumping from one framework to another, getting tutorial hell, and feeling massive imposter syndrome because I couldn't build a massive distributed system by myself over the weekend.

It took a major burnout and a few failed side projects to realize something important: trying to be a master of all stacks usually means you become a master of none.

Here is what actually changed my career trajectory:

Depth beats superficial breadth: Knowing how to deeply reason through a single language or architecture is infinitely more valuable than knowing the syntax of five different frameworks that you can only use with Stack Overflow open.

Problem-solving > Tool knowledge: Frameworks come and go (remember when jQuery was the peak of civilization?). The ability to debug logically, read documentation, and understand why something broke will outlive any tech stack.

Embracing the "I don't know": Senior devs aren't the ones who know everything; they're just the ones who are better at figuring things out on the fly.

If you're starting out or feeling overwhelmed by the endless wave of new tech, take a deep breath. You don't need to learn every tool on Twitter today. Pick a stack, build real things that solve actual problems, and get comfortable with being bad at something before you get good at it.

What’s the one technology you secretly wish would just disappear from job descriptions? Let's chat in the comments. 👇

The Python Cheat Sheet You Actually Need (Without the Boring Textbook Definitions)

Chamod Madhushan — Tue, 08 Sep 2026 05:35:42 +0000

Let’s be real: when you first start learning Python—or when you need a quick refresher—most documentation reads like it was written by an alien law firm. You’re hit with terms like polymorphic instantiation and mutable sequence objects when all you want to know is how to loop through a list without breaking your script.

Python is supposed to be fun. It’s the language that got most of us excited about coding in the first place because it doesn’t force you to jump through a million hoops just to print a line of text.

If you want a clean, no-nonsense cheat sheet that covers the core concepts you actually use day-to-day, keep this bookmarked. No fluff, just the good stuff.

Variables and Data Types (The Building Blocks)

You don’t need to declare types; Python figures it out. Just assign and go.

name = "Elena"          # String
age = 28                # Integer
height = 5.7            # Float
is_learning = True      # Boolean

Working with Collections

Forget complex arrays; Python gives you lists, dictionaries, and sets right out of the box.

Lists (Ordered, mutable):

Python
languages = ["Python", "JavaScript", "Rust"]
languages.append("Go")          # Add an item
print(languages[0])             # Access first item -> "Python"

Dictionaries (Key-Value pairs):

Python
developer = {
    "name": "Elena",
    "stack": ["Python", "FastAPI"],
    "experience_years": 4
}
print(developer["name"])      # Access value -> "Elena"

Control Flow (Making Decisions)

Keep your logic clean and readable. Notice how Python uses indentation instead of curly braces.

Python
score = 85

if score >= 90:
    print("Grade: A")
elif score >= 75:
    print("Grade: B")
else:
    print("Grade: Needs Improvement")

Loops (Doing Repetitive Work So You Don't Have To) For Loop (Iterating over items):

Python
frameworks = ["Django", "Flask", "FastAPI"]
for fw in frameworks:
    print(f"Using {fw}")
List Comprehensions (The Pythonic Way):

Instead of writing a bulky multi-line loop to filter data, do it in one elegant line:

Python
numbers = [1, 2, 3, 4, 5, 6]
evens = [n for n in numbers if n % 2 == 0]
print(evens)  # Output: [2, 4, 6]

Functions (Packaging Your Logic)

Use def to create reusable blocks of code. Type hinting (-> str) makes your code cleaner and easier to debug.

Python
def greet_developer(name: str, language: str = "Python") -> str:
    return f"Hello, {name}! Glad to see you coding in {language}."

message = greet_developer("Alex")
print(message)

Working with Files (The Clean Way)

Using the with statement ensures your files close properly automatically, preventing memory leaks and locked files.

Python
# Writing to a file
with open("notes.txt", "w") as file:
    file.write("Python makes file handling effortless.")

# Reading from a file
with open("notes.txt", "r") as file:
    content = file.read()
    print(content)

Why AI Can’t Replace the Developer Who Knows How to Debug (And What to Do About It)

Chamod Madhushan — Sat, 05 Sep 2026 08:53:21 +0000

Lately, if you’ve been building anything with HTML, CSS, and JavaScript, you’ve probably had this exact moment:

You type a prompt, and boom an AI hands you clean, working code in three seconds flat.

It feels like absolute magic. You sit back, take a sip of your coffee, and think, "Man, my job is officially solved."

...And then, something breaks.

And right there, at 2:00 AM, is where the real engineering begins.

As we lean more and more into AI-assisted development, a quiet, dangerous illusion is forming. We’ve started believing that writing code is the hardest part of being a developer. But if the past few months of heavy AI coding have taught me anything, it’s this: Knowing how to write code was never the superpower. Knowing how to fix it when it shatters is.

The "Copy-Paste Trap" in Modern Frontend
Look, combining AI with modern frontend work is amazing. Need a custom modal with smooth CSS transitions and accessible keyboard navigation? Done. Need a Vanilla JS state-management helper? Easy.

The trap isn't that the AI code is garbage—often, it’s surprisingly decent. The real trap is context blindness.

An AI generates a neat little snippet, but it has no clue what the rest of your project looks like. It doesn’t know why your CSS variable naming convention is a bit messy, or how that random third-party script you installed last week is going to violently clash with the event listeners it just suggested.

When a bug pops up in an AI-generated component, a developer who hasn’t built up their foundational debugging muscles will just stare at the screen, completely lost. Because if you don’t understand how the bricks were laid in the first place, you have zero idea which one is pulling the whole wall down.

The Skills That Actually Matter Now
If writing basic code is becoming a commodity, what actually makes a developer valuable right now? It really boils down to three simple shifts:

From Coder to Technical Director
Instead of spending hours manually typing out boilerplate CSS grids or basic fetch requests, your job has changed. You’re now the director. You have to look at an AI’s output and instantly sniff out the structural flaws, security gaps, or weird performance bottlenecks (like unnecessary DOM reflows that will lag a mobile browser).
Getting Cozy with Browser DevTools
AI is great at writing code, but it is notoriously terrible at diagnosing obscure runtime errors specific to your unique environment. Deepening your understanding of browser developer tools, memory leaks, network tabs, and console stack traces isn't a "nice-to-have" skill anymore. It’s your safety net.
Knowing the "Why" Before the "How"
Before you ask an AI to solve a problem, force yourself to write out the logic in plain English first. If you don't actually understand the underlying JavaScript concept—like closures, asynchronous event loops, or CSS specificity rules—you won't even realize when the AI just handed you a hacky, fragile workaround.

The Developer's New Superpower
Let’s be real: AI isn't going to replace developers. But developers who use AI will replace those who don't—provided they use it as an amplifier for their own brain, not a substitute for it.

Next time you prompt an AI for a frontend component, don't just blindly copy-paste it into your codebase and walk away. Take sixty seconds to walk through it line by line. Break it deliberately. See how it reacts.

Because the future belongs to the engineers who use machines to build faster, but still keep their hands firmly on the steering wheel when things inevitably go sideways.

Have you found yourself falling into the copy-paste trap lately, or has AI actually made your debugging sharper? Let’s chat in the comments—I'd genuinely love to know how you're balancing it.

Mastering the Frontend Trinity: Why HTML, CSS, and JavaScript Belong Together

Chamod Madhushan — Fri, 04 Sep 2026 03:30:54 +0000

When you first step into web development, the learning path usually hits you with a trio of acronyms: HTML, CSS, and JavaScript.

Think of them not just as separate technologies, but as the body, clothing, and nervous system of every website you visit. If you are starting your blogging journey on platforms like Dev.to or Medium, breaking down these three pillars with real-world analogies and code is one of the best ways to connect with fellow developers.

Here is a blueprint you can use, adapt, or publish directly as your next article:

The Blueprint: Anatomy of a Web Page
To truly understand how a modern web page comes to life, we need to look at how these three languages interact with each other.

HTML (HyperText Markup Language) — The Skeleton HTML provides the basic structure. Without it, your web page is just an empty void. It tells the browser what elements exist on the page—headings, paragraphs, images, and buttons.

HTML

<!-- A simple HTML structure -->
<article class="blog-card">
  <h1>Hello World</h1>
  <p>Welcome to my web development journey!</p>
  <button id="like-btn">❤️ Like this post</button>
</article>

CSS (Cascading Style Sheets) — The Skin and Style If HTML is the skeleton, CSS is the design system. It handles colors, spacing, typography, layouts (using Flexbox or Grid), and animations. It turns a plain text document into a visual masterpiece.

CSS
/* Styling our article card */

.blog-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.blog-card h1 {
  color: #2d3748;
  font-size: 1.5rem;
}

#like-btn {
  background-color: #3182ce;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#like-btn:hover {
  background-color: #2b6cb0;
}

JavaScript — The Nervous System JavaScript adds interactivity. While HTML and CSS sit there looking pretty, JavaScript makes things happen when a user clicks a button, submits a form, or scrolls down the page.

JavaScript
// Adding interactivity to our button

const likeButton = document.getElementById('like-btn');

let isLiked = false;

likeButton.addEventListener('click', () => {
  isLiked = !isLiked;
  if (isLiked) {
    likeButton.textContent = '💖 Liked!';
    likeButton.style.backgroundColor = '#e53e3e';
  } else {
    likeButton.textContent = '❤️ Like this post';
    likeButton.style.backgroundColor = '#3182ce';
  }
});

Why Writing About the Basics Matters
You might think, “Everyone knows HTML, CSS, and JS. Why should I write about them?”

The truth is, experienced developers love clean breakdowns of fundamentals, and beginners search for these topics daily. When you write about them, focus on:

Your unique perspective: How did you overcome a confusing CSS Flexbox alignment issue?

Clean code snippets: Keep them concise and copy-pasteable.

Interactive demos: Link a CodePen or GitHub repository so readers can play with your code live.

Wrapping Up
Building for the web is an ongoing journey of combining structure, style, and logic. Whether you are building a simple landing page or a complex React application, these three foundational technologies remain at the heart of it all.

What was the hardest concept for you to grasp when you first learned HTML, CSS, and JavaScript? Let me know in the comments below!

HTML, CSS, and AI: Leveling Up Your Web Dev Workflow 🚀

Chamod Madhushan — Thu, 03 Sep 2026 07:40:25 +0000

Hey dev.to family! 👋 Yesterday, I shared a quick post about getting started with HTML and AI. Today, let's take the next step and add CSS into the mix.

If you've ever felt that AI-generated websites look a bit plain and boring, this post is for you. Let's look at how you can use HTML, CSS, and AI together without any stress.

Why Use AI with HTML and CSS?

AI is amazing at writing code, but combining these three gives you superpowers:

Instant Styling: You don't have to write every style from scratch. Just tell the AI what colors or fonts you want.

Save Time: Skip typing basic boilerplate code and focus on the fun parts.

Easy Tweaks: Want to change a button color or fix a layout? Just tell the AI, and it fixes the CSS instantly.

The Simple 3-Step Workflow

Build the Structure First (HTML) Always ask the AI for the clean HTML skeleton first. Don't worry about colors or design yet.

Prompt Example:

"Write clean HTML5 code for a portfolio landing page. Include a navigation bar, a hero section with a button, a project section, and a footer."

Add the Design (CSS) Once you have your HTML, paste it back to the AI and ask for the CSS styling.

Prompt Example:

"Here is my HTML code [paste HTML here]. Now, write a modern CSS stylesheet for it. Use a sleek dark-mode theme with nice spacing and hover effects."

Polish and Fix If something looks a little off, just chat with the AI to fix it:

"Add more space between the hero section and the project grid."

"Make sure the layout looks great on mobile phones."

Quick Tips for Best Results
Go Piece by Piece: Don't ask the AI to build a whole complex website in one go. Build it section by section (like just the navbar first) for much cleaner code.

Describe the Vibe: Tell the AI the style you want. Use words like minimalist, modern dark mode, clean, or corporate.

How are you using AI in your frontend workflow? Let me know in the comments below! 👇 Happy coding! 💻✨

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"