Your extension might fetch data flawlessly and have a beautiful interface, but if screen reader users or keyboard navigators can’t use it, you’ve unintentionally excluded many potential users.

In this article, we will audit a Chrome browser extension for accessibility issues and transform it into an inclusive experience that works for everyone.

Table of Contents

• Why Accessibility Matters in Browser Extensions

• How to Perform Manual Browser Extension Accessibility Tests

• How to Implement Browser Extension Accessibility Improvements

• How to Perform Automated Browser Extension Accessibility Tests

• Best Practices for Accessible Browser Extensions

• Conclusion

Why Accessibility Matters in Browser Extensions

Every click in your browser extension is an opportunity to empower users or exclude them if accessibility isn’t part of your design.

Browser extensions face unique accessibility challenges, as they must inject functionality into existing web pages while maintaining their own accessible interfaces - a dual responsibility that can introduce potential barriers. For example, a popup that traps keyboard users or fails to communicate with screen readers can render an extension unusable.

With over one billion people living with disabilities, according to the World Health Organization, accessible design unlocks a vast user base and creates better experiences for everyone.

For browser extensions, accessibility barriers commonly emerge as:

• Keyboard navigation dead-ends: Popups and interfaces that trap or exclude keyboard users.

• Silent interactions: Missing labels and descriptions, like a button with only an icon announced as “unlabelled button” by screen readers, leaving users guessing about its purpose.

• Unannounced dynamic content updates: Content changes that occur without assistive technology awareness, such as a quote updating without notifying screen readers of the change, including missing feedback for loading states or errors

• Context integration conflicts: Extensions modifying existing web pages can mistakenly break the page's accessibility features or introduce elements that clash with established navigation patterns

By understanding these barriers, developers can take targeted steps to test and improve their extensions’ accessibility.

How to Perform Manual Browser Extension Accessibility Tests

While automated tools catch obvious issues, manual testing reveals the real user experience. Here's how to systematically evaluate your extension's accessibility.

Keyboard Navigation Test

Disconnect your mouse and try to use your extension completely with the keyboard only. Navigate using Tab to move between elements, Enter or Space to activate buttons, and arrow keys within components.

• Is it always clear which element has focus?

• Can you activate buttons with Enter or Space as expected?

• Can users exit modal dialogs or dropdown menus?

If you encounter any dead-ends or confusion points, keyboard users will face the same barriers.

Screen Reader Evaluation

Use your operating system's built-in screen reader to navigate your extension and listen to what is announced. On macOS, enable VoiceOver; on Windows, use Narrator; on Linux, try Orca.

• Does each element’s purpose come through clearly, such as a button announced as “Generate new advice” rather than just “button”?

• Are headings, lists, and other structures properly conveyed?

• Do users understand when content is loading, selected, or has changed?

This testing phase often reveals the gap between what you intended to communicate and what actually reaches users.

Visual Accessibility Review

Examine your extension in different visual contexts. Use developer tools, like WebAIM’s Contrast Checker, to verify that text meets WCAG’s 4.5:1 contrast ratio for readability. Test how your extension appears in system high-contrast settings. Ensure:

• Functionality remains usable at 200% zoom.

• Information isn’t conveyed through colour alone, such as using text labels alongside colour-coded indicators.

These manual tests will uncover critical accessibility issues, paving the way for targeted improvements to make your extension inclusive.

How to Implement Browser Extension Accessibility Improvements

Imagine refreshing a page without knowing it happened or clicking a button with no clear purpose. The manual tests performed above revealed that's the experience for screen reader users of our extension among these three key accessibility issues:

• Missing button label: The dice button only has an image with alt text “Dice icon,” which lacks the context screen readers need

• Silent dynamic updates: When new advice loads, screen readers don't know the content has changed

• No loading states: When fetching advice, users receive no feedback that something is happening

Let's address the issues before conducting automated tests.

How to Address Missing Button Label and Alt text

We’ll add aria-label to clearly explain the button's purpose and provide descriptive alt text for the icon. The role="presentation" attribute ensures the image is treated as decorative by screen readers.

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
    <img src="/icons/icon-dice.png" alt="Dice icon">
</button>

<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
     <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

How to Address Silent Dynamic Updates

We’ll add aria-live="polite" for screen readers to announce new advice and aria-atomic="true" to ensure that the entire quote is read. That is:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
    "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

How to Address No Loading States

We’ll add a setLoadingState function to provide loading indicators, ensuring screen reader users are notified when content is being fetched:

// Before: No Loading Feedback
function requestNewAdvice() {
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    // No loading indicators...
  });
}

// After: Accessible Loading States
function requestNewAdvice() {
  setLoadingState(true); 
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    setLoadingState(false);
    // Handle response with proper announcements...
  });
}
function setLoadingState(isLoading) {
  if (isLoading) {
    // Disable button and show loading text
    generateAdviceBtn.disabled = true;
    generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
    // Show loading text in the advice quote element
    adviceQuoteElement.textContent = "Loading new advice...";
  } else {
    // Re-enable button
    generateAdviceBtn.disabled = false;
    generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
  }
}

With the manual testing issues addressed, we can now move on to performing an automated test of the same extension.

How to Perform Automated Browser Extension Accessibility Tests

Manual testing provides crucial insights, but automated tools can efficiently catch common issues and provide ongoing monitoring.

This Extension Accessibility Checker simplifies testing by analyzing browser extension interfaces, such as popups and content scripts, for WCAG compliance, addressing unique challenges like popup constraints and content injection conflicts.

To use the Extension Accessibility Checker:

1. Compress your browser extension folder into a .zip file

2. Upload the .zip file on https://extensiona11ychecker.vercel.app/

3. Review the generated report for specific accessibility violations and implement suggested fixes

As shown in the GIF above, this workflow helps establish accessibility as a routine part of your development process rather than an afterthought.

With automated testing in place, let’s explore best practices to ensure that your extension remains accessible throughout development.

Best Practices for Accessible Browser Extensions

We've transformed our sample advice-generating browser extension from a functional but inaccessible tool into an inclusive one that works for everyone.

Based on our improvements, here are four key principles for designing accessible browser extensions:

1. Semantic HTML and Clear, Descriptive Labels

Always start with proper HTML structure, using appropriate elements (for example, for a “Generate Advice” action, proper heading hierarchy) before adding ARIA attributes.

Ensure that every interactive element has a clear purpose via aria-label, aria-labelledby, or visible text that explains its action.

2. Clear Communication at Every Step

Every interactive element must convey its purpose effectively. Users need to understand:

• • What’s happening (for example, “Loading new advice…” for loading states)

    • What went wrong (for example, “Failed to load advice” for errors)

    • What changed (for example, aria-live regions for updated content)

3. Complete Keyboard Accessibility

All functionality must be available through keyboard navigation. This requires testing with Tab, Enter, Space, and arrow keys as appropriate.

Provide clear and thoughtful focus indicators that move predictably through your interface with obvious ways to exit modals or complex interactions.

4. User Preferences and Content Script Considerations

Respect user choices by supporting system font size settings and not overriding user-defined colour schemes unnecessarily.

When your extension modifies existing web pages, make sure you don't break the page's established accessibility features, focus management and navigation patterns. Ensure any new elements you inject follow accessibility standards.

Conclusion

As we’ve seen with our advice-generating extension, addressing accessibility issues transforms a functional tool into an inclusive one.

However, while fixing issues in existing extensions is helpful, the most effective approach is letting accessibility guide your design and development decisions from the first line of code.

When starting your next browser extension project, ask:

• How would someone navigate this using only a keyboard?

• Is the purpose of every interactive element immediately clear to screen readers?

• How will users understand what's happening during loading states?

Here are some helpful resources

• Chrome Extension Accessibility Documentation

• Extension Accessibility Checker

• Web Content Accessibility Guidelines (WCAG) 2.1

And despite how essential extensions are, creating one is very simple – it’s just HTML, CSS, and JavaScript with browser APIs.

In this tutorial, we are going to learn about Chrome extensions by building an Advice Generator extension with Manifest V3 (MV3), the latest and most secure architecture for Chrome Extensions. You can move along to see what we'll build here.

Table of Contents

• What are the Key Components of a Chrome Extension?

• How to Build an Advice Generator Chrome Extension

• The Benefits of Manifest V3

• How to Debug Your Chrome Extension

• Conclusion

What are the Key Components of a Chrome Extension?

Chrome extensions are incredibly powerful tools that can add custom functionality directly into your Browser experience to transform how you use the web.

Before we write any code, let's understand some key components:

• Every extension starts with a manifest file. This JSON file tells Chrome everything it needs to know about an extension: name, version, permissions, and files

• The user interface is built with HTML, CSS, and JavaScript. It's essentially a mini webpage that lives inside your browser

• Finally, there's the service worker which runs in the background and fetches data from external APIs. In Manifest V3, service workers have replaced background pages

How to Build an Advice Generator Chrome Extension

Here’s a look at what we’re going to build:

This design is by Frontend Mentor.

Prerequisites:

To follow along with this tutorial, you need:

• Basic understanding of HTML, CSS and JavaScript

• A Chrome browser

• A text editor

When structuring an extension project, the only prerequisite is to place the manifest.json file in the extension's root directory.

Testing Your Chrome Extension (Load Unpacked)

Before we start building, you’ll want to see your progress after each file to catch any issues early. Here’s how to load your extension into Chrome for testing:

1. Go to chrome://extensions to open the Chrome Extensions page.

2. In the top right corner of the Extensions page, toggle the Developer mode on.

3. Click the Load unpacked button that appears.

4. In the file dialog, go to the root folder of the extension and click Select Folder.

Your extension should appear. If its icon does not appear in your browser's toolbar immediately, click the puzzle icon in your toolbar and pin it.

Now let's start by defining our extension's identity in the manifest.json file.

The Benefits of Manifest V3

The manifest.json is the heart of a Chrome Extension. Written in JSON (JavaScript Object Notation), it provides Chrome with everything it needs to know about your extension.

Think of it like a passport with visas and Chrome as the immigration officer verifying identity and access.

Manifest V3 (MV3), brings better performance, security, and reliability to extensions. MV3 uses service workers that activate only when needed, improving battery life and preventing extensions from slowing down your browser.

Let's break down each important field:

• manifest_version is the most critical line. Give it a value of 3 to tell Chrome you're using Manifest V3.

• name, version, description define your extension's basic identity.

• action is a Manifest V3 field that controls what happens when someone clicks your extension's default_icon in the toolbar. The default_popup points to your HTML file, so clicking the icon opens that page in a small popup window.

• permissions tells Chrome what your extension needs access to. We're using host permission https://api.adviceslip.com/* so our extension can fetch advice from that API. Without it, the extension would be blocked from making those requests. This might seem overly cautious, but it's a security measure that protects users.

• background points to your service worker script. The service_worker field tells Chrome that service-worker.js should run in the background.

Step 1: Create a Manifest 3 File

Going by the explanations of the various parts of the file above, here's what our manifest.json file would look like:

{
  "name": "Advice Generator",
  "description": "Get a fresh piece of advice whenever you need it!",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html",
    "default_icon": "/icons/icon-dice.png"
  },
  "permissions": [
    "activeTab"
  ],
  "host_permissions": [
    "https://api.adviceslip.com/*"
  ],
  "background": {
    "service_worker": "service-worker.js"
  }
}

You might see activeTab in other extension examples. While we don't strictly need it for this, it's worth knowing about. It gives temporary access to whatever tab the user is on, but only when they click the extensions icon.

The image below will be the result of running our manifest code above:

Step 2: Create the HTML and CSS Pages

Now that our extension has its identity and permissions defined, let's move on to building the user interface starting with an index.html page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advice Generator</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;800&display=swap" rel="stylesheet">
</head>
<body>
    <main class="advice-card">
        <h1 class="advice-id">ADVICE #<span id="advice-id-number"></span></h1>
        <p class="advice-quote" id="advice-quote">
            “It is easy to sit up and take notice, what's difficult is getting up and taking action.”
        </p>
        <div class="divider">
            <img src="icons/pattern-divider.png" alt="Divider pattern">
        </div>
        <button class="dice-button" id="generate-advice-btn">
            <img src="icons/icon-dice.png" alt="Dice icon">
        </button>
    </main>
    <script src="index.js"></script>
</body>
</html>

Now, let's bring the design to life with a style.css file in your root directory. We'll set up the overall body styles, position the card, and style all the elements within it.

:root {
    /* Define colors from the Frontend Mentor style guide */
    --clr-light-cyan: hsl(193, 38%, 86%);
    --clr-neon-green: hsl(150, 100%, 66%);
    --clr-grayish-blue: hsl(217, 19%, 35%);
    --clr-dark-grayish-blue: hsl(217, 19%, 25%);
    --clr-dark-blue: hsl(218, 23%, 16%); 
    /* Typography */
    --ff-manrope: 'Manrope', sans-serif;
    --fw-regular: 400;
    --fw-bold: 700;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-manrope);
    background-color: var(--clr-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 30rem;
    box-sizing: border-box;
}
.advice-card {
    background-color: var(--clr-dark-grayish-blue);
    border-radius: 0.5rem;
    padding: 1.5rem 1.5rem;
    width: 60%; 
    text-align: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 70px; 
}
.advice-id {
    color: var(--clr-neon-green);
    font-size: 0.8em;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.advice-quote {
    color: var(--clr-light-cyan);
    font-size: 1.75em; 
    font-weight: var(--fw-bold);
    line-height: 1.4;
    margin-bottom: 1.2rem;
    padding: 0 15px;
}
.divider {
    margin-bottom: 35px;
}
.divider img {
    max-width: 90%;
    height: auto;
}
.dice-button {
    background-color: var(--clr-neon-green);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    bottom: -1rem; 
    left: 50%;
    padding: 1rem;
    transform: translateX(-50%);
    transition: box-shadow 0.3s ease-in-out;
}
.dice-button:hover {
    box-shadow: 0 0 40px var(--clr-neon-green);
}
.dice-button img {
    width: 2rem;
    height: 2rem;
}

The image below will be the result of running our HTML and CSS code above plus the initial manifest:

With the HTML and CSS done, our extension's visual aspect is complete. Next, let’s give it life by writing the JavaScript that handles fetching new advice and updating the display.

Step 3: Add a Service Worker

In Manifest V3, the core background logic for an extension lives in its Service Worker. Unlike the persistent background pages of Manifest V2, in V3 Service Workers run only when needed, such as in response to a message from index.js or a browser event.

Our service-worker.js will have these roles:

• Listen for a request from index.js (when the user clicks the dice).

• Fetch a new piece of advice from the Advice Slip API.

• Send that advice back to index.js to be displayed.

Create a file named service-worker.js in your extension's root directory.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "fetchAdvice") {
    fetchAdvice().then(adviceData => {
      sendResponse({ advice: adviceData });
    }).catch(error => {
      console.error("Error fetching advice:", error);
      sendResponse({ error: "Failed to fetch advice" });
    });
    return true;
  }
});
// Function to fetch advice from the Advice Slip API
async function fetchAdvice() {
  try {
    const response = await fetch("https://api.adviceslip.com/advice");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data.slip; 
  } catch (error) {
    console.error("Could not fetch advice:", error);
    throw error; 
  }
}

Message Handling in Service Workers

Since Service Workers don't have direct access to the DOM of your index.html page (and vice versa), they communicate using message passing. As you can see in the code above, the user clicks the dice in index.html, and index.js will send a message to service-worker.js asking for new advice. The Service Worker will then fetch the advice and send it back in another message.

chrome.runtime.onMessage.addListener listens for incoming messages and sendResponse replies.

Our Service Worker is now ready to fetch advice. The next step is to make our index.js interact with it.

Step 4: Add App Functionality

First, we'll create our index.js file. This script is responsible for all the user-facing logic. It will handle the user's interaction (clicking the dice), send a message to our service-worker.js to get new advice, and then update the index.html with the fetched advice.

Our index.js will perform the following steps:

1. Reference the HTML elements where we'll display the advice ID, quote, and dice.

2. Set up an event listener for when the dice is clicked.

3. Send a message to the service-worker.js to request new advice.

4. Receive the advice back from service-worker.js and update the content on the index.html page.

// Get references to our HTML elements
const adviceIdElement = document.getElementById('advice-id-number');
const adviceQuoteElement = document.getElementById('advice-quote');
const generateAdviceBtn = document.getElementById('generate-advice-btn');
// Function to request advice from the Service Worker
function requestNewAdvice() {
  chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
    if (chrome.runtime.lastError) {
      console.error("Error sending message:", chrome.runtime.lastError);
      adviceQuoteElement.textContent = "Error: Could not get advice.";
      adviceIdElement.textContent = "---";
      return;
    }
    if (response && response.advice) {
      adviceIdElement.textContent = response.advice.id;
      adviceQuoteElement.textContent = `“${response.advice.advice}”`;
    } else if (response && response.error) {
      console.error("Service Worker error:", response.error);
      adviceQuoteElement.textContent = `Error: ${response.error}`;
      adviceIdElement.textContent = "---";
    }
  });
}
if (generateAdviceBtn) {
  generateAdviceBtn.addEventListener('click', requestNewAdvice);
} else {
  console.error("Generate advice button not found!");
}
document.addEventListener('DOMContentLoaded', requestNewAdvice);

