Sample Video Frame

Created by Zed A. Shaw Updated 2024-02-17 04:54:36

02: The Setup

To continue with the course you'll need a basic web server. You'll eventually make your own, but for now you only need to run this one command:

npm install -g http-server

That will install a command named http-server globally on your whole computer. On OSX and Linux you'll probably have to do this:

sudo npm install -g http-server

When you do this it will prompt you for your password, and then install the command in your computer so it's always available. It's an incredibly useful tool so it's one of the few things I recommend people install globally. However, if you do not want to install it globally then you can simply create a new directory and install it there:

npm install http-server

The only thing with this is every time I tell you to run http-server you have to prefix it with npx.

Running http-server

You run the server by typing the command and giving it a directory to "serve" files from. I'm going to put my CSS Basics material in a directory called css_basics and work from there, so I did this:

mkdir css_basics
cd css_basics
http-server -c-1 .

The .(dot) in http-server -c-1 . means "this directory right here". The -c-1 portion is necessary to solve a problem with http-server's caching settings (see below). If you install http-server locally rather than globally then you type this:

npx http-server .

Using http-server

To use this server you'll have to put something in the css_basics directory. Create a file named test.html, put it in css_basics, then point your browser at:

http://127.0.0.1:8080/test.html

If you get an error look at the output of the http-server and confirm it mentions 8080 as the port. If it gives you a different number, use that new number instead of 8080.

Now rename test.html to index.html and go directly to:

http://127.0.0.1:8080/

The index.html file is a special file that doesn't have to be specified for the browser and server to know to load it. Simply place that file in the directory and go to / and it'll work.

Quitting http-server

You can quit this server at any time by typing ctrl-c in the terminal window (PowerShell/Cmder/Terminal).

Learning About http-server

You can read the documentation for http-server at its github page and I recommend playing with its options to familiarize yourself with it.

Creating Your First CSS File

You'll now take your index.html file and turn it into an official real HTML file. Change your index.html to this:

<!doctype html>

<html lang="en">
  <head>
  <title>A First CSS File</title>
  <link rel="stylesheet" href="/global.css">
  </head>

  <body>
    <h1>First CSS File</h1>

    <p>This is my first CSS file.</p>
  </body>
</html>

Some new HTML feature to note in this file:

  1. <!doctype html> is officially how you say your file is a modern HTML document so that people still using IE6 on Windows 7 know you're serious.
  2. <html lang="en"> helps Google collect more information about people's browsing history by "translating" the page for them based on the language you specify (and also storing everything they looked at, even if it's private).
  3. <link rel="stylesheet" href="/global.css"> this is the important part that loads the CSS file name global.css for your document.

Next, create the global.css file in the same directory with this content:

h1 {
  font-family: Comic Sans, Comic Sans MS;
}

p {
  font-size: 5em;
  font-style: italics;
}

Now when you go to http://127.0.0.1:8080/ you should see the page load and the h1 tag have a Comic Sans font.

The Caching Problem

The http-server command by default uses highly aggressive caching that is not useful for our purposes. If you accidentally run it with:

http-server .

You'll have problems where your content seems to not reload.

Try running http-server without the -c-1, changing your CSS and reloading. Did it refuse to do what you say and reload? Welcome to your first taste of the frustration of web development. To disable this caching you have to do the following:

  1. CTRL-c to stop http-server.
  2. Rerun it with: http-server -c-1 .
  3. Not done yet. Right click on the page and select Inspect Element.
  4. With the dev tools open, go to the Network tag and check "Disable cache".
  5. Now reload while keeping the tools open. Any time your page refuses to reload, open the Developer Tools and it will force the reload.

Test that you know how to do this by changing the CSS and reloading a few times.

How HTML Loads CSS

If you look at the top of the index.html file you'll see this:

<head>
    <link rel="stylesheet" href="/global.css">

The link tag is the primary way you bring CSS into your HTML. This tells the web browser that the file global.css is the CSS for this HTML file. You can have as many of these as you like, but keep in mind that later CSS overrides earlier CSS. To keep things simple I suggest you only have one file.

When the browser sees this it accesses the webserver you started with http-server -c-1 . and asks for the global.css file. If you look in your terminal you should see lines like this as you access the /index.html URL:

  [18:19:34] 200 ─ 0.54ms ─ /index.html
  [18:19:34] 200 ─ 0.37ms ─ /global.css

This is a log of everything your bowser is doing to this server, and it's the first place to go if something isn't loading correctly. In this case the browser first loaded the /index.html file at 18:19:34 time, then it loaded global.css right after, which is the file listed in the link tag above.

Mapping URLs to Files

If the browser is asking for the URL /index.html, then how does it know to find that file in the ./ directory?

In the code for the server there's something called a "route" (a mapping) that simply says the server should look for files in the ./ directory and then the server maps any attempts to access a file to this directory. How this is configured is far too complex to cover here, but just trust me that if you want to give the browser access to a file, then you put it in ./.

You Try It

To confirm that you understand how the global.css file is being loaded I want you to accomplish the following tasks:

  1. Rename the file from global.css to test.css.
  2. Reload the HTML page and confirm that the CSS is now not working. That's right, cause it to fail now that you've renamed it.
  3. Look at the http-server output logs (from now on, the "server logs") and confirm you see "404" listed for the global.css line. 404 is how the web server says "file not found".
  4. Fix the HTML so that it loads this new test.css file.
  5. Reload and confirm the CSS works, and that you now see "200" for the test.css file.
  6. Finally, put it all back the way it was with global.css working now.

If you can do this once, then attempt to do it a second time just to confirm you didn't get lucky. Pick a new name for the HTML or CSS file, move it, and then make it work again. Then be sure to put everything back the way it was before you continue.

The Style Tag

The other place that the browser loads CSS is in the HTML <style> tag, like this:

<head>
  <style>
  h1 {
    color: blue;
  }
  </style>
</head>

If you have a mix of <style> and <link> tags then the most recent CSS wins in a tie. This means if you do most of your work in the <style> tag then it's easier to get the CSS to work since it will override the CSS found in the global.css file.

If you want to have some fun get Andy Brewer's MVP.css and include in your list of stylesheets. I used MVP.css as the basis of the later components and it's a nice simple classes CSS style that you could study for an example. If you google for "no-class css framework" or "classless css framework" you'll find many others you can try out.

On to Your First Real CSS

Once you are confident you can load files in your css_basics/ directory then you're ready to learn about how CSS rules are written and work.

Previous Lesson Next Lesson

Register for Learn JavaScript the Hard Way

Register today for the course and get the all currently available videos and lessons, plus all future modules for no extra charge.