Week 3 - CSS & Design

Wednesday Agenda

  • Github merging, conflict resolution, branching
  • Document data types

Resources

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:

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:

Challenge (optional) - Install a screen reader. Try spending 10 minutes using the web without a mouse. Here are some guides to navigation: