Universal by Design: Web Development Basics with Builderius

The Evolution of the Web & Builderius: Episode text version

Welcome to the start of this web design course. In these first few moments, we aren’t going to open an editor or talk about colours. We are going to talk about philosophy.

The way we build websites today isn’t an accident. It is the result of decades of competition, collaboration, and a relentless push to make the digital world more open and accessible.

To understand how to build correctly, you first have to understand why the tools we use exist. Let’s explore the evolution of the web and how it led us to Builderius.

Part 1: The Goal of the World Wide Web (CERN, 1989)

The World Wide Web was not invented by a corporation to maximise profit. It was invented by Sir Tim Berners-Lee at CERN to solve a practical problem: brilliance was locked in information silos.

Scientists from around the world came to CERN, but their research was held back by thousands of incompatible computer systems. Transferring a file often meant physically carrying a floppy disk between different machines.

Berners-Lee’s vision was to create a decentralised, collaborative space where information could be shared regardless of the computer system being used.

His proposal aimed to solve three specific problems:

Universal Access: Any computer, anywhere, should be able to view any document.
Decentralisation: Anyone can add information without asking for permission from a central authority.
Non-linearity: Unlike a book, you don’t have to read in order. You can follow “webs” of related ideas across different servers (known as Hypertext).

Part 2: Democratising the Voice (The Era of WordPress)

While the fundamental technology of the web was now available, it still required significant technical knowledge to publish a piece of information. The web was a read-for-all, write-for-few environment.

The goal of WordPress, which started in 2003, was to change that. Its mission was (and is) democratizing publishing.

By providing a free, elegant, and (eventually) easy way for non-technical people to install and manage a database of content, WordPress gave everyone a voice on the open web.

Part 3: The Web’s Constitutional Convention (The W3C)

As the web exploded in popularity during the 1990s, it faced a crisis. Browsers like Netscape and Internet Explorer began inventing their own HTML “tags”—formatting codes that only worked in their specific software. If this continued, the web would have split into several incompatible fragments. If you used Internet Explorer, you might not be able to read a site built for Netscape.

To prevent this digital “Tower of Babel,” Berners-Lee founded the W3C (World Wide Web Consortium) in 1994.

The Philosophy: Decisions are made by consensus among hundreds of member organisations (including competitors like Microsoft, Google, and Apple). It is the “United Nations” of the internet, ensuring no single company can act as a gatekeeper.
The Goal: Interoperability. No matter what device you use—a phone, a fridge, or a high-end laptop—the fundamental code should look and act the same.

Part 4: The Moral Imperative of the Web (WCAG)

While the W3C was standardising the code, they realised that “standard” code is not necessarily usable code.

If you are blind and rely on a screen reader, a website built with standardised code might still be a nightmare if the images do not contain descriptions, if dynamic updates are not announced, or if buttons cannot be activated via a keyboard alone.

The Web Content Accessibility Guidelines (WCAG) were born out of a simple, but radical, idea from Berners-Lee:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Today, WCAG compliance is not just a “good practice”; it is the global legal standard for digital human rights.

Part 5: Builderius — The Visual-Standard Hybrid

Traditionally, web development has forced practitioners into extremes:

The “Raw Coders”: Those who demand full control of the HTML, CSS, and JS using text editors (IDEs), often sacrificing the speed and oversight of a visual interface.
The “Visual Designers”: Those who prefer no-code, drag-and-drop tools, often sacrificing code quality, accessibility control, or flexibility in exchange for speed.
The “Vibe Coders”: An emerging group relying heavily on AI to generate entire sections based on “vibes” rather than deliberate architectural decisions.
Builderius seeks to be the middle ground.

We aim to provide you with a full visual development environment that does not compromise on the code and gives you direct access to the source. It includes a deeply integrated AI terminal to enhance your workflow, but it keeps the power in your hands.

To build sustainable, scalable sites, we emphasise several key concepts you will learn in this course:

Flexibility and Granular Control: You should have the visual convenience, but the granular control of the output code.
Separation of Concerns: This is critical for maintainability. Your dynamic data is built in one area, your custom CSS (styles) is in another, and your JavaScript interactions are kept separate from the actual HTML content. They are all distinct, but accessible within the same interface.
The Journey Ahead
If you are aligned with this vision—building a web that is standards-compliant, accessible, and efficient, without giving up your control over the code—then I welcome you to this course.

