Implement High Fidelity Designs with Material-UI and ReactJS
- Descripción
- Currículum
- Reseñas
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.

-
1Welcome!Video lesson
-
2Why Material-UI?Video lesson
-
3Course OverviewVideo lesson
-
4Course RequirementsVideo lesson
-
5IMPORTANT - MUI UPDATE INFOText lesson
As you may know, Material-UI has recently updated to a new major version 5 and rebranded as MUI. MUI v5 introduces syntax changes that differ from the version shown here in the course. Because of that if you want to follow along with the course as shown in the lectures then you must install the same version as I used during recording.
So in the next lecture when you install Material-UI please run the command npm install --save @material-ui/[email protected] and make sure to add the @4.4.0 as that will specify the correct package version.
Most of the components and concepts you'll learn in this course will transfer to the latest version so it's still very worthwhile following along with the course. The course will teach you everything you need to know to have a head start when you get started learning the latest version. I am currently working on new content for MUI v5 so stay tuned for that early next year!
-
6Environment SetupVideo lesson
-
7Project Files and ResourcesText lesson
-
8Section 2 IntroVideo lesson
-
9Project OverviewVideo lesson
-
10Project Overview ContinuedVideo lesson
-
11Image OptimizationVideo lesson
-
12Boilerplate CleanupVideo lesson
-
13The AppBar ComponentVideo lesson
-
14AppBar TransitionsVideo lesson
-
15IMPORTANT FIXText lesson
-
16Styling - Themes (Setup)Video lesson
-
17Styling - Themes (Default Theme)Video lesson
-
18Styling - Themes (Palette)Video lesson
-
19Styling - Themes (Typography)Video lesson
-
20Styling - InlineVideo lesson
-
21AppBar LogoVideo lesson
-
22FaviconVideo lesson
-
23Tabs OverviewVideo lesson
-
24Using TabsVideo lesson
-
25Buttons OverviewVideo lesson
-
26Using ButtonsVideo lesson
-
27Styling The Active TabVideo lesson
-
28Navigation With React RouterVideo lesson
-
29Active Tab Refresh FixVideo lesson
-
30Section 3 IntroVideo lesson
-
31Menus OverviewVideo lesson
-
32Menus Overview ContinuedVideo lesson
-
33Using Menus - SetupVideo lesson
-
34Using Menus - NavigationVideo lesson
-
35Using Menus - StylingVideo lesson
-
36Using Menus - SelectionVideo lesson
-
37Using Menus - Refresh FixVideo lesson
-
38Responsive Design OverviewVideo lesson
-
39Responsive Design ContinuedVideo lesson
-
40Responsive Units Clarification -- Which To UseText lesson
This lecture clarifies when to use 'rem' vs 'em' vs '%' vs 'px'
-
41Using Media QueriesVideo lesson
-
42Drawers OverviewVideo lesson
-
43Using DrawersVideo lesson
-
44Lists OverviewVideo lesson
-
45Using Lists - SetupVideo lesson
-
46Using Lists - StylingVideo lesson
-
47Using Lists - SelectionVideo lesson
-
48Section CleanupVideo lesson
-
49Section Cleanup ContinuedVideo lesson
-
50Clipped AppBarVideo lesson
-
51Section 4 IntroVideo lesson
-
52Footer SetupVideo lesson
-
53Grid OverviewVideo lesson
-
54Grid Overview ContinuedVideo lesson
-
55Using Grids - SetupVideo lesson
-
56Using Grids - NavigationVideo lesson
-
57Active Tab Footer RefactorVideo lesson
-
58Responsive GridsVideo lesson
-
59Social Media IconsVideo lesson
-
60Section 5 IntroVideo lesson
-
61Animation Export & BodymovinVideo lesson
-
62Animation ConfigurationVideo lesson
-
63react-lottieVideo lesson
-
64Creating The Hero BlockVideo lesson
-
65Styling The Hero BlockVideo lesson
-
66Styling The Hero Block ContinuedVideo lesson
-
67Creating The Services Block - Custom SoftwareVideo lesson
-
68Creating The Services Block - Custom Software ContinuedVideo lesson
-
69Creating The Services Block - iOS/Mobile App DevelopmentVideo lesson
-
70Creating The Services Block - Website DevelopmentVideo lesson
-
71Cards OverviewVideo lesson
-
72Creating The Revolution BlockVideo lesson
-
73Creating The Revolution Block ContinuedVideo lesson
-
74Creating The Information BlockVideo lesson
-
75Creating The Information Block ContinuedVideo lesson
-
76Creating The Call To ActionVideo lesson
-
77Creating The Call To Action ContinuedVideo lesson
-
78Finishing The Call To ActionVideo lesson
-
79Section CleanupVideo lesson
-
80Section Cleanup ContinuedVideo lesson
