Thu, Oct 12
CSS Layout Concepts
Today's objectives
More layout: box model, positioning, display, float and sizing
- Display property
- Positioning
- Float
- Sizing
- CSS Breakpoints
- Box model
- Sizing
- Padding
- Border
- Padding
- Testing for mobile
Tasks
[in-class tasks]
Presentations
User Interface Fundamentals
CSS Box Model
Styling links
More CSS layout
Agenda
Preparation
Have any questions about your assignment ready.
Samples
Here you will find any sample files you need for class.
Box model
See the Pen Box model test by Robert Currie (@rcurrie) on CodePen.
Styling links
See the Pen Simple link styling by Robert Currie (@rcurrie) on CodePen.
Centering
See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.
Simple menus with display property
See the Pen Simple nav menu by Robert Currie (@rcurrie) on CodePen.
CSS IS AWESOME
See the Pen CSS IS AWESOME by Robert Currie (@rcurrie) on CodePen.
Articles
A old (but clear) explanation on whya pixel is not a pixel is not a pixel.
Resources
CSS Selectors
| selector | selector name | matches |
|---|---|---|
| h1 | type | all h1 tags |
| .warning | class | every element with class="warning" |
| #temporary | id | every element with id="warning" |
| li a | descendant | every "a" tag within an "li" element |
| * | universal | everything | div.warning | class | every div with class="warning" |
| div#temporary | id | every div with id="warning" |
| a#active | pseudo-class | every a tag in the "active" state - that is, the mouse is hovering over it. |
CSS concepts
- Box model
- https://www.w3schools.com/css/css_boxmodel.asp
- Display
- https://www.w3schools.com/css/css_display_visibility.asp
- Positioning
- https://www.w3schools.com/css/css_positioning.asp
- Max-width
- https://www.w3schools.com/css/css_max-width.asp
- Float
- https://www.w3schools.com/css/css_float.asp
Tools
Here are some quick resources to expand on topics covered today.
- CSS layouts
- https://csslayout.io
- CSS Gradients
- https://cssgradient.io
Assignment 05
Improve your table of contents (index.html) file
Using HTML and CSS, improve the visual formatting of your main index.html file that lists all your assignments. You can put in placeholders for future assignments. Add links from the index.html file to your Figma wireframe assignments (Assignments 3 and 4) with by using the "Copy link" function in Figma's "share" button. Any graphics you use must be your own creation.
As part of this renovation, create a favicon for the site. There are many guides on how to create and link them. Many older formats are obsolete - note that you are only required to create a single favicon, but can create multiple sizes if you prefer.
Think about who the user of the site is, their reason for visiting, and what tasks they need to accomplish there.
Think about hierarchy of information, clear navigation, and legibility.
Use CSS techniques we have learned in class, and any others you choose. Make sure the index.html page is easy to use.
Due Wed, Oct 18, 6:00 PM. uploaded to your class web server. This will replace your existing index.html file. Test and validate carefully.