DEV Community: Khahliso Sekoto

Building for Digital Inclusion: A Deep Dive into Form Architecture and Advanced Native Validation

Khahliso Sekoto — Tue, 15 Sep 2026 11:28:00 +0000

Hey DEV community! 👋

September marks Deaf Awareness Month (and International Month for Deaf People). As developers and technical professionals, it is easy to get caught up in building flashy UI transitions, complex frameworks, or heavy animations. But true platform optimization starts under the hood with structural integrity and digital inclusion.

I have been systematically engineering my technical foundations through The Odin Project. For my latest milestone project, I moved past basic layouts to build a fully functional, high-performance Sign-Up Form entirely from scratch.

Instead of relying on heavy third-party UI libraries or template wrappers, I wanted to strip things back to native web mechanics. My goal was to focus heavily on semantic structure, clean data flow paths, and inclusive visual design patterns that support assistive technologies and users who rely on clear, predictable visual interfaces.

Here is a breakdown of the architectural layouts, validation structures, and UX principles I engineered into this Minimum Viable Product (MVP).

🧱 Form Architecture & Semantic Accessibility (A11y)

A common mistake when building web forms is prioritizing visual spacing over structural accessibility. If a form relies on generic

wrappers instead of true semantic tags, screen readers, field-navigating browser extensions, and custom assistive devices will struggle to map out the user flow.

For this project, I prioritized accessible element pairing. Every interactive text entry block follows a strict programmatic layout:

Phone Number

Why this setup matters for business operations:Flawless Accessibility:

•Explicitly binding the attribute to the matching tells assistive software exactly what information belongs where.
• Reliable Data Routing: Setting proper data flow methods like method="POST" ensures form payloads travel securely. As a Technical VA, this foundational logic allows me to step into tools like Zapier or Make and immediately trace exactly why an automation webhook is dropping data between a landing page and a company CRM database.

🛡️ Data Gatekeeping: Native Constraints vs. Follow-up Friction

In database management, "garbage in equals garbage out." When businesses run open intake portals without structural constraint limits, users often submit incomplete values, mismatched entries, or vague one-word data blocks. This results in team friction and endless, tedious follow-up emails.

To solve this, I implemented strict data validation rules natively into the markup layout:

•Mandatory Submissions: Leveraging explicit required attributes prevents users from triggering form submissions with empty critical fields.

•Smart Attribute Filtering: Using targeted input parameters like type="tel" and type="password" instructs mobile operating systems to automatically pull up the correct, user-friendly numerical keypad layout.

By safeguarding input fields right at the front gate, I ensure that data matches exact structural business criteria before it ever leaves the client screen. This saves server processing loads and keeps corporate databases perfectly organized.

🎨 Intelligent Visual Feedback with Modern CSS

Error messages that flash aggressively the moment a page loads create a frustrating, high-friction user onboarding experience. Good user interfaces should be responsive, clean, and intuitive.

To manage this elegantly, I leveraged modern CSS pseudo-classes to build a predictive visual feedback loop:

/* Interactive border focus glow when a field is active */
.input-group input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Smart error handling that waits for user interaction */
.input-group input:user-invalid {
border-color: #ef4444;
}

The Engineering Strategy Behind the Selection:

