Either if you're just getting started using LinkedIn or if you've had a profile for ages, here are some tips to help you optimize your LinkedIn effort.

In summary, here are the tips in no particular order:

1. Flesh out your profile
2. Request recommendations from old colleagues
3. Congratulate people on job changes
4. Support people who are unemployed
5. Reach out to old contacts every once in a while
6. Pay attention to who views your profile
7. Answer questions, Join groups, Run a poll
8. Update your status with professional achievements
9. Properly structure your employment history descriptions
10. Do good work

1.) Flesh out your profile

LinkedIn has a "profile-completeness" helper that will guide you on the general things you should do. At the very least make sure you've got these covered.

• Upload a well focused, professional (not holding a beer bottle) photo of your face and make sure you're smiling. Nobody wants to work with a smug, cynical, emo, asshole so look friendly.
• Complete your employment history with title, date range, and description (more on description later).
• Fill out your skills & expertise. This will prompt LinkedIn to ask your contacts to endorse you for those skillsets.

After you've spent the time bringing your profile up to speed, make sure you keep it updated.

2.) Request recommendations from old colleagues

To get to the recommendations section, click
Profile > Recommendations > Ask to be recommended

Here are a few guidelines on how to appropriately make requests.

• Don't ask for recommendations from people you are currently working with. If the person doesn't want to leave one or just doesn't get around to it soon it may make for an uncomfortable workplace. First and foremost you should focus on maintaining high quality professional relationships at any position you hold. Putting unnecessary pressure on your colleagues may leave them with a bad impression of you.
• Once you're no longer colleagues, all bets are off... If you had a good working relationship with someone then there is no excuse NOT to ask for a recommendation. Feel free to use the default recommendation message unless you feel like being especially personal about it. I don't recommend personal messages for one reason. If you send the request again (see next bullet point), the message you used before will be copied and if it is no longer relevant, you'll have to spend time typing out a new one.
• Re-send requests every three months. I find three months to be an appropriate amount of time to pass without coming across as pushy. That said, there are some people who have been on my "three month list" for years. I'm confident they'll eventually come around
• Leave recommendations for the people you are requesting recommendations from FIRST. This is much more polite and clears you of any guilt associated with re-sending requests to them every three months.

3.) Congratulate people on job changes

One of the main points of a social network like LinkedIn is the "social" component. LinkedIn enables you to stay loosely connected to a larger network, so why not take advantage of it. If you see a colleague who has just changed positions, sent them a congratulatory message via LinkedIn. Remember to make it genuine. Disingenuous actions are IMO a misuse of the service and

4.) Support people who are unemployed

To be clear, I mean to say don't make mention of people being unemployed.

A lot of time I see people who I know are unemployed leave their previous employer listed as current. It may be disingenuous on their part or at least they can argue they didn't have the time to update it yet. But in the case that they just don't want to publicly announce their unemployment, it's probably best not to make public mention of it. Since there is no concept of a public wall (like Facebook) the only way to do this would be to post an update on your own profile which doesn't really make sense anyways. Otherwise you may be thinking about sending them a private message however, this may just come across as patronizing unless you can offer them something of value like a job referral.

TLDR; tread lightly on this topic. Unemployment is serious and people can be sensitive about it.

5.) Reach out to old contacts every once in a while

This is a better way to resolve the previous bullet point issue. It only takes a little thought and effort to ask how someone is doing. Again, you want to take advantage of the social benefits the network provides you thus enriching your network. You may find out someone is unemployed this way. Then by chance if you're approached about a position, then you'll have someone to refer. This cycle is cumulative — the more people you have to refer, the more you will be asked for referrals — and the more people will think to ask you to refer them.

This is the foundation of the professional network effect. Malcolm Gladwell calls these types of people "Connectors" in his book The Tipping Point.

6.) Pay attention to who views your profile

This is sort of tied to the previous bullet point. If you see someone checking out your profile who you haven't spoken to in a while, it may be a good time to reach out to them. They may subconsciously feel like it's less of an out of the blue message (they might also feel like you're spying on them though so be especially careful to make sure your message couldn't be construed as spam).

