Skip to main content

Part 2: Styling using CSS and Bootstrap

  1. Include the Bootstrap CSS styles in the HTML head. Instructions can be found here

    • We don't necessarily need to include the JS Scripts for this assignment - Only include the Bootstrap CSS styles.
    • You will notice the fonts, and some layout aspects of the pages changed a bit. It now look something like this.
    With bootstrap

    a little better, already

  2. Put a border around the 2 divs;

    • Make sure to include the stylesheet file below the bootstrap stylesheet.
    • Tip: try typing the Emmet abbreviation: link:css then hit enter. VSCode should make the element and you'll only need to change the path. With bootstrap

  3. In the styles.css file:

    1. set a 1px solid black; border for #welcome-screen
    2. set a 1px solid red; border for #game-screen

  4. Apply Bootstrap classes to the buttons. Examples on Button Classes can be found here

    • Set the class attribute of the Start Game! button to use the blue btn btn-primary style.
    • Set the class attribute of the Go! button to use the green btn btn-success style.

  5. Apply Bootstrap class custom-select to select dropdown. More Info about Bootstrap Select/Dropdown here

  6. for the div immediately below the 2 form, give it a class name of form-group

  7. for the <input id="username" ...>, add a class of form-control

It should now look like this.

after styling

Not the best look, but it'll do for now Let's start building the game logic

Testing​

  • to test that satisfied the styling requirements, run the tests with npm run test:styling. This will run the E2E tests for the styling component only of this assignment.
  • You can also run the entire suite of E2E tests using npm run test:e2e.