About Me due January 20, 2015
- Make your own 2-page About Me website, complete with a design implemented with CSS.
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:
- Upload your project to your folder on the FTP server.
- Update your student page to include a link to the project index page.
- Let the class know you’re done by sharing your link on Slack.
- On Schoology, let us know that you’ve finished putting your project on the server by submitting a link to the page, so we know you’re ready for us to look at it.
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:
Of course, if you feel like exploring more, please feel free.
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.
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):
- Fonts.com Web Fonts
- Webfonts from Commercial Type
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
Box Model (download)
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.)
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 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
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
If you uploaded the files to a server, the URL for the Contact Me page would be something like
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.