With index.js in place, our Advice Generator is now ready as you can see in the GIF below:

The next crucial step is to know how to debug your extension, should anything go wrong.

How to Debug Your Chrome Extension

Chrome provides excellent debugging tools to help troubleshoot extensions. Always follow these essential steps:

• Reload your extension after making changes (especially to manifest.json or service-worker.js) by clicking the refresh icon on chrome://extensions.

• Check your manifest.json for typos – missing commas or brackets will break everything.

• Verify your API URL and make sure you have the right permissions listed in manifest.json.

Debugging the Main HTML and JS Pages

This is likely where you'll encounter most of your initial JavaScript or HTML/CSS issues.

1. Open the extension and right-click anywhere in the popup to Inspect.

2. Check the Console tab for JavaScript errors from your index.js file.

3. Use the Elements tab to inspect your HTML and tweak CSS styles in real-time.

Debugging the Service Worker – Crucial for MV3

The Service Worker runs in the background and has its own separate DevTools.

1. Go to chrome://extensions.

2. Click the Service worker link underneath your extension or the Errors button.

3. Check the Console and Network tabs for service worker and API errors respectively.

Conclusion

Congratulations, you've just built a Chrome extension using Manifest V3. You've created a user interface, implemented background processing with a service worker, and established communication between different parts of your extension. These skills are the building blocks for any Chrome extension, no matter how simple or complex.

Here are some helpful resources:

• MDN on Browser Extensions

• Chrome Devs on Chrome Extensions

They help create clean, organized, and user-friendly interfaces. Many developers still reach for JavaScript to build accordions, which adds avoidable complexities to their projects.

The HTML <details> element solves this problem with its built-in disclosure widget that toggles content visibility using just a few lines of HTML and optional CSS.

In this article, we’ll look at an FAQ accordion built using <details>. You can see the final project here.

Table of Contents

• What is the HTML <details> Element?

• An FAQ Accordion Built with the <details> Element

• Browser Support and Accessibility Considerations

• Conclusion

What is the HTML <details> Element?

The HTML <details> element is a disclosure widget that allows you to hide and show content with a single click. Think of it as a native accordion that comes built into HTML.

The most common use case for accordions is the Frequently Asked Questions (FAQ) section on many sites. If you’ve seen or interacted with an FAQ, that’s an opportunity to use <details>.

It has two main components:

• <details> is the main container tag that opens and closes to display what’s in <summary>.

• <summary> is a container for the content that is displayed when <details> is clicked.

💡 In addition to the summary, you can include any HTML text element within the <details> container.

The image above shows a real-life use case of <details> on the Apple website. In a later section, we’ll learn about the browsers that support it.

When to Use <details> over JavaScript alternatives

Unlike JavaScript-based accordions that add weight to your project, <details> offers the same functionality with minimal load and better performance. It also offers built-in keyboard navigation and screen reader support.

Choose <details> over JavaScript-created accordions when:

• Building simple accordions or FAQ sections

• Accessibility, performance, and SEO are a priority

• You want to avoid JavaScript dependencies

An FAQ Accordion Built with the <details> Element

Here’s what our example project looks like:

This design is by Frontend Mentor (and you can check out the project on Codepen).

To follow along, you need basic knowledge of HTML and CSS. Since the focus of this article is <details>, we won't place a lot of emphasis on the starting HTML and CSS code (available on the Codepen above). Instead, we'll look at one FAQ question with its answer to learn how <details> works.

How to Use <details>

To create an accordion with the <details> element, you need both the <details> and <summary> elements, as shown in the starter code below.

<details>
  <summary>What is Frontend Mentor, and how will it help me?</summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

The GIF below will be the result after running the above code. With less than five lines of HTML code, we already have an accordion.

Styling <details>

Now, let's focus on transforming our basic accordion into something visually appealing (foundational styles can be found on the Codepen). First, we’ll add the icons as SVGs within <summary> with classes (closed-icon and open-icon) to make them easy to style.

<details>
  <summary>What is Frontend Mentor, and how will it help me?
  <svg class="closed-icon" xmlns="<http://www.w3.org/2000/svg>" class="closed-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1835 12.2689 25.8981 9.17131 23.6134 6.88659C21.3287 4.60186 18.2311 3.31653 15 3.3125ZM19.6875 16.4375H15.9375V20.1875C15.9375 20.4361 15.8387 20.6746 15.6629 20.8504C15.4871 21.0262 15.2486 21.125 15 21.125C14.7514 21.125 14.5129 21.0262 14.3371 20.8504C14.1613 20.6746 14.0625 20.4361 14.0625 20.1875V16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.375 15.7486 9.375 15.5C9.375 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H14.0625V10.8125C14.0625 10.5639 14.1613 10.3254 14.3371 10.1496C14.5129 9.97377 14.7514 9.875 15 9.875C15.2486 9.875 15.4871 9.97377 15.6629 10.1496C15.8387 10.3254 15.9375 10.5639 15.9375 10.8125V14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#AD28EB"/>
  </svg> 
  <svg class="open-icon" xmlns="<http://www.w3.org/2000/svg>" class="open-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1841 12.2687 25.899 9.17076 23.6141 6.8859C21.3292 4.60104 18.2313 3.31591 15 3.3125ZM19.6875 16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.37501 15.7486 9.37501 15.5C9.37501 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#301534"/>
  </svg>
  </summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

In the code below, we customize the disclosure marker by hiding the default arrow and adding a custom icon to the right using the ::marker pseudo-element on <summary>. We also set its content as empty, which removes the marker altogether.

/* Styles for the clickable summary element*/
summary {
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  margin-bottom: 1em;
  padding: 1.5em;
/* Remove the default marker */
  &::marker {
    content: '';
  }

  &:last-child { 
    margin-bottom: 0; 
  } 

  &:hover { 
    color: var(--text-accent);
    outline: none;
  }
}

p {
  padding-top: 1em;
  color: var(--text-light);
}
/* Styles for the collapsible <details> container */
details {
  margin-bottom: 1em;

  &:last-child { 
    margin-bottom: 0; 
  }

  .open-icon {
    display: none;
  }

  &[open] {
    .open-icon {
      display: inline;
    }

    .closed-icon {
      display: none;
    }
  }

  .open-icon,
  .closed-icon {
    width: 1.8em; 
    height: 1.8em;
    flex-shrink: 0;
  }
}

The GIF below shows the output of styling our accordion with the CSS code above.

To have an FAQ question expanded when the page loads, add the open attribute to <details>. This is particularly useful for highlighting important information where the most crucial FAQ starts expanded.

<details open>
    <summary>What is Frontend Mentor, and how will it help me?</summary>
</details>

Browser Support and Accessibility Considerations

According to MDN, <details> is a well established feature that works across many devices and the popular browsers (Chrome, Edge, Firefox, and Safari) since January 2020.

<details> includes built-in accessibility features that requires additional JavaScript in custom solutions such as keyboard navigation, screen reader support, and semantic structure. You can also add attributes like role, aria-expanded, and aria-labelledby to ensure even more accessibility.

Conclusion

<details> is a powerful yet under-utilized element for creating UI elements like accordions, FAQs, or navigation menus without JavaScript. It is easy to implement and lightweight, and yet improves user experience with interactive content.

So, the next time you need to create any collapsible content, with accessibility and performance in mind, consider reaching for <details> and it will surely make your development life easier.

Here are some helpful resources:

• MDN Documentation for <details>

• CSS-Tricks Guide to Styling Details

• Web.dev Learn HTML: Details

But in the real world, user-generated content varies wildly. For example, one testimonial card might have a brief sentence, while another has an entire paragraph. This makes it challenging to maintain a perfect alignment.

CSS Subgrid can easily handle these web layout inconsistencies. It allows nested elements to align with their parent grid, ensuring a consistent look regardless of the content.

In this tutorial, we’ll explore how to use CSS Subgrid to create a products section that stays flexible and looks great. You can move along to see what we'll build here.

Table of Contents

• Limitations of CSS Grid

• How to Build a Products Section with Subgrid

• How Does Subgrid Work?

• How to Use Subgrid

• Subgrid in Browser DevTools

• Conclusion

Limitations of CSS Grid

Adding a display of Grid to a container means that only the direct children become grids. If these direct children also have children, they are not a part of the main grid – so they display in their normal flow.

This is problematic because without a direct link to one another, each will take up the space it needs and not care about its siblings. This leads to misaligned content you can see on the left of the image below.

The project we'll build explores a Subgrid solution in a few lines of CSS code that will help us achieve the desired alignment seen on the right of the image above.

How to Build a Products Section with Subgrid

What We’re Going to Build

Check it out on Codepen.

Prerequisites

• Basic knowledge of HTML and CSS (For a refresher on how CSS Grid works, check out my previous article on Web Layouts)

• An IDE (text editor)

• A web browser

HTML Code:

In our index.html file, we'll create the basic structure of the project which includes linking our CSS file and Google Fonts – all within the <head> tag. Within the <body> tag, we'll create a main container to house all the cards. Next, we'll create three individual cards as articles – each with an icon, title, text and button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Ophy's Subgrid Products Cards</title>
</head>
<body>
  <div class="cards-container">
    <article class="sedans">
      <img src="./assets/icon-sedans.svg" alt="an icon showing a sedan vehicle">
      <h3>Sedans</h3>
      <p>
        Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
        or on your next road trip in and out of town - let your imaginations run.
      </p>
      <button>
        Learn more
      </button>
    </article>
    <article class="suvs">
      <img src="./assets/icon-suvs.svg" alt="an icon showing an suv vehicle">
      <h3>SUVs</h3>
      <p>
        Take an SUV for its spacious interior, power, and versatility.
      </p>
      <button>
        Learn more
      </button>
    </article>
    <article class="luxury">
      <img src="./assets/icon-luxury.svg" alt="an icon showing a luxury vehicle">
      <h3>
        Extremely Luxurious
      </h3>
      <p>
        Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
        rental and arrive in style.
      </p>
      <button>
        Learn more
      </button>
    </article>
  </div>
<footer>
      Ophy's Subgrid Products Cards | <a href="https://www.frontendmentor.io/">Design from Frontend Mentor </a>
</footer>
</body>
</html>

CSS Code:

In our style.css file, we'll first set our global and base styles:

/* Global Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root Variables */
:root {
  --primary-font: "Lexend Deca", sans-serif;
  --secondary-font: "Big Shoulders Display", sans-serif;
  --heading-color: #F2F2F2;
  --font-color: #FFF;
  --sedans-background: #E28625;
  --suv-background: #006971;
  --luxury-background: #004140;
  --heading-font-size: 2.5rem;
  --button-font-size: 0.9rem;
  --default-padding: 1rem 0;
}

/* Base Styles */
html {
  font-size: 16px;
}

body {
  font-family: var(--primary-font);
  margin: 0 auto;
  max-width: 920px;
}

/* Heading Styles */
h3 {
  font-family: var(--secondary-font);
  color: var(--heading-color);
  font-size: var(--heading-font-size);
}
/* Paragraph Styles */
p {
  font-family: var(--primary-font);
  font-optical-sizing: auto;
  font-weight: 200; 
  color: var(--font-color);
  padding: var(--default-padding);
  line-height: 1.5;
}
/*  Footer  */
  footer {
    text-align: center;
    margin-top: 1.5rem;
    a {
      text-decoration: none;
    }
  }

Next, we'll style the main cards container and button. Note that we've specified columns and rows for the cards container using grid-template-columns and grid-template-rows, respectively.

/* Container */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(4, auto);
  min-height: 31.25rem;
  margin-top: 10.688rem;
  button {
    font-size: var(--button-font-size);
    background: var(--font-color);
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    width: 70%;
    &:hover {
      cursor: pointer;
      background: none;
      color: var(--font-color);
      border: 1px solid var(--font-color);
    }
}

Then we'll create general card styles as well as individual card styles.

/* All */
.suvs,
.sedans,
.luxury {
  padding: 3rem;
  h3 {
    font-size: var(--heading-font-size);
    text-transform: uppercase;
  }
}
/* Sedans */
.sedans {
  background-color: var(--sedans-background);
  border-radius: 10px 0 0 10px;
  button {
    color: var(--sedans-background);
  }
}
/* SUV */
.suvs {
  background-color: var(--suv-background);
  button {
    color: var(--suv-background);
  }
}
/* Luxury */
.luxury {
  background-color: var(--luxury-background);
  border-radius: 0 10px 10px 0;
  button {
    color: var(--luxury-background);
  }
}

The image below will be the result after running the above starter code. The cards have been created as grid columns but the rows within the individual cards are not aligning properly due to the difference in content length.

How Does Subgrid Work?

The display above will be a nightmare for designers and stakeholders until it's fixed. In the past, to fix this, developers needed to make these cards into nested grids. But that code will eventually become messy and difficult to maintain.

CSS Subgrid allows a grid item to inherit the grid tracks (rows or columns) of its parent grid, rather than defining its own. This is particularly useful for maintaining consistent alignment between nested grids and their parent grids.

In our project, instead of defining a row for the icons, titles, text and buttons, we can make them inherit the same from their parent grid (the cards container).

How to Use Subgrid

To create a subgrid, assign the keyword as a value to either a grid-template-columns or a grid-template-rows of a nested grid.

To implement this in our project, we'll first turn the article element into a grid container in order to place its children in a structured grid. Next, grid-template-rows is given a value of subgrid. This inherits the row structure from the cards container grid.

Setting grid-row to span 4 basically means the element should occupy a space that covers 4 rows of the parent grid.

  article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
}

Optional Code

The code below for positioning elements with grid-row is not necessary in this project since we're using Subgrid correctly. But it may come in handy for more complex layouts when you want explicit control over the placement of each element within the grid.

    img {
      grid-row: 1/2;
    }

    h3 {
      grid-row: 2/3;
    }

    p {
      grid-row: 3/4;
    }

    button {
      grid-row: 4/5;
    }

Once subgrid is applied, our cards should be perfectly aligned as shown in the image below. This alignment occurs because the child elements within each card (like titles, paragraphs, and buttons) now share the same grid structure, inherited from the parent. They are "aware" of each other and automatically adjust their positions to stay in sync.

For example, even if the titles for Sedans and SUVs are shorter, the grid ensures that their paragraphs and buttons start in the same rows, maintaining consistency across all cards. This leads to a cleaner, more organized layout, where each element is aligned regardless of varying content lengths.

Subgrid in Browser DevTools

In any modern browser, right-click on the project webpage and select inspect from the list of options. Or use the shortcut (command + option + I on Mac or control + shift + I on Windows) to open the Elements tab of DevTools.

As you can see in the image above, just like we have for grid, Subgrid also has a badge. Toggle it to inspect or debug a Subgrid. It toggles an overlay that shows columns, rows, and their numbers on top of the element in the viewport.

Conclusion

Subgrid is a helpful tool for aligning layouts – something you had to do manually in the past. Now, nested grids can inherit properties such as rows and columns from their parent grids. This extends the abilities of CSS Grid to create consistent and perfectly aligned designs.

If you're ever tempted to create an unending loop of CSS grids just to get a design with differently sized content to align perfectly – instead, reach for CSS Subgrid to make your code cleaner and easier to manage.

Here are some helpful resources:

• MDN on CSS Subgrid

• Learn CSS Subgrid

• Web Dev on CSS Subgrid

When in situations like these, the ideal approach is to understand both concepts – compare and contrast their strengths and weaknesses and then decide their most appropriate applications. This is exactly what this article will do with CSS media queries and container queries.

Table of Contents

• Responsive and Intrinsic Web Design
• What are media queries?
• What are container queries?
• Real-life comparison and key differences
• Which should you use and when?
• Conclusion

Responsive and Intrinsic Web Design

Before 2010, web developers could get away with creating websites that worked mainly on desktop. This was until Ethan Marcotte introduced the concept of Responsive Web Design (RWD). It's defined by MDN as a way to design for a multi-device web. This lead to the adoption of media queries as a component of RWD.

But lately there's been a shift towards what Jen Simmons defined as Intrinsic Web Design – the need for creating context-aware components. And container queries are making this possible.

What Are Media Queries?

Media queries are rules for applying specified styles to an element if certain conditions are met. They’re popularly used to ensure that websites are responsive on various devices by querying the viewport width.

Media queries are characterized by an @media rule followed by a condition in parentheses and an expression within brackets that will be applied if the indicated condition is met. So, if we wanted to change the background color of a div based on the viewport width of a device, this is how we might do that:

/* Mobile */
@media (max-width: 480px) {
  .mysite {
    background-color: red;
  }
}

In the sample code above, we’re asking for the

