if you use the $ sign just wrap your code in this:

jQuery(document).ready(function($) {
    // $() will work as an alias for jQuery() inside of this function
});

Here is a great little website to save some time when creating dummy content for a page.

html-ipsum.com

<article> Defines an article.
<aside> Defines content aside from the page content
<canvas> Defines graphics
<command> Defines a command button
<datalist> Defines a list of options for input values
<details> Defines details of a document
<figcaption> Defines the caption of a figure
<figure> Defines a group of media content
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<nav> Defines navigation section
<progress> Defines progress of a task of any kind
<section> Defines a section
<summary> Defines the header of a “detail” element
<time> Defines a date/time
<wbr> Defines a possible line-break

Media Elements
<audio> Defines sound content
<video> Defines a video
<source> Defines media resources
<embed> Defines interactive content or plugins

Most people automatically think of the great possibilities for mobile devices, but it is also a great feature for someone with a big monitor. Just think of all the space that normally goes to waste!

So how does it work? Well really easily actually. Lets image for the sake of simplicity that you want different  h1 styles for different screen sizes. All you have do is specify the screen size and then inside the media query tag just put you normal css code.

Oh, before I get to the media query code: another useful bit of code for getting rid of the zooming on mobile devices you are optimizing for is this.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Just paste it in the header section. I have not experienced any difficulties with it on a normal PC/Laptop.
So on to the media query:

@media screen and (max-width: 1024px){
	#your-div-id h1{color:#CCC}
        #your-div-id h2{color:#CC0}
 }
 
@media screen and (max-width: 800px){
	#your-div-id h1{color:#C00}
        #your-div-id h2{color:#C33}
 }

For your convenience I have prepared a few media queries for common screen sizes to copy and paste

@media screen and (max-width: 1920px){}
@media screen and (max-width: 1680px){}
@media screen and (max-width: 1600px){}
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1366px){}
@media screen and (max-width: 1280px){}
@media screen and (max-width: 1152px){}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 800px){}
@media screen and (max-width: 640px){}
@media screen and (max-width: 480px){}
@media screen and (max-width: 400px){}
@media screen and (max-width: 320px){}

Terminologies that I will use
The server with the files you want to back up : live-server
The server you want to back-up to : backup-server

Assumptions
You have SSH access to the remote server
Your username for the live-server is USERNAME

OK so lets get going

1.Settting up the passwordless SSH login

Log into your live-server via the terminal (I use putty for this) and type

ssh-keygen -t dsa

This will produce a line saying something like “Generating public/private dsa key pair.” followed by “Enter file in which to save the key: (.ssh/id_dsa)”.

Press enter. It will then ask for a passphrase and to repeat the passphrase. Leave this blank by just pressing enter twice.

It will create a directory called .ssh and 2 files inside id_dsa and id_dsa.pub. NEVER let your id_dsa file get public. That will give free reign to your site. To help prevent this type

cd .ssh
 and
 chmod 600 id_dsa

You public keys are now created. The next step it to copy the id_dsa.pub file to the backup-server. To do this type

scp id_dsa.pub USERNAME@live-server:

(note the “:” ) and enter the password for the live-server. This copies the id_dsa.pub file to the live-server. Now log into the live-server by typing

ssh live-server -l USERNAME

There should be an id_dsa.pub in your home directory. You should append it to the last line of the file authorized_keys2 in your .ssh/ directory. Dont worry if you dont have an authorized_keys2 fíle, just type:

cat id_dsa.pub >> ./.ssh/authorized_keys2

The public key is now set up. To test if it works type

logout

You are now back on the backup-server. Now type

ssh live-server -l USERNAME

You should have logged into the live-server without having to type your password.

The steps without the explanations

backup-server: ssh-keygen -t dsa
backup-server: cd .ssh
backup-server: chmod 600 id_dsa
backup-server: scp id_dsa.pub USERNAME@live-server:
backup-server: ssh live-server -l USERNAME
live-server : cat id_dsa.pub >> ./.ssh/authorized_keys2
live-server : logout
backup-server: ssh live-server -l USERNAME

2. The backup script

I sometimes run the backup-script from a php file using the shell_exec() command. This gives me the flexibilty to to do some other things at the same time. For example I can make 7 folders and make a weeks backup. Or run the DB backup at the same time. That bit is up to you. Anyway here is the steps.

I assume that you want to make the backup in a folder called backupdir. So in the root on the backup-server type

mkdir backupdir

Now the actuell sync command. This will start the backup! If you want to run this from a shell script put it into the script file. If you want to run it form a php file save it in the with the shell_exec()

rsync -avz -e ssh USERNAME@live-server:/full/path/to/dir/ /full/path/backupdir/

If you don’t know the /full/path/ you can also type pwd (means “print working directory”)

If you want to backup your DB at the same type use the following. It can also go into shell_exec()

ssh USERNAME@liveserver 'mysqldump -q -u DB_USER --password=DB_PASS DB_NAME -h DB_HOST' > /full/path/backupdir/backup.sql

3. Automation

Now you just need to automate it with crontab, but that is not disscussed in this tutorial.
Here a few links to get started:

aota.net

All you have to do is install the plugin and the add

<pre lang="html"></pre>

around the code you want to highlight.
Want to show line numbers show you can explain your code, or do you already have html entities escaped… No problem

1

<pre lang="html" line="1" escaped="true" ></pre>

First you have to define your font using @font-face like so

@font-face {
 font-family: FontName;
 src: url('fonts/FontName.otf');
 }

and then you just use it like any other font for example

font-family:FontName, Arial, Verdana, Helvetica, sans-serif;

One thing to remember though is to check if you are allowed to embed the font.