#2.1 Design Home page | courses4arab

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React Full Course with projects 2023

React Full Course Level 1

React full course with projects 2023 🔥🔥 (3:17)
React Full course with projects #2.1 | Best settings for VS-Code & React (16:48)
React Full course with projects #2.2 | Create React App (13:13)
React Full course with projects #2.3 | How React works? (18:28)
React Full course with projects #3 | How to share react projects? (12:16)
React Full course with projects #3.1 | How to update React project? (9:34)
React Full course with projects #4 | React Project (18:07)
React Full course with projects #5 | React Router v6.4 (21:11)
React Full course with projects #5.1 | تعديل ملفات الكورس (6:30)
React Full course with projects #6 | React Components (20:48)
React Full course with projects #7 | React Router v6 (Link & NavLink) (13:58)
React Full course with projects #8 | Components and Props (13:19)
React Full course with projects #9 | styling react applications (20:29)
React Full course with projects #9.1 | Component Stylesheets (10:16)
React Full course with projects #9.2 | ترتيب الأكواد مهم جداً (6:24)
React Full course with projects #10 | Deploy React App on Firebase Hosting (12:47)
React Full course with projects #10.1 | رفع الموقع بعد التعديل عليه (8:25)
React Full course with projects #10.2 | Firebase Hosting & Custom domain (8:52)
React Full course with projects #11 | كيف يعمل ريأكت؟ (13:47)
React Full course with projects #11.1 | عيوب ريأكت (11:39)
React Full course with projects #12 | React helmet for SEO (21:35)
React Full course with projects #13 | Convert React App into a PWA (38:18)
React Full course with projects #14 | what is Gatsby & Next.js ? (11:06)
React Full course with projects #15 | pug-gulp VS React (6:03)

Level2 | React & Firebase

#1 المقدمة (4:45)
#2 Create React App using Vite (10:52)
#2.1 what is the proplem? (14:02)
#2.2 React useState Hook شرح (24:44)
#2.3 Dark mode using useState (28:17)
#2.4 Toggle dark-light theme (28:42)
#2.5 React useReducer Hook شرح (22:13)
#2.6 Task solution (10:08)
#3 what is the proplem? (9:21)
#3.1 How to manage state globally (25:23)
#3.2 Task solution (21:38)
#4 CSS مراجعة (10:00)
#4.1 Task Solution (24:38)
#5 JavaScript LocalStorage شرح (19:08)
#5.1 React dark mode with LocalStorage (14:04)
#5.2 مشكلة (14:32)
#6 Sign-in & Sign-up Pages (22:45)
#7 JavaScript form (9:21)
#8 Firebase setup (7:22)
#9 Firebase Authentication (21:10)
#10 User State & Sign-out (15:00)
#11 Sign in existing users (14:30)
#12 useNavigate Hook (14:19)
#13 Show error message (14:04)
#14 Task (9:02)
#14.1 useEffect Hook (10:02)
#14.2 Task solution (16:39)
#15 Profile Page (14:48)
#15.1 Task solution (15:51)
#15.2 Task solution (14:02)
#15.3 Task solution (9:28)
#16 Send verification email (23:31)
#16.1 Task solution (11:06)
#17 CSS مراجعة (14:07)
#17.1 Task solution (15:33)
#17.2 Task solution (8:01)
#17.3 Task solution (Delete account) (4:51)
#18 Loading animations for React projects (18:23)
#19 ترويق العمل أهم من العمل ♥ (10:17)
#20 CSS media query مراجعة (10:32)
#20.1 Deploy a React App With Firebase Hosting (5:33)
#21 Create 404 Page (15:09)

React Level3 | Full-Stack Project

#1 المقدمة (6:33)
#2 تنظيم ملفات المشروع (15:54)
#2.1 Design Home page (37:43)
#2.2 Design edit-task page (41:17)
#2.3 Task (2:21)
#3 Redesign modal (17:06)
#3.1 Task solution (12:17)
#4 What is {children} elements? (9:36)
#4.1 فيديو مهم جداً (4:16)
#4.2 Modal animation (6:03)
#5 Rendering an array of data (18:32)
#5.1 Task solution (22:12)
#6 Add data to Firestore (13:17)
#6.1 Task solution (19:57)
#7 ترويق المشروع (24:54)
#8 تقسيم المشروع الى أجزاء (16:26)
#9 Add only new item into array (15:07)
#10 Get data From Firestore (19:04)
#10.1 Task Solution (13:21)
#10.2 Task Solution (3:55)
#11 تنظيم ملفات المشروع (24:17)
#11.1 Get the userId param from the URL (8:23)
#12 Get only one document from firestore (15:23)
#12.1 Checkbox (8:31)
#13 Update data in Firestore (10:15)
#13.1 Task Solution (7:48)
#14 Update an existing array (Add & Remove) (22:25)
#14.1 CSS Animation (5:04)
#15 Delete a document from Firestore (12:00)
#15.1 navigate("/", { replace: true }) (3:13)
#15.2 Delete specific fields from a document (5:01)
#16 React useRef Hook (8:58)
#17 Task Solution (11:11)
#17.1 Task Solution (4:30)
#17.2 Task Solution (4:01)
#17.3 Task Solution (5:10)
#18 Order and limit data (8:42)
#18.1 Task Solution (9:57)
#18.2 Task Solution (3:59)
#19 Get specific documents (8:43)
#19.1 Task solution (14:08)
#19.2 Task solution (6:10)
#20 Design dropdown menu for languages (25:37)
#20.1 Add Multiple Languages in React Apps (25:39)
#20.2 Task solution (7:53)
#21 مكتبة أكواد خاصة بك (8:57)
#22 قبل رفع الموقع (11:58)
#22.1 Deploy React App on Firebase Hosting (3:36)
#23 نصائح 🧡 (2:40)

