| Instructor: | Kevin McMillan |
| Number of Sessions | 8 |
| Day and Time | Sundays 930-130 |
| Duration | June 21 – Aug 16 No class Aug 02 |
| Room | Online |
COURSE DESCRIPTION
This course introduces the fundamentals of website design. Content includes technical and aesthetic issues of developing a website, such as writing code effective across multiple browsers and devices, and producing bandwidth-friendly graphics for your site. For anyone currently using a Content Management System such as WordPress, this course will teach you to write HTML and CSS that will greatly expand your ability to modify the look and usability of your site.
A GOOD REFERENCE
MarkSheet.io
A very concise and well-written introduction to most of what’s important in HTML and CSS.
A GREAT REFERENCE: LinkedIn Learning
If you have access to LinkedIn Learning, here is a playlist of video courses related to our course content.
This playlist covers everything we will do in class, and more.
If you have access to Lynda.com but not LinkedIn Learning, the individual courses in the above playlist are as follows:
- HTML Essential Training
Preferably the 2020 version of the course. If that’s not available on Lynda.com, the 2017 version is good enough. - CSS Essential Training 1
- CSS Essential Training 2
- CSS Essential Training 3
- Responsive Layout
- HTML: Images and Figures
COURSE LEARNING OUTCOMES + OBJECTIVES
By the end of the sessions students will be able to:
- Define and identify user-centered principles and best practices for creating accessible websites
- Select and prepare images and graphics for the web using common industry tools.
- Evaluate and implement new approaches in website design and coding.
- Investigate and correct errors in code.
- Design a website that is device-independent and performant
- Design and code an accessible website using user-centered principles and best practices.
COURSE METHOD
Class demonstrations on software and authoring techniques; weekly assignments + a term project (individual student websites).
COURSE CONTENT
Presentation of issues with supporting examples on a particular theme introducing key techniques and concerns.
Grades
This course is Pass/Fail (P/F). Students must satisfy each learning outcome to successfully Pass.
REQUIREMENTS
To successfully complete the course, students are expected to complete all assignments to the instructor’s stated requirements, attend at least 85% of the classes and participate actively in discussions and critiques.
Each week’s supervised work session begins with the discussion and/or presentation of each week’s homework assignment. The instructor will be available for individual assistance and support. The period allows students to immediately begin to fold in material from class presentations. Assessment will include: attendance and participation, assignment completion and creativity.
COURSE SOFTWARE
Useful Visual Studio Code Extensions:
- Open in Browser
- Live Server
- htmltagwrap
- Beautify
- Bracket Pair Colorizer
- File Utils
- Path Intellisense
- Intellisense for CSS
- Text Pastry
- Atom Keymap (if you already know the Atom editor).
SCHEDULE OF INSTRUCTIONAL DELIVERY
Session 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
- Using images and embedded media
- Introduction to accessibility
In-Class Exercises
- About Me Site
Assignment 1:
Complete these two exercises and bring them to next class.
- HTML Paths Exercise (ignore the bit about FTP)
- Hummus Recipe
Readings / Review
For review of this week’s content, please read Marksheet.io chapters 2 & 3. In section three, skip the parts about tables and forms for now. Some content might not have been covered in the first class: just focus on the main ideas.
Session 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
In-Class Exercises
Assignment 2:
Please complete the Gibson Gallery 1 & 2 exercises and bring the resulting site to class.
Resources
Readings / Review
Session 3: Responsive Web Design / CSS Grid 1
- Sectioning Elements:
Header, Footer, Nav, Main, Article, Section - Media Queries
- Mobile First
- Google Font Hosting
- Display: Grid pt 1
Class Exercises:
Resources
Session 4: CSS Grid 2 / CSS Positioning
- Relative, Absolute, & Fixed Positioning
- Grid, pt 2
Class Exercises:
Resources
- CSS Tricks: Complete Guide to Grid
- Rachel Andrew: Grid By Example
Session 5: CSS Grid 3 / Graphics / Tables
- Advanced Grid Layout
- Web Graphics / Background Images
- Linear & Radial Gradients
- Multiple Backgrounds
- Tables
Class Exercise:
Resources
- Web Graphic File Formats Explained
- Background Images, Colors, Gradients
- CSS Tricks: Background Shorthand
- CSS Tricks: Gradient Syntax ( in authoritative detail )
- Mozilla Developer Network: Using CSS Gradients
- Web Graphics 2019 Files
- Parallax Example Files
- Batch Processing Images
Additional Exercises For Practice
- Fender vs Gibson History & Gallery Exercise
- Grid Layouts in Abstract
- Metonymy 2020
- the two layouts from last week (jazzicons / fender vs gibson)
- the Fender Vs Gibson History & Gallery Exercise (link above)
- If you want more practice, try the DTN and/or WorldBeats exercises from week four
Session 6: Domains, Hosting, Forms
- Domains & Hosting
- Using FTP to upload your website to the web
- Anatomy of a URL
- Sample uploads.
- A simple contact form
Resources
Session 7: Layout Test
In the layout exercise, I will will give you screenshots of a layout for you to complete in class to test your progress with the class content.
Session 8: Review / Introduction to Content Management
- Class review
- Introduction to Content Management Systems