Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility For Web Developers Build an Accessible Form Error Messaging

Posted by Alexander Stratev
Alexander Stratev
15,731 Points

HTML CODE

Could anyone post the html code from this video please? I accidentally deleted it. Thank you!

Stefan Dobrincu
Stefan Dobrincu
5,947 Points

Hey, you can launch a new workspace with the same results or you can download the files from the notes of the video and paste it back in your workspace.

2 Answers

Matt Coale
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt Coale
Full Stack JavaScript Techdegree Graduate 17,884 Points
Matt Coale
.a{fill-rule:evenodd;}techdegree seal-36
Matt Coale
Full Stack JavaScript Techdegree Graduate 17,884 Points

Here is the completed code I ended up with. Hope it helps.

<!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="Tacos By Roscoe is not a real restaurant, as far as I know. This is a demo by Anwar Montasir for a Team Treehouse lesson on accessible forms.">
    <title>Tacos By Roscoe | Delivery Information</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,900;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- add FontAwesome here -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
</head>
<body>
    <header>
        <div id="logo">
            <div class="container">
                <img src="images/taco-emoji.png" alt="Tacos By Roscoe taco emoji logo" id="logo-img">
                <span id="logo-text">Tacos By Roscoe</span>
            </div>
        </div>
        <nav class="container">
            <ul class="nav-flex">
                <li><a href="index.html">Delivery</a></li>
                <li><a>Billing</a></li>
                <li><a>Review</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="container">
            <div id="summary">
                <i class="fas fa-utensils fa-3x"></i>
                <div id="summary-text">
                    <p>Delivery by 7pm, April 13, 2020</p>
                    <p>6 items, <span class="check"></span> $31.44</p>
                </div>
            </div>

            <form>
              <fieldset>
                <legend>Delivery Information</legend>
                <p class="hint">* - required field</p>
                <label for="name">Your Name * </label>
                <input type="text" id="name" name="user-name">
                <label for="email" class="error-text">Email Address * <i class="fas fa-exclamation-triangle"></i></label>
                <input type="email" id="email" name="user-email" class="error-input">
                <p class="hint error-text">Email address must contain a single @.</p>
                <label for="address1">Street Address *</label>
                <input type="text" id="address1" name="user-address1">
                <label for="address2">Apartment/Office Number</label>
                <input type="text" id="address2" name="user-address2">
                <label for="zip" class="error-text">Zip Code * <i class="fas fa-exclamation-triangle"></i></label>
                <input type="text" id="zip" name="user-zip" class="error-input">
                <p class="hint error-text">Please enter a Zip Code.</p>
                <label for="phone">Phone</label>
                <input type="tel" id="phone" name="user-phone" value="">
                <p class="hint">No phone? Include alternate contact below.</p>
                <label for="delivery-instructions">Delivery Instructions</label>
                <textarea id="delivery-instructions" name="user-delivery-instructions"></textarea>
                <button type="submit">Continue to Billing</button>
              </fieldset>
            </form>

        </div>
    </main>
</body>
</html>
Wesley Gray
Wesley Gray
4,593 Points
Wesley Gray
Wesley Gray
4,593 Points

Just a heads up, be careful how you enter the word "code". There is an element by that name.

Nicholas Prober
Nicholas Prober
4,925 Points
Nicholas Prober
Nicholas Prober
4,925 Points

How does this report an error? This is just a made up class name with a solid red border + text.

Wesley Gray
Wesley Gray
4,593 Points
Wesley Gray
Wesley Gray
4,593 Points

Are you not seeing the warning arrow? If not, make sure that you have the Font Awesome link in your code.

<script src="https://kit.fontawesome.com/37f56f6cf5.js" crossorigin="anonymous"></script>