
<div class="prose prose-invert max-w-none">

  <p>Hey there, future web developer! 👋</p>

  <p>
    Welcome to the blog. Today, we're going to tackle a classic beginner
    project: building a <strong>to-do list</strong>. But we're going to do
    it with a special challenge: we will use <strong>only HTML</strong>.
  </p>

  <p>
    That's right. No CSS for styling, and <em>definitely</em> no
    JavaScript for functionality.
  </p>

  <p>
    "But wait," you ask, "how can you make an <em>interactive</em> to-do
    list with just HTML?"
  </p>

  <p>
    The short answer is: <strong>you can't</strong>. An HTML-only list
    will be <em>static</em>. You won't be able to add new items
    dynamically or have the list save your changes.
  </p>

  <p>
    So, why are we doing this? Because it's the absolute best way to learn
    the <strong>semantic structure</strong> of a webpage. Before you can
    make things interactive (JavaScript) or pretty (CSS), you must build a
    strong, logical foundation (HTML). This project will teach you how to
    use lists, forms, labels, and other essential tags correctly.
  </p>

  <p>Let's get started!</p>

  <hr />

  <h2>Part 1: The Basic Skeleton</h2>

  <p>
    First, every HTML document needs its "boilerplate." This is the
    minimum setup required for a browser to understand your page.
  </p>

  <p>
    Create a new file named <code>index.html</code> and open it in your
    favorite text editor.
  </p>

  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;My HTML To-Do List&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
    &lt;h1&gt;My Awesome To-Do List&lt;/h1&gt;
    
&lt;/body&gt;
&lt;/html&gt;</code></pre>

  <p>Let's break this down:</p>
  <ul>
    <li>
      <code>&lt;!DOCTYPE html&gt;</code>: Tells the browser, "This is an
      HTML5 document."
    </li>
    <li>
      <code>&lt;html&gt;</code>: The root element that wraps everything.
      The <code>lang="en"</code> attribute tells the browser the page is
      in English, which is great for accessibility.
    </li>
    <li>
      <code>&lt;head&gt;</code>: Contains the "meta" information about
      your page (data <em>about</em> the data), like the character
      encoding (<code>&lt;meta charset="UTF-8"&gt;</code>) and the title
      that appears in your browser tab (<code>&lt;title&gt;</code>).
    </li>
    <li>
      <code>&lt;body&gt;</code>: This is where all your visible
      content—like text, images, and, yes, your list—will go.
    </li>
    <li>
      <code>&lt;h1&gt;</code>: Our main heading. It's the most
      important title on the page.
    </li>
  </ul>

  <p>
    Save this file and open it in your web browser. You should see a blank
    page with the text "My Awesome To-Do List" at the top.
  </p>

  <hr />

  <h2>Part 2: The Core Element: A Single Task</h2>

  <p>
    What's the most important part of any to-do list? The ability to
    <strong>check something off</strong>. HTML has a perfect element for
    this!
  </p>

  <p>We're going to use two tags together:</p>
  <ol>
    <li>
      <code>&lt;input type="checkbox"&gt;</code>: This creates the
      clickable checkbox.
    </li>
    <li>
      <code>&lt;label&gt;</code>: This provides the text
      <em>description</em> for the checkbox.
    </li>
  </ol>

  <p>
    Let's add our first task inside the <code>&lt;body&gt;</code>, right
    below the <code>&lt;h1&gt;</code>.
  </p>

  <pre><code>&lt;!-- Inside the &lt;body&gt; tag --&gt;
&lt;h1&gt;My Awesome To-Do List&lt;/h1&gt;

