WEEK 5: Layout & Positioning (September 18-22)

To Do This Week

Work on Blackbird Project designs (Due September 29)


Screen grabs 
Mac: OPTION + SHIFT + 4 or 3
PC: Method 1. Use the Print Screen key/shortcut.
Method 2: Alt + Prt Sc (print screen button) screen capture.

Borders CSS: border: 1px solid red;

Mandatory Midterm Meeting (5%) – by Wednesday, October 11

Please set up a mid-term meeting with me by messaging me on Slack. This meeting is to check in about how you are doing so far with HTML and CSS.

Below are my times to meet. You can either set up a 30 minute slot or just 5-10 minutes if you are feeling comfortable with the material so far. For longer sessions, we can meet on Zoom. For shorter, we can meet after class.

My Availability:
MW – 10:00pm-12:00pm, 1:30pm-3:00pm
TTH – 12:00pm-3:00pm

Blackbird HTML – complete 
to use as a reference

CSS Review


css3 background images

background-size: 100%;
background-size: cover;
background-size: contain;



Working with Web Colors:
Adobe Kuler  (also in PS)

web color values: RGB, 0- 255
rgb/rgba    “opacity” vs rgba
HSL color picker


display: block, inline, none, inline-block, (flex, grid)

CSS Positioning and Layout:

Open the Info-Card folder FROM Sublime Text. You should see the index.html file, a styles.css file and the img folder with an image inside. Follow along with the Intro to CSS Layout video, Intro to CSS Grid/Flexbox – Info Card video and the Intro to Responsive Design – Info Card video.

CSS Layout

Box Model– float

CSS Positioning –
position: fixed; (move element from sides of browser window)
position: relative; (move element from sides of itself)
position: absolute; (move element from sides of positioned parent)

Positioning  Example -download zip file

Positioning Mr Potatohead
Download this zip folder: Mr. Potatohead (3 points extra credit if your complete the assignment using position absolute, upload to the server and send me the link)

display” property: inline, block, inline-block, grid, flex, none

Demo with Info-Card – layouts with float and grid


 Copy the source code to play/learn.
Grid-demo 1 – columns and rows
Grid-demo 2 – moving children inside grid

Blackbird CSS Design – 10%
Due September 29

For this portion of the Blackbird project, you will apply CSS for a final site design. Your design with an external CSS stylesheet should have the following:

  • a color scheme using Adobe Kuler  (Kuler is also in PS)
  • a background image
  • thoughtful typography
  • basic fixed-pixel layout
  • formatted CSS (identing)

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles.  Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look.  Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

Make sure you have at least the following from last week Blackbird HTML assignment:

  • one external link (to the wikipedia page)
  • one internal or anchor link (from author name in header to #bio)
  • one image insert (with image(s) inside a folder called “img”)
  • formatted HTML (identing)
  • one external stylesheet – “styles.css”
  • check that your site shows up from the list:
    DTC355-01 Blackbird list
    DTC355-02 Blackbird list

Blackbird ToDo list before submitting:

  • validate your project HTML and CSS (validate often!)
  • use a color scheme with good contrast of dark and light
  • add “alt” text to images
  • apply styles to links
  • format your html and css so that it is readable: tab in for nested elements, keep alignments