In this chapter, you will design a static version of Ottergram. In the chapters that follow, you will make Ottergram interactive.
When you reach the end of this chapter, your website will look like Figure 3.1.
This chapter introduces a number of concepts and examples. Do not worry if you do not feel that you have mastered all of them when you get to the end. You will be encountering them again and again as you progress through this book, and your work in this chapter will provide a solid foundation on which you will build true understanding.
Of course, we can only introduce you to a tiny fraction of all the styles that are available in CSS. You will want to consult the MDN for information about the full set of properties and their values.
Front-end developers have to choose between two approaches to styling a website: start with the overall layout and work down to the smallest details, or start with the smallest details and work up to the overall layout.
Not only does working from detail to big picture produce cleaner, more reusable code, it also has a cool name: atomic styling. You will use this approach as you style the otter thumbnails first, then the thumbnail list layout. In the next chapter, you will work on the layout of the site as a whole.
You are going to begin by adding the normalize.css file to your project. normalize.css helps the CSS you write display consistently across browsers. All browsers come with a set of default styles, but the defaults are different from browser to browser. normalize.css gives you a good starting point for developing your own custom CSS for a website or web app.
normalize.css is freely available online. You do not need to download it. To add it to Ottergram, you only need to link to it in index.html.
To ensure that you are using the most current version of normalize.css,
you are going to get its address from a content sharing site.
Go to cdnjs.com/libraries/normalize and find the version of the file
ending with .min.css. (This version is a
smaller download than the others, with the extra whitespace stripped out.)
Click the Copy button to copy its address (Figure 3.2).
The current version at the time of this writing is 3.0.3, but the version you use may be more recent.
Open your Ottergram folder in Atom, then open index.html.
Add a new <link> tag and paste in the address.
(In the code below, the <link> has been broken into two lines to fit
on the page. You can leave yours on a single line.)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ottergram</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
...
Make sure that you add the <link> tag for normalize.css
before the <link> tag for styles.css.
The browser needs to read the styles found in normalize.css
before it reads yours.
And, just like that, your project can take advantage of this useful tool. No other setup is required.
You may be wondering why you are linking to an address on a completely different server. In fact, it is not unusual for an HTML file to specify resources located on different servers (Figure 3.3).
In this case, normalize.css is hosted on cdnjs.com, a public server that is part of a content delivery network, or CDN. CDNs have servers all around the world, each with copies of the same files. When users request a file, they receive it from a server nearby, cutting down on the load time for that file. cdnjs.com hosts many versions of popular front-end libraries and frameworks.