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/25
Course Introduction |
|
|
| |
HTML |
- starter.html - a file you can use as a start file for coding in this course
- 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
- 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.
- 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
- Save and refresh - Brackets allows you to skip the refresh
- <h1> ... <h6>, <p>, <br>, <hr>,
- ordered and unordered lists
- absolute and relative links
|
- Tutorial 1 - HTML
- Appendix B - HTML Elements and Attributes
- 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
- Lists
- Linking
-
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
|
| |
Week 2
9/1
HTML |
- Advantages of Brackets 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
- <blockquote>
- special entity characters (e.g. ) ,
- email links
- images - img tag, height, width, and alt attributes
- 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 - Judy Miller video showing steps (4 1/2 minutes)
- Named Anchors/Fragment Identifiers -Skip Navigation links article
- Keywords and Description Meta tags - important for search engine optimization (SEO) and click-through rates
|
|
| |
Week 3
9/8
HTML
|
- Advantages of NotePad++ over NotePad (once file is saved as html or htm)
- color-coding
- can have multiple tabs, one file per tab
- line numbers
- tag and attribute suggestions
- "fold up" sections of code
- Can launch browser from NotePad++ -View>View current file in
- Deprecated tags and attributes
- HTML comments <!-- -->
- Proper Nesting - e.g. <b><i></i></b> or <i><b></b></i>
- Indentation
- HTML5 sectioning/semantic elements - <header>, <nav>, <article>, <aside>, <footer> vs. <div>
- <em> vs. <i>, <strong> vs. <b>
- description lists - <dl>, <dd>, <dt>
- target attribute of <a> tag - _blank, some name
- avoiding "click here" links (accessibility)
- Coding Reminders and Absolute and Relative References
- setting the base path <base href="url"> - useful when moving a document to a new location - rather than rewriting all the relative links in the document
- Content Management Systems - WordPress, Drupal, Joomla
- external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency across pages)
- styling tags - e.g. h2 {color:red}
- CSS ways of specifying color - color names, hexadecimal, RGB (color, background-color)
- Browser prefixes
|
|
| |
Week 4
9/15
CSS
|
|
|
| |
Week 5
9/22
Web Design
|
|
|
| |
Week 6
9/29
|
- Avoid deep linking of images (move to Chapter 1 section)
- horizontal navigation with unordered list (the CSS display property)
- width and height - units can be absolute or percentage; width, min-width, max-width, and height properties
|
|
|
Week 7
10/6
|
- "Hands-On" Test on Chapters 1 and 2
|
|
| |
10/13 - no class, NVCC non-instructional day |
|
|
| |
Week 8
10/20
|
|
- Tutorial 4 - Graphic Design with CSS
|
| |
Week 9
10/27
Responsive Design
|
|
Graphic Design with CSS Assignment
Tutorial 5 - Designing for the Mobile Web
W3Schools Media Queries
W3Schools Media Queries Examples
|
| |
11/3 - Election (State Holiday) |
|
|
| |
Week 10
11/10
|
|
Tutorial 6 - Working with Tables and Columns
Tables section of Judy Miller tutorial
Assignment: Tutorial Coding Challenge 1 (see Canvas assignment) |
| |
Week 11
11/17 |
|
Tutorial 7 - Designing a Web Form |
| |
Week 12
11/24
|
|
|
| |
Week 13
12/1 |
Bootstrap - developed by Twitter, released in 2011
- The increasing role of CSS and JavaScript frameworks
- Create an html file by copying and pasting a basic Bootstrap 4 template (uses CDN) -
- Alternatively, Download Bootstrap 4.5.3 (choose the compiled CSS and JavaScript option, unzip the zip file and you will have 2 folders - css and js - view contents of each. Create a Hello World file, with h1 formatting, outside of these two folders. Add references from your template to the CSS and js files you have downloaded. If properly hooked up, the template file will have the same appearance as when you used the CDN (i.e. sans-serif, no margin). Also in Chrome, choose Inspect>Console and check for errors. Doing the download is useful if you want to work without the internet access required for the CDN)
- Alternatively, Download Bootstrap 4.5.3 and download the source files - they will be in the dist folder - seeing the css (not slim, not minified) file will help you understand how Bootstrap works so we'll do this
- Template code reference to jQuery on CDN and to download code - for CDN, copy and paste URL; to download, (right click and choose Save as") and then reference the downloaded file (version 3.x)
- Get a Bootstrap component (click Components at the left at https://getbootstrap.com/docs/4.5/getting-started/introduction/ and place it into your html starter file - e.g. navbar - sample resulting file (using Bootstrap 4.5)
- Notes on the Bootstrap 4 .css file (version 4.5.3)
- Applying multiple column classes to an element
- Bootstrap 4 Carousel (Bootstrap site)
- Doing the W3Schools "Simply Me" Bootstrap Theme (recommend using bootstrap.css file rather than minified so you can look up Bootstrap class definitions) - This Bootstrap 3 example needs a few modifications for Bootstrap 4
---------------------------------------------
Not covered in class - for future reference
|
|
| |
Week 14
12/8 - Final Exam
7:30pm-9:10pm |
Terms you should understand
|
|