Week 3 - CSS & Design
Wednesday Agenda
- Document data types
- Github merging, conflict resolution, branching
Resources
- Markdown:
- Sample of various markdown features: https://github.com/ChemeketaCS/markdown-sample
- Markdown guide
- Mermaid:
- See the section on Mermaid in the ChemeketaCS markdown sample above.
- View the source of the diagram page of my sample repository for an example for the SuperHero demo.
- Mermaid Class Diagrams Guide
- There is a VSCode extension that adds previews to markdown files that include Mermaid diagrams. It is called Markdown Preview Mermaid Support. You can install it from the VSCode extensions marketplace.
- Mermaid Live Editor is useful if you don't install the VSCode extension.
Recommended Schedule
Monday
Tuesday
Thursday
Responsive Layout
Start with what responsive design is:
Then learn about grid and flexbox (especially flexbox!!) - two powerful CSS tools for doing more complex and responsive layouts:
Here is a final version of the Hot Air Balloon website using Flex to create a responsive design:
References:
- MDN: CSS - Layout
In particular Grid, Flexbox, Responsive Design
Bootstrap
Bootstrap is like a library for CSS. If you are a design-challenged coder, it can help you produce a clean and attractive basic look for a website. I ask you to learn a little about how it works. Once you do that, you can decide if you prefer using it to do styling and want to dive deeper, or if you prefer handwriting all your CSS:
It also provides a handy icon library (though there are other similar options available from other sources):
This final video shows how we might use Bootstrap to set up a layout for the Hot Air Balloon website instead of CSS:
References:
Design and Accessibility
Watch these videos:
This last video demonstrates two tools you will need to use for the assignment to do an accessibility audit of your pages and of some "real" website:
You will need to install this Accessibility Insights Chrome plugin to complete this week's assignment. (If you need additional instructions, they are on that page.)
The Lighthouse tool is built into Chrome. Here are Lighthouse instructions if you need them.
References:
- Accessible to all
- Introduction to ARIA and ARIA Labels and Relationships
- Web Content Accessibility Guidelines Checklist This one is really wonky - it is a list of all the things that an accessible website should have.*
Challenge (optional) - Install a screen reader. Try spending 10 minutes using the web without a mouse. Here are some guides to navigation: