Cascading Style Sheets bring order and beauty to our applications.

Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course demonstrates the process of styling an application from start to finish.

We will take a basic un-styled todo-list application written in React and use CSS to get the application to look like how we want. The first steps will be to apply static styles to the app based on a mock up, then we will incrementally add user interactivity as well as make the app responsive.

In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the `html` and `body` elements that sets the foundation for the rest of the application styles.

Prep HTML for Styling with Flat Class Names

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

react

Keep Styles Portable and Maintainable with Basic Classes

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention. [OOCSS](https://github.com/stubbornella/oocss) and [SMACSS](https://smacss.com/) offer similar methodologies. I also use the class attribute selector to [target multiple modifier classes](https://www.viget.com/articles/bem-multiple-modifiers-and-experimenting-with-attribute-selectors). 

Reduce Ambiguity in Class Names using a Naming Convention

Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.

Style a Form with Plain CSS

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention for CSS class names.

Understand Semantic Markup in relation to CSS

There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.

Use CSS to Inform Users of Interactivity

Using pseudo-elements like `::before` and  `::after` we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

Draw Simple Icons with CSS

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

Use Media Queries to Make an Existing Application Responsive

Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.

Style an Application from Start to Finish

Garth Braithwaite

Course Content