React Level4 - learn Material UI + 2Projects

#1 Material UI المقدمة (8:29)
#2 تنظيم ملفات المشروع (15:01)
#3 Install Material UI (9:17)
#4 MUI Typography Component (10:50)
#5 How to style MUI Component? (8:58)
#6 MUI Button & IconButton Components (16:11)
#7 MUI AppBar & Link Components (13:58)
#8 MUI Avatar Component & :hover (11:12)
#9 MUI Drawer & Divider Components (17:27)
#10 MUI List & ListItem Components (6:25)
#11 MUI Link href & Link to & useNavigate() (7:58)
#12 MUI Box & Container Components (7:56)
#13 MUI Paper & Card Components (10:36)
#14 MUI TextField Component (17:52)
#15 MUI Dark mode😎 (9:41)
#16 MUI Adding new colors (4:16)
#17 MUI Toggle light and dark modes (18:19)
#18 MUI Dark mode with LocalStorage (9:11)
#19 MUI Dark mode with custom colors (13:51)
#20 React RouteruseLocation() Hook (9:37)
#21 MUI Breakpoints (CSS Media Queries) (11:17)
#22 MUI show & hide Drawer (15:23)
#23 Task solution (13:55)
#24 تنظيم ملفات المشروع (9:28)
#25 Task solution (15:07)
#26 المقدمة json-server (8:18)
#27 Send data (13:50)
#28 Get Data (10:44)
#29 Delete data (8:03)
#30 Auto Calculate Total Price (14:02)
#30.5 مشكلة وحلها (10:25)
#31 نهاية المشروع الأول (9:18)
#32 project setup Project 2 (13:36)
#33 MUI Menu &AppBar Components (20:19)
#34 Task solution (21:39)
#35 MUI Stack & Grid Components (20:12)
#36 Render an array of items (18:17)
#37 Toggle between dark mode & light mode 😎 (20:50)
#38 MUI Card Component (15:34)
#39 Task solution (24:37)
#40 MUI ImageList Component (23:31)
#41 Show & hide sidebar (16:05)
#42 MUI Fab & Tooltip & Modal & ButtonGroup (27:13)
#43 اللمسات النهائية للمشروع 🧡 (27:43)
#44 form validation with React (Project #1) (16:15)
#45 React Hook Form شرح (13:12)
#46 MUI & React Hook Form (19:31)

React Level5

المقدمة (3:29)
#2 Update all dependencies in package.json to the latest version (15:20)
#3 Home Page (14:38)
#4 Cart Page (23:35)
#5 Task Solution (13:13)
#6 What is API & MERN stack (4:25)
#7 Creating a Node.js API (11:45)
#8 Upload images to Cloudinary (6:15)
#9 Fetching data using Redux Toolkit (RTK Query) (22:27)
#10 Task Solution (8:17)
#11 Redux VS Redux Toolkit VS RTK Query المقدمة (6:19)
⭐ #12 Learn Redux Toolkit (Crash Course) (22:25)
#13 Using Redux Toolkit in our project (15:31)
#14 هنعمل ايه ؟؟ (16:49)
#15 (Spread Operator) مراجعة جافاسكريبت (8:56)
#16 addToCartFUCNCTION (13:06)
#17 ؟ Array كيفية الحصول على عنصر معين من الـ (10:14)
#18 Task Solution (7:48)
⭐ #19 ؟ Array كيفية حذف عنصر معين من الـ (18:08)
#20 هنعمل ايه ؟؟ (13:44)
#21 Task Solution (13:08)
#22 Task Solution ( Array حذف عنصر معين من الـ ) (10:19)
#23 Task Solution (get product quantity) (10:31)
#24 localStorage (JSON.stringify & JSON.parse) شرح (11:52)
#25 Task Solution (send data to localStorage) (11:04)
#26 Task Solution (update quantity in localStorage) (10:44)
#27 Calculate the total price (6:45)
#28 react-router-dom (dynamic links) (14:55)
#29 Task Solution (node.js & Express.js) (5:09)
#30 Using RTK Query to get one product (12:41)
#31 How to get the params from the URL (6:08)
#32 Upload images to Cloudinary (6:07)
#33 Task Solution (16:06)
#34 Task Solution(Add product to cart) (9:16)
#35 Deploy the project for free (13:20)
#36 رفع الموقع بعد التعديل عليه (8:42)
#37 Add Custom Domain (c4a.store) (3:15)

Teach online with

#2.1 Design Home page

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock