Guessing Game version 8 - with Style

We've covered a lot of styling, it's time to apply it to the guessing game we keep coming back to!

Pro Tip💡 It's always better to have a functional HTML application before starting CSS, so we are in great shape. In most cases, as you develop your application the HTML structure of your pages will change. There's nothing more wasteful than applying CSS to pages, only to throw that effort away when the page completely changes while you are iterating on your application! It's a good idea to get your application working - at least for the most part - with completely plain old HTML, no CSS first. Once you are satisfied you have the core functionality working, then start planning the layout - mobile first, then larger screens. Once the layout is done, then add extra styling as needed.

Adding the stylesheet

Before moving forward with anything, we need a stylesheet. We are going to put all of our CSS in a file called guess.css, which will be linked from the each HTML page using our pug template. We also need to add our responsive meta element.

//- layout.pug
doctype html
html 
    head 
        title Guessing Game 
        meta(name="viewport", content="width=device-width,initial-scale=1")
        link(rel="stylesheet", href="/guess.css")
    body 
        block content
        ...

The guess.css file needs to be located within our application, and served to the browser when the page is loaded and it initiates a GET request for the resource. You first instinct might be to create a new route somewhere in guessing game to serve GET guess.css, however there's a much better way! Express comes built in with a module that let's it serve static files for you. The module (express.static) doesn't need to be installed with npm, it's already part of Express. To configure it, you specify which folder(s) in your application structure contain static web content that should be served. In our case, we'll put public files like out guess.css in a /public directory, right alongside /routes and /views.

- /routes
    - all our route files
- /views
    - all our pug templates
- /public
    - any html, css, or later Javascript we want the browser to have access to
- guess.js
- package.json
- .env

It's a good idea to put something in your stylesheet so you know it's being applied. I like to start by making the entire background of body some bold color, once I know it's linked correctly I of course remove it.

/* contents of guess.css to start */
body {
    background-color: gold;
}

With guess.css placed inside the /public folder, the final step is to adjust the guess.js application file to use express.static to serve pages within the public directory. You can do this by adding the following line before your route specifications.

app.use(express.static('public'));

Note, now requests to http://localhost:8080/guess.css are captured by the express.static middleware. The middleware searches the public directory for guess.css, and if it finds it, will serve the request. If it does not find it, it will allow the rest of the routes to attempt to serve the resource.

Pro Tip💡 I cannot overestimate the importance of knowing your CSS is being used when rendering your page. I have spent way too much time in my life making CSS changes and wondering why they weren't having an affect on what I saw on my screen. Always verify. I made the background bright gold, and made sure my app rendered that way, right away. Keep it simple, verify your CSS is hooked up correctly, and then start your design!

The target look: Mobile

We'll design the guessing game first for mobile. Here's a few screenshots on a narrow screen.

Take a look at the source code here. Review the pug in particular, you will notice that very little has changed, other than I've added classes and some wrapper elements around key portions of user interface.

The target look: Larger screens

If you look at the mobile version with a big screen, it's pretty obvious we aren't using screen real estate well.

To better make use of the screen space, we can move the guess list to another column. In addition, since we have more room up top along the nav bar, we can move the "Start over" link to the top, and eliminate it from the bottom of the screen.

To implement this, we simply use a media query and modify the main content grid. Take a look at the final code here.