Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Neuroscience Coaching
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 40.5 hours on-demand video
  • 5 articles
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development User Interface

Implement High Fidelity Designs with Material-UI and ReactJS

Bridge the gap between Design & Development! Break down detailed designs and bring them to life with Material-UI/React.
Bestseller
Rating: 4.5 out of 54.5 (1,037 ratings)
5,993 students
Created by Zachary Reece
Last updated 12/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Create beautifully designed production applications from scratch with Material-UI
  • Build applications that look perfect on every screen with Material-UI's responsive design system
  • Refine UX/UI design intuition and see concepts in action
  • Search Engine Optimization in React JS
  • Migrate from create-react-app to Next JS
  • Use serverless functions with Firebase
  • Export and efficiently integrate animations with react-lottie
  • Collect data and track events with Google Analytics in React JS
  • Ensure cross-browser support with your styles in Material-UI
  • Deploy production Material-UI/React JS applications
Curated for the Udemy for Business collection

Course content

16 sections • 243 lectures • 40h 39m total length

  • Preview08:23
  • Preview12:30
  • Preview10:53
  • Preview02:39
  • Preview12:16
  • Project Files and Resources
    00:32

  • Section 2 Intro
    01:17
  • Project Overview
    09:56
  • Project Overview Continued
    09:48
  • Image Optimization
    15:00
  • Boilerplate Cleanup
    04:40
  • The AppBar Component
    09:01
  • AppBar Transitions
    06:59
  • Styling - Themes (Setup)
    10:21
  • Styling - Themes (Default Theme)
    05:56
  • Styling - Themes (Palette)
    06:42
  • Styling - Themes (Typography)
    08:27
  • Styling - Inline
    09:53
  • AppBar Logo
    09:08
  • Favicon
    02:19
  • Tabs Overview
    09:43
  • Using Tabs
    12:04
  • Buttons Overview
    09:49
  • Using Buttons
    07:59
  • Styling The Active Tab
    05:44
  • Navigation With React Router
    11:53
  • Active Tab Refresh Fix
    12:01

  • Section 3 Intro
    02:14
  • Menus Overview
    12:03
  • Menus Overview Continued
    06:06
  • Using Menus - Setup
    13:14
  • Using Menus - Navigation
    05:24
  • Using Menus - Styling
    09:06
  • Using Menus - Selection
    11:57
  • Using Menus - Refresh Fix
    12:22
  • Responsive Design Overview
    20:31
  • Responsive Design Continued
    10:21
  • Responsive Units Clarification -- Which To Use
    01:26
  • Using Media Queries
    12:37
  • Drawers Overview
    07:53
  • Using Drawers
    12:36
  • Lists Overview
    10:25
  • Using Lists - Setup
    07:56
  • Using Lists - Styling
    05:07
  • Using Lists - Selection
    12:17
  • Section Cleanup
    11:11
  • Section Cleanup Continued
    12:24
  • Clipped AppBar
    10:10

  • Section 4 Intro
    03:45
  • Footer Setup
    13:56
  • Grid Overview
    09:13
  • Grid Overview Continued
    12:32
  • Using Grids - Setup
    09:50
  • Using Grids - Navigation
    05:24
  • Active Tab Footer Refactor
    10:23
  • Responsive Grids
    05:30
  • Social Media Icons
    12:26

  • Section 5 Intro
    05:23
  • Animation Export & Bodymovin
    08:42
  • Animation Configuration
    07:14
  • react-lottie
    10:20
  • Creating The Hero Block
    07:43
  • Styling The Hero Block
    11:19
  • Styling The Hero Block Continued
    15:04
  • Creating The Services Block - Custom Software
    13:55
  • Creating The Services Block - Custom Software Continued
    09:40
  • Creating The Services Block - iOS/Mobile App Development
    07:10
  • Creating The Services Block - Website Development
    03:39
  • Cards Overview
    08:34
  • Creating The Revolution Block
    13:05
  • Creating The Revolution Block Continued
    06:26
  • Creating The Information Block
    10:40
  • Creating The Information Block Continued
    14:20
  • Creating The Call To Action
    09:16
  • Creating The Call To Action Continued
    09:02
  • Finishing The Call To Action
    09:48
  • Section Cleanup
    09:32
  • Section Cleanup Continued
    11:06

  • Section 6 Intro
    01:36
  • Services Page - Overview
    04:19
  • Services Page - Setup
    11:45
  • Services Page - Responsive Design
    10:58
  • Custom Software Development Page - Overview
    10:09
  • Custom Software Development Page - Setup
    08:10
  • Custom Software Development Page - Middle Icons
    15:13
  • Custom Software Development Page - Animations Row 1
    13:13
  • Custom Software Development Page - Row 2
    12:20
  • Custom Software Development Page - Responsive Design
    11:57
  • Custom Software Development Page - Responsive Design Continued
    13:47
  • iOS/Android App Development Page - Overview
    04:26
  • iOS/Android App Development Page - Setup
    13:17
  • iOS/Android App Development Page - Responsive Design
    13:40
  • Website Development Page - Overview
    04:03
  • Website Development Page - Setup
    13:18
  • Website Development Page - Responsive Design
    15:12
  • The Revolution Page - Overview
    05:55
  • The Revolution Page - Technology & Vision
    16:11
  • The Revolution Page - Process
    09:06
  • The Revolution Page - Process Continued
    09:28
  • The Revolution Page - Responsive Design
    18:13
  • About Us Page - Overview
    04:56
  • About Us Page - Setup
    13:43
  • About Us Page - Team
    12:00
  • About Us Page - Responsive Design
    18:21

  • Section 7 Intro
    09:10
  • TextField Overview
    14:40
  • Using TextFields - Setup
    08:30
  • Contact Information
    04:47
  • Using TextFields - State Controlled Values
    13:42
  • Using TextFields - Styling
    13:48
  • Using TextFields - Styling Continued
    09:09
  • Using TextFields - Responsive Design
    11:08
  • Using TextFields - Validation
    14:14
  • Using TextFields - Validation Continued
    06:52
  • Dialogs Overview
    08:51
  • Using Dialogs - Setup
    09:31
  • Using Dialogs - Styling
    07:33
  • Section Cleanup
    08:43

  • Section 8 Intro
    02:47
  • Firebase Overview
    03:28
  • Firebase Setup
    06:42
  • Nodemailer Overview
    02:12
  • Firebase Billing Policy Change
    00:26
  • Using Nodemailer
    11:36
  • Nodemailer Fix
    03:12

  • Section 9 Intro
    02:18
  • Axios Overview & Setup
    07:42
  • Progress Indicators Overview
    05:10
  • Using Circular Progress
    08:47
  • Snackbars Overview
    04:12
  • Using Snackbars
    08:07
  • Sending The Form Values
    17:00

  • Section 10 Intro
    14:25
  • Estimate Page - Setup
    11:09
  • Estimate Page - Setup Continued
    12:20
  • Estimate Page - Dynamic Questions
    10:55
  • Question Navigation
    13:39
  • Question Navigation Continued
    14:19
  • Question Navigation Fix
    09:38
  • Multiple Option Selection
    13:20
  • Single Option Selection
    13:25
  • Estimate Dialog
    08:54
  • Calculate Estimate Cost
    25:38
  • Selection Review
    11:17
  • Selection Review Continued
    15:15
  • Selection Review Features
    09:16
  • Finishing Selection Review
    07:04
  • Selection Review Websites Fix
    11:35
  • Responsive Design
    11:55
  • Responsive Design Continued
    20:58
  • Sending The Estimate
    13:32
  • Sending The Estimate Continued
    13:53
  • Disabling The Estimate Button
    07:13
  • Sending The Estimate Cleanup
    08:35

Requirements

  • Be comfortable with React JS -- this is an intermediate level course!
  • Mac or Windows Computer

Description

Welcome to the most comprehensive resource for Material-UI to date!

Across 35 hours and more than 200 lectures, I will teach you absolutely everything there is to know about building finely designed applications using hands-down the most useful tool I've learned since React itself -- Material-UI!


Take your web development skills to a whole new level and separate yourself from the average React developer by gaining the confidence to build professionally designed applications!

After learning React, I think many developers run into a common problem -- what are the best practices for actually building your own project!? You may have an idea in your head for a really cool application or website but feel like you wouldn't know exactly how to go about creating it with React. Are you supposed to build every little component and piece of functionality from scratch? Definitely not! Learn to let Material-UI do the heavy lifting for you with its comprehensive customizable component library with integrated styling, theming, grid, and responsive design systems.

Most of the courses you take while learning React are focused on teaching you the core concepts and fundamental syntax/structures necessary to understand and build React applications. This is usually done by building either a handful of small projects, each focused around a certain concept or by building a large project and incorporating each concept as you go. Learning like this is great, and absolutely essential to understanding the subject.

However, I have noticed that due to the focus on the underlying concepts and functionality, most of the designs and layouts aren't particularly interesting! None of the designs are bad by any means -- and that isn't the focus of pure React courses so this isn't a problem -- but they aren't usually something you would give to a paying client, so that does leave a bit of a gap when you begin working on your own. That's precisely why I made this course!


