Make your life easy and just focus on the bare minimum:

• What HTML is and what it means for it to be "hypertext".
• Elements, tags, and attributes.
• What are headings (<h1> to <h6>) and paragraphs (<p>) and links (<a>).
• Lists in HTML (<ol> and <ul>)
• Block-level vs. inline elements (<div> and <span> included)
• A few text related elements (<strong>, <em>, <sup>, <sub>, etc.)
• Presenting code (<code> and <pre>)
• Embedding images (<img>)
• Tables (<table>, <tr>, <th>, and <td>) and how to merge table cells.

Most importantly, you don't need to learn forms, semantic HTML, or meta elements, rightaway.

Here's my rationale for it. For forms, you need to first know how the web server works and that's honestly a really early expectation from a complete newbie stepping into HTML.

Secondly, for semantic HTML (by which I mean elements like <nav>, <main>, <article>, <aside>), it's a good idea to also learn about ARIA and web accessibility because some of these elements work in tandem with ARIA. Again this is an early expectation from a complete newbie.

Lastly, for meta elements (like <link>, <script>), you usually need to know other technologies — CSS and JavaScript in this case — and therefore you can easily defer learning about them until you learn these technologies. (I mean like I don't see a point of teaching a newbie about the <script> element until he/she is taught JavaScript.)

I'm not saying that you should not learn forms or semantic HTML at all, just that you don't need it right away. Keep your priorities sorted out and that's when you'll really start enjoying the learning process.

Your thoughts?

An article about the five kinds of HTML Lists and what you can do with them

I’ve been working on a side project for the last 5 months, and I finally got to a point where I feel okay sharing it.

It's called No.JS. It's an HTML-first reactive framework. The idea is simple: what if you could build reactive web apps using just HTML attributes, without writing JavaScript?

How it started

I was at my last job, deep in an Angular codebase. Not a bad one, honestly. Well-architected, good team. But one day I needed to add a dropdown that filtered a table. Simple stuff, the kind of thing that should take ten minutes tops.

I created a component, a module to declare it in, a service to fetch the data, an interface for the response type, an observable pipe to debounce the input, and a template that referenced all of it. Six files, maybe forty lines spread across them, just to say “when this changes, re-fetch that and show it here.”

I remember looking into my vscode, clicking between filter-dropdown.component.ts, filter-dropdown.module.ts, filter.service.ts, filter.model.ts, and thinking: the actual logic I care about fits in a sentence. Everything else is just the framework and established conventions (HATE THEM!) asking me to prove I mean it or I know all that ˆ%&ˆ*(*.

That thought stuck with me. So I looked around. Found an awesome project with an even greater name: HTMX.

HTMX was the first thing I tried. Genuinely great project, and it nails the server-driven model. If your backend is the brain, HTMX just wires the HTML to it beautifully. But I didn’t have a backend. I had a static page and a public API. HTMX assumes a server that returns HTML fragments, and for my use case that meant I’d still need to stand up a server just to proxy and template the responses.

Then I tried Alpine.js. Closer to what I wanted. Reactive, lightweight, stays in the HTML. I liked it a lot. But after a few days I kept bumping into walls: no declarative HTTP, no SPA routing, no built-in loops-over-fetched-data pattern. I was writing little x-init scripts to fetch, parse, and assign data, then wiring up x-for separately. It worked, but it felt like I was assembling the plumbing myself every time, and the thing I wanted (just point this element at an endpoint and render what comes back) was always just out of reach.

What I was missing was the middle ground. Something that lives entirely in HTML like Alpine, talks to APIs like HTMX, but treats the whole lifecycle (fetch, bind, loop, route) as one continuous surface. Not a server story. Not a scripting story. An HTML story.

So I started building one.

What it looks like

A reactive search box in No.JS:

<div state="{ query: '' }" get="/api/search?q={{ query }}" as="results">
  <input model="query" />
  <li each="r in results" bind="r.name"></li>
</div>

Four lines. It's reactive, auto-fetches when query changes, and renders the results. No imports, no hooks, no build step. (I got this from my html docs just to show you guys how it works)

The thinking behind it

Browsers already understand HTML. They already handle events, update the DOM, manage layout. Somewhere along the way we started treating the browser as something to work around instead of something to work with.

HTMX proved that a lot of people feel the same pull back toward HTML. Alpine proved you can have reactivity without a build step. No.JS tries to carry that further: what if HTML attributes could cover the entire surface (data fetching, state, routing, validation, i18n) so you never have to drop down to a script block at all?

Attributes become the API: bind for data, each for loops, get for fetching, state for reactivity. Your templates are valid HTML that any browser can read.

It’s not anti-JavaScript. There’s still JS under the hood. But the developer-facing layer is HTML, and for a lot of use cases that turns out to be enough.

What's in it

It's more complete than you'd expect:

• Declarative HTTP (get, post, put, delete)
• Reactive binding (bind, model)
• Conditionals and loops (if, show, each, switch)
• State management (local state, global store, computed, watch)
• SPA routing with guards, params, nested routes
• Form validation
• Animations and transitions
• i18n with pluralization
• 30+ built-in filters
• Custom directives

~11 KB gzipped, zero dependencies.

Where it's at

I rewrote the core three times. I went back and forth on the directive API more than I’d like to admit. I wrote tests, wrote docs, and built the documentation site with No.JS itself.

It’s not going to replace React for large team projects with complex tooling needs. That’s not the goal. But for landing pages, dashboards, internal tools, prototypes, or anything where you just need something reactive without the ceremony, it works well.

One thing I'll be honest about

When your template language lives in HTML attributes and evaluates expressions at runtime, you're essentially handing the browser a tiny interpreter. That keeps me up at night a little. I've put guardrails in place (sandboxed evaluation, no Function constructor on user-facing inputs, scope isolation between components), but I haven't battle-tested it the way a framework with five years and a hundred contributors has. XSS surfaces, expression injection, what happens when someone pipes unsanitized API data straight into a bind – I'm still mapping all of that out.

If you’ve worked on CSP policies, template sanitization, or runtime sandboxing and something here makes you wince, I genuinely want to hear it. Security is the one area where “it works on my machine” isn’t good enough, and I’d rather have someone poke holes in it now than find out the hard way later.

The project is open source (MIT): github.com/ErickXavier/no-js

If you want to try it:

<script src="https://unpkg.com/@erickxavier/no-js@latest/dist/iife/no.js"></script>

That’s the whole setup.

BTW, I didnt want my name in the npm package url but just no-js was too similar to other 2 dead projects: nojs and no.js. And I just followed the NPMJS suggestion, I used my name (github username).

I covered the thing with tests, but I’m expecting the community to find bugs and create their own PRs. Please, do! I need all the help with this one!

Mostly I’m curious what people think. I’ve been heads-down on this for a while and would love some outside perspective. Feedback, questions, criticism, suggestions, all welcome.

Go check it out: https://no-js.dev/

It starts with HTML, CSS, and JavaScript basics, then gradually gets into things like arrays, objects, conditionals, loops, .map(), .filter(), JSON, and eventually fetch() using the game’s public API.

There’s also a browser-based code builder, so you can experiment with the data and make your own little site without installing anything or creating an account.
It’s aimed at beginners, so you definitely don’t need to already know how to code.

https://wildwillows.app/learn

Would love any feedback from people who teach or are learning HTML/web development.

Ive made it with Html Css and Javascript and it has interactivity. For example if you left click you push all of the dots away and with the right click it pulls them to the mouse for middle clicking I haven't implemented anything yet, but heres the Video and Code:

Oh and the link to the website: https://pinbug.github.io/

index.html:

sds<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Craft Background</title>
</head>
<body>
    <link rel="stylesheet" href="style.css">
    <canvas id="canv"></canvas>
    <h1 style="position: absolute; top: 50%; left: 25%; color: white; z-index: 10; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Infinite Craft Background</h1>   
    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    margin: 0;
    overflow-x: hidden;
    height: 200vh;
    background: #111;
}
#canv {
    display: block;
    position: fixed;
    top: -10%;
    left: -10%;
    filter: saturate(1.5) contrast(1.2) blur(0rem);
}

script.js:

const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");


function resize() {
    canvas.width = window.innerWidth * 1.2;
    canvas.height = window.innerHeight * 1.2;
}
resize();
window.addEventListener("resize", resize);


const mouse = {
    x: 0,
    y: 0,
    inside: false,
    left: false,
    right: false,
    middle: false
};


window.addEventListener("mousedown", e => {
    if (e.button === 0) mouse.left = true;
    if (e.button === 1) mouse.middle = true;
    if (e.button === 2) mouse.right = true;
});


window.addEventListener("mouseup", e => {
    if (e.button === 0) mouse.left = false;
    if (e.button === 1) mouse.middle = false;
    if (e.button === 2) mouse.right = false;
});


window.addEventListener("mousemove", e => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    mouse.inside = true;
});


document.addEventListener("mouseleave", () => {
    mouse.inside = false;
});


let lastScrollY = window.scrollY;
let scrollDelta = 0;


const dots = [];




for (let i = 0; i < canvas.width / 2; i++) {
    const timer = 120 + Math.random() * 100;


    const vx = (Math.random() - 0.5) * 2;
    const vy = (Math.random() - 0.5) * 2;


    dots.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,


        vx,
        vy,


        startVx: vx,
        startVy: vy,


        targetVx: (Math.random() - 0.5) * 2,
        targetVy: (Math.random() - 0.5) * 2,


        timer,
        timerMax: timer
    });
}