1.The Active Ring (:focus): When a user highlights a text box, the border smoothly transitions to a distinct blue hue (#2563eb) paired with a high-contrast focus ring shadow. This provides immediate, accessible clarity on where the cursor is currently resting.

2.The Predictive Error Trigger (:user-invalid): Unlike the traditional, aggressive :invalid selector, the modern :user-invalid pseudo-class is intelligent. It remains silent while the user is typing and only flashes a clean validation red (#ef4444) after the user interacts with the input, types an incorrect format, and moves their cursor away.

This keeps the user interface clean, reassuring, and completely stress-free for neurodivergent individuals or individuals navigating with high-contrast screen magnification tools

💼 Bridging Tech and Business Operations

This milestone isn't a bloated marketing website—it is an airtight, responsive Minimum Viable Product (MVP) built on tidy layout rules and predictable code hygiene.

I am actively expanding my development portfolio through The Odin Project, and I am open to international and local Technical VA, IT Support, or junior operational opportunities!

If your startup or engineering team needs a remote partner who understands semantic data flows, speaks the language of your development group, and can confidently manage your platform integrations autonomously—let's connect!

📂 Explore the Build:

💻 Clean Source Code Repository: https://github.com/KhahlisoSekoto/sign-up-form.git
🌐 Live Interactive Form Demo: https://khahlisosekoto.github.io/sign-up-form/

I would love to get your feedback! Devs, take a look at the repo structure, try out the input inputs, and let me know your thoughts on my code layout or validation logic in the comments below! 🚀

Day 2: The Evolution of CSS Resets (And the Game of Layout "Whack-A-Mole")

Khahliso Sekoto — Tue, 08 Sep 2026 09:20:21 +0000

Hey everyone! 👋

I’m on a self-taught web development journey, studying every Monday to Friday. This morning, I dove into Day 2 of the Intermediate CSS path on The Odin Project, and I wanted to document exactly what I uncovered about browser defaults, resets, and modern layout strategies.

Ever wondered why an unstyled HTML page still has bold headings and underlined links right out of the box?

🌐Every web browser comes pre-loaded with its own built-in layout rules, known as user-agent stylesheets. They exist for a great reason—ensuring the web is legible, accessible, and responsive by default, even if a site has no custom CSS.

But for frontend developers, these defaults present a major challenge. Modern browsers might be 99% similar today, but that leftover 1% can cause frustrating surprises. Without a solid baseline strategy, writing vanilla CSS can quickly turn into a frustrating game of "whack-a-mole":

You find yourself repeatedly overriding unwanted default element margins.

You battle weird browser-specific layouts like -webkit-text-size-adjust.

Worst of all, you wrestle with core defaults defined by the CSS specification itself—like box-sizing: content-box—which causes elements to break out of their parent boundaries the second you add padding or borders.

The Evolution of the Canvas: How We Handle the Game

Over the years, the frontend community's philosophy on handling these defaults has undergone a massive shift:
1️⃣ The Reset (The Nuclear Option)In the early 2000s, tools like Tantek Çelik’s undohtml.css (2004) and Eric Meyer's legendary Meyer Reset (2007) took an aggressive approach. They explicitly wiped the slate completely clean—forcing margins, paddings, and borders for dozens of elements to absolute zero. Many developers even used the ultra-minimalist global hack:css* {
margin: 0;
padding: 0;
}
Use code with caution.But as modern experts point out, legacy rules like the Meyer reset are now "long in the tooth"—they haven't been updated in over a decade, and the modern web works differently.

2️⃣ The Normalize (Broad Retention)Along came Nicolas Gallagher’s Normalize.css, shifting the spirit entirely. Instead of destroying useful defaults (like header hierarchies), it embraced the browser's goal of out-of-the-box legibility while surgically targeting only actual cross-browser bugs and discrepancies.

3️⃣ The Hybrid Framework EraToday, modern frameworks blend the best of both worlds. A prime example is Tailwind CSS, which ships with a built-in tool called Preflight. It combines a normalization engine to remedy browser oddities with a zero-margin clean slate, layered on top of opinionated global defaults like box-sizing: border-box.

💡 Rethinking the "Reset": The Modern Shift

⚖_As modern browsers faithfully implement standard CSS specifications, the massive layout and spacing discrepancies of the 2000s are mostly gone. The goal is no longer just about squashing browser bugs—it's about creating sensible baseline defaults for your workflow.

In fact, modern tools take a creative liberty with the classical definition of a "reset":

Don't Nuke Common Sense: Josh W. Comeau notes that modern resets shouldn't aggressively strip away all browser defaults just for the sake of a blank slate. There is no point in wiping out common-sense features—like forcing an tag to lose its default italic styling!

The Tailored Baseline: Instead of an off-the-shelf framework, developers like Matt Brictson suggest using a concise utility like modern-normalize paired with personal, strategic tweaks. His approach leverages modern logical properties (padding-inline, max-inline-size) for automatic international language support, alongside smart overrides like ul[role="list"] { list-style: none; } to protect screen-reader accessibility on Safari.

The Workflow Accelerator: Josh's configuration is less about fixing browser errors and more about boosting the development experience. He injects properties like interpolate-size: allow-keywords; at the root so layouts animate smoothly from 0 to auto natively, applies text-wrap: pretty; to dynamically banish typographic orphan words, and drops isolation: isolate; on framework roots (#root, #__next) to create a z-index firewall that stops third-party portal modals from getting trapped underneath application layers.

⚠️ The Golden Rule of Resets

No matter which strategy you choose, there is one rule the community universally agrees on: Never try to apply a CSS reset to an existing codebase. Because resets fundamentally disrupt elemental styles, injecting one late in the game will completely unravel your established layouts. Save them for day one of a brand-new project!

The Takeaway 🚀

Baseline setups are deeply personal and highly opinionated. Whether you lean on a surgical normalizer, a framework hybrid engine like Tailwind's Preflight, or an enhanced modern layout baseline built on top of modern CSS standards, your baseline simply reflects how you prefer to control your layout canvas.

What does the top of your production stylesheet look like? Are you still using a traditional blank-slate reset, or have you shifted toward an opinionated modern baseline workflow? Let me know in the comments! 👇

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