Week 6, Basic Layouts using CSS

Learning Outcomes

After this week you should be able to

  • Describe the box model
  • Describe how the browser paints the page
  • Describe 'flex' model

06.01

Pre-class Reading

Read up to and including the 'display property' section
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction

Class Slides

Group Activity / Lab

Post-class Reading

Review these HTML files in the week-06/01/ folder:

06.02

Pre-class Reading

Group Activity / Lab

Implement the News Page from folder week-06/02/labs/

template file
  • Download news-page.zip and extract it on your PC's file system.
  • Open the file news-page-step-by-step-guide.html in VS Code and follow instructions to create your own file named [your netID]-news-page.html and a CSS file linked from your HTML head/ element.
  • Create a new folder in your personal GitHub repo and upload your new HTML and CSS files.
  • Create a subfolder images and upload the five .jpg image files you downloaded in the news-page.zip file.
  • View in GitHub Pages and work with your HTML and CSS until they resemble the news-template.png image included in the package.

No Slides for This Class

Instead we'll work with this page and our prereading, then transition to lab work:
https://ist263-talley.github.io/spring-2020/schedule/week-06/02/labs/flexbox.html

Project Deliverable: Wireframes

These are the project blue prints. You will use these as guides to implement the web pages. There are vast number of tools you can use to create wireframes. We will talk more about wireframes during class starting around Week 4. If you need inspiration try the following sites:

Refer to the Individual Project page for background information.