We're going to build two complete projects from scratch based on just design files -- including my own actual production website!

I'm going to walk you through the learning process that I went through when I built my first production application -- all the way from starting the project with a blank screen to deploying a fully responsive website. What I really try to emphasize is the way to think about structuring layouts in Material-UI. We'll first go over screenshots of the design we're about to build and visually breakdown the grid setup necessary to achieve each look, along with the corresponding code snippets! Then we actually hop into the code editor to put it into action.

We'll also be going over the documentation for each Material-UI component before we use it in our project so you'll be familiar with all the different capabilities, not just the features we use! Each component is extremely flexible and one of my goals for this course was giving you enough familiarity with the entire current ecosystem to be ready to understand any future updates.

A key part of building production applications is making sure that your styles and functionality don't just work on your system, but are flexible and responsive to any environment. That's why I drill responsive design practices so you'll understand not only the concepts to keep in mind but how to actually implement them with Material-UI and get perfect styles on the biggest, smallest, and every screen in between. This will hopefully become second nature and we'll all enjoy more optimized user-experiences across the web.


We will also be covering extra topics like SEO in React, switching our project over to Next.js and the benefits from doing so, hooking up Google Analytics to start making data-driven decisions, integrating animations from After Effects, and so much more!


The Course Content Includes:

  • Setting up a new project with create-react-app, React Router, and Material-UI

  • Guided explanations of the documentation for almost every Material-UI component followed by implementing them in our project

  • Different image optimization strategies

  • Creating a theme for your application by mastering Material-UI's centralized styling system

  • Learning how to use responsive design to ensure your applications look perfect on any screen size and orientation!

  • Using the Material-UI grid system to align complex layouts perfectly

  • Exporting animations from Adobe After Effects and efficiently importing them into a React application with react-lottie

  • Leveraging serverless functionality with Google Firebase Cloud Functions

  • Sending emails through Node.js

  • Making network requests in React while displaying feedback like loading spinners with Material-UI

  • Search Engine Optimization (SEO) in React applications

  • Migrating a project from create-react-app to Next.js and why

  • Cross-browser testing and support

  • Deploying a Next.js project and adding a custom domain name -- for two different hosting platforms

  • Incorporate Google Analytics to collect data about who is interacting with your application and what they're doing

  • Build custom organizational functionality to control data displayed in tables including search, filtering, delete, and undo


Along with lifetime access to over 35 HOURS of content, you'll also find easy access to support through active Q/A.

You've got nothing to lose -- this course comes with a 30-day money-back guarantee in case you aren't completely satisfied!

Tackle the challenge, blur the line between design and development, and learn to create the projects you've envisioned.

Who this course is for:

  • React developers looking to bridge the gap between design and development.
  • React developers who feel like they know React but still have more to learn before building a polished website.
  • React developers who have great designs but have struggled on perfectly implementing them in practice.
  • React developers who want to be able to build any website design that's handed to them.
  • React developers who want to master responsive design
  • React developers looking for a better understanding of UX/UI design principles
  • React developers looking for an easier, faster way to get up and running with clean, consistently designed applications

Featured review

Fawad Bashir
Fawad Bashir
11 courses
7 reviews
Rating: 5.0 out of 59 months ago
I have been having hard time finding resources for the Material-UI to learn. All of them were incomplete. This course has everything that it takes to learn Material-UI. Docs are good but they are difficult.When I tried to study from docs and apply them in my own project it got frustrating .But after watching that Zachary is also explaining Docs. I have got the hang of it. Not to metion that it is Zachary's first course on udemy, his way of explaining things is easy to understand.

Instructor

Zachary Reece
Software Entrepreneur
Zachary Reece
  • 4.5 Instructor Rating
  • 1,037 Reviews
  • 5,992 Students
  • 1 Course

Hey! I'm Zachary Reece, a startup founder from Wichita, Kansas. I started building websites when I was just 9 years old, teaching myself about HTML and the Internet from library books. Ever since then I've spent all of my time studying UI/UX/graphic design, mathematics, philosophy, and of course computer science.


Right now I'm continuing to study JavaScript at a low level to optimize the web and mobile applications I create, as well as beginning work on my first machine learning-based application.


I started a custom software company, Arc Development, when I was 21 years old to bring fast, affordable, and aesthetic software to the Midwest. I hope to teach the skills I've learned throughout that process to my students here on Udemy!

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.