CF

React Formula - Learn Frontend Development

23h 47m 37s
English
Paid

React Formula - Learn Frontend Development is a 228-lesson 23 hours 47 minutes self-paced course by Alvin Zablan. Learn to create modern interfaces using React, Tailwind CSS, and other tools.

Course facts

Lessons
228
Duration
23 hours 47 minutes
Level
All levels
Language
English
Updated
Instructor
Alvin Zablan
Price
Premium

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.

Additional

Unfortunately, we cannot provide the interactive IDE with course files, so the course is available exclusively in video format.

Who teaches React Formula - Learn Frontend Development? Alvin Zablan

Alvin Zablan thumbnail

Alvin Zablan is a US developer and educator focused on practical front-end development and the algorithm / data-structure interview prep that gates entry into well-paying engineering roles. He runs Structy, an interview-prep platform, alongside his independent React tutorial work.

His CourseFlix listing carries two Alvin Zablan courses: React Formula — Learn Frontend Development and Crash Course — Beginner Data Structures And Algorithms Concepts. Material is paid and aimed at developers learning React or preparing for technical interviews.

What lessons are included in React Formula - Learn Frontend Development?

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

What courses are similar to React Formula - Learn Frontend Development?

More courses by Alvin Zablan

Frequently asked questions

What prerequisites are needed for this course?
The course is designed for complete beginners, so no prior experience with React or frontend development is required. It starts with the basics, such as rendering components and passing props, and gradually deepens your understanding of React and related tools like Tailwind CSS.
What types of projects will I build during the course?
Throughout the course, you'll work on several projects that reinforce your understanding of React and Tailwind CSS. These include creating components like buttons and counters, designing layouts with the Flexbox system, and building interactive elements like image carousels and a checkered grid. These projects are designed to apply concepts learned in lectures and exercises.
Who is the target audience for this course?
The course is targeted at individuals who are new to frontend development and wish to learn React from the ground up. It is suitable for those who have little to no prior experience in programming and want to build a strong foundation in creating modern web interfaces using React and Tailwind CSS.
What tools and platforms will I learn to use?
You will learn to use React for building user interfaces and Tailwind CSS for styling components. The course includes specific lessons on Tailwind CSS basics and its documentation, as well as practical exercises like styling buttons and designing layouts with Flexbox.
How does the scope of this course compare to other React courses?
Unlike many other React courses that assume prior knowledge, this course focuses on beginners and covers the foundational aspects of React and Tailwind CSS in detail. With 228 lessons, it provides a comprehensive introduction to these technologies, ensuring no essential concepts are overlooked.
What topics are not covered in this course?
The course does not cover advanced React concepts such as server-side rendering, hooks beyond state and events, or integration with backend technologies. It focuses primarily on client-side development and the basics of creating interactive and responsive user interfaces.
What is the estimated time commitment for completing the course?
The course comprises 228 lessons, offering a thorough exploration of React and Tailwind CSS for beginners. While the total runtime is not specified, learners should expect to dedicate a substantial amount of time to both watching lectures and completing hands-on exercises to fully grasp the material.