Join me on the journey as we explore the language of the web and build our first site with Builderius.

Universal by Design: Exploring the Builderius Interface Text Version

A tool is only as powerful as your knowledge of it. In this guide, we are diving deep into the Builderius interface so you can stop hunting for buttons and start building faster.

If you want to follow along, you can spin up a free Builderius sandbox. Simply fill in your information, and a link will be sent to your email. If you decide to “go pro” after the course, you can purchase a license.

Note: This tutorial assumes you know your way around a basic WordPress install. If you need a “WordPress 101,” let us know in the comments.

Getting Started: The Dashboard and Initial Setup

To begin, head over to the Builderius dashboard by clicking the Builderius option in your WordPress sidebar. You will see a welcome screen highlighting the features you can expect.

At the bottom of the screen, you can choose which path to start with:

• Standard Settings: Includes the Builderius CSS framework, demo templates, and demo header/footer components.
• Minimal Settings: Best for those who want to bring their own CSS framework and build everything (header, footer, navigation) from scratch without any “opinion” from the builder.
• Starter Sites: For a complete template, you can choose a starter site like the “Architecture Studio,” which bundles a full website with WordPress data.

For this lesson, we will stick with the Standard Settings. You can choose to “Publish” so it goes live immediately, or just “Install”. You will also have the choice to install with or without WordPress data.

Understanding the Templating System

Builderius is not a traditional page builder; it is a powerful templating system. It creates templates that override your theme’s default output—but only for the templates you specify, making it incredibly safe for existing live sites.

In the Templates view, you will see:

• Active Column: Shows if a template is currently active.
• Title: Hovering over the title allows you to edit with Builderius, rename, duplicate, or delete the template.
• Location: Tells you exactly where the template is applied, such as Pages, 404, or Posts.
• Priority: If two templates affect the same location, WordPress uses the priority number to decide which to pick. The lower the number, the higher the priority.

The Builderius Workspace

The workspace is divided into three main panels:

1. The Left Panel (Settings): Changes depending on what element is currently active.
2. The Right Panel (Navigator): Divided into three tabs: the Elements Tree, CSS Selectors (elements, classes, complex selectors), and CSS Variables.
3. The Center (Preview): A clean, real-time preview. Hovering over an element shows its tag, and clicking it highlights the element in the navigator.

The Top Bar

The top bar is also split into three sections:

• File Menu: Provides jump points to other pages, templates, and components. These open as new tabs within the same workspace, allowing you to work on a post template, save it, and return to your initial template without opening new browser windows.
• Element Inserter: Used to add new elements, logically grouped into categories like Layouts, Text Content, and Others.
• Quick Shortcuts: Located at the far right, these are your most frequently used elements like Section, Div, and Heading. You can “favourite” an element by clicking the star icon when hovering over it in the inserter. To remove shortcuts, click the cog icon and then the “X”.

Pro Tip for Adding Elements:

• If no element is highlighted, a new element is added as the last item on the canvas.
• If a container is highlighted, the new element becomes a child of that container.
• Hold the Shift key while clicking elements in the inserter to add multiple items without the menu closing.

Universal Design and the “DNA” of Elements

In Builderius, every element shares the same DNA. This means every element uses the same settings panel, allowing you to convert one element type to another on the fly.

The settings panel consists of two primary tabs:

• Content Tab: For HTML-related tasks, such as changing the HTML tag, editing content, or adding Attributes (Data, ARIA, and dynamic data).
• Style Tab: For CSS styling and adding class names.

Unique Features:

• Nestable Elements: Builderius does not restrict you. You can nest span tags inside headings or paragraphs directly to style them visually.
• Unit-less Inputs: You are not forced to pick a unit first. [cite_start]You can type 12rem, 1rem, red, or use the shortcut (double hyphen --) to search for variables[cite: 255].
• Synced Code and UI: There are no “magic areas.” If you write CSS in the code editor, it updates the visual UI, and vice versa.
• Advanced Tab: If a CSS property doesn’t exist in the visual builder, you can add it manually in the Advanced tab (e.g., inline-size), and it will still sync with the code.

