About Me due April 17, 2014

Assignment

Make your own 2-page About Me website, complete with a design implemented with CSS.

Details

Starting with the content and markup you put together before, use CSS to give your site colors, layout, and type treatments that make it your own.

I recommend the following directory structure:

nevan_scott/
    css/
        main.css
        normalize.css (optional)
        reset.css (optional)
    index.html
    resume.html

Give the folder your name instead of mine, but please stick to using lowercase and no spaces for the folder and file names.

Check out this example for an idea of what a completed site might be like.

When you are finished, make a .zip of your project folder and upload it to the “Dropbox” for the assignment on Schoology.

Resources for CSS

As you’re exploring CSS, I recommend taking a look at the MDN CSS reference. There are a lot of things on here, which can be overwhelming. For now, I recommend sticking mostly to these:

• background
• border
• color
• display
• font-family
• font-size
• font-style
• font-weight
• line-height
• list-style
• margin
• padding
• text-align
• text-decoration
• text-indent
• text-transform

Of course, if you feel like exploring more, please feel free.

Bonus

If you’re feeling particularly feisty, there are two additional things you are encouraged to try: using a web font for greater type variety, and using an icon font to include icons on the page.

Web Fonts

If you’re interested in including a web font or two, I recommend looking into Google’s library of web fonts as a starting point. These have the advantage of being licensed for free web use, and are very easy to set up. Unfortunately, they are not the highest quality fonts (very much “you get what you pay for”), but there are some gems. Have a look at Chad Mozzola’s Beautiful Web Type project for some of the nicer ones.

If you’re interested, Matthew Butterick has a detailed discussion on the open-source nature of Google’s web font library.

I wouldn’t recommend using these for class because they generally require registering a domain name in order to work (and cost money), but these are other web font services and providers worth looking into if you get the itch (in alphabetical order):

• Cloud.typography
• Fontdeck
• Fonts.com Web Fonts
• Fontspring
• Typecast
• Typekit
• Webfonts from Commercial Type
• Webtype

Icon Fonts

For dabbling with an icon font, I recommend looking into Font Awesome. These are also free to use and fairly easy to set up. They are especially handy for adding some icons for links to social network accounts, such as on Facebook, Tumblr, Twitter, and LinkedIn. (See their list of Brand Icons.)

I am less familiar with this landscape than I am with web fonts, but other good icon font libraries can be found at IcoMoon and Symbolset.

Box Model Exercise

If you’d like an additional exercise to do, I’d recommend taking a look at the “Box Model” exercise that we didn’t have time for in class. It can be a useful playground to develop more of an intuition for margin, border, and padding.

Box Model (download)

What are normalize.css and reset.css?

In class, we’ve discussed how browsers have default styles for many elements. These default styles tend to vary between browsers and platforms.

I think Eric Meyer, who authored the Reset CSS, has offered pretty close to the definitive rationale for using resets in his 2007 post “Reset Reasoning”. I’d recommend looking there for more detail. (The browser landscape has changed somewhat since then, especially as older versions of Internet Explorer have been phased out, but the reasoning still holds.)

The reset.css and normalize.css work to solve the same problem—smoothing over browser differences in default styles—but have differing philosophies. Meyer’s reset.css wipes out most styles altogether, so that there are no longer presentational differences between heading levels, for instance. Nicolas Gallagher’s Normalize.css, on the other hand, attempts to lay a foundation of “sane defaults” on which to build.

In practice, each is a matter of preference. The reset.css amounts to starting to write CSS from a clean slate, while normalize.css gives a starting point with a fair amount of style information as a starting point. I prefer to exert more control, and generally prefer to build on a reset.css foundation. Some developers prefer the “sane defaults” approach, and tend to start with normalize.css.

For the normalize.css camp, there is also a popular project called HTML5 Boilerplate which includes normalize.css and also starts a project off with a fair amount of other niceties. It is certainly worth looking into.

Note that these are both entirely optional, and that normalize.css and reset.css are not meant to be used together.

Also, because they lay a foundation, on which a developer constructs overriding CSS, they should be linked to before your CSS file, like so:

<head>
    <title>My Awesome Webpage</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>

or, if you prefer to use a reset:

<head>
    <title>My Awesome Webpage</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
</head>

Why are there no spaces in file and folder names?

I’m glad you asked! Spaces aren’t allowed in URLs, and instead get encoded, typically as %20. Say we had the following neighboring files:

index.html
contact me.html

Note the space in contact me.html.

If you uploaded the files to a server, the URL for the Contact Me page would be something like http://example.com/contact%20me.html.

Gross. Save yourself and your users the headache and use underscores (_) or hyphens (-) instead of spaces.

OK, well, why are they all lowercase?

This is considered a general best practice because some server file systems are case sensitive, and others are not. In order to avoid potential problems, the convention is to stick to lowercase.