Implement High Fidelity Designs with Material-UI and ReactJS (6/2020)

Bridge the gap between Design & Development! Break down detailed designs and bring them to life with Material-UI/React.

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
Optimize images to reduce file sizes
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

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

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

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.

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

also You can find my other helpful
(if old file-links don’t show activity, try copy-paste them to the address bar)

General
Complete name : 058 Animation Export & Bodymovin.mp4
Format : MPEG-4
Format profile : Base Media
Codec ID : isom (isom/iso2/avc1/mp41)
File size : 66.9 MiB
Duration : 8 min 42 s
Overall bit rate : 1 075 kb/s
Writing application : Lavf58.29.100

Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : Main@L4
Format settings : CABAC / 4 Ref Frames
Format settings, CABAC : Yes
Format settings, RefFrames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 8 min 41 s
Bit rate : 1 006 kb/s
Nominal bit rate : 1 200 kb/s
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 30.000 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.016
Stream size : 62.6 MiB (94%)
Writing library : x264 core 148
Encoding settings : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x1:0x111 / me=umh / subme=6 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=24 / lookahead_threads=4 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=60 / keyint_min=6 / scenecut=0 / intra_refresh=0 / rc_lookahead=60 / rc=cbr / mbtree=1 / bitrate=1200 / ratetol=1.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=1200 / vbv_bufsize=2400 / nal_hrd=none / filler=0 / ip_ratio=1.40 / aq=1:1.00

Audio
ID : 2
Format : AAC
Format/Info : Advanced Audio Codec
Format profile : HE-AAC / LC
Format settings : Implicit
Codec ID : mp4a-40-2
Duration : 8 min 42 s
Bit rate mode : Constant
Bit rate : 62.7 kb/s
Channel(s) : 2 channels
Channel positions : Front: L R
Sampling rate : 48.0 kHz / 24.0 kHz
Frame rate : 23.438 FPS (1024 SPF)
Compression mode : Lossy
Stream size : 3.90 MiB (6%)
Default : Yes
Alternate group : 1 Screenshots

✅ Exclusive eLearning Videos ← add to bookmarks
Feel free to contact me
when links are dead or want any repost