To Do This Week
Work on Blackbird Project designs (Due September 27 – in two weeks)
Notes:
Mandatory Midterm Meeting (5%) – by Friday October 4th
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:
After class, for short 5-10min meetings.
For longer meetings (15-30min):
MW – 2:00pm- 4:00pm
TTH – 12:00pm-3:00pm on zoom
Blackbird HTML – complete
to use as a reference
CSS Review
BACKGROUND IMAGES
background-size: 100%;
background-size: cover;
background-size: contain;
CSS3
- Gradients
- Transform
- Transitions
- Multiple Columns
- Text Shadow
- Box Shadow
- Border Radius
- Mix Blend Mode > explanation
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%
Due September 27 – Two weeks
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