RE:Creation No. 1: Google | HTML (Round 2)

Summary

• Convert the marked up groups into <div class="group-name">
• Instead of <div>, mark up the group of form elements in <form>
• Mark up the text nodes in <div class="text">
• Add class attributes to elements that need to be differentiated

The <div>

This round is simple enough in the sense that we just have to convert all the marked up groups into an HTML Content Division element, as denoted by the HTML <div> tag. The group name will then be converted into the value of the class attribute. Now, the suggested syntax for spaces—instead of underscore—would be dash.

<header>
    <div class="website-name">
        <h1>Google</h1>
    </div>

    <div class="account-action">
        <a href="#">Sign In</a>
    </div>

    <div class="google-apps">
        <div class="app-shortcuts">
            <ul>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>
            </ul>
        </div>
        [...]
    </div>
</header>

Demo

See the Pen RE:Creation No. 1: Google | HTML (Round 2) by Brian Dys (@briandys) on CodePen.

Next Round