.header {
   container: mysite / inline-size;
}

@container mysite (min-width: 600px) {
   .maincard {
       grid-template-column: 1fr 1fr;
    }
   .item {
       background-color: green;
    }
}

In this article, we'll dive into practical strategies for achieving cross-browser compatibility, focusing on specific UI components like form elements, scrollbars, and fonts. Then we'll discuss some general best practices that every web developer should adopt.

“Remember that you are not your users — just because your site works on your MacBook Pro or high-end Galaxy Nexus, doesn't mean it will work for all your users!” – MDN Web Docs

Table of Contents

• What is Cross-Browser Compatibility?
• Common Cross-Browser Issues and Solutions
• Best Practices for Cross-Browser Compatibility
• Conclusion

What is Cross-Browser Compatibility?

In simple terms, cross-browser compatibility is about ensuring that your website delivers a consistent, top-notch experience for all users, regardless of their browser choice.

Browsers use different engines, so by default they render websites differently. In order to get your websites to look and work the same regardless of the user's browser requires an understanding of unique browser capabilities.

Cross-browser compatibility says that ideally, a website should look and function the same whether someone is viewing it on Chrome, Microsoft Edge and Opera (powered by Blink engine), Firefox (powered by Gecko engine) or even Safari (powered by WebKit engine).

Benefits of Cross-Browser Compatibility:

1. Wider reach – your websites are accessible to more users, regardless of the browser they use.
2. Consistent User Experience – your websites have a uniform look and functionality across platforms.
3. Better Search Engine Optimization (SEO) – your websites get higher rankings from being more user-friendly.

Common Cross-Browser Issues and Solutions

Infographic showing test results of a web page on different browsers. Image credit Browserstack

Form Elements

The appearance and behavior of form elements like <input>, <select>, <textarea>, and <button> can vary significantly across browsers. This affects both the visual aspect and usability of forms, including how users interact with them (for example, clicking, focusing, and typing).

For instance, placeholder text in <input> fields may appear fainter in one browser and more pronounced in another, leading to readability issues.

To resolve this:

• Use CSS to standardize the appearance of form elements as much as possible.
• For placeholders, ensure contrast and legibility across browsers:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #909090;
  opacity: 1; /* Firefox */
}

input.studentid:-ms-input-placeholder { /* Microsoft Edge */
  color: #909090;
}

The CSS code above targets placeholder text in input fields across browsers, sets their color to #909090, and ensures full opacity for consistent visibility (with specific rules for Microsoft Edge).

Fonts

Fonts and typography face several cross-browser compatibility issues, from varying default font sizes to differences in font rendering engines. This can affect the weight, spacing, and overall appearance of text.

A font might appear thinner and more spaced out in Chrome compared to Edge, affecting readability and design consistency.

To resolve this:

• Define a base font size in your CSS and use relative units (like em or rem) for text sizing as shown in the code below. This helps maintain scalability and consistency.

html {
  font-size: 16px; /* Define a base font size */
}

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3, p {
  margin: 2rem;;
  padding: 1.5rem;
}

• When using web fonts, ensure they are loaded properly across all browsers by using services like Google Fonts, which provide cross-browser compatible font loading:

<link href="<https://fonts.googleapis.com/css?family=Open+Sans&display=swap>" rel="stylesheet">

• The code below makes sure that the 'Open Sans' font looks the same on our website, no matter the browser. It does this first by using a version of the font that might already be on our computer to load things faster. Otherwise, it grabs it from the internet but swaps in a default font while waiting for the latter to load.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(<https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2>) format('woff2');
}

Scrollbars

Scrollbar styling has long been a challenge for web developers due to inconsistent support across different browsers. While browsers like Chrome, Safari, and Edge have provided ways to customize scrollbars using CSS, the level of support and ways of implementing them vary.

Recent updates have seen improvements in standardizing scrollbar customization, with most modern browsers adopting similar capabilities. But there are still some differences in the approach:

For Chrome, Edge, and Firefox, you can use the CSS scrollbar-width and scrollbar-color properties to customize the scrollbar's appearance. These are part of a newer standard aimed at providing a more consistent way of styling scrollbars across browsers that support it.

/* For Chrome, Firefox, and Edge */
scrollbar-width: thin;
scrollbar-color: #c0c0c0 #f0f0f0;

For Safari, which uses the WebKit rendering engine, you'll need to use the ::-webkit-scrollbar pseudo-element to achieve similar styling. This method is specific to WebKit-based browsers.

/* For Safari */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

The CSS code above customizes the appearance of scrollbars across those browsers by adjusting their size and colours.

But for consistency across all browsers, you'll need to design your web pages in a way that the default scrollbar appearance does not negatively impact your design.

Best Practices for Cross-Browser Compatibility

Infographic showing measuring tools. Image credit Creative Bloq

Define a Doctype

Start your HTML document with a <!DOCTYPE> declaration to ensure standards mode is activated.

This is important because it tells the web browser which version of HTML the page is written in. Without it, browsers might render the page in "quirks mode," – where the browser assumes you've written old, non-standard code. This ultimately leads to unpredictable styling and layout issues because modern web standards are not fully applied.

A <!DOCTYPE> declaration in HTML5 looks like this at the very beginning of your HTML file:

<!DOCTYPE html>

Use a CSS Reset

A CSS reset is basically adding a set of rules that target common elements to remove their default styling, reducing browser-default discrepancies.

Various browsers have different inherent styles for HTML elements – margins, paddings, font sizes, and so on. So implementing a CSS reset makes sure that only the styles you write in your code will take effect. This leads to a consistent baseline for styling your webpage across various browsers.

There are developers that like to write theirs from scratch. And there are others like me, who use Eric Meyer's popular and free CSS reset as you can see in the code below:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

There's another group of developers that use Normalize.css, which you can install using a package manager like npm and then importing it in your CSS.

npm install normalize.css

Review CSS Property Support

Before using advanced CSS features, check their compatibility on websites like Can I Use. There, you can find detailed compatibility tables for HTML, CSS, and JavaScript features across different browsers and versions. This should help you make informed decisions about which technologies to use and when to implement fallbacks.

In the screenshot below, I searched for CSS Grid and immediately got to see the various browsers and their versions that support it. So before implementing CSS Grid on my web page, I have an idea of the browsers that it works with.

Browser compatibility for CSS Grid.

Create Responsive Websites

The multi-device world we currently live in demands that, as web developers, we make responsiveness a priority.

We can use fluid layouts, flexible images, and media queries to ensure our websites adapt to any screen size. The ripple effects of getting responsiveness right is cross-browser compatibility, accessibility and enhanced user experience.

Here's an article discussing some best practices for responsive design and how to implement them.

Do Cross-Browser Testing

Testing has become such a buzzword in programming lately, but this is because it's very important to make sure the code you write works as expected.

It's not just about checking if your TypeScript code runs smoothly, though. Even simpler web projects need thorough testing.

Cross-browser testing means trying your web pages on various browsers and devices to make sure they look and work consistently across board.

Conclusion

Cross-browser compatibility may be a mouthful to pronounce. But as we’ve seen, it's essential to consider when building websites. And you can gradually make your websites compatible by testing and tweaking your code and implementing some of the five best practices we’ve discussed above.

So, before you draw the curtains on your next website or web app, remember to check if your users on Chrome, Firefox, Safari, and other browsers are seeing and experiencing the same things.

Here are some helpful resources:

• MDN Web Docs on Cross-browser compatibility
• Codepaper on Significance of Cross-browser compatibility
• Eric Meyer on CSS Reset

In this article, you'll learn about some essential advanced CSS selectors and combinators like child and sibling combinators , pseudo-classes, structural pseudo-classes, pseudo-elements and attribute selectors by building an Interactive FAQ section. If you'd like to move ahead to see what we'll build, check it out.

Table of Contents:

• What are Advanced CSS selectors?
• Why You Should Use Advanced CSS selectors
• How to Build an Interactive FAQ section
• Full Project Code
• Conclusion

What are Advanced CSS Selectors?

At its core, CSS is about selecting elements from the DOM (Document Object Model) to apply styles to them.

While basic selectors like class, ID, and element selectors get much of the day-to-day work done, advanced CSS selectors offer a deeper level of specificity and control. They enable you to target exactly the elements you wish to style, based on attributes, states, and their relationships to each other.

For instance, you can dress up links that have been visited (:visited), style the first paragraph within an article (article p:first-of-type), or target empty elements (:empty), all of which save you from littering your HTML code with extra classes or IDs ultimately leading to cleaner and more efficient code.

Why You Should Use Advanced CSS Selectors

Here are three of many reasons to consider giving advanced CSS selectors a chance:

1. Interactive Styling: With pseudo-classes like :hover and :focus, you can create interactive elements that respond to user actions, directly within CSS. This is a win-win, because it minimizes the need for JavaScript for visual effects and so keeps your scripts lean and still boosts user experience and interactivity.
2. Accessibility and SEO: Using advanced selectors can help keep HTML semantic, as styles are applied based on the natural structure of your document and attributes of elements. This makes your code easier to read and maintain but most importantly improves accessibility and SEO.
3. Future Relevance: As web standards evolve, so does CSS. This means by adopting advanced selectors today, you're aligning your stylesheets with the future of web development. This ensures that your designs remain resilient and adaptable, no matter what changes come to the web .

How to Build an Interactive FAQ Section

To learn advanced CSS selectors, we’ll build an interactive FAQ section to reveal answers to questions when clicked. We'll also implement different styles for the FAQs based on their state or content.

This practical approach will solidify your understanding as you see their application in real-world scenarios.

A GIF showing the FAQ section we'll build in this article

Check it out on CodePen here.

Prerequisites

• Basic knowledge of HTML and CSS
• An IDE
• A web browser

HTML Code

The HTML structure for our project consists of a series of FAQ items, each contained within a div and featuring a clickable question (label or button) that controls the visibility of the answer (div). Each FAQ item has a checkbox input to manage its open/close state, using CSS to visually toggle the answer visibility without JavaScript.

<body>
  <section class="faq-section">
  <div class="container">
    <div class="faq-heading">
      <h1>Frequently Asked Questions</h1>
    <p>Here are a few general CSS questions and their answers, hope they serve as a refresher.</p>
    </div>
    <div class="faq-container">
      <!-- FAQ Item 1 -->
      <div class="faq-item">
        <input type="checkbox" id="faq1" class="faq-toggle" hidden>
        <label for="faq1" class="faq-question">What's the difference between px, em, and rem?</label>
        <div class="faq-answer">
          <p>px is a fixed size, em changes size based on the parent element's font size, and rem is always relative to the document's root font size, making layouts more flexible.</p>
        </div>
      </div>
      <!-- FAQ Item 2 -->
      <div class="faq-item">
        <input type="checkbox" id="faq2" class="faq-toggle" hidden>
        <label for="faq2" class="faq-question">Why use :hover and :focus pseudo-classes?</label>
        <div class="faq-answer">
          <p>They let you style elements when users interact with them, like changing a button's color when hovered over, making websites more interactive.</p>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Starting Basic CSS Code

The code below applies basic styling to our HTML code above. This is provided so that you can focus on learning how advanced CSS selectors work.

body {
  background-color: #00ad8f;
}

.faq-section {
  margin-top: 5em; 
}

.faq-section h1 {
  font-size: 2.5em; 
}

.faq-heading {
  text-align: center; 
  margin-bottom: 2em; 
  color: #fff;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 1em;
}

.faq-item {
  background-color: #fff;
  border-radius: 0.3em;
  border: 1px solid #333;
  margin-bottom: 0.5em;
}

.faq-toggle {
  display: none; /* Hide checkbox */
}

.faq-question {
  background-color: #efefef;
  padding: 1em;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border: none;
  position: relative; /* Necessary for positioning ::before content */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid #333;
  transition: transform 0.3s ease, padding 0.3s ease;
  padding: 0 1em;
}

A screenshot of our FAQ section before adding advanced CSS selectors

Child and Sibling Combinators (+ , ~, >):

The child and sibling combinators, though not as popular as id and class selectors, are powerful for styling elements in relation to each other.

The child combinator (>) is essential for targeting direct children of an element, such as styling menu items in a navigation bar without affecting nested drop-downs.

Meanwhile, the adjacent sibling selector (+) targets only the sibling that immediately follows an element for tasks like making the first paragraph after a heading stand out

And the general sibling selector (~) targets any sibling that follows an element, like highlighting list items following a checked checkbox.

In our project, as seen in the code below, when a question is clicked (that is, its associated checkbox is checked), the adjacent sibling selector (+) shows a "-" symbol to indicate an open state, meaning an FAQ is opened. Also, it controls the max-height of the answer to reveal it smoothly.

.faq-toggle:checked + .faq-question::after {
  content: '-'; /* Changes the plus to a minus on the FAQ question when the toggle is checked */
}

.faq-toggle:checked + .faq-question + .faq-answer {
  max-height: 1000px; /* Reveals the answer when the toggle is checked */
}

A screenshot of our FAQ section adding the - symbol on open questions

Pseudo-Classes (:nth-child(), :nth-of-type(), :not(), :focus, :hover):

Pseudo-classes allow styling of elements based on their state or characteristics without changing the HTML structure.

They're great for interactive elements, like changing the background color of buttons on hover using :hover and :nth-of-type() to highlight every third image in a gallery for a patterned effect. Or styling every other row in a table to improve readability with :nth-child()and:not()to apply styles to all buttons except the disabled ones.

In our project, as seen in the code below, we use the :nth-of-type() pseudo-class to differentiate between odd and even questions by assigning them different background colors, and :hover to improve interactivity, making the FAQ section easier to navigate visually.

.faq-item:nth-of-type(odd) .faq-question{
 background-color: #fff; /* For odd items */
} 

.faq-item:nth-of-type(even) .faq-question{
 background-color: #caffee; /* For even items */
}

.faq-item:nth-of-type(odd) .faq-question:hover {
  background-color: #dfdfdf; 
}

.faq-item:nth-of-type(even) .faq-question:hover {
  background-color: #9debd2; 
}

A GIF showing different hover colors for odd and even FAQ questions

Structural Pseudo-Classes (:first-child, :last-child, :empty, :only-child):

Structural pseudo-classes shine when it comes to styling elements based on their position within their parent container. This is why they help with tasks like highlighting the first or last item in a list with :first-child to draw attention or :last-child for adding a special border for emphasis.

They also excel in scenarios where the document structure influences style, such as using :empty to hide or differently style empty divs for layout consistency, or :only-child to center content within a div for a clean look.

.faq-item:first-of-type .faq-question {
  border-top: 2px solid #007BFF; 
}

.faq-item:last-of-type .faq-question {
  border-bottom: 2px solid #007BFF; 
}

In our project and in the code above, the :first-of-type and :last-of-type selectors are used to visually distinguish the first and last FAQ items by adding a top and bottom border, respectively.

A screenshot of our FAQ section with blue borders

Pseudo-Elements (::before, ::after, ::first-letter, ::first-line):

Pseudo-elements have the ability to create virtual elements that can be styled separately. They allow us to style specific parts of an element, such as adding content before or after an element's content, or styling the first letter or line of text.

You can also use ::before and ::after to add decorative quotes around block quotes without altering the HTML, or ::first-letter to enlarge the first letter of each article similar to what’s done in magazines. Finally, ::first-line changes the color of the first line of a paragraph to grab attention.

/* ::after used to display "+" symbol */
.faq-question::after {
  content: '+';
  color: #00ad8f;
  font-size: 1.4em;
}

In our project and in the code above, the ::after pseudo-element adds a "+" sign to each question in their default states. This complements the "-" symbol we added above on opened questions. Together, these provide visual cues to the user about the state of the FAQ item.

A screenshot of our FAQ section adding the + symbol on closed questions

Attribute Selectors ( [attr^="value"], [attr$="value"], [attr*="value"]):

Attribute selectors provide a way to style elements based on the presence, absence, or value of attributes. They're the go-to for styling elements with specific data attributes, like differentiating external links with [attr^="value"] by targeting URLs that begin with "http" or using [attr$="value"] to apply icons to download links.

All these emphasize the role of attribute selectors in crafting precise and condition-based styles, offering a high level of specificity and flexibility.

.faq-item[data-category^="important"] .faq-question {
  color: #E91E63; 
}

In our project and in the code above, we use an attribute selector [attr^="value"] to apply a distinct style (red) to questions marked with a data-category as important. This makes them stand out in the FAQ section.

A screenshot of our FAQ section with the important question differently colored

Full Project Code

Here's the HTML Code:

<body>
  <section class="faq-section">
  <div class="container">
    <div class="faq-heading">
      <h1>Frequently Asked Questions</h1>
    <p>Here are a few general CSS questions and their answers, hope they serve as a refresher.</p>
    </div>
    <div class="faq-container">
      <!-- FAQ Item 1 -->
      <div class="faq-item">
        <input type="checkbox" id="faq1" class="faq-toggle" hidden>
        <label for="faq1" class="faq-question">What's the difference between px, em, and rem?</label>
        <div class="faq-answer">
          <p>px is a fixed size, em changes size based on the parent element's font size, and rem is always relative to the document's root font size, making layouts more flexible.</p>
        </div>
      </div>
      <!-- FAQ Item 2 -->
      <div class="faq-item">
        <input type="checkbox" id="faq2" class="faq-toggle" hidden>
        <label for="faq2" class="faq-question">Why use :hover and :focus pseudo-classes?</label>
        <div class="faq-answer">
          <p>They let you style elements when users interact with them, like changing a button's color when hovered over, making websites more interactive.</p>
        </div>
      </div>
      <!-- FAQ Item 3 -->
      <div class="faq-item" data-category="important">
        <input type="checkbox" id="faq3" class="faq-toggle" hidden>
        <label for="faq3" class="faq-question">What is the CSS Box Model?</label>
        <div class="faq-answer">
          <p>It's a concept that includes margins, borders, padding, and the actual content area, helping you control spacing and layout around elements.</p>
        </div>
      </div>
      <!-- FAQ Item 4 -->
      <div class="faq-item">
        <input type="checkbox" id="faq4" class="faq-toggle" hidden>
        <label for="faq4" class="faq-question">How does z-index work?</label>
        <div class="faq-answer">
          <p>z-index decides which elements appear on top of others on the page. Higher values are closer to the front, useful for overlays or dropdown menus.</p>
        </div>
      </div>
      <!-- FAQ Item 5 -->
      <div class="faq-item">
        <input type="checkbox" id="faq5" class="faq-toggle" hidden>
        <label for="faq5" class="faq-question">Why use CSS variables?</label>
        <div class="faq-answer">
          <p>They make it easy to update values like colors or fonts across your site by changing them in one place, keeping your styles consistent and easier to manage.</p>
        </div>
      </div>
    </div>
  </div>
</section>

</body>

Here's the CSS code:

body {
  background-color: #00ad8f;
}

.faq-section {
  margin-top: 5em; 
}

.faq-section h1 {
  font-size: 2.5em; 
}

.faq-heading {
  text-align: center; 
  margin-bottom: 2em; 
  color: #fff;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 1em;
}

.faq-item {
  background-color: #fff;
  border-radius: 0.3em;
  border: 1px solid #333;
  margin-bottom: 0.5em;
}

.faq-toggle {
  display: none; /* Hide checkbox */
}

.faq-question {
  background-color: #efefef;
  padding: 1em;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border: none;
  position: relative; /* Necessary for positioning ::before content */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid #333;
  transition: transform 0.3s ease, padding 0.3s ease;
  padding: 0 1em;
}

.faq-toggle:checked + .faq-question::after {
  content: '-'; /* Changes the plus to a minus on the FAQ question when the toggle is checked */
}

.faq-toggle:checked + .faq-question + .faq-answer {
  max-height: 1000px; /* Reveals the answer when the toggle is checked */
}

 /* nth-of-type for styling odd and even .faq-question differently */
.faq-item:nth-of-type(odd) .faq-question{
 background-color: #fff; /* For odd items */
} 

.faq-item:nth-of-type(even) .faq-question{
 background-color: #caffee; /* For even items */
}

.faq-item:nth-of-type(odd) .faq-question:hover {
  background-color: #dfdfdf; /* Lightens the question's background on hover for visual feedback */ 
}

.faq-item:nth-of-type(even) .faq-question:hover {
  background-color: #9debd2; /* Lightens the question's background on hover for visual feedback */ 
}

/* First-of-type and last-of-type to style the first and last item uniquely */
.faq-item:first-of-type .faq-question {
  border-top: 2px solid #007BFF;
}

.faq-item:last-of-type .faq-question {
  border-bottom: 2px solid #007BFF;
}

/* ::after used to display "+" symbol */
.faq-question::after {
  content: '+';
  color: #00ad8f;
  font-size: 1.4em;
}

.faq-item[data-category^="important"] .faq-question {
  color: #E91E63; /* Styles important questions differently */
}

Conclusion

We've just taken a dive into the world of advanced CSS selectors by building an interactive FAQ section. These advanced selectors allow you to write less code while doing more, keeping your HTML clean and your styles sharp.

As we wrap up, I hope the next time you're faced with a decision on how to approach styling a complex layout or interactive element, you'll remember the power and flexibility that these advanced CSS selectors offer and choose to try them out.

• Google Web Dev on CSS Selectors
• MDN Web Docs on CSS Selectors

It doesn't matter if you're just starting out or have been coding for years. Knowing how to effectively use Developer Tools (DevTools for short) can significantly boost your development process. You can edit pages on the fly, quickly spot issues, and deeply understand your site's performance.

All major browsers have their own DevTools that let you examine the code of a webpage, evaluate its metrics, and run some tests alongside. This article will discuss Chrome's DevTools, as it's the industry standard.

Table of contents:

• What is Chrome DevTools?
• How to Open Chrome DevTools
• Keyboard shortcuts for Easy Navigation
• Key Chrome DevTools Features
• Practical DevTools Use Cases
• Conclusion

What is Chrome DevTools?

Chrome DevTools is a set of tools that are essential for diagnosing and solving web development challenges, directly within the Google Chrome browser.

It gives you direct access to a website's inner workings - to inspect HTML and CSS, debug JavaScript, analyze performance, and see the immediate impact of your code, all in realtime.

This direct access to a website's inner workings is crucial for diagnosing issues quickly and efficiently, ensuring your web applications are both performant and bug-free.

A grid of elements, console, performance and network panels screenshots

How to Open Chrome DevTools

To open DevTools in your Chrome browser, you can either:

1. Right-click on any webpage and select inspect from the list of options.
2. Use the shortcut (command + option + I on Mac or control + shift + I on Windows).
3. Click the three dot icon next to your profile picture on your Chrome browser, choose 'More Tools' and 'Developer Tools' from the second option box.

It usually opens in a split screen interface, either below your current webpage or beside it. Once open, its features line up as tabs at the top of the DevTools window. These tabs include: Elements, Console, Source, Network, Application, Security, Memory, Performance, Audits.

Keyboard Shortcuts for Easy Navigation

1. Use Cmd or Ctrl + Shift + C to open the Elements panel
2. Use Cmd or Ctrl + Shift + J to open the Console panel
3. Use Cmd or Ctrl + ] to move forward to the next panel
4. Use Cmd or Ctrl + [ to move back to the previous panel

Key Chrome DevTools Features

DevTools is packed with features essential for web developers to streamline various aspects of their workflow. Let's look at a few of them in some detail now.

Elements Panel

This panel is used for inspecting and modifying the HTML and CSS of a webpage in real-time, which is great for debugging layout issues or experimenting with new styles before applying them in your actual code. You also get to see how the DOM (Document Object Model) is structured.

Imagine fine-tuning your website's footer appearance (background color, font size) directly in your browser and seeing the results instantly.

With DevTools open, click on the Elements tab to access it.

A screenshot of Chrome DevTools' Elements panel

Console Panel

This panel serves as your interactive playground for JavaScript within the browser. Whether you're tracking down an elusive bug with a quick console.log() or experimenting with DOM elements, in the Console panel you can test snippets of JavaScript and view any logs or errors in the currently loaded webpage.

To use it, simply open DevTools and select the "Console" tab or use the shortcut (option + command + J on Mac or contrl + shift + J on Windows).

A screenshot of Chrome DevTools' Console panel

Network Panel

This panel gives you an overview of all network activity on your webpage – from tracking every resource that is loaded to how your site communicates with servers.

If you've wondered why your website takes forever to load or why some API requests seem to vanish into thin air, the Network panel is your go-to as it provides insights into the success or failure of API calls.

To access it, open DevTools and navigate to the "Network" tab.

A screenshot of Chrome DevTools' Network panel

Performance Panel

This panel is used for capturing and analyzing a website's performance metrics. It shows all the activities happening when interacting with a page.

When your web app starts to crawl under heavy usage, the Performance panel can pinpoint where the performance bottlenecks lie so that you can resolve these issues, ensuring your app runs smoothly.

With DevTools open, click on the "Performance" tab to use it.

A screenshot of Chrome DevTools' Performance panel

The above are only a handful of the panels available, but they're by far the most popular and must-knows. Using them properly will make your development processes more intuitive and rewarding.

Practical DevTools Use Cases

In the following interactive examples, I intentionally created the mini project in Codepen with issues to simulate real-world debugging scenarios using Chrome DevTools.

I figured it'd be a great way to highlight the practical uses of certain DevTools panels and features in identifying bugs and troubleshooting right in the browser.

Prerequisites

• Chrome browser (Click this link to download)
• A basic understanding of HTML, CSS, and JavaScript
• Codepen

See the Pen Modal Window by Ophy Boamah (@ophyboamah) on CodePen.

How to Debug HTML and CSS with the Elements Panel

Our mini project contains a modal that, upon clicking, should display a modal window with some important information. But there's a bug preventing this from happening.

This situation sets the stage for a practical demonstration of how you can use the Elements Panel to troubleshoot and resolve styling and structural issues.

<body>
  <button class="show-modal">Click me to learn a secret 🤫</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h1>Hey Ophy here 👋🏾</h1>
    <p>
      I lead Women Who Code Frontend, a global remote community of 3,000+ women frontend devs and enthusiasts. Find us on beacons.ai/wwcodefrontend
    </p>
  </div>
  <div class="overlay hidden"></div>

  <script src="script.js"></script>
</body>

.hidden {
  display: none;
}

.modal {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 70%;

  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}

In our modal's HTML code above, we've added the class name 'modal hidden' which has a corresponding styling with the CSS property of display:none that is set to hide the modal when the page is loaded initially and only display it when the button is clicked.

✅ Step 1 - Initial inspection:

Attempt to trigger the modal by clicking on the 'Click me to learn a secret' button. Since we've set that up not to work, right-click on the area where the modal should appear and choose "Inspect" to open DevTools' Elements Panel.

✅ Step 2 - Diagnose visibility issues:

In the Elements Panel, locate the modal in the DOM to see that the modal is present but not visible. This confirms that the bug is caused within our CSS code display: hidden.

As soon as you click on the modal in the DOM, any corresponding CSS classes will be pulled up within Styles at the bottom section of the Elements panel. You can toggle some properties on and off or type others to see the effects in real-time.

Manually change the class name from modal hidden to modal block to trigger the right properties that'll cause the modal to show.

A screenshot of debugging the modal's HTML, CSS in Elements panel

✅ Step 3 - Center the modal:

Now the modal is visible, but it's displayed at the top – which is different from where we'd like it to be (that is, in the center of the page).

To change this, modify the transform property to translate(-50%, -50%) by adding the second -50% and ensure that top: 50%, and left: 50% are correctly set to center the modal on the screen.

✅ Step 4 - Enhance the appearance:

You can go further to refine the modal's appearance by tweaking its background-color, padding, or other stylistic properties directly within the Styles to achieve the desired look and feel.

A GIF fixing the modal in Chrome DevTools' Elements panel

Debug JavaScript with the Sources Panel

I added a bug in the JavaScript code of our modal mini project to prevent it from opening when the button is clicked.

In the real world, this would cause neither the open nor close commands to trigger any action, which would leave users unable to interact with the content and frustrated as a result. Let's troubleshoot and debug this issue in the Sources Panel.

In the code below, the openModal function is set to remove the indicated classes. However, this doesn't work because we deliberately misspelled hidden.

// Introducing a bug: Incorrectly spelling 'hidden' as 'hiddn'
const openModal = function () {
  modal.classList.remove("hiddn"); // Intentional bug
  overlay.classList.remove("hidden");

  // Fetch data from a real API and display in the modal
};

✅ Step 1 - Set up breakpoints:

Open Chrome DevTools and navigate to the Sources Panel. Here, find the JavaScript file that includes the modal functionality (in our example its pen.js).

The openModal function contains the logic for displaying the modal on the screen. This function will include a line where the modal element's class is manipulated to remove a "hidden" class.

Click on the number next to this code line in DevTools. A blue (or sometimes red, depending on the theme) icon appears next to the line number, indicating that a breakpoint has been set. This breakpoint will pause the execution of our JavaScript code as soon as it reaches this line.

A screenshot of setting breakpoints the modal's JS in Sources panel

Breakpoints pause code execution at critical points, allowing you to inspect the current state of variables and understand the flow of execution. This step is crucial for identifying where the code deviates from expected behaviour.

✅ Step 2 - Examine the code execution flow:

With our breakpoint in place, try to open the modal by clicking on its button. Execution of our JavaScript code now pauses at our breakpoint, which enables us to step through the code line by line.

This is an opportunity to observe variables, function calls, look for anomalies such as misnamed functions, incorrect logic, or uncaught exceptions that could explain why the modal isn't working.

In our case it's because we intentionally misspelled the class name hidden as hiddn. Fix that in the code to get the modal working again.

A GIF troubleshooting the modal bug in Chrome DevTools' Elements panel

Optimize Performance with the Network Panel

Here I've added a fetch function that makes an API call to a live endpoint (https://jsonplaceholder.typicode.com/posts/1). This is an excellent opportunity to explore the Network Panel's capabilities in diagnosing and understanding network-related problems.

From the code below, you can see that the openModal function doesn't only open the modal but also makes an API call to the jsonplaceholder endpoint to fetch some data.

const openModal = function () {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => document.getElementById('modal-content').innerText = json.title)
    .catch(error => console.error('Error loading the content:', error));
};

✅ Step 1 - Initiate the API call:

On the modal project UI, click on the 'Click me to learn a secret' button. Though the modal does not visibly activate, because of the fetch logic within the openModal function, an API call will be made.

✅ Step 2 - Network Panel Inspection:

Ideally, your Network Panel should be open before clicking the button, but you can also reverse the steps. Detailed insights on your API request such as the request's method, status code, response and the time it took to complete, will be available under headers, preview, response, initiator and timing tabs respectively.

A screenshot overview of API request in Network panel

✅ Step 3 - Simulating Network Conditions:

Use the Network Panel's throttling feature to mimic various network speeds like offline or slow 3G to see how the API request behaves under constrained conditions.

From this you can compare how different network speeds can affect application performance. This will teach you the importance of optimizing data loading strategies to enhance user experience, especially on slower connections.

A GIF observing API requests and responses in Chrome DevTools' Network panel

Conclusion

Bringing Chrome DevTools into your web development routine is not just about fixing bugs. It's about streamlining your workflow, making your sites more accessible, and boosting their performance.

Through our modal window mini-project, we've seen firsthand how DevTools can address a wide array of development challenges, but that’s merely scratching the surface of what it can do.

As you continue to explore its capabilities and familiarize yourself with its features, you'll find it's an invaluable companion on your web development journey – designed to make your development process not just faster, but also more rewarding.

• The Official Chrome DevTools documentation
• How to use the Chrome DevTools to troubleshoot websites

In today's digital landscape, the performance of a website is a key factor in its success. Writing efficient CSS code can greatly influence how quickly your web pages load, impacting everything from user experience to search engine rankings.

This guide delves into effective strategies to help you refine your CSS, ensuring that your website not only looks great but also loads swiftly and runs smoothly.

How CSS affects Web Performance

When a user visits a webpage, the browser retrieves the site's structural HTML and its stylistic CSS. This is a set of detailed instructions on how each part of the webpage should look.

If the CSS is packed with too much information or is too complex, it's like giving the browser a puzzle that takes longer to solve. This can lead to longer waiting times for users, which can be annoying.

That's where the art of streamlining CSS comes into play. It's not just about tidying up the code, but also making sure the browser can get the webpage ready faster.

When CSS is made leaner and simpler, it's like giving the browser a clear, easy-to-follow map. This makes webpages load faster, making everything feel more responsive.

1. Write Shorter CSS

When writing CSS, use the popular software development principle Don’t Repeat Yourself (DRY). This advocates for conciseness and clarity in your code.

This is important here, because in practice, CSS involves repeating properties across various selectors. The goal should be to identify and consolidate these repetitive properties. By doing so you eliminate redundancies, leading to cleaner and more manageable CSS.

For instance, in the code below, multiple elements (h1and h2) share the same font-size and color.

h1 {
    font-size: 20px;
    color: #fff;
}
h2 {
    font-size: 20px;
    color: #fff;
}

So instead of declaring these properties separately for each selector, you can group them under a common class. This not only streamlines your stylesheet but also makes future updates easier and less error-prone.

You can rewrite the above code to look like this:

h1, h2 {
    font-size: 20px;
    color: #fff;
}

Using shorthand properties is another effective strategy for minimizing the size of your CSS, making your code more efficient. It also allows you to set multiple related CSS properties with a single declaration. Here's how you can write effective shorthand CSS:

When all sides of an element have the same value, use that one value.

