Monthly Subscription Starting at AED 99 + VAT

Building High Quality User Experience Using Material UI
  • Level Professional
  • Duration 8 hours
  • Course by NIIT
  • Offered by

About

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.

Modules

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

1.1 Style a React Component using an External StyleSheet​

    • 2 Videos
Show info about module content

2 Videos

  • Style a React Component using an External StyleSheet​
  • Watch and Repeat : Adding Styles to React Component using External CSS file

1.2 Make use of a CSS Module to Style a React Component ​

    • 2 Videos
Show info about module content

2 Videos

  • Make use of a CSS Module to Style a React Component ​
  • Watch and Repeat : Adding Styles to React Component using CSS file as module

1.3 Apply Inline Styles to React Components

    • 2 Videos
Show info about module content

2 Videos

  • Apply Inline Styles to React Components
  • Watch and Repeat : Adding Styles to React Component using Inline Style

1.4 Style a React Component using Styled-Component Module which follows CSS in JavaScript Pattern​

    • 2 Videos
Show info about module content

2 Videos

  • Style a React Component using Styled-Component Module which follows CSS in JavaScript Pattern​
  • Watch and Repeat : Apply CSS-in-JS concept in React Component

Practice

    • 2 Videos
    • 1 Readings
    • 1 Programming
Show info about module content

1 Programming

  • Styling ViewTube using Material library

2 Videos

  • Practice Brief
  • Practice Debrief

1 Readings

  • Instructions to upload the Programming Assignment Solution

Summary

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Style React Components using Modern CSS Techniques

1 Videos

  • Learning Consolidation

1 Readings

  • Style React Components using Modern CSS Techniques

Context Setting

    • 1 Videos
Show info about module content

1 Videos

  • Context Setting

2.1 Material Design Philosophy​

    • 2 Videos
Show info about module content

2 Videos

  • Material Design Philosophy​
  • Watch and Repeat : How to Install Material and use it’s Prebuilt Component in React App

2.2 Layout Components​

    • 2 Videos
Show info about module content

2 Videos

  • Layout Components​
  • Watch and Repeat : Implementing Layout Component of Material

2.3 Input Components​

    • 2 Videos
Show info about module content

2 Videos

  • Input Components​
  • Watch and Repeat : Implementing Input Components of Material

2.4 Navigation Components​

    • 2 Videos
Show info about module content

2 Videos

  • Navigation Components​
  • Watch and Repeat : Implementing Navigational Components of Material

2.5 Surface Components​

    • 2 Videos
Show info about module content

2 Videos

  • Surface Components​
  • Watch and Repeat : Implementing Surface Components of Material

2.6 Theming Components

    • 2 Videos
Show info about module content

2 Videos

  • Theming Components
  • Watch and Repeat : Implementing Custom Theme in Material Design

2.7 Material UI Hooks, HOCs​

    • 2 Videos
Show info about module content

2 Videos

  • Material UI Hooks, HOCs​
  • Watch and Repeat : Customizing Material prebuilt Components using Hooks and API

Practice

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • Styling Journler App using React Material Design Library

2 Videos

  • Practice Brief
  • Practice Debrief

Challenge

    • 2 Videos
    • 1 Programming
Show info about module content

1 Programming

  • ViewTube

2 Videos

  • Challenge Brief
  • Challenge Debrief

Summary

    • 1 Videos
    • 1 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • Style React Components using Material Design System

1 Videos

  • Learning Consolidation

1 Readings

  • Style React Components using Material Design System

Auto Summary

Enhance your React applications with high-quality user experiences using Material UI in this professional-level IT course by Coursera. Over 480 minutes, master CSS-in-JS and streamline your design process with the Material UI library. Available through Starter and Professional subscriptions, this course is ideal for developers seeking to elevate their web applications.

NIIT
Instructor

NIIT