7.) Answer questions, Join groups, Run a poll

LinkedIn has done a great job to really leverage the network it has by providing mutually beneficial features for professionals. The person asking a question can expect to get a great response because the person asking has a great chance to wave their banner in public. For you who are looking to bolster the strength of your profile, answering questions positions you as an expert and draws more people to your profile. The same goes for participating in groups, and requesting user feedback via a poll.

To get to the Answers section click
More > Answers

Running a poll shows that you know have relevant and interesting questions to ask. If you get a big response, then everyone who responds will see the level of your influence. Polls can have the opposite effect though if you don't have a network, then everyone will see that you don't have a network and be less likely to respond or think of you as a less influential person. There's a bit of chicken and egg going on here so the best chance you have with polls is to make sure you have a strong network, and make sure you're not asking a dumbass question like "Which is better iPhone or Android?"

8.) Update your status with professional achievements

One thing I constantly see is good qualified people who are either afraid or embarrassed to talk about themselves. In fact a lot of people were brought up to think it's rude. I'm here to say the opposite — if you're proud of something, say something.

Tactful self promotion is a key to growing your network.

9.) Properly structure your employment history descriptions

Just like a resume, you don't want to make yours difficult to read. Avoid lengthy descriptions that include every buzzword in the book. If you want to use buzzwords, put them in a buzzwords specific section titled "technologies used" or something relevant to your industry. When it comes to descriptions, keep them as short as possible (especially if you have many positions in your history), and focus on the highlights. Don't bother with listing trivial responsibilities that would at any position take zero time to learn.

Companies want to be able to gauge what value they would get by hiring you so explain your responsibilities in that context.

Here are some tips on structuring your descriptions:

• Add a link to something external. Don't waste the potential traffic by not linking to your blog. I have added my about.me profile and my blog is linked from there.
• Your Summary description should start with a concise, one line intro. "I'm a _______ who likes ________." I have two additional small paragraphs focusing on Specialties and Fluencies. Fluencies may include software you have experience with, spoken languages, or programming languages.

10.) Do good work

Above all else you need to do good work first. Doing good work and working hard will give you all the ammunition to execute all the strategies I've outlined.

Generally speaking, both setting goals and keeping a daily diary are nearly impossible to keep up for most people. I've designed this simple system so that I can do both and I've been able to (mostly) stick to it for the last 4 years.

Copy this goals template

The concept is simple. I first create a new note on my phone and paste in this template:

http://pastebin.com/xukrCvSh.

Define all goals for the year

At the top I add in my yearly goals broken down by category (e.g., business, personal, places to eat, etc.) and add one goal per line.

Business:
- meet 5 new clients
- hire one new employee
- win one award
- write 2 blog posts a month
- create content for FrontEndSchool.com

Personal:
- travel to Japan
- buy new computer speakers
- buy new sliverware

Restaurants to eat at:
- Buddakan
- The Breslin (suckling pig)

The beginning of the note is usually longer each year as I learn how to manage more goals.

Assign monthly goals

Next I break down each month with a heading.

January goal: eat at Buddakhan
1/1
1/2
1/3
1/4
...

This allows me to pull from my list on top what goals I think I should be able to complete in one month. It's this process of breaking down lofty goals into more granular pieces which gives me a good idea of where this year is headed. Also, this helps when goals are based on a scheduled rate (e.g., X restaurants/month).

Set smaller weekly goals

Next I break down the weeks so I can set smaller goals.

January goal: Eat at Buddakan, Finish all FES content for course 1
week 1: Write "Goal Setting Strategies" post
1/1
1/2
1/3
1/4
...

Record one major daily event

Each day I record the most significant thing that happened that day on one line. This forces me to 1) really focus on what's important, 2) keep the note clean looking for when I look back and review my history, and 3) be aware of whether I am progressing towards my weekly and monthly goals.

January goal: Eat at Buddakan
week 1: Write "Goal Setting Strategies" post
1/1 Watched Sherlock BBC show
1/2 pediatrician appt.
1/3 FES content
1/4 lunch at Parish Hall
...

Summary