/* Before shorthand */
.same-sides {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

/* After shorthand */
.same-sides {
    padding: 15px;
}

When all sides of an element have different values, use all four.

/* Before shorthand */
.different-sides {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;
}

/* After shorthand */
.different-sides {
    padding: 10px 20px 15px 25px;
}

When top/bottom and right/left have the same value, use two values.

/* Before shorthand */
.two-sides {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* After shorthand */
.two-sides {
    padding: 10px 20px;
}

When only the right/left values are the same but the top and bottom aren't, use three values.

/* Before shorthand */
.three-sides {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 20px;
}

/* After shorthand */
.three-sides {
    padding: 10px 20px 15px;
}

2. Use Shallow CSS Selectors

Shallow CSS selectors are direct and concise selectors with fewer levels of nested elements that don't dig too deep into the HTML structure.

Simplifying your selectors can significantly speed up your webpage rendering because deeply nested selectors take longer for browsers to evaluate, which results in a slower page render.

Consider the example in the code below: to assign property values to a deeply nested selector like header nav ul li a is cumbersome and will cause rendering delays because the browser needs time to check each level (header, then nav, then ul, and so on) to find the right <a> tag to style).

Alternatively, giving it a direct class .nav-link is straightforward and quicker for browsers to interpret. Class selectors are generally more efficient than nested tags because the browser simply looks for elements with a class and applies the styles, without worrying about their position in the DOM tree.

/* Less efficient: Deeply nested selector */
header nav ul li a { 
   color: #000;
   font-size: 10px;
 }

/* More efficient: Class selector */
.nav-link {
   color: #000;
   font-size: 10px;
}

3. Segment CSS Code

Segmenting your CSS code into smaller, more focused segments like separate files for different website components and creating page-specific styles can greatly improve your website's performance. This approach not only makes it easier to find and edit specific styles but also ensures that webpages load only the CSS they need, avoiding unnecessary bulk.

Enhanced maintainability and faster page loading are the most obvious key benefits. Smaller CSS files are easier to manage, much like a well-organized toolbox where everything is easy to find. But also, by loading only the essential CSS for each page, the browser has less work to do hence improving the user experience.

Original CSS

Suppose you have a CSS file that contains styles for various parts of your website:

/* Styles for the home page */
.homepage {
    background-color: #f0f0f0;
    padding: 10px;
}

/* Styles for the services page */
.services {
    background-color: #333;
    color: white;
}

/* Styles for the contact page */
.contact {
    background-color: #222;
    color: white;
    padding: 20px;
}

Segmented CSS

Now, let's segment this CSS into different files based on their purpose:

1. Home page Styles (homepage.css):

.homepage {
    background-color: #f0f0f0;
    padding: 10px;
}

2. Services page Styles (services.css):

.services {
    background-color: #333;
    color: white;
}

3. Contact page Styles (contact.css):

.contact {
    background-color: #222;
    color: white;
    padding: 20px;
}

Each CSS file is focused on a specific part of the website. Now, when a user visits your website, each page loads only the CSS it requires hence enhancing the website's performance.

4. Optimize CSS Delivery

You can make your CSS files lighter and faster to load by shrinking your CSS – that is, you can remove extra spaces and lines (this is called minifying). Then you can compress these files so they're smaller and quicker for users to download.

Also, make sure the most important styles of your website load first, so people see your page faster. The other styles can load in the background without slowing things down.

You can also make your website faster for people who visit more than once, by saving some of your CSS in their browser (this is known as caching). This means it doesn’t have to load again every time they visit.

Also, if you use a CDN or a network of servers, your CSS files can be stored in many places around the world to load faster no matter where your users are.

Graphic comparing file size between an unminified CSS file at 167KB and a minified CSS file at 92KB

Original CSS

/* Main Stylesheet */
/* Header Style */
header {
  background-color: #333;
  color: white;
  padding: 10px;
}

/* Navigation Style */
nav {
  background-color: #444;
  margin-top: 10px;
}

The above CSS code is readable and well-commented, but it contains extra spaces and comments that increase the file size.

Minified CSS

header{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}

The minified version combines all the rules into a single line, removing unnecessary spaces and comments, which reduces the file size for quicker loading.

Conclusion

Optimizing your CSS speeds up your website and consequently improves the overall user experience.

By implementing the practices outlined in this article, you can achieve more performant, efficient and maintainable CSS. The performance savings may not be significant from tweaking a few lines but over hundreds more across different stylesheets, the impact will begin to show.

Remember, web performance is an ongoing process. Regularly review and refine your CSS to keep up with best practices and emerging trends.

Additional Resources

• MDN Web Docs on CSS
• Google Web Fundamentals
• Web Performance In Action

They bring together the best parts of using a website (easy to access, no need to install anything) with the great features of mobile apps (fast, can work offline), offering a high-quality user experience.

The core of a PWA's usefulness lies in the offline-first approach, where applications are designed to function seamlessly without a constant internet connection. This means you can still use these apps even when your internet is slow or not available, and makes PWAs very user-friendly and accessible, even where an internet connection is not always reliable.

Graphic showing a native app vs a web application vs a PWA

5 Reasons to Use a PWA Instead of a Native app

Progressive Web Apps (PWAs) are reshaping the landscape of digital interaction. They offer a hybrid experience that combines the best features of web and mobile apps.

Let's delve deeper into why PWAs are often a superior choice compared to native apps:

1. Speed and Ease of Installation

PWAs eliminate the lengthy download and installation process typical of native apps. You can access a PWA as swiftly as you'd load a web page, making it as straightforward as bookmarking your favorite site – no waiting for downloads or navigating through app stores.

Consider Twitter Lite, a PWA version of the popular social media platform, which offers the full Twitter experience without the need to wait for a separate app download.

2. Minimal Storage Requirements

One of the most significant advantages of PWAs is their minimal storage requirements. Since they primarily store data online, much like cloud services, they occupy significantly less space on a user’s device.

This feature is particularly beneficial for users with limited device storage or expensive data plans. For example, Pinterest’s PWA takes up less space than its native counterpart but still provides a rich, engaging user experience.

3. Reliable Offline Performance

A PWA's ability to function offline is like having a good book downloaded to your e-reader, ready to enjoy even when you're out of range of a good signal.

PWAs can function effectively even in areas with poor or no internet connectivity, using cached data from previous online activities. This ensures that users have uninterrupted access to essential features.

A notable example is the Starbucks PWA, which allows customers to browse the menu and customize orders, regardless of their internet connection for a consistent user experience.

4. Cost-Effective Development and Cross-Device Compatibility

Developing a PWA can be more cost-effective than building native apps for various platforms. This unified approach not only saves significant development time and resources but also simplifies maintenance and updates.

Businesses like Uber have leveraged PWAs to provide a seamless user experience across all devices without the need for multiple native apps.

5. Automatic Updates and Push Notifications

PWAs update themselves seamlessly, much like a web page loading the latest content each time it’s visited. Users always have access to the most current version of the app without going through the process of manual updates. This feature ensures that users are not hindered by outdated versions, a common issue with native apps.

For instance, Google Maps’ PWA automatically incorporates the latest features and improvements without user intervention. In addition to staying current, PWAs can engage users with push notifications, just like native apps, keeping them informed and involved without the need for a visit to the app store.

Infographic of a Progressive Web App (PWA) showcasing its features: adaptability across devices, security, offline functionality, fast performance, updates, and push notifications.

PWA Core Concepts

To fully grasp the potential and functionality of Progressive Web Apps, it's essential to understand their foundational components. These core concepts not only define the structure and behavior of PWAs but also distinguish them from traditional web applications.

Service Workers: The Backbone of PWAs

Service workers are scripts that run in the background, separate from your web page. They act as a proxy between the web application and the network.

Think of service workers as behind-the-scenes helpers for your web app. Their main job is to manage how your app talks to the internet.

They can save important parts of your app on the user's device, which means your app can work even when there's no internet. They're also in charge of quietly updating app content and can send notifications, just like a native app on your phone.

The App Manifest: Your PWA's Identity

The web app manifest is a JSON file which is essential because it tells the user's device how your app should look and behave.

It's like your app's ID card – it includes the app's name, the icons it uses, the first page it should open, and how it should display (like in full screen). This file makes your web app feel more like a regular app, allowing users to 'install' it on their home screen.

Caching: The Key to Offline Functionality

Effective caching is vital for a robust offline experience. Caching is like your app's memory. It stores important parts of your app so they can be quickly loaded later, even if there's no internet. It's crucial for making your app work offline.

There are different ways to handle caching, such as cache-first (where the app checks the cache before the internet), network-first (the opposite), and stale-while-revalidate (a mix of both). The choice depends on what your app does and what kind of information it handles, affecting how your app stores and retrieves its data.

Icons representing key components of a PWA: Service worker, Manifest and HTTPS

Overview of Building a PWA

Building a Progressive Web App (PWA) might sound complex, but it's quite manageable when you break it down into steps. In this article, I'll give you an overview of the process – and in my next tutorial, I'll go into the process in more detail.

1. Start with a Basic Webpage:

Create a simple website using HTML for structure, CSS for style, and JavaScript for functionality.

<!DOCTYPE html>
<html>
<head>
    <title>Ophy's To-Do List PWA</title>
</head>
<body>
    <h1>Ophy's To-Do List</h1>
    <input type="text" id="todo-input" placeholder="Add a new task...">
    <button onclick="addTask()">Add</button>
    <ul id="todo-list">
        <!-- Tasks will go here -->
    </ul>

    <script src="app.js"></script>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
}

#todo-list {
    list-style-type: none;
}

#todo-list li {
    padding: 5px;
    margin: 5px;
    background-color: #f2f2f2;
    border-radius: 3px;
}

function addTask() {
    var input = document.getElementById('todo-input');
    var newTask = input.value;
    if (newTask) {
        var listItem = document.createElement('li');
        listItem.textContent = newTask;
        document.getElementById('todo-list').appendChild(listItem);
        input.value = ''; // Clear the input
    }
}

2. Create a Manifest File:

In the manifest file, write down your app's name, the icons it uses, and the first page it should open. This makes your website act more like an app you can install.

{
    "name": "Ophy's To-Do List",
    "short_name": "OphyToDo",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

3. Set Up a Service Worker:

In your main JavaScript file, add a service worker. This is a special script that works separately from your website.

The service worker's job is to handle how your app stores and retrieves data, especially for offline use.

self.addEventListener('install', function(event) {
    // Perform install steps
    var CACHE_NAME = 'ophy-todo-cache-v1';
    var urlsToCache = [
        '/',
        '/styles.css',
        '/app.js'
    ];

    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');
                return cache.addAll(urlsToCache);
            })
    );
});

Following these steps will help you build a simple PWA that users can install and use, even when they're offline.

Real World Use Cases for PWAs

These real-world examples demonstrate the practical benefits and impact of offline-first strategies:

1. Starbucks: Starbucks has a PWA that lets customers look at the menu and order drinks and food even when they're offline. This not only makes the experience better for customers but also helps increase sales and customer interaction with the brand, as they can order anytime, anywhere.
2. Khan academy: Khan Academy, a well-known educational site, has a PWA allowing students to download and access lessons and courses without an internet connection. This feature is particularly helpful for those in areas with unreliable internet, ensuring uninterrupted learning. Just like the Starbucks PWA, Khan Academy's use of this technology improves the user experience, making education more accessible and flexible.
3. Trivago: Trivago, a popular hotel search engine, developed a PWA to enhance user experience, especially for travelers with unstable internet connections. The PWA allows users to browse hotel deals and information offline, making trip planning more flexible and accessible. This has led to increased user engagement and higher conversion rates, as travelers can continue interacting with the app even in areas with poor connectivity.
4. Forbes: Forbes, a leading global media company, launched a PWA to improve the mobile experience for its readers. The PWA significantly reduced loading times and allowed offline reading of articles. This innovation not only enhanced user engagement but also resulted in a noticeable increase in readership and time spent on the site. The Forbes PWA demonstrates how media outlets can leverage offline-first strategies to reach and retain a wider audience, regardless of their internet connectivity.

Conclusion

PWAs are changing the game in web development, bringing features we usually see in native apps to the web.

They offer a blend of the accessibility of web applications with the engaging user experience of native apps. They represent a forward-thinking solution for businesses and developers looking to maximize reach and functionality while minimizing costs and complexity.

PWAs aren't just a passing trend – they're the next big thing in how we make and use web apps. By focusing on working offline, PWAs provide a more reliable and user-friendly experience.

Whether you're just curious or ready to start building, the following resources remain great places to begin exploring the possibilities of offline-first web applications.

• Google's PWA Checklist
• MDN Web Docs on Service Workers
• Web.dev for PWA tutorials

This means that as developers, our focus on making websites and applications accessible helps more people use these resources.

In this article, I'll point out barriers to web accessibility, discuss the Web Content Accessibility Guidelines (WCAG), and share a basic checklist that all developers can use when building their websites and applications.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

Image credit: Interactive Schools

What is Web Accessibility?

A person is said to be disabled when they’re faced with a condition – permanent or temporary – that makes it difficult or impossible for them to achieve a desired task.

In effect, web accessibility involves removing all barriers that prevent any users from accessing the web equally.

What are the Barriers to Accessibility?

The barriers to accessibility include visual, auditory, cognitive and motor.

Visual barriers constitute conditions which make it difficult for people to view images, videos, and gifs. These conditions can include low vision, colour blindness, or even total vision loss.

Auditory barriers constitute conditions which make it difficult or impossible for people to consume audio content.

Those who have difficulty concentrating, learning or remembering new things are faced with cognitive barriers.

And people who have partial or total loss of function in a body part and find it difficult to navigate websites using devices such as a mouse experience motor barriers.

To resolve these barriers of web or digital accessibility, the Web Accessibility Initiative (WAI) of World Wide Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG).

What are Web Content Accessibility Guidelines?

They are globally accepted standards that guide developers and organisations in building an accessible web.

Image credit: Site Improve

Most of the barriers to web accessibility faced by people with disabilities can be put into four categories. The WCAG addresses each category to ensure accessibility is achieved.

Perceivable: It requires that users can identify content and interface elements using their senses. Most users rely primarily on visual senses, while others rely on sound.

Operable: It requires that users can use controls, buttons, navigation, and other interactive elements by themselves. It takes into consideration that disabled users will use assistive technology like voice recognition, keyboards, screen readers, and so on.

Understandable: It requires that users can comprehend the content and learn and remember how to use your site. The site should have a consistent format, predictable design and usage patterns, as well as an appropriate tone.

Robust: It requires that users of varying abilities and conditions can reliably interpret and interact with content using a technology or device of their choice.

Web Accessibility Checklist

As developers, these are a few of the things to look out for when building websites or application in order to ensure that people of varying abilities can access them equally.

How to make images accessible

All images should have descriptive sentence-like alt texts instead of just a word or clause. For example, the image below should have an alt text as shown in the code beneath it.

