Livereload with Chrome/Sublime Text 2

• shift+cmd+p and install livereload
• Install Chrome extension Livereload
• Go to chrome extension and tick Allow access to file URLs.
• Load your website in Chrome and enable livereload. Save html or css to see the website without refresh it.

Assignment 3 Solution

HTML Solution: assignemt3.html

CSS Solution: assignment3.css

Table

Table basics

table.html

table[border=1]>(tr>td*2)*2

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Attributes

width

<table border="1" width="30%">

<td align="left|center|right" valign="top|middle|bottom|baseline">Cell 1</td>

align="left|center|right" in HTML is the same as td{text-align:right;} But CSS has more effect over HTML.

valign="top|middle|bottom|baseline" in HTML is the same as td{vertical-align: top;}

<td align="right" valign="top">Cell 1</td>

colspan

Example 1

<table border="1">
  <tr>
    <td colspan="3">Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Example 2

<table border="1">
  <tr>
    <td colspan="2">Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

rowspan

<table border="1">
  <tr>
    <td rowspan="3">Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>

Pretty Table Examples

Table examples

Read more about Table Design

table generator

Validation

Validate your HTML at Markup Validation Service

Or you can validate your CSS at CSS Validation Service. Usually your text-editor will tell your mistakes.

Don't blindly follow it! Validation is to find out your mistakes. You don't need to be 100% right. It is a tool not a rule.

You can use File-upload or Direct input tab.

## Resets and Normalizing Popular Reset Style Sheet

HTML5 Reset Stylesheet

Eric Meyer

HTML5 Reset

HTML5 ★ BOILERPLATE

2012’s most popular CSS Reset scripts, all in one place

HTML

.wrap>header>h1{My Wesite}+nav>ul>li*3>a[href=#]

<!-- after header -->
.main>p{The body of my webiste.}

Copy/paste a reset.css from Eric Meyer. Make a link to css/reset.css and css/mystyle.css.

CSS

normalize CSS

Check out the demo.

normalize css Demo

Download

Layouts

CSS Layouts

Tutorial: Learn CSS Layout

Resource: CSS layouts

JQuery slideshow

jQuery Slideshow Plugins

• Download Nivo Slider

• Move downloaded file to Desktop.

• Create four place holder images with 600px x 300px. Move all images to nivo-slider/demo/images/

Get the websites from Day 5

• Change img to your images.

• Set .slider-wrapper to your image size. Nivo slider is set to flexbile by jQuery.

Example

{width: 700px;}

• Delete the link

Example

<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>

• You can add the followings to data-transition

Examples

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

• Adding captions

You can add captions in titles or add id. See the demo.

Another SlideShow/Lightbox

Coin Slider

30 Efficient jQuery Lightbox Plugins

Extra practice

More practice