React Formula - Learn Frontend Development

23h 47m 37s
English
Paid

Course description

Learn to create modern interfaces using React, Tailwind CSS, and other tools. Most React tutorials are not designed for real beginners and do not help achieve true mastery. They assume that you are already familiar with frontend development and offer only a few random projects. But what if you are a complete beginner? React Formula offers you the chance to start with the basics and gradually deepen your understanding so that nothing is overlooked. By the end of the course, you will confidently create your own React applications and possess the skills needed for frontend development work.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 228 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Formula - Learn Frontend Development

0:00
/
#1: Course Welcome

All Course Lessons (228)

#Lesson TitleDurationAccess
1
Course Welcome Demo
00:42
2
Why Learn React?
02:45
3
Meet the Instructor
02:04
4
Effective Learning
02:58
5
Workspace Tour
04:46
6
Your First App
05:30
7
Rendering Components
07:55
8
Passing Props
10:00
9
Passing Props II
08:48
10
Passing Props III
08:26
11
Alvin's Favorite Keybindings
06:54
12
Alvin's Favorite Keybindings 2
07:18
13
Intro to Tailwind CSS Lecture
04:37
14
Tailwind CSS Basics
10:16
15
Padding and Margin Lecture
03:26
16
Button Style Exercise
11:10
17
No Dynamic Class Names
05:24
18
Button Component Exercise
09:42
19
Flexbox Lecture
05:06
20
Flex Exercise
04:48
21
Flex Col Lecture
02:52
22
Flex Exercise II
04:05
23
Analyzing Layouts Lecture
05:30
24
Tailwind Documentation
04:14
25
Analyzing Layouts Exercise 1
10:51
26
Analyzing Layouts Exercise 2
09:23
27
Analyzing Layouts Exercise 3
06:02
28
Search Page Design 1
00:55
29
Search Page Design 2
09:33
30
Search Page Design 3
10:54
31
Search Page Design 4
05:36
32
Events and State Lecture
07:16
33
Click Event Exercise 1
00:39
34
Click Event Exercise 2
02:53
35
Click Event Exercise 3
11:27
36
Conditional Rendering Exercise 1
00:53
37
Conditional Rendering Exercise 2
10:46
38
Conditional Rendering Exercise 3
03:42
39
Conditional Rendering Exercise 4
02:05
40
Counter 1
00:37
41
Counter 2
04:45
42
Counter 3
04:39
43
Light Switch 1
00:44
44
Light Switch 2
05:35
45
Light Switch 3
12:39
46
Image Carousel 1
00:55
47
Image Carousel 2
09:52
48
Image Carousel 3
08:36
49
Cat Carousel 1
00:49
50
Cat Carousel 2
14:24
51
Cat Carousel 3
04:34
52
Cat Carousel 4
04:32
53
More State Welcome
00:48
54
Stacker 1
00:33
55
Stacker 2
04:08
56
Stacker 3
08:25
57
Checkered Grid 1
00:36
58
Checkered Grid 2
11:18
59
Checkered Grid 3
04:14
60
Centered Responsive Lecture
05:39
61
Simple Dark Mode 1
00:59
62
Simple Dark Mode 2
09:27
63
Simple Dark Mode 3
09:08
64
Modal 1
00:38
65
Modal 2
06:11
66
Modal 3
11:21
67
Playing Card 1
00:39
68
Playing Card 2
14:10
69
Playing Card 3
06:09
70
Map Lecture
06:54
71
Map Exercise 1
00:43
72
Map Exercise 2
08:47
73
Song List 1
00:37
74
Song List 2
14:00
75
Property Listings 1
00:57
76
Property Listings 2
10:43
77
Testimonial Carousel 1
00:47
78
Testimonial Carousel 2
13:03
79
Testimonial Carousel 3
05:57
80
Testimonial Carousel 4
05:14
81
Testimonial Carousel 5
06:50
82
Pagination 1
01:00
83
Pagination 2
10:28
84
Pagination 3
11:58
85
Munch Central 1
00:29
86
Munch Central 2
10:54
87
Furniture Pagination 1
00:46
88
Furniture Pagination 2
11:04
89
Inputs and Forms Lecture
04:00
90
Text Input Exercise 1
00:28
91
Text Input Exercise 2
08:51
92
Sign In Form 1
00:35
93
Sign In Form 2
11:19
94
Sign In Form 3
05:17
95
Word Filter 1
00:49
96
Word Filter 2
14:01
97
Message Project 1
00:40
98
Message Project 2
04:30
99
Message Project 3
13:34
100
Checkbox Input Exercise 1
00:31
101
Checkbox Input Exercise 2
10:25
102
Number Input Exercise 1
00:58
103
Number Input Exercise 2
10:07
104
Select Exercise 1
00:48
105
Select Exercise 2
09:05
106
Cat Directory 1
01:07
107
Cat Directory 2
11:26
108
Cat Directory 3
06:07
109
Cat Directory 4
02:38
110
Integrating with Backends
04:43
111
Using Fetch 1
00:52
112
Using Fetch 2
02:53
113
Using Fetch 3
11:44
114
Random Joke 1
00:50
115
Random Joke 2
08:35
116
Random Joke 3
07:44
117
Use Effect Lecture
04:30
118
Use Effect Exercise 1
00:50
119
Use Effect Exercise 2
03:02
120
Teammates Project 1
00:59
121
Teammates Project 2
14:35
122
Loading Spinner Exercise 1
00:47
123
Loading Spinner Exercise 2
05:06
124
Stocks Project 1
00:52
125
Stocks Project 2
06:53
126
Stocks Project 3
12:54
127
Async Await Exercise 1
00:25
128
Async Await Exercise 2
04:19
129
Weather Forecast 1
00:51
130
Weather Forecast 2
08:27
131
Weather Forecast 3
03:47
132
Error Handling 1
00:40
133
Error Handling 2
11:48
134
States Project 1
00:43
135
States Project 2
10:12
136
States Project 3
03:25
137
CRUD Welcome
03:03
138
Message Board 1
00:48
139
Message Board 2
05:30
140
Message Board 3
08:27
141
Deleting Furni 1
00:41
142
Deleting Furni 2
03:01
143
Deleting Furni 3
05:56
144
Deleting Furni 4
04:45
145
Updating Furni 1
00:58
146
Updating Furni 2
06:53
147
Updating Furni 3
05:46
148
Todo List Part 1 1
00:39
149
Todo List Part 1 2
12:24
150
Todo List Part 1 3
09:14
151
Todo List Part 2 1
00:46
152
Todo List Part 2 2
05:23
153
Todo List Part 2 3
15:08
154
React Router Welcome
01:17
155
Frontend Routing 1
01:25
156
Frontend Routing 2
04:28
157
Frontend Routing 3
08:56
158
Frontend Routing II 1
01:04
159
Frontend Routing II 2
10:18
160
Frontend Routing II 3
13:41
161
Refs Project 1
01:12
162
Refs Project 2
06:42
163
Refs Project 3
02:28
164
Refs Project 4
02:25
165
Intro to React Context 1
00:39
166
Intro to React Context 2
14:05
167
Theme Context 1
01:11
168
Theme Context 2
10:58
169
Use Callback 1
00:33
170
Use Callback 2
04:48
171
Use Callback 3
03:17
172
Applying Use Callback 1
00:15
173
Applying Use Callback 2
05:40
174
Use State Function Default Lecture
06:17
175
Use State Functional Setter Lecture
03:43
176
Use Effect Clean Up 1
00:19
177
Use Effect Clean Up 2
06:08
178
Responsive Design Welcome
01:03
179
Local Environment Setup
04:25
180
Screen Size Breakpoints 1
01:12
181
Screen Size Breakpoints 2
09:40
182
Screen Size Breakpoints 3
10:48
183
Mobile Responsive Design 1
01:28
184
Mobile Responsive Design 2
08:55
185
Mobile Responsive Design 3
15:00
186
Mobile Responsive Design 4
09:28
187
Mobile Responsive Design 5
10:51
188
Mobile Responsive Design 6
11:49
189
Capstone Project Welcome
03:12
190
Getting Started 1
00:56
191
Getting Started 2
11:50
192
Creating the AuthForm 1
01:05
193
Creating the AuthForm 2
19:48
194
Designing the Sign In 1
01:20
195
Designing the Sign In 2
13:31
196
API Integration
13:28
197
Sign Up Feature 1
01:30
198
Sign Up Feature 2
22:20
199
Improving Imports
06:19
200
Sign In Feature 1
01:31
201
Sign In Feature 2
18:18
202
Managing the Session Token
21:06
203
Basic Navbar 1
00:54
204
Basic Navbar 2
16:59
205
Sign Out Button 1
00:58
206
Sign Out Button 2
10:34
207
Sign Out Button 3
10:34
208
Fetching Plants 1
00:48
209
Fetching Plants 2
07:25
210
Plant List Page Design 1
00:51
211
Plant List Page Design 2
06:01
212
Plant List Page Design 3
11:26
213
Plant List Page Design 4
14:14
214
Plant Show Page Design 1
00:55
215
Plant Show Page Design 2
21:54
216
Pot Color Purchase Option 1
00:34
217
Pot Color Purchase Option 2
21:21
218
Adding to the Cart 1
00:34
219
Adding to the Cart 2
15:28
220
Cart Modal 1
00:46
221
Cart Modal 2
27:13
222
Cart Item Removal 1
01:00
223
Cart Item Removal 2
22:03
224
Mobile Menu 1
01:04
225
Mobile Menu 2
23:08
226
Finishing Touches 1
00:34
227
Finishing Touches 2
17:24
228
Congratulations
00:43

Unlock unlimited learning

Get instant access to all 227 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Simplified - Advanced

React Simplified - Advanced

Sources: webdevsimplified.com
Once you become a good React developer, it is time to start diving into advanced React concepts. This course will take you from a junior to a mid-level React d
11 hours 34 minutes 10 seconds
MERN eCommerce From Scratch

MERN eCommerce From Scratch

Sources: udemy, Brad Traversy
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shoppi...
14 hours 49 minutes 45 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Sources: udemy
Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
20 hours 25 minutes 13 seconds
Crack the Frontend Interview with React

Crack the Frontend Interview with React

Sources: zerotomastery.io
Enhance your React skills with a project-based course that prepares you for frontend engineering interviews. Build a star rating component while mastering
1 hour 6 minutes 53 seconds