Following this process is un-intimidating enough to prevent you from giving up. Like I said I've kept it up for 4 years already. The simplicity of the design allows me to comfortably skip a day (or even a week) and still be able to come back later and remember what I did each day. Also, the phone is always in your pocket, by your bedside, etc. so you don't have the excuse that it's too much effort to open a physical journal or sit in front of a computer. I find myself filling out the journal at night in bed most times when I'm thinking about what I did that day and what I'm going to do tomorrow.

Because I don't keep it updated every-single-day, I have changed my behavior by leaving clues for myself via things like checking into FourSquare more, being more active on Twitter, and scheduling things on Google Calendar religiously. This way I can retrace my steps when I can't remember what happened on a particular day.

One final note is that I didn't anticipate the value I get from looking back at my year and realizing how far I've progressed. You would be surprised at how fast you forget the events in your life, but when you write them down you effectively get to live them over each time to you look back.

Here's the full 2013 Goals Template with month and week headings : http://pastebin.com/eGHrq4aP

I hope some people find this helpful. Please leave a comment if you have a simple strategy for managing your goals.

Add this to your ~/.vimrc file:

syntax on

If you do not have a ~/.vimrc file, just create one:

vim ~/.vimrc

VIM looks here for configuration instructions before starting.

This solution is meant to avoid having to type ':syntax on' every time you open VIM.

In case you're not familiar with 'syntax: on' is basically enables smart syntax highlighting/coloring.

• See which files need to be merged

After committing changes, pulling, and finding conflicts, I want to be able to see which files are on deck to be merged before typing hg merge.

hg merge -Pv

---

• View conflicted files on merge conflict

After merging conflicted files, I want to view the merged files so as to be able to hg resolve them individually.

hg resolve -l

Now to mark resolved conflicts:

hg resolve -m filename

---

• Show change history for one file

I want to choose from a previous revision for comparison with the current revision.

reference

hg log filename

---

• Compare file with pervious revision

reference

hg diff -r 10 -r 20 filename

---

• Restore files to their checked out state

hg revert filename

This is it for me for now. If I think of any in the future I will add them. Feel free to make suggestions as well.

Positioning

Default Positioning

By default every element is set to position: static;. In CSS-land this stupidly means your element hasn't been positioned. Maybe it's better to think of it as meaning that you just haven't applied a non-default position yet. Why is that important? - because your element needs to be positioned to do almost anything important with it (e.g., adding width, height, or moving left, right, up, or down).

Note: The only position values we'll deal with are relative & absolute. This should make it easy to remember. You can check out the other possible values here.

Relative vs. Absolute Positioning

Here are three rules to remember with positioning:

1. "relative" means "relative to where the element lies naturally in the document flow"
2. "absolute" means any CSS values given to top, right, bottom, & left will be made "from the bounds of the closest positioned parent
3. setting position: absolute removes the element from the document flow causing subsequent content to take its place.

Once you've applied a relative or absolute position value, you can begin moving it around using the CSS top, left, right, & bottom.

In the left example applying a relative position, with top & left offset values causes it to move 20px from the top and from the right of its natural position (without breaking the layout of surrounding elements).

In the right example applying an absolute position causes img #3 to move in to the left taking the place of img #2 which is now positioned 20px from the top and left of the closest positioned parent (which we're assuming is either a relatively positioned div or the body).

If you're still having trouble with this concept, I found a pretty good tutorial here: Learn CSS Positioning in Ten Steps.

Floating

The idea of floating is directly related to an element's display value (i.e., inline or block). Block level elements (e.g., div, p, ul, li) naturally occupy 100% of the width in the document flow.

CSS:

div.block_example ul { list-style: none; }
div.block_example li { border: 1px solid red; }

HTML:

<div class="block_example">
  <ul>
    <li>item 1 isn't floated</li>
    <li>item 2 isn't floated</li>
    <li>item 3 isn't floated</li>
  </ul>
</div>

Example:

Conversely, inline elements only take up the width of the element (e.g., img, span).

CSS:

div.span_example { background: #ccc; }
div.span_example span { background: #aaa; }

HTML:

<div class="span_example">
  <span>this is a span</span>
  <span>this is a span</span>
  <span>this is a span</span>
</div>

Example:

Floating a block element basically forces it to shrink back to only the width it needs. The "width it needs" depends on either an explicit width set or the width of its contents. Floating also causes the following elements to wrap around the floated element, causing them to appear as if they were inline. Here is the list item example above with each item floated left.

CSS:

.float_left { float: left; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_left">item 1 is floated left</li>
    <li class="float_left">item 2 is floated left</li>
    <li class="float_left">item 3 is floated left</li>
  </ul>
</div>

Example:

The options for the float property are left, right, none (default), & inherit. Floating an item to the right simply aligns the floated element to the right-most boundary of its containing element.

CSS:

.float_right { float: right; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_right">item 1 is floated right</li>
    <li class="float_right">item 2 is floated right</li>
    <li class="float_right">item 3 is floated right</li>
  </ul>
</div>

Example:

Clearing

"Elements after the floating element will flow around it. To avoid this, use the clear property." - http://www.w3schools.com/css/css_float.asp

Think of clearing as a way to "break out of the float". Clearing allows an element to avoid the wrap-around caused by a floated element before it.

Here is the floated list-item example with one cleared element.

CSS:

.float_left { float: left; }
.clear_left { clear: left; }

HTML:

<div class="block_example">
  <ul>
    <li class="float_left">item 1 is floated left</li>
    <li class="float_left">item 2 is floated left</li>
    <li class="float_left clear_left">item 3 is floated left</li>
  </ul>
</div>

Example:

The options for the clear property are left, right, both, none (default), & inherit.

The concept of clearing either left or right means specifically that an element set to clear left will get rendered on a new line after any items before it that are set to float left. Conversely, an element set to clear right will get rendered on a new line after any items before it that are set to float right. You may have guessed that an element set to clear both will get rendered on a new line after elements that are floated either left or right. See the illustration below for an example.

CSS Clear Both

In Closing

Understanding these three concepts of positioning, floating, and clearing is essential for applying structure to your website. You can find additional resources on a presentation I made for my Web Design 1 class at Parsons - Adding Structure with CSS.

If you have any more questions or need clarification on any of these concepts please let me know and I'll be happy to help.

Thanks for reading!

Related Books

Before getting too excited about hand-coding up a storm, I want to point out a few best practices for lessening your workload. There are two things I would recommend doing. These are to 1) use a CSS reset, and 2) use a CSS framework. As I will soon elaborate on, a reset file removes default browser CSS styles, readying your canvas for pixel-perfect design. Additionally, a CSS framework will have already addressed a number of common needs in many websites. I will contrast and compare several of the available frameworks.

Resets

If you are not already aware, each browser actually applies a whole bunch of default CSS to your HTML, even if you didn't write any CSS. This is why elements like h1, h2, h3, h4, etc. have different sizes. These are the default browser styles, and they are troublesome because they are different across browsers.

Imagine trying to create a pixel perfect design, but you can't rely on having consistent margins, padding, etc. This is the problem a CSS reset solves. A CSS reset is simply a CSS file which includes a collection of rules designed to remove all the default browser styles. Many reset files also provide additional helpful features like a .clearfix rule (which I will explain later).

I recommend using the Normalize.css file. It is the reset file included in the HTML5 Boilerplate which has become somewhat of a standard starting point for many developers.

Normalize.css
HTML5 Boilerplate

All you need to do is click the 'Download' button on the home page, and copy/paste the text into a new file on your server. Make sure you include the file before any other styles to prevent specificity conflicts.

Grid Frameworks

Frameworks are much more advanced than a simple reset file. Due to the overwhelming number of CSS frameworks available, it is likely you can find one that suits you. A couple of years ago, I drafted an article comparing the top 3 CSS frameworks since there were only a few notable ones at the time. Since then, the number of frameworks has exploded and especially so since the advent of the tablet era. Many frameworks now include support for responsive design and mobile friendly layouts (which I think is necessary). Also, note that when I say "framework" I mean "grid framework" meaning, one which assists with implementing grid-based designs.

I recently went through a round of reviewing available CSS frameworks to use on a new project and landed on one I hadn't used before: The Semantic Grid System. This framework supported nearly all of our needs: fixed layouts, fluid layouts, max-width, nested columns, responsive design (there are examples for each of those on the site's home page). Also, it runs with SCSS (see below), which we had also chosen to use.

Other available grid frameworks:

The Semantic Grid System
960.gs
adapt.960.gs
Blueprint
Golden Grid System

LESS CSS

LESS CSS is JavaScript utility that allows you to write more concise CSS. A simple example will suffice as a convincing reason to use it.

#container {
  color: red;
}

