When will I have access to the lectures and assignments?

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

What will I get if I subscribe to this Specialization?

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Building High Quality User Experience Using Material UI

Building High Quality User Experience Using Material UI

This course is part of Frontend Development using React Specialization

Instructor: NIIT

1,883 already enrolled

Included with

Learn more

2 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

8 hours to complete

Flexible schedule

Learn at your own pace

2 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

8 hours to complete

Flexible schedule

Learn at your own pace

What you'll learn

Design high quality user interfaces with Material UI library

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

2 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Frontend Development using React Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 2 modules in this course

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.

Module details

"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."

What's included

12 videos2 readings1 assignment1 programming assignment

12 videosTotal 32 minutes

Context Setting2 minutes
Style a React Component using an External StyleSheet3 minutes
Watch and Repeat : Adding Styles to React Component using External CSS file3 minutes
Make use of a CSS Module to Style a React Component 3 minutes
Watch and Repeat : Adding Styles to React Component using CSS file as module2 minutes
Apply Inline Styles to React Components2 minutes
Watch and Repeat : Adding Styles to React Component using Inline Style2 minutes
Style a React Component using Styled-Component Module which follows CSS in JavaScript Pattern6 minutes
Watch and Repeat : Apply CSS-in-JS concept in React Component 3 minutes
Practice Brief4 minutes
Practice Debrief2 minutes
Learning Consolidation1 minute

2 readingsTotal 20 minutes

Instructions to upload the Programming Assignment Solution10 minutes
Style React Components using Modern CSS Techniques10 minutes

1 assignmentTotal 30 minutes

Style React Components using Modern CSS Techniques30 minutes

1 programming assignmentTotal 75 minutes

Styling ViewTube using Material library75 minutes

"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."

What's included

20 videos1 reading1 assignment2 programming assignments

20 videosTotal 52 minutes

Context Setting1 minute
Material Design Philosophy3 minutes
Watch and Repeat : How to Install Material and use it’s Prebuilt Component in React App6 minutes
Layout Components2 minutes
Watch and Repeat : Implementing Layout Component of Material4 minutes
Input Components2 minutes
Watch and Repeat : Implementing Input Components of Material3 minutes
Navigation Components1 minute
Watch and Repeat : Implementing Navigational Components of Material2 minutes
Surface Components2 minutes
Watch and Repeat : Implementing Surface Components of Material2 minutes
Theming Components3 minutes
Watch and Repeat : Implementing Custom Theme in Material Design2 minutes
Material UI Hooks, HOCs2 minutes
Watch and Repeat : Customizing Material prebuilt Components using Hooks and API3 minutes
Practice Brief2 minutes
Practice Debrief 2 minutes
Challenge Brief4 minutes
Challenge Debrief2 minutes
Learning Consolidation2 minutes