Thu, Oct 17
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
Tasks for next class
Make sure to prepare for each online lecture. If you have questions about code, have your (non-working) code ready to share in class.
For next class:
- Review 10 Usability Heuristics for User Interface Design and be prepared to answer questions in class.
- Explore each of the sites listed under "Examples". For each, attempt to book a flight, get a visa, purchase a product, etc.
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. Privide links to any non-HTML content or files hosted on other servers - Figma, PDF, etc. Any graphics you use must be your own creation.
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 23, 6:00 PM. uploaded to your class web server. This will replace your existing index.html file. Test and validate carefully.