#container.left .content {
  text-align: left;
}

#container.right .content {
  text-align: right;
}

#container .content span {
  padding: 10px;
}

#container .content span a {
  text-decoration: none
}

Original CSS

#container {
  color: red;
  &.left {
    text-align: left;
  }
  &.right {
    text-align: right;
  }
  .content span {
    padding: 10px;
    a {
      text-decoration: none;
    }
  }
}

LESS CSS

In my opinion, the biggest benefit from a CSS extension script like LESS is the ability to nest rules. As stated on the website, there are also a few other super powerful features such as variables, mixins, operations, and functions. All of which ultimately allow you to actually write less code.

I almost never start a project without choosing either SASS or LESS. There's a good article comparing the two here: An Introduction To LESS, And Comparison To Sass.

Now on to Part 2...

I originally intended to cover positioning, floating, and clearing in this post but it turned out to be a bit too long for my taste.

So, I've simply moved the next section into a post of its own:
Learning Web Design: Adding Structure with CSS using Positioning, Floating, & Clearing.

Related Books

Getting started with Git

These are the absolute most common commands you'll use with Git. I've listed them in the order that you'd usually use them.

Step 1 - Clone a Git repository

What this means is that you are copying someone else's repository down to your computer. This is fundamental to the way Git works. Each time a Git repository is cloned, literally the entire repository including all change history is copied to your computer. This is why it's referred to as "distributed source control".

git clone username@yourhost.com:path/to/repo/repo-name.git

After you have cloned the repo, you need to cd into the repo folder

cd repo-name

Step 2 - Save your changes

Making and saving changes to your repo is a three step process. then.

First you need to edit the file(s) and save them. Next, to see which edited files are ready for add/commit/pushing, you check your repository status.

git status

Next, you need to add it (a.k.a. "stage" it)

git add .

You can also add individual files by using the filename instead of the "."

git add filename.ext

Next, commit the staged changes to your local repository copy

git commit -m "Made XYZ changes"

The -m flag indicates that you want to add a commit message, which goes inside quotes

Lastly, since you have so far only been committing changes to the repository on your local computer, you'll need to push all those commits back up to the master repository.

git push

It's important to understand these fundamental concepts of Git before getting started. However, don't be afraid/shy/embarrassed to ask coworkers, or even the community (i.e., this blog) for help. Things can certainly get more complex than these few commands. Fortunately, there is a user-friendly-ish Git manual to help if you can't find a live person.

Merging conflicts

If get the message after trying to pull "Automatic merge failed; fix conflicts and then commit the result.", use this to launch your mergetool

git mergetool

Merging branches

In this scenario imagine you've created a branch locally to work in isolation and you want to merge your changes back into the master branch. What you need to to is simply checkout the branch you want to merge your changes into. Then run git merge to define which branch to merge into the branch you just checked out.

git checkout master
git merge branchname

More reading

Add color to UI

git config color.ui true

Diff files against head/remote/origin/branch/etc.

For comparing a local file against the latest in the repository (source)

git difftool HEAD~50 path/to/file

Get info about your repository

This is where you can find out information about your repository including branch and origin settings.

vim .git/config

Checkout a tracked remote branch

Remember to run git fetch first or you might get this error: "fatal: git checkout: updating paths is incompatible with switching branches". Using -b will create a new branch named "haml" linked to the remote branch of the same name.
additional reading [gitready.com]

git fetch
git checkout --track -b haml origin/haml

http://stackoverflow.com/questions/424071/list-all-the-files-for-a-commit-in-git

Show all remote branches available for checkout

This is useful for finding out the exact branch name when checking out a new remote branch.
additional reading [gitready.com]

git remote show origin

View unpushed Git Commits

This is the only way I know of seeing the difference in state between your local repo and the remote. If you want to see the files of each Git commit, check out the command below.

git log origin/master..HEAD

Show files changed in a Git commit

Replace the string below (eeeb63e29ff62c0f06bdcc05588e941a2ff3467d) with your own commit id.

git show eeeb63e29ff62c0f06bdcc05588e94

also, if you want to only see a list of file names for each commit:

git show --pretty="format:" --name-only eeeb63e29ff62c0f06bdcc05588e94

At the end of this article you should have at least an elementary understanding of:

• What is JavaScript
• How to use JavaScript on your website
• Why you should just use jQuery

What is JavaScript?

JavaScript is an object-oriented, interpreted programming language that runs in the browser^[1]. It contains all the standard features of a programming language such as variables, functions, if/then conditionals, loops, etc.

There are many unique parts of JavaScript (good parts and bad parts). The bad parts mostly are at fault for its old reputation of being an amateur, and annoying toy language. To be sure, JavaScript can be very elegant and quite capable.

One interesting component of the language that you'll need to know is that it relies heavily on the environment in which it runs. I mentioned it "runs in the browser" which means, the browser parses it by opening your JavaScript like a text file, and translating it line by line into instructions that do things on the page like animations and rollovers. This is interesting because JavaScript itself can't do much without the presence of the Document Object Model (DOM). The DOM is the object representation of the HTML file the browser had to parse before executing your JavaScript.

JavaScript's interactions with the DOM are event-based, which means that your script can listen to what the browser is doing (and also what the user is doing on the browser, like clicking links, etc.)

An example of the event-based nature of JavaScript is how most well-constructed scripts will wait until the HTML has been fully parsed and the DOM has been fully built before running. This prevents errors like if your script depends on a certain part of the DOM being available (like a footer) and it has not been built at the time the script runs because you put your script in the <head> section of your site (before that footer loaded).

The code might look something like this:

<script>
window.onload = function () {
  alert('page is loaded!');
};
</script>

Waiting until the page loads to execute JavaScript.

What's happening is that window is referring to the page's root object. The root object is always the "window" object, and everything is a child of it. When the browser finishes loading the window object, it calls the onload method which we have assigned our function to.

In plan English our script reads like this:

"When the window finishes loading, run this function."

How to use JavaScript on your website?

JavaScript can be included on your website in several ways.

It can be included via an external file,

<script type='text/javascript' src='scriptName.js'></script>

or by an embedded script block,

<script type='text/javascript'>
//...script body here...
</script>

or attached to HTML elements via inline event handlers,

<a href='link.html' onclick='alert("hello!");return false;'></a>

or injected into the href attribute of an anchor tag,

<a href='javascript:alert("oh yeah");return false;'></a>

It is important to understand how the browser parses JavaScript in order to know how to include it correctly. As soon as the browser parser encounters any JavaScript, everything else stops until it is finished executing. This means if you include an external file at the top of the HTML document (e.g., in the head), none of the rest of the page will finish loading and you will see a blank white page until it is finished. This could potentially end up being quite a long time depending on how many scripts you've included, and how large the files are.

The best practice is based both on form and function. By 'form', I mean that the user is primarily concerned with the time it takes from pressing 'enter' and being able to interact with the page. This is referred to as 'time to interaction.' If we don't block the page from rendering by putting script includes at the top of the page, the page will both appear to load more quickly and be partially interactive quicker. By 'function', I mean that if a script relies on certain parts of the HTML to be available, and at the time the script executes they have not loaded and thus are not available, the script will fail.

Because of those two reasons, the best practice for including JavaScript on your site is to simply include it at the bottom of the page immediately before the </body> tag.

Why you should just use jQuery

JavaScript is itself an insanely confusing and technically daunting language. There are many ways to perform the same task, and there are components of the language that are just plain dangerous (e.g., eval). Because of these things, it turns most traditional developers away. Not to mention the myriad variations of browser implementations of the specification.

