Sample Video Frame
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
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:
http-server -c-1 .
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 .
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:
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
index.html and go directly to:
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.
You can quit this server at any time by typing
ctrl-c in the terminal window (PowerShell/Cmder/Terminal).
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:
<title>A First CSS File</title>
<link rel="stylesheet" href="/global.css">
<h1>First CSS File</h1>
<p>This is my first CSS file.</p>
Some new HTML feature to note in this file:
<!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.
<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).
<link rel="stylesheet" href="/global.css">this is the important part that loads the CSS file name
global.cssfor your document.
Next, create the
global.css file in the same directory with this content:
font-family: Comic Sans, Comic Sans MS;
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
http-server command by default uses highly aggressive caching that is not useful for our purposes. If you accidentally run it with:
You'll have problems where your content seems to not reload.
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:
- CTRL-c to stop
- Rerun it with:
http-server -c-1 .
- Not done yet. Right click on the page and select
- With the dev tools open, go to the
Networktag and check "Disable cache".
- 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:
<link rel="stylesheet" href="/global.css">
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
[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
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:
- Rename the file from
- 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.
- Look at the
http-serveroutput 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".
- Fix the HTML so that it loads this new
- Reload and confirm the CSS works, and that you now see "200" for the
- Finally, put it all back the way it was with
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:
If you have a mix of
<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
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.
Register today for the course and get the all currently available videos and lessons, plus all future modules for no extra charge.