&lt;input type="checkbox" id="task1"&gt;
&lt;label for="task1"&gt;Buy groceries&lt;/label&gt;</code></pre>

  <p>
    This is <strong>super important</strong>, so pay close attention to
    the <code>id</code> and <code>for</code> attributes:
  </p>
  <ul>
    <li>
      The <code>&lt;input&gt;</code> has an <code>id="task1"</code>. An
      <code>id</code> must be <strong>unique</strong> on the entire page.
      It's like a specific name tag for that one element.
    </li>
    <li>
      The <code>&lt;label&gt;</code> has a <code>for="task1"</code>. The
      <code>for</code> attribute tells the label <em>which</em> element
      it's describing. It "links" the label to the input with the
      matching <code>id</code>.
    </li>
  </ul>

  <p>
    <strong>Why do this?</strong> Two big reasons:
  </p>
  <ol>
    <li>
      <strong>Usability:</strong> Now, you can click <em>either</em> the
      checkbox OR the text "Buy groceries" to check the box. This gives
      the user a much larger click target.
    </li>
    <li>
      <strong>Accessibility:</strong> Screen readers (software used by
      visually impaired users) will now announce that the label "Buy
      groceries" belongs to the checkbox. This makes your page usable for
      everyone.
    </li>
  </ol>

  <p>Save and refresh your browser. You should have a working checkbox!</p>

  <hr />

  <h2>Part 3: Making it a <em>List</em></h2>

  <p>
    That one task looks a little lonely. A to-do list is, well, a
    <em>list</em> of things. The proper HTML way to group a list of items
    is with... you guessed it, a list element!
  </p>

  <p>
    Since the order of our to-do items doesn't <em>really</em> matter
    (it's not a set of instructions), we'll use an
    <strong>unordered list</strong> (<code>&lt;ul&gt;</code>). Each item
    in the list will be a <strong>list item</strong> (
    <code>&lt;li&gt;</code>).
  </p>

  <p>
    Let's wrap our task from Part 2 in these tags and add a few more.
  </p>

  <pre><code>&lt;!-- Inside the &lt;body&gt; tag --&gt;
&lt;h1&gt;My Awesome To-Do List&lt;/h1&gt;

&lt;ul&gt;
    &lt;li&gt;
        &lt;input type="checkbox" id="task1"&gt;
        &lt;label for="task1"&gt;Buy groceries&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;input type="checkbox" id="task2"&gt;
        &lt;label for="task2"&gt;Feed the cat&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;input type="checkbox" id="task3"&gt;
        &lt;label for="task3"&gt;Finish HTML tutorial&lt;/label&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>

  <p>Look at that structure!</p>
  <ul>
    <li>
      The <code>&lt;ul&gt;</code> (unordered list) acts as the container
      for all the tasks.
    </li>
    <li>
      Each <code>&lt;li&gt;</code> (list item) wraps a <em>single</em>
      task.
    </li>
    <li>
      Inside each <code>&lt;li&gt;</code>, we have our checkbox/label
      pair.
    </li>
    <li>
      <strong>Notice:</strong> Each <code>id</code> is unique (
      <code>task1</code>, <code>task2</code>, <code>task3</code>), and
      each <code>for</code> attribute matches its corresponding
      <code>id</code>. This is crucial.
    </li>
  </ul>

  <p>
    Save and refresh. Now you have a proper bulleted list of tasks, and
    you can check each one off.
  </p>

  <hr />

  <h2>Part 4: Organizing Your List with <code>&lt;fieldset&gt;</code></h2>

  <p>
    Okay, our list is functional, but it's a bit messy. What if we have
    tasks for "Work" and tasks for "Home"? We can group them
    semantically.
  </p>

  <p>
    For this, we'll use the <code>&lt;fieldset&gt;</code> element, which
    is meant to group related controls in a form. To give the group a
    name, we use the <code>&lt;legend&gt;</code> tag.
  </p>

  <p>Let's refactor our code to create two different groups.</p>

  <pre><code>&lt;!-- Inside the &lt;body&gt; tag --&gt;
&lt;h1&gt;My Awesome To-Do List&lt;/h1&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Home Tasks&lt;/legend&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;input type="checkbox" id="task1"&gt;
            &lt;label for="task1"&gt;Buy groceries&lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;input type="checkbox" id="task2"&gt;
            &lt;label for="task2"&gt;Feed the cat&lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/fieldset&gt;

&lt;fieldset&gt;
    &lt;legend&gt;Work Tasks&lt;/legend&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;input type="checkbox" id="task3"&gt;
            &lt;label for="task3"&gt;Finish HTML tutorial&lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;input type="checkbox" id="task4"&gt;
            &lt;label for="task4"&gt;Email the boss&lt;/label&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/fieldset&gt;</code></pre>

  <p>
    By default, the browser will even draw a nice box around our groups
    with the <code>&lt;legend&gt;</code> text acting as a title for the
    box. This is pure semantic HTML adding a (slight) visual style, all
    without a single line of CSS!
  </p>

  <hr />

  <h2>Part 5: Advanced (but still HTML-only!) Touches</h2>

  <p>Let's add two more features to show off your HTML skills.</p>

  <h3>1. Marking a Task as "Done" by Default</h3>

  <p>
    What if a task is already completed? We can tell the browser to render
    the checkbox as "checked" when the page first loads. We do this by
    adding the <strong>boolean attribute</strong> <code>checked</code>.
  </p>

  <p>Let's make "Feed the cat" checked by default.</p>

  <pre><code>&lt;!-- Inside the "Home Tasks" fieldset --&gt;
&lt;li&gt;
    &lt;input type="checkbox" id="task2" checked&gt;
    &lt;label for="task2"&gt;Feed the cat&lt;/label&gt;
&lt;/li&gt;</code></pre>

  <p>
    Just add the word <code>checked</code> inside the
    <code>&lt;input&gt;</code> tag. That's it! Save and refresh, and
    you'll see the box is already ticked.
  </p>

  <h3>2. Adding Sub-Tasks with <code>&lt;details&gt;</code></h3>

  <p>
    What if a task is complex? "Buy groceries" could have its own list. We
    can use the awesome <code>&lt;details&gt;</code> and
    <code>&lt;summary&gt;</code> tags to create a collapsible, expandable
    section.
  </p>

  <p>Let's modify our "Buy groceries" task.</p>

  <pre><code>&lt;!-- Inside the "Home Tasks" fieldset --&gt;
&lt;li&gt;
    &lt;input type="checkbox" id="task1"&gt;
    &lt;label for="task1"&gt;Buy groceries&lt;/label&gt;
    
    &lt;details&gt;
        &lt;summary&gt;Grocery List&lt;/summary&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="subtask1"&gt;
                &lt;label for="subtask1"&gt;Milk&lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="subtask2"&gt;
                &lt;label for="subtask2"&gt;Eggs&lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="subtask3"&gt;
                &lt;label for="subtask3"&gt;Bread&lt;/label&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/details&gt;
&lt;/li&gt;</code></pre>

  <p>
    This is called <strong>nesting</strong>. We're putting a
    <code>&lt;ul&gt;</code> <em>inside</em> a
    <code>&lt;details&gt;</code> tag, which is <em>inside</em> our main
    <code>&lt;li&gt;</code>.
  </p>
  <ul>
    <li>
      <code>&lt;details&gt;</code>: The wrapper for the collapsible
      content.
    </li>
    <li>
      <code>&lt;summary&gt;</code>: The text that is <em>always</em>
      visible (e.g., "Grocery List"). Clicking this will show/hide the
      rest.
    </li>
    <li>
      The rest of the content (our nested list) is hidden until you click
      the summary.
    </li>
  </ul>

  <p>How cool is that? An interactive toggle with only HTML!</p>

  <hr />

  <h2>Part 6: The "Add Task" Form (The Illusion)</h2>

  <p>
    Finally, every to-do list app has a way to add <em>new</em> tasks. As
    we said, we can't make this <em>work</em> without JavaScript, but we
    can—and should—build the HTML structure for it.
  </p>

  <p>
    The semantic way to build a section for user input is with a
    <code>&lt;form&gt;</code> tag.
  </p>

  <p>
    Let's add this at the bottom of our <code>&lt;body&gt;</code>.
  </p>

  <pre><code>&lt;!-- At the bottom of the &lt;body&gt; --&gt;

&lt;h2&gt;Add a New Task&lt;/h2&gt;
&lt;form&gt;
    &lt;label for="new-task"&gt;Task:&lt;/label&gt;
    &lt;input type="text" id="new-task"&gt;
    &lt;button type="submit"&gt;Add Task&lt;/button&gt;
&lt;/form&gt;</code></pre>

  <p>Let's break this down:</p>
  <ul>
    <li>
      <code>&lt;form&gt;</code>: The container for our input fields.
    </li>
    <li>
      <code>&lt;label for="new-task"&gt;</code>: The label, just like
      before, linked to...
    </li>
    <li>
      <code>&lt;input type="text" id="new-task"&gt;</code>: This time,
      the <code>type</code> is <code>text</code>, which gives us an empty
      text box for typing.
    </li>
    <li>
      <code>&lt;button type="submit"&gt;</code>: A button! The
      <code>type="submit"</code> tells the browser this button's job is
      to "submit" the form.
    </li>
  </ul>

  <p>
    <strong>What happens when you click it?</strong>
    <br />
    Right now, it will just refresh the page. This is the default HTML
    behavior for a form submission. To make it <em>actually</em> add a
    task to the list, you would need JavaScript to intercept this
    "submit" event, grab the text from the input box, and create new HTML
    elements.
  </p>

  <p>
    But for our HTML-only mission, simply having the structure in place is
    a perfect end-goal.
  </p>

  <hr />

  <h2>Final Code &amp; What's Next</h2>

  <p>
    Here is our complete <code>index.html</code> file with everything we
    built.
  </p>

  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;My HTML-Only To-Do List&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
    &lt;h1&gt;My Awesome To-Do List&lt;/h1&gt;

    &lt;fieldset&gt;
        &lt;legend&gt;Home Tasks&lt;/legend&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="task1"&gt;
                &lt;label for="task1"&gt;Buy groceries&lt;/label&gt;
                
                &lt;details&gt;
                    &lt;summary&gt;Grocery List&lt;/summary&gt;
                    &lt;ul&gt;
                        &lt;li&gt;
                            &lt;input type="checkbox" id="subtask1"&gt;
                            &lt;label for="subtask1"&gt;Milk&lt;/label&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;input type="checkbox" id="subtask2"&gt;
                            &lt;label for="subtask2"&gt;Eggs&lt;/label&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;input type="checkbox" id="subtask3"&gt;
                            &lt;label for="subtask3"&gt;Bread&lt;/label&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/details&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="task2" checked&gt;
                &lt;label for="task2"&gt;Feed the cat&lt;/label&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/fieldset&gt;

    &lt;fieldset&gt;
        &lt;legend&gt;Work Tasks&lt;/legend&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="task3"&gt;
                &lt;label for="task3"&gt;Finish HTML tutorial&lt;/label&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;input type="checkbox" id="task4"&gt;
                &lt;label for="task4"&gt;Email the boss&lt;/label&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/fieldset&gt;

    &lt;h2&gt;Add a New Task&lt;/h2&gt;
    &lt;form&gt;
        &lt;label for="new-task"&gt;Task:&lt;/label&gt;
        &lt;input type="text" id="new-task" placeholder="e.g. Take out the trash"&gt;
        &lt;button type="submit"&gt;Add Task&lt;/button&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

  <p>
    Congratulations! You just built a visually organized, accessible, and
    semantically rich to-do list <strong>using only HTML</strong>.
  </p>

  <p>You've learned about:</p>
  <ul>
    <li>📜 Basic HTML boilerplate</li>
    <li>
      ☑️ Checkboxes (<code>&lt;input type="checkbox"&gt;</code>)
    </li>
    <li>
      🏷️ The critical importance of <code>&lt;label&gt;</code> with
      <code>for</code> and <code>id</code>
    </li>
    <li>
      📋 Lists (<code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code>)
    </li>
    <li>
      📦 Grouping with <code>&lt;fieldset&gt;</code> and
      <code>&lt;legend&gt;</code>
    </li>
    <li>
      👉 Showing pre-completed tasks with the <code>checked</code>
      attribute
    </li>
    <li>
      🔽 Creating collapsable sections with <code>&lt;details&gt;</code>
      and <code>&lt;summary&gt;</code>
    </li>
    <li>
      📝 Building input forms with <code>&lt;form&gt;</code>,
      <code>&lt;input type="text"&gt;</code>, and
      <code>&lt;button&gt;</code>
    </li>
  </ul>

  <p>
    <strong>Your next steps?</strong>
  </p>
  <ol>
    <li>
      <strong>Try adding CSS!</strong> How would you remove the bullets?
      Change the font? Make the "Add Task" button green?
    </li>
    <li>
      <strong>Try adding JavaScript!</strong> How would you make the "Add
      Task" button <em>actually</em> add a new <code>&lt;li&gt;</code> to
      the list?
    </li>
  </ol>

  <p>You've built the perfect foundation. Happy coding!</p>
</div>
  

Building a To-Do Tutorial with Only HTML: A Beginner's Guide

Beyond the Code: A Deep Dive into 'Vibe' and Why It's Your Most Important Frontend Metric


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">Want to build a project to practice your new HTML skills? A to-do list is a classic! But what if you want to build one using <strong class="font-semibold text-black">only HTML</strong>, without any JavaScript or CSS? It's not only possible, but it's also the perfect way to learn about some of the most important semantic tags in the language. This tutorial will show you how.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We won't be building a dynamic application—you won't be able to add new items without editing the code. Instead, you'll build a <strong class="font-semibold text-black">structurally sound, semantic, and accessible</strong> checklist. This is the solid foundation that all web development is built on. Let's get started.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">What You'll Build: The Final Code</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, let's look at the final product. This is all the HTML you need. You can copy this, save it as an `index.html` file, and open it in your browser right now to see it in action.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend class="text-2xl font-semibold p-2"&gt;My Daily Tasks&lt;/legend&gt;
    
    &lt;div style="margin-bottom: 10px;"&gt;
      &lt;input type="checkbox" id="task1" name="task1"&gt;
      &lt;label for="task1"&gt;Finish this HTML tutorial&lt;/label&gt;
    &lt;/div&gt;
    
    &lt;div style="margin-bottom: 10px;"&gt;
      &lt;input type="checkbox" id="task2" name="task2"&gt;
      &lt;label for="task2"&gt;Learn about semantic tags like &amp;lt;fieldset&amp;gt;&lt;/label&gt;
    &lt;/div&gt;
    
    &lt;div style="margin-bottom: 10px;"&gt;
      &lt;input type="checkbox" id="task3" name="task3"&gt;
      &lt;label for="task3"&gt;Plan my next project&lt;/label&gt;
    &lt;/div&gt;
    
    &lt;div style="margin-top: 20px;"&gt;
      &lt;button type="reset"&gt;Reset List&lt;/button&gt;
    &lt;/div&gt;
    
  &lt;/fieldset&gt;
&lt;/form&gt;
</code>
  </pre>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Notice a few things: the checkboxes work, clicking the text (the \`&lt;label&gt;\`) also checks the box, and the "Reset List" button will uncheck all the items for you. This is all built-in browser functionality, brought to life with the right HTML tags.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Step-by-Step Breakdown: Crafting Your To-Do List</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Let's break down that code, tag by tag, so you understand the "why" behind each piece.</p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 1: The `&lt;form&gt;` Container</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">A to-do list is, semantically, a form. It's a list of inputs that a user interacts with. The `&lt;form&gt;` tag is the container for all form elements, like checkboxes, text fields, and buttons. Even though we aren't "submitting" this form to a server, using the tag tells the browser and screen readers, "This is an interactive group of controls."</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 2: The `&lt;fieldset&gt;` and `&lt;legend&gt;` for Grouping</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the most important semantic trick. A `&lt;fieldset&gt;` tag is used to group related controls within a form. A `&lt;legend&gt;` tag provides a caption or title for that group. By wrapping our tasks in a `&lt;fieldset&gt;` and giving it a `&lt;legend&gt;` of "My Daily Tasks," we are explicitly telling assistive technologies (like screen readers) that all the checkboxes inside belong to this group. It's a huge win for accessibility.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;My Daily Tasks&lt;/legend&gt;
    ... tasks go here ...
  &lt;/fieldset&gt;
&lt;/form&gt;
</code>
  </pre>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 3: Adding Tasks with `&lt;input&gt;` and `&lt;label&gt;`</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the core of our list. Each task is a combination of two tags:</p>
  
  <ol class="list-decimal list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">`&lt;input type="checkbox"&gt;`</strong>: This HTML tag tells the browser to render a clickable checkbox.</li>
    <li><strong class="font-semibold text-black">`&lt;label&gt;`</strong>: This tag provides the text description for the input.</li>
  </ol>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The magic is how they are linked. Notice the `id` on the `&lt;input&gt;` and the `for` on the `&lt;label&gt;`. The `for` attribute of the label must <strong class="font-semibold text-black">exactly match</strong> the `id` of the input. This does two things:
  1.  It tells screen readers that the label "Finish this HTML tutorial" describes the first checkbox.
  2.  It allows the user to click on the text label to toggle the checkbox, which is great for usability, especially on mobile devices.</p>

  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
&lt;div&gt;
  &lt;input type="checkbox" id="task1" name="task1"&gt;
  &lt;label for="task1"&gt;Finish this HTML tutorial&lt;/label&gt;
&lt;/div&gt;
</code>
  </pre>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 4: The `&lt;button type="reset"&gt;`</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Finally, we add a `&lt;button&gt;`. By setting its `type` attribute to `"reset"`, we get free functionality from the browser. When clicked, this button will reset all controls inside its parent `&lt;form&gt;` to their default values (which, for checkboxes, is "unchecked"). It's a simple, no-JavaScript way to add a bit of interaction.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Limitations and Next Steps</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is a <strong class="font-semibold text-black">static</strong> list. You've built the "skeleton" of a to-do list, but it's not a full application. To add features like saving tasks or adding new tasks without editing the code, you would need to learn:</p>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">CSS:</strong> To make your list look beautiful, change colors, fonts, and layout.</li>
    <li><strong class="font-semibold text-black">JavaScript:</strong> To add interactivity, like creating new tasks, deleting tasks, and saving them to the browser's local storage.</li>
  </ul>
  
  <p class="text-lg text-black mb-6 leading-relaxed">But don't rush! Mastering semantic HTML is the most important first step. You've learned how to build a page that is accessible and makes sense to a browser, not just one that looks a certain way.</p>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: Learning HTML in Madrid (GEO-Targeted Example)</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Learning the foundations of HTML is your first step into the professional tech world. For developers in Madrid, the local community is incredibly vibrant and welcoming to beginners. Connecting with other learners and senior developers at local meetups can give you the motivation and context to turn this tutorial into a career.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This kind of locally-focused information is key for SEO (Search Engine Optimization) because it answers a specific need for users in a certain area (like "web development beginners Madrid"). It shows that the content is relevant to their specific context, which builds trust and authority.</p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top Beginner-Friendly Dev Meetups in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Here are some great communities in Madrid to check out after you've finished this tutorial and are ready for your next step.</p>
  
  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Community Name</th>
          <th scope="col" class="px-6 py-4">Focus Area</th>
          <th scope="Following" class="px-6 py-4">Why It's Good for Beginners</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Open Frontend Community - ERNI Madrid</strong></td>
          <td class="px-6 py-4 text-black">General Frontend, JavaScript</td>
          <td class="px-6 py-4 text-black">A perfect place to see what senior frontend developers are working on and ask questions about your journey from HTML to JavaScript.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">DevMad! Developers in Madrid</strong></td>
          <td class="px-6 py-4 text-black">General Software Development</td>
          <td class="px-6 py-4 text-black">A broad community to meet other new developers, find study partners, and get a feel for the local industry.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">IxDF - Interaction Design Foundation</strong></td>
          <td class="px-6 py-4 text-black">UX/UI, Design Principles</td>
          <td class="px-6 py-4 text-black">Great for HTML learners who want to understand the "why" behind web layout and user experience. Connects your code to the human user.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Node.js Madrid</strong></td>
          <td class="px-6 py-4 text-black">Backend JavaScript</td>
          <td class="px-6 py-4 text-black">A bit advanced, but perfect for seeing the "full stack" path. Understanding what happens on the server can make you a better frontend developer.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">A Guide to Ranking: SEO Strategy for This Tutorial</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This section is a meta-analysis of the Search Engine Optimization (SEO) strategy for this very article, just like in the example you provided. It's designed to show how this content is built to rank on Google.</p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Keyword Strategy</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The content is built around a core set of keywords with high beginner intent.</p>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">Primary Keywords:</strong> "html to-do list," "html tutorial," "to-do list with html only."</li>
    <li><strong class="font-semibold text-black">Secondary/Long-Tail Keywords:</strong> "how to make a to-do list in html," "simple to-do list html code," "beginner html tutorial," "semantic html tags," "html fieldset legend tutorial," "web development beginners Madrid."</li>
  </ul>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Content Structure and E-A-T</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The article is structured for both human readability and Google's crawlers, aiming to build E-A-T (Expertise, Authoritativeness, Trustworthiness).</p>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">Expertise:</strong> We show expertise by not just providing code, but explaining the <em class="italic">why</em> behind semantic tags like `&lt;fieldset&gt;` and `&lt;label&gt;`. We also manage expectations by explaining the limitations of an HTML-only solution.</li>
    <li><strong class="font-semibold text-black">Structure:</strong> Clear H1, H2, and H3 tags create a logical hierarchy that Google can understand.
    <li><strong class="font-semibold text-black">Readability:</strong> Short paragraphs, lists, and code blocks make the tutorial easy to scan and follow.</li>
  </ul>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Featured Snippet Optimization</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The "Step-by-Step Breakdown" section is explicitly formatted to be captured by Google as a "featured snippet." The numbered list (Step 1, Step 2, etc.) and the clear code blocks make it easy for Google to see this as a direct answer to a "how-to" query. The final code block at the beginning is also a prime target for a "quick answer" box.</p>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: Your First Step in Web Development</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Congratulations! You've successfully built a complete, functional, and accessible to-do list using <strong class="font-semibold text-black">only HTML</strong>. You've learned how to use forms, group elements with &lt;fieldset&gt; and &lt;legend&gt;, and properly link inputs and labels for maximum accessibility.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This project is the perfect foundation. The "skeleton" you built is now ready to be styled with CSS and brought to life with JavaScript. You're well on your way to becoming a frontend developer. Keep building!</p>
</div>
  

How to Make a Simple To-Do List with Only HTML: A Beginner's Tutorial


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">In the last tutorial, we built a perfectly semantic to-do list using only HTML. It's functional, but it looks a bit plain. What if we want to make it look great and add interactive states, like a strikethrough on completed items? You don't need JavaScript for that. This tutorial will show you how to style your entire to-do list using <strong class="font-semibold text-black">only CSS</strong>.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We'll use the power of CSS pseudo-selectors like <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> and pseudo-elements like <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">::before</code> to create a beautiful, custom, and interactive list.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The Starting Point: Our HTML</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, we need our clean, semantic HTML. This is the same structure from our previous HTML-only tutorial. The CSS we write will target these specific tags.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;My Daily Tasks&lt;/legend&gt;
    
    &lt;div class="task-item"&gt;
      &lt;input type="checkbox" id="task1" name="task1"&gt;
      &lt;label for="task1"&gt;Finish this CSS tutorial&lt;/label&gt;
    &lt;/div&gt;
    
    &lt;div class="task-item"&gt;
      &lt;input type="checkbox" id="task2" name="task2"&gt;
      &lt;label for="task2"&gt;Learn about the :checked selector&lt;/label&gt;
    &lt;/div&gt;
    
    &lt;div class="task-item"&gt;
      &lt;input type="checkbox" id="task3" name="task3"&gt;
      &lt;label for="task3"&gt;Build a custom checkbox&lt;/label&gt;
    &lt;/div&gt;
    
  &lt;/fieldset&gt;
&lt;/form&gt;
</code>
  </pre>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Part 1: Basic List Styling</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Let's start by styling the container. We'll style the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;fieldset&gt;</code>, <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;legend&gt;</code>, and each <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">.task-item</code> div to give our list a clean, modern look.</p>

  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
body {
  background-color: #111827;
  color: #E5E7EB;
  font-family: sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

form {
  width: 90%;
  max-width: 400px;
}

fieldset {
  border: 2px solid #374151;
  border-radius: 8px;
  padding: 20px;
}

legend {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 10px;
  color: #F9FAFB;
}

.task-item {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

label {
  font-size: 1.125rem;
  line-height: 1.5;
  cursor: pointer;
}
</code>
  </pre>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Part 2: The "Magic" - Styling the Checked State</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the key to our CSS-only interactivity. We can use the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> pseudo-class to detect when the checkbox is clicked. Then, using the <strong class="font-semibold text-black">adjacent sibling selector (<code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">+</code>)</strong>, we can apply styles to the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;label&gt;</code> that comes right after it.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
input[type="checkbox"]:checked + label {
  text-decoration: line-through;
  color: #6B7280;
}
</code>
  </pre>
  <p class="text-lg text-black mb-6 leading-relaxed">Just like that, clicking the checkbox will now add a strikethrough to the text, with no JavaScript involved!</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">(Advanced) Part 3: Creating Custom Checkboxes</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The default browser checkboxes are small and ugly. Let's hide them and create our own custom-styled checkbox using pseudo-elements.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
/* 1. Hide the original checkbox */
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* 2. Adjust label padding to make space for our box */
label {
  padding-left: 35px; /* 25px box + 10px margin */
}

/* 3. Create the custom box using ::before */
label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border: 2px solid #6B7280;
  border-radius: 4px;
  background-color: #1F2937;
  transition: all 0.2s ease;
}

/* 4. Style the box when the (hidden) input is checked */
input[type="checkbox"]:checked + label::before {
  background-color: #3B82F6;
  border-color: #3B82F6;
}

/* 5. Create the checkmark using ::after */
label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 6. Show the checkmark when the input is checked */
input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

/* 7. Add a focus state for accessibility */
input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 3px #3B82F680;
}
</code>
  </pre>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: CSS & UI/UX in Madrid</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Mastering CSS is the foundation of all frontend development and User Interface (UI) design. In a major tech hub like Madrid, the demand for developers who can build beautiful, responsive, and accessible UIs is enormous. Companies aren't just looking for coders; they're looking for craftspeople who understand user experience (UX).</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This kind of locally-relevant information is crucial for SEO, as it connects a technical tutorial ("CSS to-do list") to a career-oriented user intent ("frontend jobs Madrid"), providing significant local value.</p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top UI/UX Design Agencies in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The frontend scene in Madrid is supported by world-class design agencies that partner with tech companies to create stunning digital products. Here are a few known for their strong focus on UI/UX.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Agency Name</th>
          <th scope="col" class="px-6 py-4">Specialty</th>
          <th scope="col" class="px-6 py-4">Why They're Notable</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Gapsy Studio</strong></td>
          <td class="px-6 py-4 text-black">UX/UI Design</td>
          <td class="px-6 py-4 text-black">Known for delivering innovative, user-centered design solutions for a wide range of digital products.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Fleye</strong></td>
          <td class="px-6 py-4 text-black">UX/UI & Digital Interfaces</td>
          <td class="px-6 py-4 text-black">A user-centered design company praised for its efficient project management and strong focus on UI/UX.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">TeaCup Lab</strong></td>
          <td class="px-6 py-4 text-black">UX/UI & Usability Testing</td>
          <td class="px-6 py-4 text-black">Stands out for its deep focus on usability testing and a research-driven approach to product design.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">SEO Strategy for This Tutorial</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Here's a breakdown of the SEO strategy used in this article to help it rank for competitive terms.</p>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">Primary Keywords:</strong> "css only todo list," "style todo list css," "how to style a todo list."</li>
    <li><strong class="font-semibold text-black">Secondary/Long-Tail Keywords:</strong> "css :checked selector," "custom checkbox css," "css adjacent sibling selector," "css tutorial for beginners," "frontend UI/UX Madrid."</li>
    <li><strong class="font-semibold text-black">User Intent:</strong> The article targets a "how-to" intent for beginners. It provides a clear, step-by-step solution with copy-pasteable code, which is ideal for featured snippets.</li>
    <li><strong class="font-semibold text-black">Geo-Targeting:</strong> The "Bringing it Local" section targets users in Madrid searching for frontend or UI/UX career information, linking the technical skill (CSS) to a tangible local opportunity.</li>
  </ul>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: The Power of Pure CSS</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">You have now built a beautiful, interactive to-do list using <strong class="font-semibold text-black">only HTML and CSS</strong>. You've learned how to use the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> selector and sibling combinators to create interactivity, and how to build custom form elements from scratch.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the power of modern CSS. Before you reach for JavaScript, always ask: "Can I do this with CSS alone?" Often, the answer is yes.</p>
</div>
  

How to Style a To-Do List with Only CSS (No JavaScript)


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">We've built a static to-do list with HTML and styled it with CSS. Now it's time to make it functional. This tutorial will show you how to use <strong class="font-semibold text-black">pure JavaScript</strong> to add, complete, and delete tasks. This is the foundation of all modern web applications, known as DOM manipulation.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The HTML We Need</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">JavaScript needs a basic HTML structure to interact with. We'll add an <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;input&gt;</code>, a <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;button&gt;</code> to add tasks, and an empty <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;ul&gt;</code> where our tasks will appear.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
&lt;div class="todo-container"&gt;
  &lt;h1&gt;My JavaScript Tasks&lt;/h1&gt;
  &lt;div class="input-container"&gt;
    &lt;input type="text" id="task-input" placeholder="Add a new task..."&gt;
    &lt;button id="add-task-btn"&gt;Add&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul id="task-list"&gt;
    &lt;!-- Tasks will be dynamically added here --&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code>
  </pre>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The JavaScript Logic: Step-by-Step</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We will write JavaScript to listen for events and manipulate these HTML elements.</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 1: Get References to DOM Elements</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, we need to tell JavaScript which elements to "watch". We use <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">document.getElementById</code> to grab them by their ID.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');
</code>
  </pre>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 2: Create a Function to Add a Task</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We'll make a reusable function that creates a new task item, adds the delete button, and appends it to the list.</p>

  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
function addTask() {
  const taskText = taskInput.value.trim();

  if (taskText === "") {
    alert("Please enter a task.");
    return;
  }

  // Create the list item (li)
  const li = document.createElement('li');
  li.textContent = taskText;

  // Create the delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.className = 'delete-btn';

  // Add the button to the list item
  li.appendChild(deleteBtn);
  
  // Add the list item to the task list
  taskList.appendChild(li);

  // Clear the input field
  taskInput.value = "";
}
</code>
  </pre>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 3: Listen for Clicks</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Now we add "event listeners" to run our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">addTask</code> function when the button is clicked.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
addTaskBtn.addEventListener('click', addTask);

// Optional: Also add task when 'Enter' key is pressed
taskInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTask();
  }
});
</code>
  </pre>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 4: Handle "Complete" and "Delete" with Event Delegation</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Instead of adding a listener to every new task, we add <strong class="font-semibold text-black">one</strong> listener to the parent <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;ul&gt;</code>. This is called event delegation and is much more efficient. We check <em class="italic">what</em> was clicked inside the list.</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
taskList.addEventListener('click', function(e) {
  // Check if the clicked item is an LI (a task)
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed');
  }
  
  // Check if the clicked item is a delete button
  if (e.target.className === 'delete-btn') {
    e.target.parentElement.remove();
  }
});
</code>
  </pre>
  <p class="text-lg text-black mb-6 leading-relaxed">To make the ".completed" class work, you'd add this CSS: <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">li.completed { text-decoration: line-through; color: #888; }</code></p>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: Madrid's JavaScript Ecosystem</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">What you just learned—DOM manipulation—is the core skill for any frontend developer. In Madrid, the tech scene is booming, and JavaScript is the language that powers it all. Nearly every major tech company and startup in Madrid relies on JavaScript frameworks like <strong class="font-semibold text-black">React</strong>, <strong class="font-semibold text-black">Node.js</strong>, and <strong class="font-semibold text-black">Vue.js</strong>, all of which are built on the fundamental principles you just practiced.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This local information is vital for SEO, as it connects a technical skill (JavaScript) with career-focused user intent ("JavaScript jobs Madrid").</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top JavaScript Meetups & Communities in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Connecting with the community is the best way to grow. Here are some of the most active JavaScript-focused groups in Madrid.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Community Name</th>
          <th scope="col" class="px-6 py-4">Focus Area</th>
          <th scope="col" class="px-6 py-4">Why It's Worth Joining</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">MadridJS</strong></td>
          <td class="px-6 py-4 text-black">General JavaScript, Frameworks</td>
          <td class="px-6 py-4 text-black">The largest and most established JS community in the city. Covers everything from new framework features to deep dives on JS fundamentals.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Node.js Madrid</strong></td>
          <td class="px-6 py-4 text-black">Backend JavaScript (Node.js)</td>
          <td class="px-6 py-4 text-black">Essential for those who want to take their JS skills to the server-side. Great for learning about APIs, microservices, and performance.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Open Frontend Community</strong></td>
          <td class="px-6 py-4 text-black">Frontend, React, Vue, CSS</td>
          <td class="px-6 py-4 text-black">A fantastic community for all frontend topics. They often host talks on React, state management, and modern CSS-in-JS.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Madrid Tech Companies Built on JavaScript</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Many of Spain's top tech "unicorns" and major companies have massive engineering teams in Madrid, with JavaScript (especially React and Node.js) as their primary stack.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Company Name</th>
          <th scope="col" class="px-6 py-4">Key Product</th>
          <th scope="col" class="px-6 py-4">Relevance to JavaScript</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Idealista</strong></td>
          <td class="px-6 py-4 text-black">Real Estate Portal</td>
          <td class="px-6 py-4 text-black">A major user of React for their web platform, offering a complex and dynamic user interface.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Cabify</strong></td>
          <td class="px-6 py-4 text-black">Ride-hailing App</td>
          <td class="px-6 py-4 text-black">Employs JavaScript heavily across its stack, from React/React Native for its apps to Node.js for backend services.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Wallapop</strong></td>
          <td class="px-6 py-4 text-black">Marketplace App</td>
          <td class="px-6 py-4 text-black">Uses a modern, component-based frontend stack to handle its massive user base and real-time messaging.</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">SEO Strategy for This Tutorial</h2>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">Primary Keywords:</strong> "javascript todo list," "dynamic todo list javascript," "javascript dom manipulation tutorial."</li>
    <li><strong class="font-semibold text-black">Secondary/Long-Tail Keywords:</strong> "how to make a todo list with javascript," "javascript add remove list item," "javascript event delegation tutorial," "javascript getelementbyid," "javascript meetups madrid," "react jobs madrid."</li>
    <li><strong class="font-semibold text-black">User Intent:</strong> Targets beginners searching for a "how-to" project. The step-by-step format with complete code blocks is designed to be easily understood and captured by search engines as a direct answer.</li>
    <li><strong class="font-semibold text-black">Internal Linking:</strong> This post logically follows the "HTML-only" and "CSS-only" to-do list articles, creating a strong topic cluster for "to-do list tutorial."</li>
  </ul>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: You're Now a DOM Manipulator!</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Congratulations! You've successfully built a complete, dynamic web application using pure JavaScript. You learned how to get elements, create elements, listen for user events, and update the page in real-time. These are the most important skills in frontend development and the foundation for learning any framework like React or Vue.</p>
</div>
    

How to Build a Dynamic To-Do List with JavaScript (No Frameworks)


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">This tutorial is different from the others. HTML, CSS, JavaScript, and React are <strong class="font-semibold text-black">frontend</strong> technologies; they run in the user's browser to create a visual interface (UI). <strong class="font-semibold text-black">Node.js is a backend runtime</strong>. It runs JavaScript on a server or in your terminal, not in the browser. It cannot create visual websites by itself.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Therefore, a "to-do list only with Node.js" is a <strong class="font-semibold text-black">Command-Line Interface (CLI)</strong> application. You will run it from your terminal. This is the foundation of all backend development: managing data, files, and logic. We will use the built-in <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">fs</code> (File System) module to save your tasks in a JSON file.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The Full Node.js Code (Save as 'app.js')</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This single file is your entire application. You will also need an empty <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> file in the same directory (just create a file with <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> in it).</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
const fs = require('fs');
const path = require('path');

const tasksFilePath = path.join(__dirname, 'tasks.json');

// Helper function to load tasks from tasks.json
function loadTasks() {
  try {
    const data = fs.readFileSync(tasksFilePath, 'utf8');
    return JSON.parse(data);
  } catch (error) {
    // If file doesn't exist or is empty, return empty array
    return [];
  }
}

// Helper function to save tasks to tasks.json
function saveTasks(tasks) {
  fs.writeFileSync(tasksFilePath, JSON.stringify(tasks, null, 2));
}

// Get command-line arguments
const [,, command, ...args] = process.argv;
const taskText = args.join(' ');

// Load tasks
let tasks = loadTasks();

switch (command) {
  case 'add':
    const newTask = { text: taskText, completed: false };
    tasks.push(newTask);
    saveTasks(tasks);
    console.log(`Task added: "${taskText}"`);
    break;

  case 'list':
    console.log('Your To-Do List:');
    if (tasks.length === 0) {
      console.log('No tasks found. Add one with: node app.js add "My task"');
    }
    tasks.forEach((task, index) => {
      const status = task.completed ? '[x]' : '[ ]';
      console.log(`${index}. ${status} ${task.text}`);
    });
    break;

  case 'complete':
    const completeIndex = parseInt(taskText, 10);
    if (!isNaN(completeIndex) && tasks[completeIndex]) {
      tasks[completeIndex].completed = true;
      saveTasks(tasks);
      console.log(`Task ${completeIndex} marked as complete.`);
    } else {
      console.log('Invalid task number.');
    }
    break;

  case 'delete':
    const deleteIndex = parseInt(taskText, 10);
    if (!isNaN(deleteIndex) && tasks[deleteIndex]) {
      const deletedTask = tasks.splice(deleteIndex, 1);
      saveTasks(tasks);
      console.log(`Deleted task: "${deletedTask[0].text}"`);
    } else {
      console.log('Invalid task number.');
    }
    break;

  default:
    console.log('--- Node.js To-Do List ---');
    console.log('Usage:');
    console.log('  node app.js list');
    console.log('  node app.js add "Your new task"');
    console.log('  node app.js complete <task_number>');
    console.log('  node app.js delete <task_number>');
}
</code>
  </pre>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">How to Use Your CLI To-Do List</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Open your terminal in the same directory as <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">app.js</code> and <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code>. Run the following commands:</p>
  
  <pre class="bg-gray-200 rounded-lg p-4 text-black overflow-x-auto font-mono text-sm mb-6">
<code>
# See all tasks
$ node app.js list
Your To-Do List:
No tasks found. Add one with: node app.js add "My task"

# Add a new task
$ node app.js add "Learn Node.js fs module"
Task added: "Learn Node.js fs module"

# Add another task
$ node app.js add "Build a CLI app"
Task added: "Build a CLI app"

# List all tasks
$ node app.js list
Your To-Do List:
0. [ ] Learn Node.js fs module
1. [ ] Build a CLI app

# Complete a task
$ node app.js complete 0
Task 0 marked as complete.

# List tasks again
$ node app.js list
Your To-Do List:
0. [x] Learn Node.js fs module
1. [ ] Build a CLI app

# Delete a task
$ node app.js delete 1
Deleted task: "Build a CLI app"
</code>
  </pre>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Code Breakdown</h2>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">1. Importing Modules ('fs' and 'path')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed">We use <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">require('fs')</code> to get the built-in <strong class="font-semibold text-black">File System</strong> module, which lets us read and write files. <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">require('path')</code> helps build file paths that work on any operating system (Windows, macOS, Linux).</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">2. Reading Command-Line Arguments ('process.argv')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed"><code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv</code> is an array containing all the command-line arguments.
  <br>When you run <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">node app.js add "My task"</code>:
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[0]</code> is "node"
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[1]</code> is "app.js"
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[2]</code> is "add" (our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">command</code>)
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[3]</code> is "My task" (our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">args</code>)
  </p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">3. Persisting Data ('fs.readFileSync' and 'fs.writeFileSync')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed">This is our "database." <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">loadTasks</code> reads the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> file, parses the JSON text into a JavaScript array, and returns it. <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">saveTasks</code> does the opposite: it takes the JavaScript array, turns it into a formatted JSON string (<code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">JSON.stringify</code>), and writes it back to the file, overwriting the old one.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: Node.js for Madrid's Backend</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">What you've just built is a simple "server-side" application. This is the heart of backend development. In Madrid, Node.js is a dominant technology for building the <strong class="font-semibold text-black">APIs and microservices</strong> that power the React frontends of major companies. The React app (client) calls a Node.js API (server) to get and save data. This is the full-stack connection.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This SEO-focused section links the tutorial (Node.js) to high-value local career paths ("Node.js jobs Madrid," "backend developer Madrid").</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top Backend/Node.js Communities in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">To move from a simple script to building robust APIs, connecting with the local backend community is key.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Community Name</th>
          <th scope="col" class="px-6 py-4">Focus Area</th>
          <th scope="col" class="px-6 py-4">Why It's Worth Joining</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Node.js Madrid</strong></td>
          <td class="px-6 py-4 text-black">Backend JavaScript, APIs, Performance</td>
          <td class="px-6 py-4 text-black">The official, premier community for all things Node.js in Madrid. Essential for backend developers.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">MadridJS</strong></td>
          <td class="px-6 py-4 text-black">General JavaScript, Full-Stack</td>
          <td class="px-6 py-4 text-black">Covers both frontend and backend JavaScript, making it great for understanding the full picture, from React to Node.js.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Madrid Tech Companies Building APIs with Node.js</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The same companies known for React frontends rely on Node.js for their fast, scalable backends.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Company Name</th>
          <th scope="col" class="px-6 py-4">Relevance to Node.js</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Cabify</strong></td>
          <td class="px-6 py-4 text-black">A pioneer in using Node.js for its microservices architecture, handling millions of requests for its ride-hailing platform.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/1pre-wrap">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Idealista</strong></td>
          <td class="px-6 py-4 text-black">Uses Node.js to build and maintain the high-performance APIs that feed data to its React-based web applications.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Telefonica Tech</strong></td>
          <td class="px-6 py-4 text-black">Employs Node.js extensively in its digital transformation projects for building modern, scalable backend services.</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">SEO Strategy for This Tutorial</h2>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">Primary Keywords:</strong> "node.js cli tutorial," "node.js todo list," "node.js fs module," "node.js read write file," "process.argv tutorial."</li>
    <li><strong class="font-semibold text-black">Secondary/Long-Tail Keywords:</strong> "build cli app with node.js," "node.js save data to json," "backend developer madrid," "node.js jobs madrid."</li>
    <li><strong class="font-semibold text-black">User Intent:</strong> Targets beginners in backend development. It clarifies the "Node.js only" misconception and provides a practical, real-world example of what Node.js is used for (scripts, file manipulation, CLIs).</li>
  </ul>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: You're Now a Backend Developer</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">You have successfully used JavaScript on both the <strong class="font-semibold text-black">client</strong> (with React) and the <strong class="font-semibold text-black">server</strong> (with Node.js). You've learned how to read from and write to the file system, process terminal commands, and manage data outside of a browser.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The next logical step is to combine them: build a Node.js API (using a framework like <strong class="font-semibold text-black">Express.js</strong>) that your React app can fetch data from. This is the essence of a <strong class="font-semibold text-black">full-stack application</strong>.</p>
</div>
  

CodeSyllabus Blog.

Web Development

Building a To-Do Tutorial with Only HTML: A Beginner's Guide

Frontend Development

Beyond the Code: A Deep Dive into 'Vibe' and Why It's Your Most Important Frontend Metric

HTML & CSS

How to Make a Simple To-Do List with Only HTML: A Beginner's Tutorial

How to Style a To-Do List with Only CSS (No JavaScript)

JavaScript

How to Build a Dynamic To-Do List with JavaScript (No Frameworks)

Node.js

How to Build a Command-Line (CLI) To-Do List with Node.js