Skip to main content

Accessibility Quiz

The Project​

Interactive HTML/CSS quiz focused on web accessibility, developed as part of the freeCodeCamp curriculum.

Source Code​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <img id="logo" alt="freeCodeCamp" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a href="#student-info">INFO</a></li>
          <li><a href="#html-questions">HTML</a></li>
          <li><a href="#css-questions">CSS</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
          <div class="info">
            <label for="student-name">Name:</label>
            <input type="text" name="student-name" id="student-name" />
          </div>
          <div class="info">
            <label for="student-email">Email:</label>
            <input type="email" name="student-email" id="student-email" />
          </div>
          <div class="info">
            <label for="birth-date">Date of Birth:</label>
            <input type="date" name="birth-date" id="birth-date" />
          </div>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
          <div class="question-block">
            <h3><span class="sr-only">Question</span>1</h3>
            <fieldset class="question" name="html-question-one">
              <legend>
                The legend element represents a caption for the content of its
                parent fieldset element
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q1-a1">
                    <input type="radio" id="q1-a1" name="q1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q1-a2">
                    <input type="radio" id="q1-a2" name="q1" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="question-block">
            <h3><span class="sr-only">Question</span>2</h3>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q2-a1">
                    <input type="radio" id="q2-a1" name="q2" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" id="q2-a2" name="q2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
          <div class="formrow">
            <div class="question-block">
              <label for="selector">Can the CSS margin property accept negative values?</label>
            </div>
            <div class="answer">
              <select name="selector" id="selector" required>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
              </select>
            </div>
            <div class="question-block">
              <label for="css-textarea">Do you have any questions:</label>
            </div>
            <div class="answer">
              <textarea id="css-textarea" name="css-questions" rows="5" cols="24"></textarea>
            </div>
          </div>
        </section>
        <button type="submit">Send</button>
      </form>
    </main>
    <footer>
      <address>
        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
        San Francisco<br />
        California<br />
        USA
      </address>
    </footer>
  </body>
</html>

Development Reflections​

The Commenting Approach​

I used Claude to create a didactic commenting system following the approach from my personal handbook. I use it as a tutor, especially after implementing changes requested by freeCodeCamp without initially understanding the motivations behind each choice.

I think freeCodeCamp is wonderful, but I'm realizing that "unfortunately" it's too practical. Don't get me wrong, that's its strength, but my personality constantly suggests I dig deeper into what interests me, including in coding.

The Parallel Study Journey​

HTML & CSS by Duckett: Even though it's basic level, I'm realizing how much technology has advanced since 2014. The book talks about Flash, Cufon... everything replaced "fortunately" by Google Fonts, which democratized access to fonts.

"Become Designer" Course by Riccardo Breccia: I took more time between this project and the previous one precisely because of this course. I'm aware that every freeCodeCamp lesson won't be the same anymore. I have more refined eyes, attentive to details. Despite studying Industrial Design at university, I found this course more useful than many exams I've taken: extremely practical and allowed me to challenge myself.

Google UX Course (2/8): The exact opposite of Breccia's. Extremely theoretical and not very practical so far, though I expect the practical part will come.

Refactoring UI: After 35 pages I'm already happy with the investment. It's incredibly direct and useful. I regret not getting it earlier because it's teaching me an approach to projects that seems senior-level.

I expected a manual about UI micro-details, but instead it's giving me essential foundations in coding scalability. I've noticed that this specificity (more detailed CSS, HTML, Figma with components and variables) is what distinguishes:

  • Junior Developer → Senior Developer
  • Junior UX Designer → Senior UX Designer
  • Junior UX Engineer → Senior UX Engineer

Don't Make Me Think: A pillar of the UX world. After loving "The Design of Everyday Things" by Norman, I wanted to continue on that axis.

The Realization​

All this to say that maybe I was getting lost in code, abandoning the design part and forgetting my true goal: combining design with code.

I admit that when I add new knowledge to my repertoire and apply it in freeCodeCamp lessons, my eyes light up and I smile like a child. It happens when I read interesting concepts in design books too, but very rarely when using Figma. Despite being fast with it, it doesn't give me the same satisfaction as coding. Maybe because I consider it "easier"?

Technical Highlights​

I had already explored the final version of this project a few exercises ago, and it was one of the things that made me want to accelerate. The effects that excited me most:

  • Smooth scroll behavior
  • Navigation links with gentle scrolling
  • Interactive hover effects

It's everything that connects what I learned with Figma to code, giving me the feeling of being in the right place at the right moment.

The Most Difficult Concept​

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

Initially it derailed from the usual patterns, but now it's crystal clear: if the user hasn't limited animations in their browser/device settings, the site interprets it as "okay, green light for animations". In this case scroll-behavior: smooth.

Final Notes​

I stopped tracking total time to complete exercises because I realized that quality is significantly better than quantity.

Next Project: Tribute Page