Its 2 in the morning. Everyone else has gone home, and the boss expects to see the finished site presented tomorrow at 9AM. In reality, the most important skill for being successful at HTML and CSS is the ability to teach yourself, to answer your questions and debug your code using the internet and other people's property as your launch pad.

This workshop approaches the learning of HTML and CSS as a self-run process. In each session, I will lead the participants as they teach themselves the specific skills I have outlined as necessary for that session. In this way, I teach 'em to fish rather than just hand 'em a dead one, as the saying goes.

Session 1: Structure and Style

Tuesday, April 8, 12-1pm

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

Code Covered in class

<html>
<head>
<title>This is the title</title>
</head>
<body>
<a href="link.html">THIS IS THE LINKED PAGE!!!!!</a>
</body>
</html>

Session 2: Attaching Styles

Thursday, April 10, 9-10AM

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

HTML Covered in Class

session2.html:

<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p>
Hello there here is some text just so we can have some.
</p>
If I could think of something intelligent to say, I would.
<p />
How about "Even a Mud Puddle reflects the brilliance of the moon."

<a href="link.html">THIS IS THE LINKED PAGE!!!!!</a>

</body>
</html>

CSS Covered in Class

styles.css:

body {
font-family:arial;
font-size:24px;
color:red;
}

Session 3: Headings

Tuesday, April 15, 12-1pm

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

HTML Covered in Class

session3.html:

<html>
<head>
<title>This is the title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<p>
Hello there here is some text just so we can have some.
</p>
If I could think of something intelligent to say, I would.
<p />
How about "Even a Mud Puddle reflects the brilliance of the moon."

<a href="link.html">THIS IS THE LINKED PAGE!!!!!</a>

<h1>This is a first level heading</h1>
And this is some normal text
<h2>This is a second level heading</h2>
Notice how headings automatically add space abocve and below </body>
</html>

CSS Covered in Class

styles.css:

body {
font-family:arial;
font-size:24px;
color:red;
}

h1 {
font-family:arial;
font-size:42px;
color:blue;
background-color:gray;
border-top:10px solid red;
}

Session 4: Structuring with DIVS

Thursday, April 17, 12-1pm

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

HTML covered in class

<html>
<head>
<title>The Title</title>
<link rel="stylesheet"

type="text/css" href="styles.css"

/>

</head>
<body>

<div id="content">

<h1>First level Heading</h1>

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit, sed

diam nonummy nibh euismod

tincidunt ut laoreet dolore magna

aliquam erat volutpat.

<p /> Ut wisi enim ad minim

veniam, quis nostrud exerci

tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea

commodo consequat. Duis autem vel

eum iriure dolor in hendrerit in

vulputate velit esse molestie

consequat, vel illum dolore eu

feugiat nulla facilisis at vero

eros et accumsan et iusto odio

dignissim qui blandit praesent

luptatum zzril delenit augue duis

dolore te feugait nulla facilisi.

</div>

<div id="nav">
<a href="linkedpage.html">this is

a link</a>
<br />
<a href="linkedpage.html">this is

a link</a>
<br />
<a

href="linkedpage.html">this is a

link</a>
</div>

</body> </html>

CSS covered in class

body {
font-family:arial;
font-size:24px;
color:red;
}

h1 {
font-family:arial;
font-size:42px;
color:black;
border-top:10px solid red;
}

|#nav {
position:absolute;
width:200px;
top:10px;
left:10px;
border:2px solid gray;
}

|#content {
position:absolute;
width:400px;
top:10px;
left:230px;
color:blue
}

Session 5: Structuring with span

Tuesday, April 22, 12-1pm

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

HTML Covered in class

<html>

<head>
<title>The Title</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<h1>First level Heading</h1>

<div id="content">
sdgg <span class="people">Charlie Brown</span> gsdgsdg sgdssdgg gsd gsd gsdgsdg sgdssdgg gsd gsd gsdgsdg sgdssdgg gsd gsd <span class="people">Caucau</span>gsdgsdg sgdssdgg gsd gsd gsdgsdg sgdssdgg gsd gsd gsdgsdg sgds
</div>

<div id="nav">
<a href="linkedpage.html">this is a link</a>
</div>

</body>
</html>

CSS covered in class

body {
font-family:arial;
font-size:24px;
color:red;
}

h1 {
font-family:arial;
font-size:42px;
color:blue;
background-color:gray;
border-top:10px solid red;
}

|#nav {
position:relative;
top:10px;
left:10px;
border:2px solid gray;
}

.people {
font-weight:bold;
}

At this stage, participants should have come to terms with the logistics of teaching themselves HTML and CSS with the web, so we will leave the code-learning to the individuals, and will cover more general concepts related to web design in class.

Session 6: User-focused content

Thursday, April 24, 12-1pm

Concepts (15 mins)

Application (30 mins)

Resources/Tips

Summary/Review (15 mins)

Homework

Session 7: Content-Categorization

Tuesday, April 29, 12-1pm

Review

Concepts (15 mins)

Application (30 mins)

Summary/Review (15 mins)

HTML Covered in Class

a:link {
color:green;
font-weight:bold;
}

a:visited {
color:gray;
font-weight:normal;
}

a:hover {
color:red;
}

Homework

Session 8: Usability

Thursday, May 1, 12-1pm

Concepts (15 mins)

Application/Summary/Review (45 mins)

Resources/Tips

CSS Covered in Class

a:link {
color:#00ff00;
font-weight:bold;
}

a:visited {
color:#cccccc;
font-weight:normal;
}

a:hover {
color:#ff0000;
}

Last edited on April 30, 2003 5:19 pm.