Styling and Accessibility

Overview

So far our applications have focused on functionality — creating interactive content, interacting with APIs, and providing user-specific functionality. We haven’t looked into how the applications look and feel and how accessible they are to all users. In this part, we look into styling and accessibility.

This part is organized as follows:

  • Cascading style sheets (CSS) outines the basics of CSS, selectors, cascade, and the box model.
  • Tailwind CSS and Skeleton shows how to add Tailwind CSS and Skeleton to the project.
  • Building layouts with Tailwind and Skeleton discusses utility classes, basic layout techniques (flexbox and grid), and shows how to build a common layout structure with a header, body, and footer.
  • Responsive web design introduces the idea of designing for multiple screen sizes and shows how to use breakpoints in Tailwind CSS to adapt the layout to different screen sizes.
  • Styling an application takes our earlier application that provides login functionality and styles parts of it using Tailwind CSS and Skeleton.
  • Theming and design consistency discusses basic concepts related to theming and design consistency, and shows how to create a component for switching themes and for switching between light and dark modes.
  • Web accessibility introduces the term “Web Accessibility”, outlines the four core principles (POUR for Perceivable, Operable, Understandable, and Robust), and describes basic techniques for making web applications accessible.
  • Keyboard navigation, dynamic content, and ARIA discusses keyboard interaction, handling dynamic page content changes, and using ARIA to provide additional semantic information to the user interface.
  • Accessibility testing outlines basic techniques for testing accessibility of web applications.
  • Overarching project continues with the overarching project, adding styles and new features.

Finally, at the end of the part, there is a recap and feedback chapter that briefly summarizes the part and asks for feedback on the part.

Cascading Style Sheets →