_Photo by [Unsplash](https://unsplash.com/@hybridstorytellers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Hybrid Storytellers on <a href="https://unsplash.com/t/food-drink?utm_source=unsplash&utm_medium=referral&utmcontent=creditCopyText)

<img alt="a right hand removing a slice from a whole pizza" src="https://unsplash.com/photos/XYyUxXw_oQw"/>

The code above shows a sentence-like, descriptive alternative text for the image. The goal of the alt text should be to describe the image in such a way that people using screen readers feel like they can visualize or imagine exactly what image is being described.

Image Alt text output

The next level of accessibility as seen in the above image, is to write alt texts so that users who may be encountering connectivity issues have an idea of the image before they see it.

How to make links accessible

Links should be descriptive and suggestive, and you should label all links with exactly what they do.

Avoid embedding your links in vague texts such as ‘here’. For instance, if we wanted to refer to my most recent article, for the sake of users who rely on screen readers, this is how to do it.

<p>
Check out my most recent article on <a href="https://www.freecodecamp.org/news/web-layouts-use-css-grid-and-flex-to-create-responsive-webpages/">Web Layouts – How to Use CSS Grid and Flex to Create a Responsive Web Page</a>
</p>

In the code above, the link tag is wrapped around the whole title of the article instead of simply making the link text a vague 'here'. This way, everyone who sees, reads, or hears it knows exactly what resource will be found when the link is clicked.

Link output image

When screen readers get to a link that is as descriptive as what we have in the image above, it makes it very easy for visually impaired users to know what the link does and, in effect, decide whether or not to visit it.

How to make forms accessible

When creating web forms, you should consider users with visual or motor limitations. Make it easy for users who can't use the mouse to navigate your form with the keyboard and users relying on screen readers to know the exact information needed for each input.

Ensure that your forms are accessible by using <label> or aria-label to communicate the purpose of an input or what information it requires to screen readers.

<fieldset> tags tell the form that groups of inputs belong together and <legend> tags act as labels for groups of inputs. These become especially necessary when dealing with questions that involve checkboxes or radio buttons.

<fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
</fieldset>

In the code above, I implement all the form best practices I mentioned. The fieldset tag creates an initial "first-section" group. The legend tag contains text that provides a description for the group of elements. Finally, the label tag identifies each of the inputs and their purpose.

Accessible form output

The image above is the output of the code. To learn more about creating modern and accessible forms, check out my previous article on How To Create and Validate Modern Web Forms With HTML5.

Video and audio accessibility

All videos should have subtitles and captions. Similarly, all audio should have transcripts, so that people with hearing challenges can still follow along and understand.

 <video id="video" controls preload="metadata">
     <source src="assets/samplevideo.mp4" type="video/mp4" />
     <track
     label="English"
     kind="subtitles"
     srclang="en"
     src="assets/samplevideo-en.srt"
     default />
 </video>

The code above shows a video element that introduces the track tag for adding subtitles so that users who are not able to hear the accompanying audio can read to follow along.

How to select colours for accessibility

When selecting colours for your websites, consider people who are colour-blind and those who have issues with sight.

When we use colours with poor contrast, it makes it difficult for users to read or navigate content on a web page. This means that we must always ensure that even in bad lighting conditions, our foreground and background colours have enough contrast between them for button, links, images, icons, texts and so on.

If you're unsure whether two colours complement each other in an accessible way, check using this online colour checker tool.

Use a color checker tool to check color contrast

You can also add this Web Accessibility Checker Chrome Extension to your browser for onsite accessibility checks.

How to make transitions and animations accessible

Use transitions and animations sparingly and only when extremely necessary in order not to trigger some users.

There are those who get dizzy or experience seizures when they encounter elements that move rapidly. Provide a way for such users to pause, hide, or stop the animation by making those controls available.

How to create accessible page structure and navigation

Use the appropriate HTML tags to semantically structure websites. Your site should be easy to navigate especially with assistive technology.

Page titles should be descriptive so users can easily differentiate between tabs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Web Accessibility Site | Checklist for Developers</title>
</head>
<body>
  <header>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  </header>
  <main>
    <section>
      <div>
        <h1>
          Welcome to Web Accessibility
        </h1>
        <p>
          This is semantic structuring with HTML tag
        </p>
      </div>
    </section>
  </main>
  <footer>
    <a href="https://codehemaa.com">My website</a>
  </footer>
</body>
</html>

The code above shows a web page with a descriptive title. I've used the right semantic tags to properly structure the page by distinguishing the header from the main body and footer.

I've also properly labelled sections, divs, and headings. This helps screen recorders to properly spell out exactly what element and content is present on the page.

Conclusion

If the inventor of the web stated emphatically “access by everyone regardless of disability is an essential aspect” of the web, then as developers we must strive to achieve just that. Plus, it's just the right thing to do.

You should consider accessibility even before you start to build your sites – not done after as damage control. Going forward, we ought to strive for inclusion by contributing to build a more a11y-conscious and a11y-friendly web.

Thanks for reading 👋🏾. I hope you found it helpful.

The first thing to do when you have a website or application to build or design is to decide on the layout. This is important because it is within this layout that you specify how elements are arranged so that you can assess them in their intended manner and hierarchy.

Basically, the aim of every web layout is to reduce confusion, enhance usability and to ultimately give your users an enjoyable experience. Some of the main elements of a layout are navigation, menus and content.

In web and front-end development, having a layout in mind ahead of building can help you decide on what CSS layout module to use: Flexbox or Grid.

In this article, we’re going to learn what each of these tools are and the best way to use them by building a simple yet beautiful landing page.

What We're Going To Build

landing page design

Check it out on Codepen here.

Project Functionality

1. Web Layout: Create a beautiful landing page
2. Mobile Responsiveness

Prerequisites

• Basic knowledge of HTML and CSS.
• An IDE (text editor) like VS Code
• A web browser

Setup

1. Create a folder for your project and open in an IDE.
2. Within your project folder, create index.html and style.css files.
3. Create an asset folder to store images.
4. Within your index.html file, create your HTML boilerplate and link your CSS file and font URL within the <head> tag.

Resources

1. Font: https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap
2. Desktop Image: https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png
3. Mobile Image: https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png
4. Client Logo (Databiz): https://i.postimg.cc/gJ9Y84m6/client-databiz.png
5. Client Logo (Audiophile): https://i.postimg.cc/15DDqYSD/client-audiophile.png
6. Client Logo (Meet): https://i.postimg.cc/5ybQqfbv/client-meet.png
7. Client Logo (Maker): https://i.postimg.cc/g2NsxByN/client-maker.png

How to Use Flexbox

Generally, HTML elements align according to their default display style. This means, without external styling with CSS, block elements like p and div will start on a new line. Inline elements like input and span, on the other hand, are arranged next to each other on the same line.

However, the concept of Flexbox allows you to easily place these elements either horizontally or vertically in what’s often referred to as one dimension. In order to achieve this, at least two elements are required: flex container and flex item. These refer to a parent and child element, respectively.

In responsive design, the purpose of Flexbox is to allow containers and their child elements to fill defined spaces or shrink depending on a device’s dimensions.

Flex-direction and Axes

Flex-direction is an important property of CSS Flexbox, because it is what determines the direction that flex items are arranged in. It does this by pointing out the main axis of a flex container.

There are two main axes, namely main axis and cross axis. The main axis is the defined direction of how your flex items are placed in the flex container, whilst the cross axis is always the axis at the opposite side of the main axis.

It can be dangerous to try using the concept of x and y axis from math to understand this. This is mainly because in Flexbox the main axis can be vertical or horizontal, always depending on the value of the flex-direction.

The values accepted by the flex-direction property include row (which is default), row-reverse, column, and column-reverse. For the purposes of this project, we’re going to look at row and column.

flex-direction: row

When the flex-direction attribute has a value of row, the main axis is horizontal and the cross axis is vertical, as shown in the image above. This means flex items will be arranged horizontally.

Since the row is the default value, if you display a container as flex but don't specify the flex-direction, the flex items will automatically be in a row.

flex-direction: column

When the flex-direction attribute has a value of column, the main axis is vertical and the cross axis is horizontal, as shown in the image above. This means flex items will be arranged vertically.

How to Build the Navbar

Now that we know how Flexbox works, let’s start building our navbar. We'll first provide the content within it, that is the menu items and logo. We’ll give them descriptive classes so that we can easily reference them within our CSS file.

<nav>
      <h2 class="logo">snap</h2>
      <ul class="menu-items">
        <li>Features</li>
        <li>Company</li>
        <li>Careers</li>
        <li>About</li>
      </ul>
      <ul class="cta-btns">
        <li>Login</li>
        <li>Register</li>
      </ul>
</nav>

The image below is the output for the code above. Because both <ul> and <li> are block elements, each of the items we specified within them will be displayed on a new line.

Navbar content output

Flexbox layout display is declared on parent containers and affects child elements. This means that if you had a list of groceries in an unordered list, display flex can’t be applied on the <li>s which are child elements in this case. Instead, to display them as flex, you’d first have to create a parent container and apply it to that.

In our CSS code below, we're defining the font style and size for our project as well as our navbar logo. We're also displaying our nav elements and some of the elements within those as flex.

* {
  font-family: "Epilogue", sans-serif;
  font-size: 0.85rem;
}

.logo {
  font-size: 1.3rem;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
}

The image below is the output for the code above. The elements have been displayed as flex. Yet because we didn't specify the flex-direction, they're automatically arranged in a row.

But as you can see below using the ruler (red line), the flex items are not aligned as they should be. Let's fix that by learning another important flex element.

Flex without alignment

How to use the align-items attribute

This is a Flexbox attribute that controls the arrangement of flex items on the cross axis. The values it takes are flex-start, flex-end and center depending on the element's alignment needs. The image below shows how each of them works.

Image credit: freeCodeCamp

From the image above, we can see that if we want to ensure that the flex items within our <nav> are aligned properly, on that element we must give the align-items attribute a value of center. So we have to add an attribute of align-items and a value of center to our flex container as shown in the CSS code below:

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

As you can see in the image below, the flex items are now aligned as they should be.

Flex with center alignment

But once again there is something missing. We want to have our items spread out properly on the navbar: the logo on the extreme left, login and register at the extreme right, and the rest in the middle.

We can achieve this with the justify-content attribute. Let's learn about it next and then implement it.

How to use the justify-content attribute

This is a Flexbox attribute that controls the arrangement of flex items on the main axis. It also defines how browsers distribute space between and around flex items within a flex container.

To achieve responsiveness, it helps with allocating any excess space that is leftover after flex-items have been arranged.

justify-content styles

From the styles associated with the various values of the justify-content attribute, we can see that the bottom two are more similar to what we're trying to achieve.

We can either go for the space around or the space-between and provide some padding on the sides to push the items on the extreme ends from the edges. We also give the list-syle attribute a value of none to remove the dots in front of the list items.

li {
  list-style: none;
}

nav {
  justify-content: space-between;
}

justify-content navbar output

Now that we have the items placed at their desired positions, we need to create slight spaces between them. In this case, we're going to give each list item a margin-right of 1rem. We also set other styles like size of fonts, color and a border for the register item.

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

Navbar with styles

After implementing the above code, this is the final look of our navbar. And this marks the end of our Flexbox section. Next, we'll build the final part of our landing page with CSS Grid.

How to Use CSS Grid

CSS Grid is a life-changing tool for creating web layouts. It helps you make both simple and complex layouts. The main difference is that while Flexbox helps with one dimensional arrangement of elements, CSS grid is able to do two dimensional arrangements.

The concept of axes we learnt about under Flexbox still applies here. You can use CSS Grid to arrange elements on the main axis and cross axis at the same time.

In summary, Flexbox, allows you to either arrange elements horizontally (in a row) or vertically (in a column). But with CSS Grid you can align elements both vertically and horizontally.

The CSS Grid layout is declared only on parent elements or containers. In effect, all its children become grid items. Once you have the target container, you give it an attribute of display and value of grid. The size of a grid’s row and column can be determined with grid-template-rows and grid-template-columns, respectively.

How to Build the Homepage

Just like we did with the navbar, let's start by defining our content within a <main> section in our HTML file.

Looking at our target image, we have two main sections: the left section will have text and logos whilst the right section has a hero image. That’s for the web view of our project.

Let's start by defining our content. The section with class text-side contains: heading, paragraph text, button and logo. The section with class img-side only contains an image.

<main>
      <section id="text-side">
        <h1>Make <br />remote work</h1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        </p>
        <button>Learn more</button>
        <div class="clients-logos">
          <img src="./assets/images/client-databiz.svg" />
          <img src="./assets/images/client-audiophile.svg" />
          <img src="./assets/images/client-meet.svg" />
          <img src="./assets/images/client-maker.svg" />
        </div>
      </section>
      <section class="img-side">
        <img src="./assets/images/image-hero-desktop.png" />
      </section>
    </main>

Within the main section, we created the two sections we needed and gave them descriptive id's: text-side and img-side.

Within the text-side, we added a heading, paragraph text, button and a div to display clients' logos. The only thing we need for the img-side is the display image.

/* Client Logos */
.clients-logos img {
  width: 5rem;
  margin-right: 1rem;
}

.clients-logos {
  margin-top: 4rem;
}

.clients-logos img:nth-child(2) {
  width: 3rem;
}

/* Main */
main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
.img-side img {
  width: 20rem;
}

Within our CSS file, we need to style the client logos div as well as the child elements. We also set a font-size for the heading and paragraph. Next, we style our button and assign a width to our image.

pre-grid homepage display

The image above shows how our web page will look after defining the content and styling just the heading, button and logos – that is, we haven't declared our container as a grid yet. Because almost all the elements we have here are block elements, we see them align on top of one another.

Grid Template Rows and Columns

The grid-template-columns property specifies the number and widths of columns in a grid, defining a grid container's column by specifying the size of its tracks and line names.

The grid-template-rows property is the direct opposite. It specifies the number and heights of rows in a grid, also defining a grid container's row by specifying the size of its tracks and line names.

As you can see in the image below, grid-template-rows arranges elements from the top to bottom of the device screen. grid-template-columns arranges elements from the left to right side of the device screen.

For our project, we're going to make use of grid-template-columns since we want to arrange our two sections side by side, letting each section occupy an equal part of the overall project width. We do this by assigning it as an attribute on the same container that we specified a display of grid on.

display: grid

Now that the two sections inside our <main> tag have been placed equally using the grid-template-columns, we have two last things to do.

We need to align them horizontally, by positioning both elements in the center of the page, with the extra space on the left of the image, evenly distributed on both sides. We also need to align them vertically by positioning both of them in the center of the page, with the extra space on the bottom, evenly distributed above and beneath.

Align and Justify in CSS Grid

Good news – we don't have to learn any new concepts to achieve our desired alignments in CSS Grid Layouts. Because fortunately, align-items and justify-content, as we learnt earlier, are not exclusive to Flebox. You can also use them to position items both horizontally and vertically.

main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}

As you can see in the code above, we only had to give the value of center to both align-items and justify-content attributes on the parent tag (grid container).

To ensure that we see the effect of position in the perfect center, we also had to specify a height for the section. The image below is the final output of our project.

Landing page final look

How to Make it Responsive

So far, everything we've built is for the web. But for the sake of users who want to access the landing page on mobile, we have to make our project accessible on smaller screens. In our case, we're looking at screens that are greater than 300px but less than 480px.

As you can see in the code below, we're hiding our nav items and displaying an emoji with class of mobile-nav. Beside that, we're hiding the desktop header image and showing the mobile header image.

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .desktop-logos {
    display: none;
  }

  .mobile-logos {
    display: block;
  }

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 8rem auto 0 auto;
    text-align: center;
  }
}

Full Project Code

This is the project we’ve built together in this article:

Here's the full HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Web Layout | Landing Page</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  </head>
  <body>
    <nav>
      <div class="logos-section">
        <h2 class="logo">snap</h2>
        <ul class="menu-items">
          <li>
            Features<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            </svg>
          </li>
          <li>
            Company<svg
              width="10"
              height="6"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke="#686868"
                stroke-width="1.5"
                fill="none"
                d="m1 1 4 4 4-4"
              />
            </svg>
          </li>
          <li>Careers</li>
          <li>About</li>
        </ul>
      </div>
      <ul class="cta-btns">
        <li>Login</li>
        <li>Register</li>
      </ul>
      <p class="mobile-nav">🌚</p>
    </nav>
    <main>
      <section id="text-side">
        <h1>Make <br />remote work</h1>
        <p>
          Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.
        </p>
        <button>Learn more</button>
        <div class="clients-logos">
          <img src="https://i.postimg.cc/gJ9Y84m6/client-databiz.png" />
          <img src="https://i.postimg.cc/15DDqYSD/client-audiophile.png" />
          <img src="https://i.postimg.cc/5ybQqfbv/client-meet.png" />
          <img src="https://i.postimg.cc/g2NsxByN/client-maker.png" />
        </div>
      </section>
      <section id="img-side">
        <img
          class="desktop-img"
          src="https://i.postimg.cc/0Nt97Bhf/image-hero-desktop.png"
        />
        <img
          class="mobile-img"
          src="https://i.postimg.cc/ZnYfhwwW/image-hero-mobile.png"
        />
      </section>
    </main>
    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="https://codehemaa.com">Ophy Boamah</a>.
    </div>
  </body>
</html>

Here's the full CSS code:

* {
  font-family: "Epilogue", sans-serif;
  font-size: 1.3rem;
}

.logo {
  font-size: 1.3rem;
}

li {
  list-style: none;
}

nav,
.cta-btns,
.menu-items {
  display: flex;
  align-items: center;
}

nav {
  margin: 0 1.5rem 1.5rem 1.5rem;
  justify-content: space-between;
}

.mobile-nav {
    display: none;
}

.logos-section {
  display: flex;
}

.menu-items li,
.cta-btns li {
  font-size: 0.7rem;
  margin-right: 1rem;
  color: hsl(0, 0%, 41%);
}

.cta-btns li:nth-last-child(1) {
  border: 1px solid gray;
  padding: 0.2rem 0.7rem;
  border-radius: 0.3rem;
}

/* Client Logos */

.clients-logos img {
  width: 8rem;
  margin-right: -3rem;
}

.clients-logos {
  margin-top: 1rem;
  margin-left: -2rem;
  display: flex;
  width: 10rem;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

/* Main */
main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 70vh;
  align-items: center;
  justify-content: center;
  margin-left: 8rem;
}
/* Images */
.desktop-img {
  display: block;
}
.mobile-img {
  display: none;
}

main h1 {
  font-size: 3rem;
}

main p {
  font-size: 0.7rem;
  width: 18rem;
  color: hsl(0, 0%, 41%);
  line-height: 0.9rem;
}

main button {
  background-color: hsl(0, 0%, 8%);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  margin-top: 1rem;
}

#text-side {
  margin-top: 3rem;
}
/* Hero Image */
#img-side img {
  width: 20rem;
}

.attribution {
  font-size: 0.7rem;
  text-align: center;
  margin-top: 5.5rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
  font-size: 0.7rem;
}

/* Responsive */
@media (min-width: 300px) and (max-width: 480px) {
  * {
    font-size: 1rem;
  }

  body {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  nav {
    margin: 0 1.5rem 0 1.5rem;
  }

  nav ul {
    display: none;
  }

  .mobile-nav {
    display: block;
    margin-right: 2rem;
  }

  main {
    display: grid;
    grid-template-columns: 100%;
    margin: -3rem auto 0 auto;
  }

  /* Clients logos */
  .clients-logos {
    margin-top: 2rem;
  }

  .clients-logos img {
  width: 30rem;
}

.clients-logos {
  margin-top: 1rem;
  display: flex;
}

.clients-logos img:nth-child(2) {
  width: 7rem;
}

  /* Images */
  .desktop-img {
    display: none;
  }
  .mobile-img {
    display: block;
    margin-top: 3rem;
  }

  .cta-btns,
  .menu-items {
    display: none;
  }

  main h1 {
    font-size: 2.5rem;
  }

  /* Client Logos */
  .clients-logos img {
    width: 4.5rem;
    margin-right: 0.8rem;
  }

  .attribution {
    width: 13rem;
    margin: 10rem auto 0 auto;
    text-align: center;
  }
}

Conclusion

As a web developer, layouts should be the first thing you consider before writing code. Thankfully, CSS Grid and Flexbox have revolutionized the way we structure and build website and web app layouts.

This makes these concepts a must know so you can specify the arrangement of elements on the web. We've discussed the fundamentals, so that you can easily build up on the knowledge and create beautiful web pages and apps.

Thanks for reading 👋🏾. I hope you found this helpful.

This process is similar to how the Document Object Model or DOM works. Here, the music app represents the DOM because it serves as a medium to make changes to the music.

In this tutorial, you'll learn what the DOM is and how it works in a practical way.

What is the DOM?

The DOM is a Web API that allows developers to use programming logic to make changes to their HTML code. It's a reliable way to make changes that turn static websites into dynamic ones.

It's an important topic in web development because the DOM serves as the initial use of JavaScript in the browser.

HTML code isn’t considered part of the DOM until its parsed by the browser. To see what happens to your HTML code when this parsing happens, copy your code from the <body> tag and paste it here (within the box with the title 'Markup to test' after the three dots).

What are we building?

In this article, we’re going to learn the most important and often used parts of the DOM by building this simple project:

Check it out on CodePen here.

Project Functionality

As you can see in the project demo above, these are the functionalities we’ll implement:

1. Dynamic color change: When a color is clicked, the color of the car image, addToCart button, and tag all change to match the selected color.
2. Button switch: Clicking on the addToCart button reveals the success button and vice versa.

Prerequisites

• basic knowledge of HTML and CSS.
• basic knowledge of JavaScript
• an IDE (text editor)
• a web browser

NB: Because the goal of the article is to learn about JavaScript and the DOM, we won't place a lot of emphasis on the HTML and CSS code. We'll just go through it quickly first so you can set up the app. Then we'll dive into learning about the DOM.

HTML code:

In our index.html file, we'll create the basic structure of the project which includes linking our CSS file, Font Awesome, and Google Fonts – all within our <head> tag. Within our <body> tag, we'll create our product card and link our JavaScript tag at the end of the <body> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Practicalized DOM</title>
  </head>
  <body>
    <div class="product-card">
      <div class="product-image">
        <!-- <img src="./img/gray-benz.jpg" alt="cars" /> -->
      </div>
      <div class="product-description">
        <h3 class="tag">CAR</h3>
        <h1 class="product-title">Mercedez Benz c300 2022</h1>
        <p class="product-details">
          <span class="mileage">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-car"></i
            ></span>
            Mileage: 4,000 miles
          </span>
          <span class="fuel">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-gas-pump"></i
            ></span>
            Fuel: 25mpg
          </span>
          <span class="safety">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-shield"></i></span
            >Safety:
            <span class="stars">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </span>
          </span>
        </p>
        <p>Pick a color:</p>
        <div class="colors-price">
          <div class="colors">
            <span class="red"></span>
            <span class="gray"></span>
            <span class="black"></span>
          </div>
          <div class="pricing">
            <h2 class="new-price">$134,450</h2>
            <h4 class="old-price"><s>$140,500</s></h4>
          </div>
        </div>
        <button id="button">
          <span style="font-size: 1em; color: white">
            <i class="fa-solid fa-cart-shopping"></i>
          </span>
          <span class="button-text">Add to Cart</span>
        </button>
        <button class="feedback">
          <span id="white-button"
            >🥳 Woohoo, You're about to own a benz 🎊</span
          >
        </button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

CSS code:

In our style.css file, we'll first of all set our general styles like this:

* {
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  background-color: antiquewhite;
}

Next, we'll style our product, starting with the tag, image, description and details.

/* product tag */
.tag {
  font-size: 0.9rem;
  background-color: black;
  border-radius: 5px;
  width: 4rem;
  display: flex;
  justify-content: center;
  color: #fff;
}

/* product*/
.product-title {
  font-size: 2rem;
  font-weight: 700;
}

.product-card {
  background: #fff;
  display: grid;
  /* align-items: center; */
  grid-template-rows: 55% 45%;
  height: 80%;
  width: 30%;
  box-shadow: 10px 10px 25px 0px #3c3c3c;
}

.product-image {
  /* border: 2px solid black; */
  background-image: url("./img/black-benz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 10px;
  width: 28rem;
  height: 66%;
}

.product-description {
  background-color: #62c256;
  color: #fff;
  padding-left: 20px;
  margin-top: -67px;
}

.product-details {
  display: flex;
  flex-direction: column;
  margin-top: -20px;
}

.product-image img {
  width: 28rem;
}

.stars {
  color: yellow;
  font-size: 1em;
}

Then, we'll style our colors: their prices, colors as a group, and individual colors.

/* colors */
.colors-price {
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  margin-top: -15px;
}

.colors {
  display: flex;
  width: 6rem;
  justify-content: space-between;
  cursor: pointer;
}

.red {
  background: red;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gray {
  background: gray;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.black {
  background: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.pricing {
  display: flex;
  width: 12rem;
  justify-content: space-between;
  align-items: center;
}

.old-price {
  font-weight: 100;
}

Finally, we'll style our buttons with this code:

/* buttons */
button {
  cursor: pointer;
}

#button {
  background-color: #000;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

button white-button {
  background-color: #fff;
}

.button-text {
  color: #fff;
  margin-left: 5px;
}

.feedback {
  display: none;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

DOM Implementation

Everything in the DOM falls into one of these two categories: selecting elements and manipulating elements. After creating our HTML and CSS files, we head into our app.js file to implement the following:

1. Select: We reference all elements we want to make dynamic from our HTML code and assign them variables in our JavaScript file.
2. Manipulate: Once we have selected and linked the variables, we create the various functions responsible for the manipulations and then link to the variables.

How to Select Elements in the DOM

To get access to the HTML elements that you want to manipulate, you need to make the JavaScript aware that such elements exist. This is what is generally referred to as "selecting" elements – basically linking them.

In the DOM, there’s no one way to locate and reference an element for manipulation. Instead, it’ll depend on the selector you've used in the element's tag.

You do this by assigning the element to a variable. It takes the following format. Keep in mind that all DOM selectors are preceded by the document object and a dot:

const example = document.[DOMselector]

In our JavaScript file, we have to select all the elements that we want to manipulate such as the button, the colors, the image card, and the tag.

We’re going to use as many of the DOM selectors as possible, so let's learn more about them.

How to use querySelector

querySelector is a method which accepts the exact CSS selector in a string and returns one element. You can use it to select the red and black colors as well as the image card, using their class names.

If you wanted to use this approach to select and return more than one element, you can use QuerySelectorAll instead.

const redColor = document.querySelector(".red");

The code above links the span with class "red" <span class="red"></span> from our HTML code to the variable redColor in our JavaScript.

const blackColor = document.querySelector(".black");

The code above links the span with class "black" <span class="black"></span> from our HTML code to the variable blackColor in our JavaScript.

const imageCard = document.querySelector(".product-image");

The code above links the div with class "product-image" <div class="product-image"> from our HTML code to the variable imageCard in our JavaScript.

const feedbackBtn = document.querySelector(".feedback");

The code above links the button with class "feedback" <button class="feedback"> from our HTML code to the variable feedbackBtn in our JavaScript.

How to use getElementsByClassName

You can use this selector to select the gray color. It's very similar to the querySelector. The only difference is that this method accepts just the name of the class, without the preceding dot (.)

const grayColor = document.getElementsByClassName("gray");

The code above links the span with class "gray" <span class="gray"></span> from our HTML code to the variable grayColor in our JavaScript.

How to use getElementById

You can use this selector to select the cart button. It's very similar to the getElementsByClassName. The only difference is that because we use the ID to show uniqueness, it's used on only one element. This method reads getElement, without an s.

const cartButton = document.getElementById("button");

The code above links the button with id "button" <button id="button"> from our HTML code to the variable cartButton in our JavaScript.

How to use GetElementsByTagName

Attributes are not the only ways to select an element. You can also use tag names. If you've used the tag you're targeting more than once, then it will return a list of elements. Use indexing to select the right one.

const itemTag = document.getElementsByTagName("h3")[0];

The code above links the h3 that contains our product tag <h3 class="tag"> from our HTML code to the variable itemTag in our JavaScript.

Of all these, the querySelector and querySelectorAll are probably the most popular because of how general and less restricting they are.

How to Manipulate Elements in the DOM

Manipulation is the main purpose of the DOM. It's everything that happens after you reference and select the element(s) you want to work with. This leads to a change in the state of the element, from static to dynamic.

Two concepts that you need to know to understand DOM manipulation are events and handlers.

What are Events?

Let's use the same music analogy from earlier. On the music app, you have to perform an action [click or swipe] before the functionalities kick in.

In the DOM, this action is known as an event. There are events such as click, scroll, mouseover, change, and more.

In the DOM, responses are tied to each event. This means that there should be a lookout for the event in order to give a response. This is known as an event listener. Event listeners usually come in the form of an addEventListener method which takes two arguments(event, event handler).

Anatomy of an Event

DOM events normally contain an element, its event listener, and a function.

element.[eventListenerMethod(event, eventHandler)

What are Event Handlers?

Event handlers are the responses that are triggered when our event listener methods read an event. Without event handlers, there would be no way to alert our code that an event has occurred.

All the modifications that happen within the DOM such as styling, appending, removing, and so on rely on event handlers. They are the functions found in the second argument of an addEventListener method. They are always alert to run as soon as the event (first argument) happens.

redColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "red";
  itemTag.style.backgroundColor = "red";
  imageCard.style.backgroundImage = 'url("./img/red-benz.webp")';
});

In the code above, the function after the 'click' event, is the event handler. This means that everything within that function will be implemented as soon as the red color is clicked.

How to Implement Events and Event Handlers

In this project, we’re going to use events and event handlers for about 5 implementations. We'll go through each one now.

First, we'll use them to make the red color functional. Once a user clicks the red color, the cart button and item tag are assigned styles in the form of a red background color. The image card also gets assigned a red background image.

We do this by taking the variable redColor and adding an event listener of 'click'. This means we want our code to be alerted when the red color is clicked. In return, the event handler function is in place to run immediately.

redColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "red";
  itemTag.style.backgroundColor = "red";
  imageCard.style.backgroundImage = 'url("./img/red-benz.webp")';
});

Red color preview

Then we'll make the gray color functional. When a user clicks the gray color, the cart button and item tag are assigned styles in the form of a gray background color. The image card is also assigned a gray background image.

We do this by taking the variable grayColor and adding an event listener of 'click'. This means we want our code to be alerted when the gray color is clicked. In return, the event handler function is in place to run immediately.

grayColor[0].addEventListener("click", function () {
  cartButton.style.backgroundColor = "gray";
  itemTag.style.backgroundColor = "gray";
  imageCard.style.backgroundImage = 'url("./img/gray-benz.jpg")';
});

Gray color preview

Next we'll make the black color functional. When the user clicks the black color, the cart button and item tag are assigned styles in the form of a black background color. The image card is also assigned a black background image.

We do this by taking the variable blackColor and adding an event listener of 'click'. This means we want our code to be alerted when the black color is clicked. In return, the event handler function is in place to run immediately.

blackColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "black";
  itemTag.style.backgroundColor = "black";
  imageCard.style.backgroundImage = 'url("./img/black-benz.jpg")';
});

Black color preview

We've looked at one approach to event handlers, which is creating the function within the addEventListener method.

Another approach is to create a function before passing the name of the function as an argument in the addEventListener method.

How to Implement the Cart Button

We start by creating a function named cart. The cart function hides the cart button and shows the feedback button. The function name cart is then passed to the event listener method as the second argument.

const cart = () => {
  cartButton.style.display = "none";
  feedbackBtn.style.display = "block";
};
cartButton.addEventListener("click", cart);

Cart button preview

How to Implement the Feedback Button

We first create a function named feedback. The feedback function hides the feedback button and shows the cart button. The function name feedback is then passed to the event listener method as the second argument.

const feedback = () => {
  cartButton.style.display = "block";
  feedbackBtn.style.display = "none";
};
feedbackBtn.addEventListener("click", feedback);

Feedback button preview

Full Project Code

This is the project we’ve built together in this article:

Here's the full HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Practicalized DOM</title>
  </head>
  <body>
    <div class="product-card">
      <div class="product-image">
        <!-- <img src="./img/gray-benz.jpg" alt="cars" /> -->
      </div>
      <div class="product-description">
        <h3 class="tag">CAR</h3>
        <h1 class="product-title">Mercedez Benz c300 2022</h1>
        <p class="product-details">
          <span class="mileage">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-car"></i
            ></span>
            Mileage: 4,000 miles
          </span>
          <span class="fuel">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-gas-pump"></i
            ></span>
            Fuel: 25mpg
          </span>
          <span class="safety">
            <span style="font-size: 1em; color: black"
              ><i class="fa-solid fa-shield"></i></span
            >Safety:
            <span class="stars">
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </span>
          </span>
        </p>
        <p>Pick a color:</p>
        <div class="colors-price">
          <div class="colors">
            <span class="red"></span>
            <span class="gray"></span>
            <span class="black"></span>
          </div>
          <div class="pricing">
            <h2 class="new-price">$134,450</h2>
            <h4 class="old-price"><s>$140,500</s></h4>
          </div>
        </div>
        <button id="button">
          <span style="font-size: 1em; color: white">
            <i class="fa-solid fa-cart-shopping"></i>
          </span>
          <span class="button-text">Add to Cart</span>
        </button>
        <button class="feedback">
          <span id="white-button"
            >🥳 Woohoo, You're about to own a benz 🎊</span
          >
        </button>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Here's the CSS:

* {
  font-family: "Poppins", sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  background-color: antiquewhite;
}

/* product tag */
.tag {
  font-size: 0.9rem;
  background-color: black;
  border-radius: 5px;
  width: 4rem;
  display: flex;
  justify-content: center;
  color: #fff;
}

/* product*/
.product-title {
  font-size: 2rem;
  font-weight: 700;
}

.product-card {
  background: #fff;
  display: grid;
  /* align-items: center; */
  grid-template-rows: 55% 45%;
  height: 80%;
  width: 30%;
  box-shadow: 10px 10px 25px 0px #3c3c3c;
}

.product-image {
  /* border: 2px solid black; */
  background-image: url("./img/black-benz.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 10px;
  width: 28rem;
  height: 66%;
}

.product-description {
  background-color: #62c256;
  color: #fff;
  padding-left: 20px;
  margin-top: -67px;
}

.product-details {
  display: flex;
  flex-direction: column;
  margin-top: -20px;
}

.product-image img {
  width: 28rem;
}

.stars {
  color: yellow;
  font-size: 1em;
}

/* colors */
.colors-price {
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  margin-top: -15px;
}

.colors {
  display: flex;
  width: 6rem;
  justify-content: space-between;
  cursor: pointer;
}

.red {
  background: red;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.gray {
  background: gray;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.black {
  background: black;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.pricing {
  display: flex;
  width: 12rem;
  justify-content: space-between;
  align-items: center;
}

.old-price {
  font-weight: 100;
}

/* buttons */
button {
  cursor: pointer;
}

#button {
  background-color: #000;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

button white-button {
  background-color: #fff;
}

.button-text {
  color: #fff;
  margin-left: 5px;
}

.feedback {
  display: none;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
}

Here's the JavaScript code:

// 1. Change color of car and addToCart button color when a color is selected
// - Selecting Elements
const redColor = document.querySelector(".red");
const grayColor = document.getElementsByClassName("gray");
const blackColor = document.querySelector(".black");
const cartButton = document.getElementById("button");
const itemTag = document.getElementsByTagName("h3")[0];
const imageCard = document.querySelector(".product-image");
const feedbackBtn = document.querySelector(".feedback");

// Modifying Elements
// - Add Event Listeners
// - Red Color
redColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "red";
  itemTag.style.backgroundColor = "red";
  imageCard.style.backgroundImage = 'url("./img/red-benz.webp")';
});

// - Gray Color
grayColor[0].addEventListener("click", function () {
  cartButton.style.backgroundColor = "gray";
  itemTag.style.backgroundColor = "gray";
  imageCard.style.backgroundImage = 'url("./img/gray-benz.jpg")';
});

// - Black Color
blackColor.addEventListener("click", function () {
  cartButton.style.backgroundColor = "black";
  itemTag.style.backgroundColor = "black";
  imageCard.style.backgroundImage = 'url("./img/black-benz.jpg")';
});

// Button Click Implementation
// - Cart Button
const cart = () => {
  cartButton.style.display = "none";
  feedbackBtn.style.display = "block";
};
cartButton.addEventListener("click", cart);

// - Feedback Button
const feedback = () => {
  cartButton.style.display = "block";
  feedbackBtn.style.display = "none";
};
feedbackBtn.addEventListener("click", feedback);

Conclusion

The DOM is an essential part of modern web development because it helps developers transform websites and web applications from static to dynamic.

As a beginner, it can be quite hard to wrap your head around the DOM and all that it entails. Taking time to build a few simple projects like this will help you reinforce the concepts.

Thanks for reading 👋🏾. I hope you found it helpful.

If you've ever searched on Google, signed up or logged into a website, made a payment, or responded to a questionnaire, you have interacted with a web form.

When building for the web, you must ensure that your application is accessible to all users. This includes those who require assistive technologies such as screen readers to navigate a website.

HTML5 has semantic form elements which are the best way to achieve this. Thankfully, the benefits are beyond accessibility:

1. They make it easier to develop because they come with some free functionality, and is generally easier to understand.
2. Better on mobile — semantic HTML is easier to make responsive for different screen sizes. Its file are generally lighter than non-semantic spaghetti code.
3. Good for SEO — your web page will have a higher chance of being found by customers because search engines prioritize keywords inside headings, links, and so on over those in non-semantic <div>s etc.

In this article, we’re going to discuss the latest elements and attributes in HTML5 forms that you can use to build and validate the simple yet modern form you see here:

You can see the source code here.

How to Use New HTML5 Form Elements

Over the years, web forms have gone through various changes until the arrival of HTML5.

With the introduction of new and improved HTML5 elements and their attributes, anyone can learn to build beautiful, functional, and accessible forms.

Out of the numerous form elements, some of the most essential include:

Form Outline – How to Use Fieldset, Legend, and Label Tags

You use the <fieldset> tag to group related elements (controls and labels) in a web form by drawing a box around them. It usually contains elements like legend, label and inputs.

You use the <legend> tag to define captions for fieldset elements. This way it can also be used as a way to group elements. And the <label> tag gives a definition to several elements.

You should always link the <label> tag to an <input> element because:

1. A user can focus on the input by clicking the label
2. When the input is focused, screen readers read out the label to help differently-abled users.
3. For checkboxes, especially on mobile, users who aren't able to easily click on smaller items can click on the label to toggle the checkbox on.

<fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
</fieldset>

In the code above, we're using the fieldset tag to create an initial group tagged "first-section". The legend tag contains text that provides a description for the group of elements. Finally, the label tag identifies each of the inputs and their purpose.

Fieldset, Legend, and Label

How to Use Placeholder Text

You use placeholder text within input fields, and it's only removed when the input field is focused or filled.

Usually, placeholder text has a lighter font color compared to the color of the input labels and values. You'll mostly use placeholders to give a user further insights as to what to fill out in a form. Here's an example:

<input type="email" id="email" placeholder="ob2@hotmail.com">

The type="email" attribute ensures that the input doesn't accept any other value than emails. The id attribute links the input element to its label to allow for association and focusing. The "ob2@hotmail.com" gives the user a hint of the kind of value the input expects.

Email input placeholder

How to Use Focus

Initially, users had to click within the first input box in a form in order to start filling it out. But HTML5 lets web developers place emphasis on the inputs users should interact with first.

Autofocus is an attribute that you can add on an <input> or <textarea> element for this purpose. It's an important accessibility feature too because it makes life easier for people who use screen readers, for example.

Here's an example of how to use autofocus:

<input autofocus type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" required>

As seen in the code above, you can put the autofocus attribute anywhere within the input tag. It's often followed or surrounded by the other generic attributes like name, id, and so on.

Input focus

How to Use New HTML5 Inputs

It's probably safe to say that <input> is the most popular attribute of a web form. Actually, everything in a form is an input because it requires some form of data from users. You use this attribute the most to receive text, numbers and emails, and so on.

Various elements are differentiated using the value of the type attribute in inputs. Below are three new and useful examples:

How to Use the Search Element

You use the search element to let users enter queries when they need to search for something. It is very similar to text inputs.

The main thing that differentiates them would be in the styling as accessing the input using the type input[type=search] tends to be super handy as compared to giving a text input a class.

<input type="search" id="email" placeholder="ob2@hotmail.com">

On certain browsers like Chrome, once you start typing, an 'x' icon is placed at the end of the input field. Clicking on this icon clears the value typed into the input and using the esc key on your keyboard gives the same result.

Search input

How to Use the Hidden Element

Web developers use hidden elements to render an input's content hidden and inaccessible to a user interacting with a form. This input type doesn't exactly render visually. Its content is not seen by the user but upon submitting the form, its sent to the server.

<input type="hidden" id="indexNumber" name="indexNumber" value="00202010">

How to Use the Progress Element

This is an element you can use to indicate the progress of a task. The max attribute is used to indicate the total value of the progress bar. The value attribute essentially shows the percentage of the task that's been completed by coloring in the bar to that extent. The id attribute, as always, is used to link to the the label.

 <label for="days">Proficiency:</label>
<progress id="days" value="27" max="100"> 27% </progress>

Unlike the input with the type range, the progress element does not allow users to make changes. Instead, it communicates in a read-only style.

Progress bar

How to Use the Data List Element

The data list element specifies a list of pre-defined options for an element. It's often used to offer autocomplete features for a list of items. This is because once you start typing, you get a preview of the list of options available.

As shown below, in order to link an <input> tag with a <datalist>, you have to ensure the value of the 'list' attribute is the same as the 'id' on the datalist.

<label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist>

This input is rendered differently on the various browsers:

Chrome: Once you hover on the input, there's a dropdown icon added at the end of the input. When you click within the input or on the label, the values of the various options are also shown in a dropdown.

Firefox: In order to see the option values, the user has to enter a part of the text and the options will be displayed in sort of an autocomplete style.

Data list

What is Form Validation?

Building the form is the first step in this process. As a developer, you have to always make sure that your users are providing accurate responses. This is necessary because you shouldn't assume that users will do the right thing.

This is the concept of validation in forms – preventing mistakes or catching them as soon as they happen.

Types of Form Validation

There are two popular types of validating a web form. They are:

Client-side Validation

Client-side validation can be linked to the 'preventing mistakes' part of validation. It involves strategies such as doing certain checks in the browser before submitting the form.

Methods of client-side validation include adding error popups and not letting a user proceed until they fill in the correct info.

Server-side Validation

Server-side validation can be linked to the 'catching mistakes' part of validation.

Unlike the client-side, this type doesn't check for errors while users are still on the form. Instead it checks when the form data is sent to your web server.

In this case, you'd show an error page as feedback to indicate the presence of errors.

Popular Client-side Validation Methods

Basic Client-side Validation

Some examples of basic client-side validation include "This field is required", "Enter a valid email", and "Password should be at least 8 characters long".

These are just a few of the many error messages thrown at users when they don't enter data in the format a form expects.

The most commonly used of these attributes include:

1. Required: Specifies input fields that need to be filled in before submitting the form.
2. Minlength and Maxlength: Specify a string's minimum and maximum length expected.
3. Min and Max: Specify the minimum and maximum values of numbers.

4. Type: Specifies what kind of data is needed for specific input fields, for example date, number, name, email, and so on.

The Constraint Validation API

As the name suggests, the Constraint Validation API is a Web API that offers validating features to web forms. You can use its new properties and methods to modify a form input's validity.

Developers can now easily give custom functionality and error messages. Basically, this API allows you to detect errors and display a custom message based on the type of error.

You can create custom validation and error messages with the setCustomValidity method as well as the validationMessage property.

Other Helpful Elements to Know

Putting it All Together

Here's the outcome of putting the various elements you've learned about in this article together:

Here's the code for that:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootcamp Registration</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="form">
    <h1>Bootcamp Registration Form</h1>
  <p>Complete this form to express your interest in the upcoming web development bootcamp.</p>
  <form>
<!-- Contact Details -->
    <fieldset class="first-section">
      <legend>Contact Details</legend>
      <label for="name">Name</label>
      <input autofocus type="text" id="name" name="name" autofocus placeholder="Ophy Boamah" autocomplete="on" required> <br><br>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="ob2@hotmail.com"> <br><br>
      <label for="tel">Phone</label>
      <input type="tel" id="tel" placeholder="+233 200001212"> <br><br>
    </fieldset>
    <!-- Personal Information -->
    <fieldset class="second-section">
      <legend>Personal Information</legend>
      <label for="dob">Birth Date</label>
      <input type="date" id="dob"> <br><br>
        <label for="gender">Gender ??</label>
      <input list="genders" name="gender" id="gender">
      <datalist id="genders">
        <option value="female">
        <option value="male">
        <option value="other">
      </datalist><br><br>
     <div class="proficiency">
        <label for="profeciency">Proficiency</label>
      <input type="range" value="4" max="10" id="profeciency" name="profeciency">
     </div>

    </fieldset>
     <!-- Preferred Language -->
     <div class="terms">
        <input type="checkbox" id="scales" name="scales" class="checkbox">
      <label for="scales">I have read and agree to the terms and conditions</label>
     </div>
    <button>Submit</button>
  </form>
  </div>
</body>
</html>

* {
  font-family: 'Montserrat', sans-serif;
}

body {
  height: 80vh;
  margin-top: 5rem;
  background-image: url("https://images.unsplash.com/photo-1595675024853-0f3ec9098ac7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kaW5nJTIwYm9vdGNhbXB8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 10px;
}

.form {
  background-color: #fff;
  border-radius: 5px;
  padding: 15px 25px;
  width: 80%;
  margin: 0 auto;
}

.checkbox {
  width: 20px !important;
}

.first-section input {
  width: 85%;
  height: 25px;
  margin-left: 5px;
}

.second-section input{
  width: 80%;
  height: 25px;
  margin-left: 5px;
}

.form h1, p {
  text-align: center;
}
button {
  border: none;
  color: white;
  background: #1560BD;
  padding: 8px 25px;
  border-radius: 5px;
  display: block;
  margin: 20px auto 10px auto;
  width: 120px;
}

.second-section {
  margin-top: 15px;
}

.proficiency {
  display: flex;
  align-items: center;
}

.terms {
  margin-top: 15px;
  display: flex;
  align-items: center;
}

Conclusion

The new HTML5 form elements and attributes make it easy to access certain essential functionalities. Especially those that were otherwise only possible with CSS or many lines of JavaScript.

It's now easier than ever to create web forms that are both modern and functional with only HTML. Most importantly, it brings peace of mind to web developers. Because you know that you can easily create forms that will be uniform across the various browsers.

Thanks for reading 👋🏾. I hope you found this helpful.

There is a wide variety of languages, frameworks, and libraries that you'll easily find if you Google around. You'll agree though that wherever there are a lot of options to pick from, it's bound to lead to confusion.

This decision is important to discuss because it determines to a large extent the process and outcome of your journey as a developer.

In this article, we’ll discuss the four W questions to answer before picking your first programming language, as well as some helpful tips.

How to Pick a Programming Language to Learn

Know Your Goals for Learning to Code (The Why)

Before worrying about what language to learn first, take a moment to consider the goal, or simply your why.

What’s the reason for wanting to learn programming, anyway? Is it to find a job, to automate your work, for a promotion, or for fun – or some combination? Your why should be the first factor to consider when selecting a language because that will serve as motivation to push through when the learning gets difficult.

Your why will also help narrow down the programming language options you have. For instance, if you’re learning programming to perform better data analysis, then Python should be your go-to. But if your goal is to build for the web, you should learn JavaScript. Or if you’re looking to build native iOS applications, then SwiftUI is your best bet – and so on.

Your why could also be to make a transition and secure a job in a particular industry or company. In such cases, you may want to engage recruiters, senior developers, mentors and current employees. Find out what languages are preferred or may give you a higher chance of getting in and focus on learning one of those.

Figure Out Your Time Constraints (The When)

Contrary to what a lot of people think, learning to code isn't a get-rich-quick scheme. Learning to code takes time and intentional effort, and these must go hand-in-hand.

It can take months or even years to reach proficiency in any given language. That is assuming you're focused and put in the needed effort towards your studies.

Before picking which language to learn, you'll need to identify your time frame. How long can you dedicate to working and waiting to ensure your dream of learning to code becomes reality? This can be a helpful guide to finding and focusing on languages that are known to be relatively easier to learn if you have limited time, and vice versa.

This is especially true for people who have important life deadlines such as securing a job, getting a promotion, or finishing a project by a given date.

It's always best to dedicate as much time as possible to your studies to avoid putting yourself under unnecessary pressure. And if there's no time limitation and nothing at stake, you may want to explore more complex object-oriented languages.

Know a Language's Potential (The What)

The potential of a language is also an important deciding factor. Potential here refers to the job and freelance opportunities that will be available to you after you learn a particular programming language. It also measures how much employers require that language.

Learning to code in an in-demand programming language means that you become an in-demand developer, which gives you a lot of leverage and opportunities to make money (both by yourself or in a company). This is every developer's dream, unless learning to code as a hobby or for fun.

You can easily figure this out with any of these steps:

1. Check a bunch of different job posts and their requirements – try GlassDoor or LinkedIn. Here's an example from Linkedin.
2. Do a Google search for "Most In-Demand Programming Languages" and the current year (for example 2022) and check results from Reddit or Quora.
3. Check the StackOverflow Developer survey for the current or past years here.

What's the Support for the Language? (The Who)

Look out for languages that are backed by credible institutions, communities, or individuals. They have a higher chance of being around for a longer time and being frequently maintained.

It's important that the language has a community backing it, too. This ensures its constantly maintained through open-source contributions.

This is particularly important because it shows that there are people who use the language and care about it enough to want to contribute to keeping it up-to-date.

Choosing a language with good support also means that should you encounter any difficulties, you will most likely find documented help for a similar error. Even if not, the probability of getting help quickly should still be high.

You shouldn’t follow the crowd and learn a language just because that’s what a lot of people are learning. Still, you don’t want to pick a language that doesn’t have a community you can get help from in case you face issues. In this case, it may be safe to say, the more the merrier.

Choosing a Programming Language is a Personal Decision

This article has been intentionally objective because different approaches work for different people.

You might be able to identify the language you want to learn based on these factors or not. After answering the questions raised above, you may still find that there are a number of options to pick from. It's very tempting to want to go with a language that is recommended by someone else.

However, try and make this decision by yourself. If you let someone else decide for you, it's very likely that when things go wrong you may regret the decision and start shifting blame. So that when the going gets tough, you'll remind yourself of your reasons and keep going.

Focus on Programming Fundamentals

Problem-solving is the most important skill any developer can cultivate. This is followed by knowing the fundamentals of programming in general. No language is more important than this.

Languages come and go, but these skills help you easily switch or pick up a new language when needed.

You’ll come to find that many times, your strength as a programmer will be measured by how well you’re able to adapt to change.

Even for employers, the majority are more likely to employ a developer who knows how to solve problems programmatically and learn quickly, over one who just knows any specific language.

You Can’t Go Wrong with HTML and CSS

There are a lot of people who argue that HTML and CSS are not "programming languages". But as the building blocks of the web, they are the foundation that you can build upon anytime.

This makes them safe to learn, even when you’ve still not decided what other language to start with. Almost all developers start learning from the web before topping up with other programming languages and eventually frameworks.

What is HTML?

Hyper Text Markup Language refers to the basic building blocks used to structure a web page. For example, its content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.

What is CSS?

Cascading Style Sheets is used to beautify HTML code. It lets you style the elements of your web page and lay them out in certain ways so that your code looks prettier.

Conclusion

Rest assured that these points will be relevant many years from now. The factors discussed above should give you the most effective methods to select your first programming language.

And even though I've put a lot of emphasis on selecting a language, this isn't the end of the story or of the decisions you'll have to make as a new developer.

It's only the first step and you'll have to sustain your learning and development with commitment and hard work. Whichever language you choose – and however hard you work – will ultimately determine how fast you achieve your goal. If you focus and work through a language methodically, it'll help keep you from jumping from one programming language to the other.

Thanks for reading 👋🏾. I hope you found this helpful.

Let's connect on Twitter or LinkedIn.