Fortunately, jQuery alleviates most if not all of these problems and more. jQuery is a library written in JavaScript that makes JavaScript infinitely easier and more enjoyable to write. Let's look at an example.

Core JavaScript:

var header = document.getElementById('header');

...vs. jQuery:

var header = $('#header');

Not impressed? How about another example.

Core JavaScript:

var header = document.getElementById('header');

for (var x = 100; x--;) {
  header.setAttribute('opacity', x/100);
}

...vs. jQuery:

$('#header').fadeOut();

Yea, I thought that last one would catch your eye - and that's a super simple example. Don't even get me started about doing event delegation or cross browser Ajax calls in core JavaScript. jQuery reduces the amount of code you have to write to almost nothing. The caveat here is that you don't have to understand what's happening behind the scenes in order to use jQuery.

So why would I recommend learning JavaScript by using a library that you can use without having to actually understand core JavaScript? Because it lowers the barrier to entry for inexperienced developers and makes using JavaScript approachable and fun. From there on in hopefully you get hooked and then don't realize what a slippery slope you've landed on before it's too late.

Seriously though, I don't like unapproachable languages and I found myself more interested in learning about core JavaScript once I felt comfortable with jQuery. If that method doesn't work for you, then by all means dive head first into the 624,000,000 Google search results for "javascript."

In closing

To be sure, there is a lot to learn about the language including syntax, data types, scoping, events, the DOM API and many more. I will be writing more articles about JavaScript and jQuery but for the time being, I would recommend getting acquainted with the three links listed below.

Thanks for reading!

Helpful Articles

Douglas Crockford's Javascript
Quirksmode - General [JavaScript] Introduction
w3schools.com - JavaScript Introduction

Related Books

[1] JavaScript can also be run on the server.

1. How to connect CSS to HTML elements
2. Specificity (order of importance)
3. The box model

How to connect CSS to HTML elements

There are three ways to match a CSS rule to an HTML element. They are by tag, class, or id. Here is an example of each.

<div>this text will be blue</div>
<div class="mySpecialClass">this text will be green</div>
<div id="myUniqueId">this class will be red</div>


<style>
/* tag selector */
div {
  color: blue;
}

/* class selector */
div.mySpecialClass {
  color: green;
}

/* id selector */
div\#myUniqueId {
  color: red;
}
</style>

Using a tag, class, and id selector

The major point here is how you identify elements in CSS. A rule defined for "div" will apply that style to all divs. A rule defined with "." (period) will apply that rule to all HTML elements that include that value in their class attribute. The same is for "#" (pound) which applys to HTML elements with the corresponding id attribute.

One important thing to remember is id's are unique identifiers and so there can only be one per page. You may however, use the same class multiple times per page. Elements can also have multiple classes per element (e.g., <div class="first orange grid">>).

Chaining

A powerful feature of CSS is the ability to chain multiple selectors together. By doing this you can match different elements based on their hierarchical order in the HTML. For example, check out the following rules and how they are applied.

div div { color: red; }
div .someClass { color: red; }
div\#someID {color: red; }

Showing simple parent / child relationships

NOTICE the space between the selectors. This indicates that the latter selector is a child of the former. NOT including a space indicates that the selectors apply to the same element. For example, the following example shows a CSS rule that matches the given HTML snippet using a tag, class, AND id selector.

<div id="myOneAndOnly" class="headline">Hold me</div>



div\#myOneAndOnly.headline {
  color: red;
}

Chaining a tag, id, and class selector

Specificity

Now that you know how ids and classes work, you'll need to understand how the browser determines which rules are more important than others. This level of importance given to each selector is called "specificity". By "specificity" we mean literally "how specifically a CSS rule can target HTML elements." The easiest way to think about this is to consider how many elements a single selector will effect.

• a tag selector will target every single tag (a LOT of elements)
• a class selector will target only a subset of tags (quite a few less)
• an id selector will only target one element per page (exactly one)

