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


  • 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.

    <div class="website-name">

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

    <div class="google-apps">
        <div class="app-shortcuts">
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>


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

Next Round


Leave a Reply

Your email address will not be published. Required fields are marked *