Mô tả

Want to advance your skills as a frontend developer and improve your knowledge of Material UI-Frontend Library? Need to know how to build breath-taking websites without the complicated coding?

Designed for those who learn by doing, this course is geared towards building on your basic skills and taking them to the next level.

If you have a basic understanding of programming languages and comprehension of what makes an excellent digital user experience, then this is the course for you.

Using Material UI-Frontend Library might seem intimidating but it’s a useful and highly sought-after skill for developers of all abilities. Being able to implement pre-built components, and create custom ones, can save hundreds of hours of coding. This course aims to teach you how to properly use Material UI in conjunction with React so you can build stunning websites faster.


By the end of this course, you will

  • Gain confidence using Material-UI

  • Learn how to make any project responsive with breakpoints

  • Learn how to customize  theme and make you website design consistent

  • Find new ways to use components

  • Reduce the hours of complicated coding

  • Build on pre-existing designs

  • Learn how to use Figma to speed up development

  • Improve user experiences

  • Understand how and where to implement UI components


Build professional websites in less time

Creating websites is a time-consuming business, especially if you have to start at the very beginning, creating code from scratch. This course will show you how to use UI-Material frontend library to build responsive and stunning websites.

The UI-Frontend Library contains hundreds of pre-built components which you can use immediately without any editing if you find it necessary. Alongside the pre-built components, you can use the customisations options to create your own unique designs. Perfect for creating beautiful projects without the hassle of complicated coding.

Perfect for developers who are still honing their skills

Material UI-Libraries are perfect for those who are still learning. Experienced developers have poured hours into creating the perfect components on UI-Libraries and as it is open source you can use and edit them as you see fit.

This allows you to harness the most up to date and effective interfaces with ease, so it makes sense that should join this course and learn how to make the most of the thousands of quality components.

The benefit of using these interfaces is that you can use any of the components you wish, edit them to suit your needs, or eliminate certain aspects altogether making the whole process so much simpler.

Build Your Own Projects

Learning is more effective when you immerse yourself in the content. Instead of trawling through hours of jargon-filled text blocks, this course encourages you to learn through doing.

You’ll build your own projects as you move through the topics, harnessing new skills and honing old ones.

Designed for immersive, real-time learning, this course will give you all the knowledge you need to create powerful projects without the long-winded and time-consuming explanations.

First, we’ll work together to build a Creative Agency Website using React and Material UI before moving on to the second project in this course; an Online Language School.

The aim of completing these projects as you move through the course is to provide you with the opportunity to use your newfound skills in a realistic setting and have a solid foundation to build upon your existing knowledge.

At the end of the course, not only will you have discovered some brilliant skills, but you’ll also have two perfect projects to show off your capabilities.

Take your projects to the next level

Not only should a website look beautiful, but it also needs to provide a great user experience. If your website doesn’t respond properly, navigate to where it should, or complete the appropriate actions users aren’t going to visit your site and you’re less likely to get repeat work as a developer.

By joining this course, you will gain an understanding on how to use UI-Frontend library to ensure the users digital experience is exactly as it should be, simple, effective and memorable. No more buggy websites that take an age to respond to input. Just quality, responsive sites and happy clients.

Contents and Overview

You will complete almost 7  hours of immersive video tutorials.  You will need to possess a basic understanding of CSS, HTML and React in order to get the most out of this course.

You’ll learn how to build beautiful websites with effective user interfaces. You’ll gain a better understanding of how to make websites that are mobile friendly through in-depth, step by step video instruction, so you’ll never feel overwhelmed.

By the end of the course, you will have developed a clearer understanding of how to use Material UI-frontend libraries as well as harnessing some powerful skills to enable you to create your own stunning websites in less time.

With clear tutorials and one-to-one support available for any questions you might have, this course is ideal for those who are ready to take the next step towards building their career as a frontend developer.

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

Build 2 real-world responsive websites

Learn to use Figma to speed up development process

Learn how to set up your theme for consistent look of your website

Configure your styles to create custom layouts

Learn how to create responsive websites with Material-UI

Yêu cầu

  • You should know the basics of CSS, HTML, REACT
  • Mac or Windows Computer

Nội dung khoá học

5 sections

Course Introduction

1 lectures
Introduction
02:30

Styling components in Material-UI

3 lectures
Using inline styles
01:48
Use styled() to create customizable Button component
07:17
Use styles object to create and style customizable Button
04:03

Material-UI Components

6 lectures
Button component
06:18
Typography component
03:30
Box component
03:48
Paper component
01:30
Divider component
03:50
Link component
02:40

[Hands-on] - First project - Creative Agency Landing Page

27 lectures
Project Intro
01:47
Environment Setup
03:37
Project Theme-Palette setup
06:31
Project Theme - Typography setup
07:35
Creating reusable Button component
06:59
Building Navbar component
10:43
Building Drawer component
05:03
Building Header component
11:52
Styling Header component
05:36
Building Hero section
05:09
Styling Hero component
04:53
Building Card component
06:18
Styling Card component
08:19
Building Creative Agency section
10:49
Styling Creative Agency section
04:39
Refactor Creative Agency section
01:48
Building Experience section
09:50
Styling Experience section
07:54
Building Contact section
10:38
Styling Contact section part 1
12:23
Override default nested components styles
03:49
Building Footer section
14:43
Styling Footer section
13:09
Final code refactoring - Intro
00:41
Adding navigation with React-Router
08:51
Adding Drop-down menu and finishing navigation refactoring
10:42
Adding form validation with Formik and Yup
11:55

[Hands-on] - Second project - Online Language School Website

39 lectures
Project Intro
01:59
Environment Setup
01:42
Project Theme - Setup
06:12
Building Navbar component
08:33
Building Drawer component
03:58
Building Search Input Component
04:29
Building Header component
14:00
Building Hero section
11:21
Styling Hero section
17:32
Hero section adding additional styles to theme
02:53
Building Featured Courses section
03:46
Styling Featured Courses section
07:58
Building Featured Cards section
07:36
Styling Featured Cards section
07:06
Building Benefits section
07:11
Styling Benefits section
09:12
Building Become Instructor section
04:16
Styling Become Instructor section
02:42
Building Subscribe section
03:51
Styling Subscribe section
08:18
Building Footer Section
08:05
Styling Footer Section
09:06
Creating Layouts setting up routes with React Router
07:07
Building Breadcrumbs component
03:17
Building Course Description component
05:56
Building Current Status component
11:55
Refactore Course Details Screen
05:16
Building Course Details component
11:31
Styling Course Details Component
07:16
Building Courses component
07:21
Building Learn Courses component
05:41
Building Content component
10:50
Styling Content component
07:51
Building Featured Courses Screen
03:06
Building Featured component
10:38
Styling Featured Component
04:59
Building All Categories component
07:11
Building Select Order component
08:06
Styling Select Order component
11:46

Đá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.