The schedule will
be updated with links to homework exercises and additional material as the
course progresses. The most current copy of this schedule can be found
www.billpegram.com.
| |
Week
| Class Topics
| Reading/Homework Due (more will be added
as course progresses)
|
| |
Week 1
8/26
Course Introduction |
|
Getting Started in Web Design (Chapter 1)
How the Web Works (Chapter 2)
Some Big Concepts You Need to Know (Chapter 3) |
| |
Week 2
9/2
HTML |
- starter.html - a file you can use as a start file for coding in this course
- making filename extensions visible: In Windows 10, click on the Folder icon in the task bar to open in File Explorer, then select "View" on the menu and check the box "File name extensions". For earlier Windows operating systems, do a search on this topic.
- Viewing the source code of a web page in a browser - Chrome or Firefox: Right-click in empty area of page (not over an image)> View page source. Edge: Right-click in page> View source
- File>Open in Browser (Ctrl O in any browser)
- Introduction to NotePad
- When you make a change in the file in the text editor, you must save the file and refresh/reload the page in the browser
- Showing files side by side in Windows
- Browsers ignore whitespace in file
- <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag
- naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently)
for pages
- <h1> ... <h6>, <p>, <br>, <hr>,
- Advantages of Notepad++ Over Notepad
- color coding (once you have saved it as .html or .htm)
- working files accessible from list at left
- line numbers
- tag and attribute suggestions
- "fold up" sections of code
- changes in code will be reflected in Live Preview without having to refresh/reload the page
- HTML comments <!-- -->
- Proper Nesting - e.g. <b><i></i></b> or <i><b></b></i>
- Indentation
- special entity characters (e.g. ) ,
- Validation
- Using myDrive as your webspace - myDrive instructions - put everything in a folder called public; the public folder must be part of the URL the user enters in the browser, thus users should not see the myDrive logo or the file manager
- more myDrive instructions (do not use the share or email alternatives described there)
- To upload your files, you can either use the myDrive file manager or use an FTP program: Windows: CoreFTP, FileZilla, or CyberDuck:
Mac: FileZilla, CyberDuck (all free download)
- FTP settings for myDrive
- host: mydrive.nvcc.edu
- username: your myNova username
- password: your myNova password
- Uploading a folder and its contents to myDrive - simplest way is to zip the folder (right-click on the folder, and choose Send To>compressed (zip) folder, then upload the zip file, select it, and click on Upzip button at the far right
- unordered lists
|
- Creating a Simple Page (Chapter 4)
- HTML Tutorial
- So You Want to Make a Website
- Creating Your First Web Page
- Naming Your Page
- Viewing Your Page in a Browser
- Revising Your Web Page
- Validation
-
W3Schools HTML Tutorial
- HTML Intro
- text editors and viewing your page in a browser
- HTML Basic Examples
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- FTP to Server
- HTML 5 Tags and Attribute reference (from W3C Schools) (for reference)
|
| |
Week 3
9/9
HTML
|
|
|
| |
Week 4
9/16
|
- Directory Browsing, index pages
- Setting the starting folder (local and remote) in CoreFTP (click the Advanced button)
- images - img tag, height, width, and alt attributes
- Avoid deep linking of images
- Making images into links
- gif, jpg, png
|
|
| |
Week 5
9/23
CSS
|
- www.csszengarden.com/
- external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency across pages)
- Inheritance
- Conflicting Styles: The Cascade
- Priority
- Specificity
- Rule Order
- The Box Model - www.w3schools.com/css/css_boxmodel.asp
- CSS Units of Measurement
- Class, Id
- Specifying color in CSS - color names, hexadecimal, RGB
- external, embedded, and inline overriding examples
|
|
| |
Week 6
9/30
CSS
|
|
- HW4
- Formatting Text (Chapter 12)
|
|
Week 7
10/7
|
-
RGB
RGBa (RGB plus alpha transparency)
HSL (hue, saturation, and luminosity)
HSLa (HSL plus alpha transparency)
- color, background-color
- opacity
- pseudo-class selectors- p::first-line, p:first-letter, generated content with ::before, ::after
- Changing Links Colors with CSS (important to maintain contrast between text and background when you are changing the background color or image from white)
- attribute selectors - selecting elements based on attribute names or values
- CSS: background-image: url(image filename); - normally specify background-color in addition for readability while loading
- linear-gradient, radial-gradient, repeating-linear-gradient
- Browser prefixes
- <link>, @import
|
- Colors and Backgrounds (Chapter 13)
|
| |
Week 8
10/14
|
|
|
| |
Week 9
10/21
|
|
|
| |
Week 10
10/28 |
|
|
| |
Week 11
11/4
|
- Embedded Media (Chapter 10)
- Display YouTube video in <iframe>
- Display Google Maps in <iframe>
- Do mov file in <object>
- Putting movie on web page using HTML5 video tag
- with various attributes; try webm, mp4, and ogg
- HTML5 <audio> tag with mp3, ogg, webm
- <canvas> element - to display Adobe Animate movies on webpage
|
|
| |
Week 12
11/11 |
|
|
| |
Week 13
11/18
|
|
|
| |
11/25 (Thanksgiving) |
|
|
| |
Week 14
12/2
Responsive Web Design
|
|
Chapter 17 (Responsive Web Design)
W3Schools Media Queries
W3Schools Media Queries Examples
Watch 21 minute Responsive Design Video Using Mobile First Approach |
| |
Week 15
12/9 - Final Exam
7:30pm-9:10pm |
Terms you should understand
|
Project |