Week 04 – CSS

Learning Outcomes

After this week you should be able to

• Describe CSS
• Write CSS to style hypertext documents
• Use Chrome Developer console

04.01 Intro. to CSS

Pre-Class Reading

• CSS Introduction

Class Slides

• Week 4.1 Slides

Group Activty / Lab

• Look for details in the labs folder for this week

Post-Class Reading

• CSS Tutorial on MDN including linked subheadings:
  • How CSS is structured
  • How CSS works

04.02 More CSS

Pre-Class Reading

- CSS Borders
- Review the file week-04/02/border.html in your course folder

Class Slides

• Week 4.2 Slides

Group Activty / Lab

• Format the aboutme.html page from Week02
• Start here for instructions to edit your previously created aboutme.html file to link an external CSS file you create.
• Refer to other pages at that resource as needed to identify syntax for styles you want to apply.
• Reference your aboutme.html file to identify and add more semantic html elements (headings, a list or two, etc.) to use as your CSS selectors. Edit the html to add elements, or class="" or id="" attributes, as needed for your CSS.
• For each CSS selector, define property:value; pairs to style your about-me.html page. Reference file week-04/02/fonts.html in your copy of the class repo for suggestions on how to apply fonts.
• Create a folder in your personal GitHub repo and upload your HTML and CSS files, then view in GitHub Pages.

Post-Class Reading

• CSS Reference
• Box Model. Look through the sample files and experiment with CSS short-hand.

Homework due this week

Look for reference files in the class folder under week-04/02/

Project Deliverable due this week: Site Map + Media List

Find guidance for content and file formats for this deliverable on the Individual Project page on the course website.

As discussed in class:

• Due Sunday, Sept. 22, 2019 by 11:59pm
• Site Map: List of pages with description of content plan for each and parent-child hierarchy
• Media List: Upload image and other media files collected (so far) for use in your project to an images subfolder in your project folder in your personal GitHub repo.
  Also: Upload to GitHub and submit to Blackboard a table with rows listing information about each of your media resources: Filename, Source ("self" or URL where you found the image), Owner, Licensed for Reuse (yes/no). File type for this table can be a Word, Excel, or HTML document.