Instructor

• Dan Hitchcock Vaughan

The Objectives of the Course

• To understand basic to intermediate level html and css and how they work together.

Course Structure

• The course will include a weekly mixture of lessons with exercises.
• All exercises are due one week after the last day of the course.
  • You do NOT need to submit work every week. I am doing this to accommodate the often busy and ever-changing schedules that many students have.
  • Last Day of the course: Tuesday, June 3, 2014.
  • All assignments are due one week later, by midnight, the night of Tuesday, June 10, 2014. HOWEVER that deadline is now extended until midnight, June 17, 2014, at 11:55 PM Pacific Time.

Before You Start This Course

• Windows and Mac users are all welcome to take this course.
• You must be familiar with folder and file management:
  • You must be able to create, name and locate folders and files.
  • This may seem obvious, yet I have had an occasional students that have done nothing with a computer other than being on the web.
• Reliable internet access.
  • A broadband connection is useful because most of the material is video
• Browsers:
  • In my videos I do not mention Chrome as being a mainstream browser, which it has certainly become since I created the videos. Please feel free to use it.
  • Important!
    Recent versions of both Chrome & Firefox require this in order to see a page's html source code:
    Right click on the web page (but not on an image) → View Page Source

Class Availability

• I will send an email to everyone when each week's class material is available. It will be made available every week on or about Wednesday.

Email

• When you email me or send me assignments, please follow these instructions.
• I strive to return email within two to three business days if possible.
  • Occasionally, it might take longer.
• It is not necessary to wait for me to grade your homework before you proceed to other work when it becomes available.

Exercise Files

Files sent from me to you:

• If there are exercises that you need files from me for, a link will be provided within the exercise or elsewhere.
• The html exercises that you do will sometimes require you to save html code from a web page. You will use a simple method which you will learn about.

Files sent from you to me:

• Follow the email instructions in the email section above.

You MUST check your work before sending it to me

• You must check your work in your browser before sending it to me. A tiny percentage of students have sent me work with glaring errors because they did not check it first themselves. I even had one student who kept sending me assignments that had no work done on them, sending them again and again, insisting that he/she did everything correctly and wanting me to figure out why it was happening. I take a dim view of this type of behavior!
• I might not give credit for assignments submitted if I think you have not checked your work first.

Naming the Files That You Send to Me

• It is very important that you follow the file naming guidelines (yes, I know that this is the same link as in the email section above).

Mac Users

• Very Important!
  • You will be using the Mac application TextEdit for much of this course.
  • You must change preferences in TextEdit
• Assignments are written for Windows, however I have done my best to make them usable by Mac users too.
• I have been using Macs at home for years. Mac users probably already know some of what I am about to tell you.
• During the videos I ask students to use Windows' Notepad's File menu's Save As... option to save their html file.
  • This option is not in TextEdit.
  • Instead, use the Save command from the File menu and the dialog that opens the first time you save a file has a Save As field for you to enter the file name, at which point you add the .html file extension to the file name you provide.
  • Subsequently, if you want to do a Save As, you can use TextEdit's File > Duplicate command, which will immediately create a copy of the existing file in a mode where the file name is highlighted in the title bar so that you can provide it with a new name. Or use Shift-Command-S which will do the same thing as Duplicate.
• At times, instructions will call for the use of the Ctrl button as a "modifier key" for a keyboard shortcut. For example, using Ctrl-V to paste. In such cases where you are instructed to use the Ctrl button, you need to instead use Command button on the Mac - that's the button with the little apple on it and the "curly-cue" four cornered shape on it. Also, if you are asked to right-click on something to get the so-called contextual pop-up menu but you don't have a two or three button mouse, either get one (which is what I recommend) or use Control-Click instead.

Curly Quotes

• Please do not use curly quotes ( “  ” ) or curly apostrophes ( ’ ) in your html code. They often result in odd looking symbols. This can happen if you copy and paste text from, for example, Microsoft Word or other programs that use them. You need to use straight quotes ( " ) and straight apostrophes ( ' ).
  • This can also be a problem in Mac's TextEdit if you fail to follow the instructions for setting preferences provided above.
• Note: I used what are called special characters to show the curly quotes above - you will learn about special characters during the course.

Textbooks

• There are no required textbooks for this course.

Grading

• Your grade will be based 100% on the weekly assignments.

---

Schedule & Topics

Note:

• The schedule and topics are subject to change.
• The video length times shown in the course are in minutes and seconds.

Week 1:

• Course Intro
• Rules for email, file naming, and so forth.
• Preview of Cascading Style Sheets (CSS)
• HTML is for semantic meaning, CSS is for appearance
• The text editors you are required to use for this course.
• HTML file extensions: use .html
• http and what happens when you click on a link
• Creating an html file
• Lorem Ipsum generator
• Spaces and line breaks in code
• HTML elements and tag basics
• The following tags are covered:
  • title, p, br, h1-6, em, i, strong, b, sup, sub, small

Week 2:

• Basic structure tags: <html>, <head>, <body>
• lists: ordered, unordered, nested lists
• definition lists
• Attributes
• blockquote
• Special characters
• Basic table tags

Week 3:

• Link basics
• Absolute paths
• Site root relative paths
• Document relative paths
• Named anchors
• PDF and email links

Week 4:

• Image file types
• Compression
• Image tag and attributes
• Images as links
• Image map hot spots

Week 5:

• Forms
• Miscellaneous tags:
  • <hr>
  • <pre>
  • <code>
  • html comments
• iframes
• Server side includes
  • Including files
  • Including server data

Week 6:

• Intermediate Tables
• Media
• Deprecated Tags and Attributes
• The top of an html file, the following elements, their attributes and values in detail:
  • html tag and attributes
  • head
  • title
  • meta

Week 7:

• The top of an html file, the following elements, their attributes and values in detail:
  • DOCTYPE and quirks mode
  • script tag, adding JavaScript
  • link tag for favicons
• Intro to CSS
  • History of CSS & development
  • Power & benefits of CSS

Week 8:

• Browsers and CSS
• CSS Rule structure
• Selector basics
• Color
• Storing CSS

Week 9:

• NOTE!!!
  • Watch the videos, but do not do the exercise for:
  • J08
  • However, do all the other exercises for this week.
• Combining selectors
• Properties overview
• Inline and block tags.
• Text and fonts.
• Pseudo classes
• CSS units of measurement

Week 10:

• NOTE!!!
  • Watch the videos, but do not do any of the exercises for this week!
  Backgrounds
• Box Model
• Positioning
• Basic Structure & Document Flow
• Setting Documents Defaults, Creating a Wrapper
• Margin Collapse
• CSS Columns
• The Cascade
• Wrap up

© 2017 Dan Hitchcock Vaughan and licensors