Power User Tools

At the bottom, the Power User Footer houses:

• Custom CSS/JS Editors: For scripts or styles you don’t want in the visual editor, like a custom carousel.
• Dynamic Data: GraphQL-powered for complex data.
• Coming Soon: Translations, and Accessibility suggestions,
• “Sense AI” for an AI terminal.
• Interactive Canvas: A button to turn off the editing mode mouse-over effects in the preview area and reinstate the frontend interactive functionality.

The Dev-to-Live Workflow

Builderius uses a Git-like workflow. When you click “Save,” it saves to your Development branch. To push changes to your Live branch, you use Releases.

1. Create a Release: These are save points with version numbers (e.g., 1.0.1) and tags.
2. Publish: You can choose to keep a release as a simple save point or click “Publish Release” to show it to the public.
3. Branch Switching: You can quickly switch between the “Development” and “Live” versions in the admin bar.
4. Export/Import: You can export releases (including WordPress content) to other websites. You can also “pull” from a release back into the development branch if you need to revert.

That concludes our grand tour of the interface! In our next video, we will start building an actual website.

While it is easy to get carried away with a website’s visuals—such as colours, layouts, and animations—it is important to ask if the site still makes sense once those decorations are turned off. This module focuses on semantic HTML, which tells browsers and assistive technologies what a website is actually about.

What is Semantic HTML?

Semantic HTML refers to code that carries intrinsic meaning. Rather than using generic containers for everything, you use specific elements to define the structure:

• Paragraphs (<p>): This element represents a full paragraph of content.
• Headings (<h1> to <h6>): These designate the topic for a section and must be used in a sequential, nested order.
  • <h1>: This represents the primary title that encapsulates the entire page.
  • <h2> to <h6>: These are used for sections and subsequent subsections.
• Sections (<section>): A section is a thematic grouping of content where the entire group shares a similar theme, such as “Our Story” or “Our Menu”

Auditing the Website Structure

To ensure your content flows logically, you can use several tools to strip away the “fluff” and view the raw HTML:

• Reading Mode: Available in browsers like Chrome, Edge, and Firefox, this shows the HTML content without styling or animations. If the site doesn’t make sense here, it needs updating.
• HeadingsMap: A free Chrome extension that generates an outline of your headings. This should mimic a physical book’s table of contents, allowing users—especially those using screen readers—to jump to different topics.
• Markdown Editors: It is recommended to use a Markdown tool to draft content first, as it allows you to see the flow of information before moving into a visual development environment.

Practical implementation in Builderius

When building the main content area, it is best to focus on the HTML structure before applying styles.

• The Hero Section and <hgroup>: For a standard Hero section containing a heading and a tagline, you can use the <hgroup> element. According to the HTML Living Standard, an <hgroup> represents a heading and its related content, such as a subheading or tagline.
• Using Generic Divs: While semantic elements are preferred, there are times when a generic <div> is appropriate. If you are grouping a heading and text solely for styling purposes—such as separating text from an image—and there is no additional semantic reason for the group, a <div> is the correct choice.

A Note on Accessibility: Using semantic HTML like <hgroup> provides a better structure for search engines, but it does not always translate to “accessible” HTML. Some assistive technologies may still treat it as a generic container

Professional Resources

To further your understanding of HTML, refer to these primary documents:

• HTML Living Standard: Considered the “single source of truth” for semantic HTML.
• MDN Docs: Provides a user-friendly, highly readable version of the standards with practical examples.

Yes. No credit card. The course and demo environment are free. Learn first, decide later.

No. Use demo.builderius.io for the whole course, or your own installation if you have one.

The concepts transfer everywhere. These are web standards, not Builderius features. But most builders hide the code, making learning harder.

This course focuses on fundamentals. Learn the craft first. Then let AI accelerate it.

The course consists of 14 lessons. The lessons will be released in the following weeks (one a week), as we upload them, they will become available here.

If you take the time to watch one episode per day it should take you two weeks. No deadline. Go at your own pace.