demo-code/balloons-game/public/game.html

<!DOCTYPE html>
<html>
    <head>
        <title>Balloons: a two player word game</title>
        <link rel="stylesheet" href="stylesheets/game.css">
    </head>
    <body>
        <main>
            <section id="alphabet">
                <div id="A" class="alphabet"> A </div>
                <div id="B" class="alphabet"> B </div>
                <div id="C" class="alphabet"> C </div>
                <div id="D" class="alphabet"> D </div>
                <div id="E" class="alphabet"> E </div>
                <div id="F" class="alphabet"> F </div>
                <div id="G" class="alphabet"> G </div>
                <div id="H" class="alphabet"> H </div>
                <div id="I" class="alphabet"> I </div>
                <div id="J" class="alphabet"> J </div>
                <div id="K" class="alphabet"> K </div>
                <div id="L" class="alphabet"> L </div>
                <div id="M" class="alphabet"> M </div>
                <div id="N" class="alphabet"> N </div>
                <div id="O" class="alphabet"> O </div>
                <div id="P" class="alphabet"> P </div>
                <div id="Q" class="alphabet"> Q </div>
                <div id="R" class="alphabet"> R </div>
                <div id="S" class="alphabet"> S </div>
                <div id="T" class="alphabet"> T </div>
                <div id="U" class="alphabet"> U </div>
                <div id="V" class="alphabet"> V </div>
                <div id="W" class="alphabet"> W </div>
                <div id="X" class="alphabet"> X </div>
                <div id="Y" class="alphabet"> Y </div>
                <div id="Z" class="alphabet"> Z </div>
            </section>

            <section id="game">
                <div id="word">
                    <span id="hiddenWord"></span>
                </div>
                <div id="balloons">

                </div>
                <div id="status">
                    <span id="statusbar"></span>
                </div>
            </section>
        </main>
        <!-- This import is very far from optimal 
            (but at easy to implement): 
             every time the page is loaded, 
             the English dictionary is loaded;
             a better solution would be LocalStorage
        -->
        <script src="data/english.js"></script>

        <!-- In general, in a production environment, 
             all files would be compressed into a single one
             to avoid multiple HTTP requests.
             Automatic tools are available for this step.
        -->
        <script src="javascripts/config.js"></script> 
        <script src="javascripts/statuses.js"></script>
        <script src="javascripts/messages.js"></script>
        <script src="javascripts/alphabet.js"></script>
        <script src="javascripts/ui-right.js"></script>
        <script src="javascripts/interactions.js"></script> <!-- browser parses the code from top to bottom, by now the DOM is built -->
    </body>
</html>