To Do This Week
Work on Blackbird Project designs (Due September 29)
Notes:
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
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:
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
CSS 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