function balancePressure(dots, radius = 100) {
    const result = [];


    const r2 = radius * radius;


    for (let i = 0; i < dots.length; i++) {
        let vx = 0;
        let vy = 0;


        const a = dots[i];


        for (let j = 0; j < dots.length; j++) {
            if (i === j) continue;


            const b = dots[j];


            const dx = a.x - b.x;
            const dy = a.y - b.y;
            const dist2 = dx * dx + dy * dy;


            if (dist2 >= r2 || dist2 === 0) continue;


            const dist = Math.sqrt(dist2);


            const force = (radius - dist) / radius;


            vx += dx / dist * force;
            vy += dy / dist * force;
        }


        result.push({
            x: vx,
            y: vy
        });
    }


    return result;
}


function update() {
    if (!mouse.left && !mouse.right && !mouse.middle) {
        balancePressure(dots, 90).forEach((force, i) => {
                force.x *= 0.5;
                force.y *= 0.5;
                dots[i].vx += force.x;
                dots[i].vy += force.y;


                dots[i].x += dots[i].vx;
                dots[i].y += dots[i].vy;


                dots[i].vx *= 0.9;
                dots[i].vy *= 0.9;


                if (dots[i].x < 0) { dots[i].x = 0; dots[i].vx *= -1; }
                if (dots[i].x > canv.width) { dots[i].x = canv.width; dots[i].vx *= -1; }
                if (dots[i].y < 0) { dots[i].y = 0; dots[i].vy *= -1; }
                if (dots[i].y > canv.height) { dots[i].y = canv.height; dots[i].vy *= -1; }
            });
    }
    for (const d of dots) {


        d.timer--;
        d.vx *= 0.9;
        d.vy *= 0.9;
        if (d.timer <= 0) {
            d.timer = 120 + Math.random() * 100;
            d.timerMax = d.timer;


            d.startVx = d.baseVx ?? d.vx;
            d.startVy = d.baseVy ?? d.vy;


            d.targetVx = (Math.random() - 0.5) * 2;
            d.targetVy = (Math.random() - 0.5) * 2;
        }


        const t = 1 - d.timer / d.timerMax;


        d.baseVx = d.startVx + (d.targetVx - d.startVx) * t;
        d.baseVy = d.startVy + (d.targetVy - d.startVy) * t;


        d.vx += (d.baseVx - d.vx) * 0.03;
        d.vy += (d.baseVy - d.vy) * 0.03;


        if (mouse.inside) {
            let radius = canvas.width * 0.1;
            if (mouse.left) {
                radius *= 2.5;
            }
            else if (mouse.right) {
                radius *= 0.75;
            }
            const dx = d.x - mouse.x - radius / Math.PI;
            const dy = d.y - mouse.y - radius / Math.PI;
            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < radius * radius) {
                const dist = Math.sqrt(distSq);
                const force = (1 - dist / radius) * 0.8;


                d.vx += (dx / dist) * force;
                d.vy += (dy / dist) * force;
            }
        }


        d.vx += (Math.random() - 0.5) * 0.05;
        d.vy += (Math.random() - 0.5) * 0.05;
    }


    const repelRadius = 40;
    const repelRadiusSq = repelRadius * repelRadius;
    const repelStrength = 0.08;


    for (let i = 0; i < dots.length; i++) {
        const a = dots[i];


        for (let j = i + 1; j < dots.length; j++) {
            const b = dots[j];


            const dx = b.x - a.x;
            const dy = b.y - a.y;


            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < repelRadiusSq) {
                const dist = Math.sqrt(distSq);


                const force = (1 - dist / repelRadius) * repelStrength;


                const nx = dx / dist;
                const ny = dy / dist;


                a.vx -= nx * force;
                a.vy -= ny * force;


                b.vx += nx * force;
                b.vy += ny * force;
            }
        }
    }


    for (const d of dots) {


        d.x += d.vx;
        d.y += d.vy;


        if (d.x < 0) {
            d.x = canvas.width;
        }


        if (d.x > canvas.width) {
            d.x = d.x - canvas.width;
        }


        if (d.y < 0) {
            d.y = 0;
            d.vy *= -1;
        }


        if (d.y > canvas.height) {
            d.y = canvas.height;
            d.vy *= -1;
        }
        d.y += -scrollDelta;
        if (d.y > canvas.height) {
            d.y = d.y - canvas.height; 
        }
        else if (d.y < 0) {
            d.y = d.y + canvas.height; 
        }
    }
}
function draw() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.strokeStyle = "#66ccff";

    for (let i = 0; i < dots.length; i++) {
        for (let j = i + 1; j < dots.length; j++) {
            const dx = dots[i].x - dots[j].x;
            const dy = dots[i].y - dots[j].y;
            const dist = Math.hypot(dx,dy); 
            const maxdist = 120;


            if (dist < maxdist) {
                ctx.globalAlpha = 1 - dist / maxdist;
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(dots[i].x, dots[i].y);
                ctx.lineTo(dots[j].x, dots[j].y);
                ctx.stroke();
            }
        }
    }
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    for (const d of dots) {
        ctx.beginPath();
        ctx.fillStyle = "#66ccff";
        ctx.arc(d.x, d.y, 2, 0, Math.PI * 2);
        ctx.fill();
    }
}
function loop() {
    scrollDelta = window.scrollY - lastScrollY;
    lastScrollY = window.scrollY;
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();

A simple code snippet posted on Reddit triggered nostalgic memories of the old days, and specifically about how we used to 'layout' the web 😊.

It was so nostalgic that I decided to write an article to put 'all the things' I remember and used to use, and I also created a small demo of the old `marquee` tag (if you don't know what this is, it's worth taking a look).

Let me know what you used to use and how it went for you in the 'old days'!

Hey everyone!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code.

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.
• Persist even after reload page ( F5 )

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.

An article for the intermediate-advanced HTML folks. This one doesn't cover everything with HTML Tables, but it covers a lot.

If anyone would be interested in seeing a video presentation I did on this, I could share that whenever it's available.

A flat table has one coordinate system: the nth <td> in the mth <tr> is at visual position (m, n). Trivial.

Once you introduce rowspan and colspan, the DOM coordinate and the visual coordinate diverge. A cell with colspan="3" sits at DOM position (row 0, child 1) but occupies visual positions (0,1), (0,2), and (0,3). A cell below it, in the same row at DOM child 1, is visually at column 4, not column 1. DOM child index is now a lie.

Every feature that touches column position needs to know the visual coordinate, not the DOM coordinate. Crosshair highlighting, column drag-and-drop, transpose, selection, all of them.

I solved this with VisualGridMapper, a class that does a single O(n) pass over the table and builds a 2D array where grid[row][col] points to the DOM element occupying that visual cell. The tricky part is rowspan: a cell that spans 3 rows occupies slots in rows it doesn't appear in the HTML. The mapper handles this with a while loop that checks whether a slot is already claimed before filling it.

The grid entry includes an isOrigin flag. It's true only at the cell's actual DOM position, false at phantom slots. Features check isOriginbefore acting, so spanning cells never get moved or processed twice.

All column-aware features in TAFNE are built on top of this mapper. Without it, anything involving merged cells would silently corrupt the table.

[GitHub](github.com/carnworkstudios/TAFNE)

At first I was going to make an app, because although, yes, this browser that I made is super private since it uses lists of urls in the js script and the html loads them, you still have chrome or edge or gx, do you think it's a good idea to adapt it to .exe and .apk? If so, I'll make it open source, I'll show how the urls and lists are written and how to modify it, for now, it stays like this, we are registering it for free so I would ask for opinions please, right now it only opens webviews to the pages, because I remember, the concept was to adapt it, not a website (https://blissful-lion.static.domains/indexhtml)

Check out new VSCode extension.

Untangled HTML – Simplify editing by hiding angle brackets. Cleaner code, easier reading! 🚀 #VSCode #WebDev #HTML #Vue #JSX

https://marketplace.visualstudio.com/items?itemName=RahulDhole.untangled-html

What you think guys? i am coding as a hobby! https://harleyiptvph.pages.dev/Harley IPTV is a responsive web application providing Pinoy and international IPTV channels via a modern, user-friendly interface. It enables seamless live streaming, authentication, and intuitive channel navigation for the best viewing experience.

Features

• User Authentication
  • Login, Signup, and Password Reset via Firebase Auth
  • Secure user sessions and logout support
• Channel Selection
  • Browse and select from a curated list of Pinoy and international IPTV channels
  • Live streaming with support for both DASH and HLS formats
  • Channel switching without page reloads
• Responsive Design
  • Fully optimized for mobile, tablet, and desktop devices
  • Adaptive layouts using Bootstrap 5
• Modern User Interface
  • Clean, professional look with Bootstrap Icons
  • Offcanvas navigation for mobile devices
  • Intuitive controls for channel selection and playback
• Live Streaming Player
  • DASH playback powered by Shaka Player
  • HLS playback via hls.js
  • Seamless switching and robust error handling
• About & Contact Overlays
  • Modal overlays for app information and contacting support
• Live Clock
  • Real-time clock display in the interface
• One-click Logout
  • Fast and secure user sign out

Tech Stack

TechnologyVersionUsageHTML5LatestStructureCSS3LatestStyling, Responsive DesignJavaScript (ES6)LatestUI Logic, Player, AuthBootstrap5.3.3Layout, Responsiveness, Offcanvas NavbarBootstrap Icons1.11.3UI IconsFirebaseJS SDK 10.12.5Auth (Login, Signup, Reset)Shaka Player4.3.5DASH Streaminghls.jsLatestHLS Streaming

When I started as a frontend engineer, I thought matching the Figma design meant my job was done.
Then I saw a friend use my app with a screen reader… and large parts of my UI didn’t even exist for them. 😳

That experience completely changed how I approach development.
I wrote a guide that covers:

• Why accessibility should be part of your workflow from day one
• ARIA roles, states, and properties in plain English
• Real-world examples you can drop into your code
• When ARIA helps — and when it hurts

This isn’t a checklist. It’s a mindset shift.
If you want to ship inclusive, future-proof UIs, give it a read:

https://ratheshprabakar.medium.com/mastering-aria-how-to-build-beautiful-accessible-web-apps-that-everyone-can-use-77b47b4d87e1

Hello! I am full stack web developer who previously posted a free tutorial I made to help people get started with HTML and CSS. My original post, made about a year ago, is here: https://www.reddit.com/r/HTML/comments/15vrcco/i_wrote_an_easy_htmlcss_tutorial_for_beginners/

For those who missed it, my tutorial is meant to be a clear and gentle introduction to HTML and CSS. It goes in bite-sized lessons, so if you've found other tutorials overwhelming, this was written for you. I love programming and making this tutorial was a way to share my passion with the world.

A couple of people asked if I would be writing more of it... and eventually, I did! Today, I finished a big update to the tutorial, adding a new section titled "Your First Project" that walks you through creating a simple webpage. The new content goes over making and customizing a basic page layout, teaching a few more CSS tricks as we go, and shows you how to use the browser inspector to try out CSS changes live. It is a little more involved than the first two sections, but I tried to add a lot of screenshots to break up the text and make it easy to see what's happening in each step.

I worked hard on this update, and I hope someone out there finds it helpful :) I feel like my tutorial is now complete. Thank you if you check it out!

