Thu, Oct 10
CSS Layout Concepts
Today's objectives
Today we'll be looking at more CSS.
- Selectors: classes and IDs
- Organizing HTML with the
divtag - Chrome web inspector
- CSS Positioning
- Testing on multiple screen sizes
- Backgrounds
- CSS Box model
- Sizing
- Borders
- Padding
- Margin
- Next steps
Tasks
Review of work to date
Presentations
File management in VSCode
CSS Box Model
User interface fundamentals
web-technologies
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, experiment and test all the "CSS Concepts" noted below.
- Test your Table of Contents page - make sure all links function.
Samples
Here you will find any sample files you need for class.
Basic CSS positioning
Click "Edit on CodePen" for a larger version
Classes and IDs
See the Pen Class selector example by Robert Currie (@rcurrie) on CodePen.
Click "Edit on CodePen" for a larger version
See the Pen by Robert Currie (@rcurrie) on CodePen.
Handouts
Please download the basic HTML handout and basic CSS handout
Tutorials
Resources
Semantic skeleton
See the Pen Sematic skeleton by Robert Currie (@rcurrie) on CodePen.
Topics to review/prepare
- Lists (from HTML handout)
- Classes, IDs and more advanced selectors
- Positioning
- Layout
Tools
- Chrome inspector
- Powerful tools for testing and debugging HTML, CSS and JavaScript. Most other browsers have similar abilities.
- VS Code
- Organizing your work with projects
Assignment 4
Keep a user experience diary for a day
For one day, keep a simple diary recording your interactions with devices, web site, apps or services.
Briefly note what the interaction was, how successful it was, how satisfying it felt, and any notes about how it could be made better.
Remember, interactions do not have to be digital - they can involve navigating places, receiving (or providing) services, or any other involvement between two entities that involves communication to change a state or accomplish a task.
Interactions early in your day could include using a coffeemaker or microwave, checking the weather on your phone, or adjusting the temperature in your home or vehicle.
Recommended techniques include:
- Decide how you are going to record the interactions.
- Consider setting a reminder or timer at least hourly to record recent interactions.
- Use your phone's camera to photograph interactions as a log; add details later (but don't wait - you'll forget.)
- You do not need to include any interactions that might compromise your privacy.
- Suggested data points: date+time, location, success vs. failure, points of friction, and how you felt before and after the interaction, plus any notes. Feel free to modify these parameters. Here's an example in Google Forms: but don't use this form - make a copy for yourself. If you use this, your answers will be mixed with others. Try this link: https://docs.google.com/forms/d/1NzEwpnOFVz4ZZA5D4-jzF_Xh7dNjorXwLDLqzuZmVfI/template/preview and click "use template". You'll need to be logged in to a Google account for this to work.
- Present your results clearly and simply, in PDF format for on-screen display.
- Summarize any findings, trends or insights you discover.
Diary studies are a frequently-used form of user research.Find out more here:
- https://maze.co/guides/ux-research/diary-research/
- https://www.userinterviews.com/launch-kit/diary-study
- https://uxdesign.cc/diy-digital-diary-studies-72563f65cf6e
- https://www.nngroup.com/articles/diary-studies/
Name the assignment "YOURLASTMAME-assignment-04" and add a link to it from your main index page.
Due Wed, Oct 16, 6:00 PM.
Professional practice
Here you'll find content about the business and profession of interactive design. Look for topics here in future classes.
Need help?
Contact me - Slack is best.