Building High Quality User Experience Using Material UI

Overview

Class Central Tips

A user experience is built upon a user’s experiences and interactions with a product, system, or service. Providing high quality digital experiences in a web application involves writing CSS codes which focus on display, navigation, actions, input, and communication. However, CSS has its own set of challenges which can be addressed using Material UI design library. This course will enable you to use CSS-in-JS and work with design systems like Material UI to quickly develop high quality React applications.

Syllabus

Style React Components Using Modern CSS Techniques

"Cascading Style Sheets (CSS) is a style language that enables separation of presentation and content, including layouts, colors and fonts. Styling of React component systems are made easy by enhancing CSS using styled-components. As a developer, you will be able to use the skills of ECMA Script 6 (ES6) and CSS to style the apps without stress using the styled components. In this learning sprint, you will learn to use the tagged template literals and CSS to define styled components. The hands-on assignments included with this sprint will enable you to enhance the existing React web application by styling components using the CSS-in-JS approach. This allows writing styles in JavaScript instead of external CSS."

Style React Components Using Material Design System

"Today, the need of the hour is to create engaging user-centric applications to provide high quality digital experiences to the end users. Material Design is a design language that helps developers to quickly build apps that are responsive, usable and scalable. In this learning sprint, you will explore Material Design Philosophy and implement Material UI (MUI) library in a React web application. The hands-on practice exercises provided in the sprint will enable you to transform the UI of the given solution code to a UI that provides a richer user experience using the components of the MUI library."