Let's start with the basic premise that that the lowest level of specificity is order of appearance. This means if we have multiple rules for the same element, only the last one will be applied.

<body>
<div class="things_I_love" id="NewYork" >This text will be red</div>
</body>


div { color: green; }
div { color: black; }
div { color: red; } /* <-- this rule wins because it's last */

Lowest specificity: order of appearance

Next up the specificity ladder are tags, then classes, then ids in order of increasing specificity. This means, if we take the previous example, and we want to make the text green, we just need to increase the specificity of that rule. We can do this by adding more selectors or by using a different selector with higher specificity.

<body>
<div class="things_I_love" id="NewYork">This text will be green</div>
</body>


body div { color: green; } /* <-- this rule wins */
div { color: black; }
div { color: red; }

Level 1 specificity = tag selectors

Calculating specificity

Another way to quickly figure out how your CSS is going to get parsed is to calculate a specificity score. Following the math in this graphic should cover you for about 99% of the time. Basically what we're doing is applying an order of magnitude multiplier to each of the three selectors. This is because for each of the three tiers: tag, class, & id, even using one selector from a higher tier will trump any number of lower tier selectors. For example, you could have 50 class selectors trying to set your text color to red, but if another rule uses even one id selector to set the color to blue, blue will win.

CSS Specificity Calculation Diagram

More resources explaining specificity

If you're still stumped, here are some other resources to try and explain this concept differently (one example uses Star Wars characters to explain the ranking!). Also, you'll find that I drew a lot of inspiration from these posts, especially the one from css-tricks. My diagram is essentially a simplified version of theirs.

• Specifics on CSS Specificity
• CSS Specificity: Things You Should Know
• Quick Tip: Understanding CSS Specificity
• Calculating a selector's specificity (W3C)

The Box Model

This diagram illustrates the relationship between the primary CSS properties of all HTML elements. It is important to understand this model since you will regularly need to calculate how much total space your elements can take up on the page. For instance, in the element illustrated below if the width was set to 300px, and padding, border, and width were all each 10px, the total width taken up by the element would be 360px (300 + (10 * 2) + (10 * 2) + (10 * 2)).

CSS Box Model Diagram

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. - W3C

Before beginning to code a website, we need visually break apart the design into rectangular sections. This process used to be done in the context of an HTML table since CSS support wasn't widespread among browsers at the time. Nowadays, we can think in the context of pure CSS based layouts. Ultimately this gives us more freedom over the layout while retaining the semantic value of the HTML document.

If we take this website, we can clearly see how the sections break down into rectangles. Each of the rectangles will follow the rules of the box model.

CSS Layout illustrating use of the box model

In the next post, I will explain how we use positioning and floats to bring structure to our markup.

In Conclusion

If you have managed to follow along until this point, congratulations! You have a good enough understanding of CSS to move on to bigger and better things. Yes I admit it hasn't been too sexy so far but trust me once we get to positioning, floats, and cross-browser quirks, things are really going to start heating up

Helpful Articles

20 Websites To Help You Learn and Master CSS
meyerweb.com

Related Books

You may follow along via the course website:
http://dennisplucinik.github.com/Parsons

You can access the syllabus, all the slides and additional resources as well.

Topics I Will Cover

Here is a short synopsis of the topics I'll be covering in the class in order of occurrence.

• History of the web and HTML
• Website fundamentals
• HTML basics
• CSS basics
• JavaScript (i.e., jQuery) basics
• HTML5
• CSS3
• Intermediate JavaScript
• PHP & MySQL

Each week I assign a few articles to read and an activity (usually a tutorial or simple task related to the week's content). I also briefly recap the previous week's reading assignment at the beginning of each class. In addition to the in-class discussion I plan to write a more well thought out response of my own to each reading here on this blog. So to my friends who want to participate in this discussion outside of class, this is the appropriate venue. The class discussion will remain private although any of my students are welcome to engage with me here as well.

Hopefully my conversations here will help spark new ideas in class and vice versa. If you have any thoughts please let me know in the comments below.

Also, if you want real time updates when I post new articles, follow me on Twitter at @dennisplucinik.

Thanks for reading!