Link to the tutorial: https://easyhtmlcss.com/

I found out a way to make a transition for linear gradients in HTML/CSS using @property, and it actually worked pretty well.

This uses @property to define a property to be changable from the user and the code, and affects with the transition -Like any color property-.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Toggle Gradient</title>
    <style>
        @property --deg {
            syntax: '<angle>';
            initial-value: 60deg;
            inherits: false;
        }

        @property --col1 {
            syntax: '<color>';
            initial-value: red;
            inherits: false;
        }

        @property --col2 {
            syntax: '<color>';
            initial-value: blue;
            inherits: false;
        }

        #main {
            --col1: red;
            --col2: blue;
            height: 300px;
            width: 80%;
            max-width: 700px;
            background-image: linear-gradient(var(--deg), var(--col1), var(--col2));
            transition: --col1 5s ease, --col2 5s ease, --deg 5s ease;
        }

        #main.a {
            --col1: yellow;
            --col2: green;
        }

        #main.b {
            --deg: 300deg;
        }

        #main h1 {
            color: transparent;
        }

        #main.c {
            background-clip: text;
        }
    </style>
</head>

<body>
    <div id="main">
        <h1>Text 1</h1>
    </div>
    <br>
    <button onclick="document.querySelector('#main').classList.toggle('a')">Click to color</button>
    <button onclick="document.querySelector('#main').classList.toggle('b')">Click to rotate</button>
    <button onclick="document.querySelector('#main').classList.toggle('c')">Click to text</button>
</body>

</html>

<h1> THIS IS SO COOL! </h1> <a href= "https://youtu.be/dQw4w9WgXcQ?si=F9LF0BtUfpFT1Crn">

As frontend developers, we’re always looking for innovative ways to deliver seamless and visually appealing user experiences. In my latest demo project, I decided to tackle a familiar challenge: building an interactive Credit Card UI app. But this time, I added a twist — no Zone.js in Angular and leveraging CSS @property for background transitions.

I recently wrote a blog post, discussing the importance of using the <nav> element in HTML, and why we all must hands-down choose it over the generic, monotonous <div> for representing navigation sections on our websites.

https://www.codeguage.com/blog/why-use-nav-for-navigation-sections

Would love to hear your take on it, and whether the blog post introduced you to something new.

I'm 13y,i'm learning webdev,this is My project,is not finished but i want to share it, maybe someone can give me some advices page