DEV Community: Khahliso Sekoto

Building for Everyone: Deep Diving into Advanced HTML Tables & Web Accessibility (a11y)

Khahliso Sekoto — Mon, 07 Sep 2026 15:02:38 +0000

Hey everyone! 👋

Continuing my journey through the Full Stack JavaScript path on The Odin Project, today I shifted focus over to a module that separate amateur layouts from production-grade engineering: Advanced HTML Tables and Accessibility (a11y).

Tables seem straightforward at first glance, but formatting complex data data accessibly requires deep intentionality. Here is a quick summary of my core takeaways today:

What Tables Are NOT For 🚫
The most fundamental rule: tables are strictly meant for tabular data. In the early days of the web, developers used tables to layout entire pages. Today, that is a massive anti-pattern. Architecture belongs to CSS Flexbox/Grid; tables belong strictly to organized data sets.
Building for Assistive Tech & Visual Impairment
Data means nothing if a screen reader can't map out the relationships between headers and metrics. I learned how to move past simple grids to create a genuinely accessible structure using:
<caption>: Acts like a title/summary for the table so screen reader users can quickly understand its context without reading every row.
scope="col" & scope="row": Creates clear linear relationships for primary grids.
id & headers attributes: An advanced method where you give headers a unique ID and explicitly link specific data cells to them. This is crucial for multi-layered tables where a cell might correspond to multiple tiered categories.

categories.

Structural Segregation (<thead>, <tbody>, <tfoot>)
Instead of just stacking rows blindly, intermediate HTML segments data systematically. <thead> manages header tags, <tbody> wraps the core looping items, and <tfoot> handles the calculation/summary row at the bottom.
Grouping & Spanning (<colgroup>, colspan, rowspan)
I practiced using <colgroup> and <col> to isolate entire vertical column stripes for unified structural styling right from the top of the element, alongside combining grid blocks horizontally and vertically without causing layout clipping.

What's your approach?

To the tech community: Accessibility (a11y) is often treated as an afterthought, but building it directly into your semantic HTML makes life so much easier. What are your go-to tools or extensions for testing screen-reader behavior while developing locally? Let's swap tips below! 👇

How I Finished The Odin Project Foundations & What I've Learned So Far

Khahliso Sekoto — Mon, 07 Sep 2026 09:47:08 +0000

Hey everyone! 👋

I'm incredibly excited to share that I have officially crossed a major milestone on my self-taught software engineering journey: I've completed the Foundations path of The Odin Project and officially selected the Full Stack JavaScript track! 🚀

When I first started, the terminal felt like a foreign language and managing files via git version control felt completely overwhelming. Looking back now, it's amazing to see how much has clicked.

The Builds I'm Most Proud Of

During the fundamentals phase, everything is about getting your hands dirty with real code. Two projects stood out to me as the ultimate tests of what I had learned:

Etch-a-Sketch Canvas: This was a massive breakthrough for my JavaScript skills. It forced me to move past static variables and understand dynamic DOM manipulation, nested loops to generate grid squares, and handling live mouse hover event listeners.
Landing Page: My first deep dive into modern responsive layouts. I focused heavily on writing clean, semantic HTML structure and mastering the layout alignment control of CSS Flexbox.

You can check out my progress, repositories, and current focus right here:
👉 My GitHub Profile: [://github.com]

https://github.com/KhahlisoSekoto

📐 What's Next: Diving into Intermediate Assets (SVGs)

To jumpstart the Full Stack JavaScript path, I kicked off my week with the intermediate HTML/CSS module focusing on Scalable Vector Graphics (SVGs).

Coming out of the lesson, a few engineering concepts really stuck with me regarding asset choice and performance:

Vector vs. Raster Mechanics: Traditional pixel grids (PNGs/JPEGs) struggle and pixelate when resized. Because SVGs rely on math equations in an HTML-like XML structure, they scale infinitely with zero drop in resolution.
The Embedding Trade-off: Learning the choice between embedding an SVG inline (total control for CSS/JS animations, but leaves a heavy DOM footprint that can hurt initial page caching) vs. linked (cleaner markup using standard <img> tags, but acts as a frozen asset).
Knowing Limitations: SVGs are incredibly efficient for UI frameworks and icon systems (like Feather Icons), but completely the wrong tool for photorealistic rendering where high textures cause massive code bloat.

💬 Let's Connect!

To the self-taught dev community or anyone currently pushing through The Odin Project: What was the biggest breakthrough concept or project that made frontend programming finally click for you?

Let's discuss workflows below! 👇

Dynamic DOM Manipulation & Hover Mechanics: Cracking the Etch-a-Sketch Project

Khahliso Sekoto — Sat, 05 Sep 2026 13:09:03 +0000

Another milestone unlocked!

Today I finished building my browser-based Etch-a-Sketch project as part of The Odin Project Foundations curriculum.

This project was a fantastic challenge that pushed me to dive deep into:
-Dynamic DOM Manipulation — using JavaScript loops to generate grids on the fly.
-Advanced Flexbox Layouts — calculating pixel dimensions and border boxes perfectly without breaking rows.
-Event Listeners — capturing mouse movements to create interactive, hover-based drawing mechanics.

It felt incredible to wrap things up, document it in my README, and push the final build straight to GitHub via the terminal!

Try it out live: https://lnkd.in/dmtJMm7U
View the source code: https://lnkd.in/drgtVEa8

Onwards to the next challenge!

TheOdinProject #WebDevelopment #JavaScript #CSSFlexbox #CodingJourney #BuildInPublic #FrontEnd