Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Material-ui Full Course full Project [React level4]
Highest Rated
Rating: 5.0 out of 5(13 ratings)
1,069 students

React Material-ui Full Course full Project [React level4]

React and Material UI Full course Course
Last updated 1/2024
Arabic

What you'll learn

  • create 2 important projects for cv
  • learn Material-ui from zero
  • use react js with json-server and Material-ui
  • you will learn everything about Material-ui

Course content

1 section47 lectures11h 5m total length
  • Introduction8:29
  • #2 تنظيم ملفات المشروع15:01
  • #3 Install Material UI9:16
  • #4 MUI Typography Component10:50
  • #5 How to style MUI Component8:58
  • #6 MUI Button IconButton16:11
  • #7 MUI AppBar Link Components13:58
  • #8 MUI Avatar Component11:12
  • #9 MUI Drawer Divider Components17:27
  • #10 MUI List ListItem Components6:25
  • #11 MUI Link href Link to useNavigate7:57
  • #12 MUI Box Container Components7:56
  • #13 MUI Paper Card Components10:36
  • #13 MUI Paper Card Components17:52
  • #15 MUI Dark mode9:41
  • #16 MUI Adding new colors4:16
  • #17 MUI Toggle light and dark modes18:19
  • #18 MUI Dark mode with LocalStorage9:10
  • #19 MUI Dark mode with custom colors13:51
  • #20 React RouteruseLocation Hook9:37
  • #21 MUI Breakpoints (CSS Media Queries)11:17
  • #22 MUI show hide Drawer15:23
  • #23 Task solution13:55
  • #24 تنظيم ملفات المشروع9:28
  • #25 Task solution15:07
  • #26 المقدمة json-server8:18
  • #27 Send data13:50
  • #28 Get Data10:44
  • #29 Delete data8:03
  • #30 Auto Calculate Total Price14:01
  • #30.5 مشكلة وحلها10:24
  • #31 سؤال و جواب9:18
  • #32 project setup13:36
  • #33 MUI Menu AppBar Components20:19
  • #34 Task solution21:39
  • #35 MUI Stack Grid Components20:12
  • #36 Render an array of items18:17
  • #37 Toggle between dark mode light mode20:49
  • #38 MUI Card Component15:34
  • #39 Task solution24:37
  • #40 MUI ImageList Component23:31
  • #41 Show hide sidebar16:05
  • #42 MUI Fab Tooltip Modal ButtonGroup27:13
  • #43 اللمسات النهائية للمشروع27:43
  • #44 form validation with React Project 116:15
  • #45 React Hook Form شرح13:11
  • #46 MUI React Hook Form19:31

Requirements

  • React Basics

Description

  1. In this course, you will learn how to use Material UI  with the React JS framework and make real-world projects that already exist in companies.

  2. Material UI  is the world's most popular React UI framework and very easy to learn.

  3. We will start by Installing Material UI and we will start from scratch.

  4. I will teach you how to use Material UI  Components, like Button and IconButton Components.

  5. this library makes design easy when you want to apply dark mode in your project, MUI Dark mode.

  6. you will learn how to Toggle light and dark modes using MUI.

  7. LocalStorage with dark mode to save the last preferred theme.

  8. I will teach you how to use the json-server package and how to send data and get data and delete data.

  9. we will create two important projects, so you can use this library much easier and add these projects to your CV.

  10. At the end of this course, you will learn also how to use React Hook Form to create forms and how to  deal with data.


  11. سوف يتم  التركيز فى هذا الكورس على انشاء المشاريع الموجودة فى سوق العمل

  12. التركيز الأساسى لهذا الكورس هو القدرة على عمل مشاريع  بإستخدام ريأكت  

  13. لا يجب ان يكون لديك معرفة  سابقة بأى كورسات اخرى لان هذا الكورس يبدأ معك من الصفر وحتى الاحتراف  حتى تتمكن من انشاء سيرة ذاتية قوية

  14. يجب ان تعلم ان ها الكورس هو كورس تفاعلى  بمعنى اننى سوف اطلب فى مُنتصف الفيديو ان تقوم بتكملة الكود بنفسك قبل ان اقوم بعمل الأكواد

  15. أهم نصيحة يُمكننى ان اعطيها لك هى ان تقوم بعمل المشاريع الموجودة فى  هذا  الكورس بعد مشاهدة الفيديو  مباشرة  حتى تتعود على كتابة الأكواد وعمل المشاريع الحقيقية


Who this course is for:

  • Javascript developers
  • React developers
  • front-end developers
  • full-stack developer