Mô tả

Welcome to the #1 documentation recommended paid resource for learning Material-UI!

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.

Bạn sẽ học được gì

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

Yêu cầu

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

Nội dung khoá học

16 sections

Introduction

7 lectures
Welcome!
08:23
Why Material-UI?
12:30
Course Overview
10:53
Course Requirements
02:39
IMPORTANT - MUI UPDATE INFO
00:41
Environment Setup
12:16
Project Files and Resources
00:32

Take It From The Top - Headers and Navigation

22 lectures
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
IMPORTANT FIX
00:23
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

Adding Header Features - Menus and Responsive Design

21 lectures
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

Bottoms Up! Footers and Basic Layouts

9 lectures
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

Hitting The Ground Running - Animations and The Landing Page

21 lectures
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

Complex Layouts

26 lectures
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

Inputs, Validation, and Confirmation

14 lectures
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

Google Cloud Functions

7 lectures
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

Network Requests

7 lectures
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

Putting It All Together - Estimate Page

22 lectures
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

Search Engine Optimization (SEO)

14 lectures
Section 11 Intro
06:47
Next.js Overview
15:13
IMPORTANT NEXTJS FIX
00:31
Migrate From create-react-app To Next.js
13:20
Using Static Images
13:01
Using Static Images Continued
15:10
Optimize Images In Next.js
12:00
Adding Footer & Header to Next.js
09:21
FOUC Fix
13:31
Good Title Tags
17:00
Meta Description Tags
13:58
OpenGraph Tags
13:06
Canonical Tags
07:37
Robots.txt and Sitemap.xml
21:26

Cross-Browser Support

7 lectures
Section 12 Intro
04:41
Important Note - Watch For All Browsers!
00:18
Safari Support
13:12
Safari Support Continued
16:52
Firefox Support
13:21
Microsoft Edge Support
05:19
Internet Explorer Support
08:16

Deployment

4 lectures
Section 13 Intro
02:51
Heroku
12:02
Custom URLs on Heroku
03:47
Now
09:05

Google Analytics

6 lectures
IMPORTANT - Google Analytics Update
00:13
Section 14 Intro
02:01
Account Setup and react-ga
15:55
Filtering and Page Tracking
14:19
Event Tracking
12:00
Conversion Tracking
10:14

Project Manager

37 lectures
Section 15 Intro
15:45
Project 2 Setup
13:13
Switches Overview
04:42
Using Switches
14:44
Tables Overview
12:24
Using Tables
11:04
Table Styling
08:47
Pickers Overview
06:15
Pickers Dependency Problem -- FIX
00:09
Using DatePicker
09:42
Using DatePicker Continued
06:00
Radio Buttons Overview
03:23
Using Radios
13:20
Select Overview
07:00
Using Select
13:55
Adding A Project
11:30
Adding A Project Continued
03:44
Fix Adding Website
11:55
Filtering Table By Search
17:02
Table Sorting Overview
13:09
Table Sorting Setup
11:46
Table Sorting Fixes
07:02
Table Sorting Fixes Continued
11:35
Tooltip Overview
08:55
Deleting Rows
09:43
Undo Delete
09:12
Undo Delete Continued
09:22
Filtering Table With Switches
15:35
Filtering Total By Range
10:51
Filtering Total By Range Continued
11:46
Filtering Total By Range Finished
09:00
Chips Overview
07:09
Using Chips
09:26
Using Chips Continued
11:04
Responsive Design
09:32
Responsive Design Continued
13:28
Responsive Design Wrap Up
06:33

MORE VIDEOS, EXTRA CONTENT

23 lectures
Estimate Question Selection Fix
09:12
Estimate Question Selection Fix Continued
08:47
Snap Page to Question Title
10:02
Fine Tune Mobile Styles
10:43
Fine Tune Mobile Styles Continued
06:26
The Revolution Refactor
17:06
Advanced Menu Overview
13:05
Advanced Menu Overview Continued
04:58
Using the Advanced Menu
08:47
Using The Advanced Menu Continued
10:40
Thoughts on styled-components
08:11
Convert styled-components to Material-UI
13:39
Convert styled-components to Material-UI Continued
14:25
Expansion Panels Overview
09:17
Using Expansion Panels
16:19
Using Expansion Panels Continued
15:38
Using Expansion Panels Finished
10:27
Skeleton Overview
06:04
Non-Blocking Google Fonts
11:47
Lazy Loading Overview
09:07
Implement Lazy Loading
15:46
Better Active Tab Approach
09:40
Better Active Tab Approach Continued
08:25

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.