| Instructor: | Kevin McMillan |
| Number of Sessions | 12 |
| Day and Time | Fridays 130-430 |
| Duration | September 04 – Nov 20 |
| Meeting Format | BlueJeans Link (See Moodle Course Shell) |
| Official Outline |
course content
The course will introduce students to fundamental skills and knowledge in Web Development. Students will learn HTML and CSS, with an emphasis on Responsive Web Design.
Nearly every week will have a significant exercise to complete. Each class will begin with discussion of the previous week’s exercise before moving on to demonstrations of new concepts and techniques.
The course starts from scratch, with no assumptions of prior experience of coding. The fastest way for students to acquire the skills presented in the course is to complete all of the weekly lab exercises as the course progresses.
evaluation criteria
| Lab Exercises | 80% |
| Attendance & Professionalism | 20% |
| Total | 100% |
Attendance & Professionalism
It is very important that students get to class and start on time because each exercise we do will build on the previous ones and the new content covered in class. If you miss class, it is your responsibility to catch up on the content. To earn a good grade, attend every class on time, complete the assignments on time, and never hesitate to each out to me via email if any class content needs clarification.
Grading of Lab Exercises
With the lab exercises, attention to detail is key. Although some exercises come with step-by-step instructions, most of the others are designed to see how you solve design and production problems without such guidance.
Please note that missed lab exercises will make it more difficult to complete subsequent ones.
schedule of instruction
Week 1: Sept 04
(Intro to HTML)
- HTML document structure
- File naming conventions
- HTML validation
- Basic HTML tags: title, body, h1, h2, h3, p, a, ul, li, img
- Embedded media
- Semantics, Accessibility, SEO
Read By Next Class:
- Marksheet Chapters: Introduction – Ch 6 (ignore Tables & Forms sections for now)
Watch By Next Class:
- HTML Essential Training
Chapter 1
Chapter 2 (skip sections on dates, code, & superscripts)
Chapter 3 (skip ARIA roles for now)
Chapter 4
Resources
Lab Exercises / Homework
- Hummus Recipe
Week 2: Sept 11
(Intro to CSS)
• Separation of Content & Presentation via CSS
• Using the W3C CSS Validator
• The CSS Box Model: margin, padding, border
• CSS Type Basics: family, size, weight, line-height
• CSS Units of Measure
• Color in CSS
• Image alignment using the CSS float property
• Preparation of images for use on the web
• The DISPLAY property
• Class Styles
Week 3: Sept 18
(Intro to CSS 2 ??? )
Week 4: Sept 25
(Responsive Design 1)
Week 5: Oct 02
Responsive Design 2)
Week 6: Oct 09
(Responsive Design 3)
Week 7: Oct 16
(Intro to CSS)
Week 8: Oct 23
(Intro to CSS)
Week 9: Oct 30
(Intro to CSS)
Week 10: Nov 06
(Intro to CSS)
Week 11: Nov 13
(Intro to CSS)
Week 12: Nov 20
(Intro to CSS)
| SESSION | CONTENT (TOPIC/ACTIVITY) | ASSIGNMENT/PROJECT |
| 1 | Intro to HTML HTML document structure File naming conventions HTML validation Basic HTML tags: title, body, h1, h2, h3, p, a, ul, li, img Embedded media Semantics, Accessibility, SE | HTML Paths Exercise Hummus Recipe |
| 2 | Intro to CSS Separation of Content & Presentation via CSS Using the W3C CSS Validator The CSS Box Model: margin, padding, border CSS Type Basics: family, size, weight, line-height CSS Units of Measure Color in CSS Image alignment using the CSS float property Preparation of images for use on the web The DISPLAY property Class Styles | Gibson Gallery 1 & 2 Exercises |
| 3 | Responsive Web Design 1 Sectioning Elements: Header, Footer, Nav, Main, Article, Section Descendent Selectors Media Queries Mobile First Google Font Hosting Display: Grid pt 1 | Guitar Mania RWD Exercise |
| 4 | Responsive Web Design 2 Display: Grid pt 2 | JazzIcons Exercise Final Assignment Introduced |
| 5 | Responsive Web Design 3 Display: Grid pt 3 | Fender Vs Gibson Exercise |
| 6 | CSS Positioning / Icon Fonts Relative Positioning Absolute Positioning Fixed Positioning Font Awesome | Vancouver Gallery Exercise World Beat Mag Exercise |
| 7 | Responsive Web Design 4 Flexbox | DTN Mag Exercise |
| 8 | Graphics: Raster, Vector, Coded Image Formats Background Images Gradients CSS Clipping & Masking Image Filters Figure Element SVG | Eatery Restaurant Layout Exercise |
| 9 | Forms / Hosting / Domain Name System Getting a domain Getting hosting FTP | |
| 10 | Advanced Selectors | Fela Kuti Selector Exercise |
| 11 | Transitions Transform Transition JS: Events & Classlist for Transitions | Pretendo Menu Exercise |
| 12 | Review Day |