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
Class Slides
Group Activty / Lab
- Download the file
solar-system.zip
and expand it in your class folder on your PC. - Open
solar-system.html
andstyle.css
in VS Code - Follow instructions in comments on both files to update the styling applied to the HTML file.
Post-Class Reading
- CSS Tutorial on MDN including linked subheadings:
04.02 More CSS
Pre-Class Reading
- CSS Borders
- Review the file week-04/02/border.html
.
Class Slides
Group Activty / Lab
- Format the aboutme.html page from Week02
- Start here for instructions to edit your previously created
aboutme.html
file tolink
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, orclass=""
orid="" attributes
, as needed for your CSS. - For each CSS selector, define property:value; pairs to style your
about-me.html
page. Reference fileweek-04/02/fonts.html
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 instructions 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:
- Site Map:Visual representation of pages and their hierarchy
- Media List: Upload image and other media files collected (so far) for use in your project to an
images
ormedia
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.