WEEK 5: Layout & Positioning (Feb 4)

To Do This Week

Notes:

Mandatory Midterm Meeting (5%) – DUE by Tuesday Feb 25th

Please set up a mid-term Zoom or in-person 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:

After class, for short 5-10min meetings.
For longer meetings (15-30min):
Zoom MTWTHF – 12:00pm- 2:00pm
Office Hours in #26 – T 4-5pm, W 3-4pm

Submit urls (and screengrabs for codecademy) to Canvas!

In Blackbird projects – remove all in-line CSS

Info-Card CSS (due last week) will be graded tomorrow – you need at least 10 CSS rules!

If you are going to be late with your project, you must message me on Slack

Blackbird HTML – complete 
to use as a reference

CSS Review

BACKGROUND IMAGES

css3 background images

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

CSS3

WEB COLOR

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

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

DISPLAY PROPERTY

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

CSS Positioning and Layout:

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

CSS GRID/flex

Copy the source code to play/learn.
Flex-Grid-demo 1 – columns and rows

Blackbird CSS Design – 10%

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 AT LEAST 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