CourseFlix

Crash Course: Build a Full-Stack Web App in a Weekend!

12h 13m 30s
English
Paid

Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just want to know what your web developer friends do all day? In any of these cases... Welcome to my "Web Development Crash Course"! Together, we will build a fun, small, but full-stack web application in just a few days.

But why this course? And why is it so short?

Well, there are so many 60 and 80-hour-long "complete" web development courses out there, which are great if you want to invest 3 months of your life into finding out if web dev is even right for you or not...

I wanted to offer a different approach. A short and fast crash course, where you can dip your toes into the world of HTML, CSS, JavaScript, and even React (the most used JavaScript library in the world).

You can finish it in a weekend (if you have nothing else planned), or you can take a week. But the point is that you can learn the very fundamentals of web development quite fast, and in an engaging, 99% project-based way.

And even though this is called a "crash course", this course teaches you more in 12 hours than I learned in my first 2 years as a web developer!

That's how condensed, and how valuable, the material is. And the course still maintains the high-quality standard of all my other courses, so that you actually understand what you are learning!

But you might be thinking: "Is a crash course really right for me?"

Well, it all depends on your goals.

Sure, you will not become a web developer after this short course, and you will not be able to build big web projects (but sometimes that's true even for those huge 80-hour courses).

But, at the end of this course, you will have learned and understood the fundamentals of the most important web technologies (HTML, CSS, JavaScript, React). And even more importantly, you will have discovered if you actually like web development and want to pursue it as a (lucrative) career!

Plus, you will walk away from this course with a super cool web application that you can show to all your friends (please tell them I sent you ;)

All this will enable you to go deeper into the topics that you actually liked, and keep learning and progressing on your own if you like (or of course, you can purchase more specialized courses).

So, have you never written a single line of code in your life?

You have come to the right place! We will start slowly, step-by-step, and then speed up the pace as we progress through the course.

So here's what we're gonna do in this course:

  • We will set up your code editor and coding environment together (all for free!)

  • I will guide you through the basics of the web and web development

  • Then we slowly start our project, by writing the HTML code (for the page content)

  • We then style the page and create a layout using CSS

  • Next we create an online database and API for our application data, using a free service called Supabase

  • To get the data into the application and make it interactive, we learn the fundamentals of JavaScript

  • Writing apps with only JavaScript can be difficult, so we build the app using the React library

  • Finally, we deploy the final project to a free service called Netlify

  • DONE! You can now share the URL of your project with everyone :)

Already know HTML, CSS, or JavaScript?

No problem! You can still get something from the course. For example, you can watch only the section on "React" and use the downloadable code from the previous section as your starting point.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 68 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction
All Course Lessons (68)
#Lesson TitleDurationAccess
1
Introduction Demo
07:42
2
A High-Level Overview of Web Development
08:24
3
Setting Up Our Code Editor
08:33
4
What is HTML?
03:12
5
HTML Document Structure
07:33
6
Working With Text and Lists
08:27
7
Hyperlinks, Images, and Attributes
09:09
8
Structuring the App
06:54
9
Building a Form
08:54
10
Adding More Buttons
08:19
11
What is CSS?
03:47
12
Styling Text
08:34
13
Including Google Fonts
15:42
14
Working With Color
09:57
15
Inheritance and the Global Selector
06:33
16
The CSS Box Model
17:15
17
Block and Inline Elements
10:49
18
Creating Small Layouts With Flexbox
14:12
19
Applying Flexbox to Our Facts
10:57
20
Creating Larger Layouts With CSS Grid
12:00
21
Centering the App
12:08
22
Styling Links and Transitions
09:16
23
Styling Buttons
20:18
24
Developer Skill: Googling and Reading Documentation
06:34
25
Styling the Voting Buttons
13:45
26
Styling Form Elements
14:09
27
Adapting the Layout to Smaller Screens
16:47
28
What is Supabase?
02:41
29
Creating Your First Database
04:30
30
Creating a Table
13:17
31
Adding Security Policies
06:43
32
What is JavaScript?
01:43
33
Displaying and Hiding the Form
15:53
34
Values, Variables, and Operators
10:54
35
Functions
10:37
36
Taking Decisions With if/else Statements
11:51
37
The Ternary Operator
07:35
38
Working With Strings
08:33
39
Arrow Functions
08:50
40
Arrays
10:32
41
Objects
09:25
42
Looping Over Arrays: The forEach and map Methods
14:05
43
What is the DOM?
02:04
44
Going Back to the First DOM Manipulation
08:12
45
Creating DOM Elements
15:59
46
Loading Data With fetch and async/await
13:46
47
The filter and find Array Methods
12:26
48
What is React?
06:43
49
Installing Node.js and Setting Up A React Project
13:03
50
Meeting JSX and Creating the App Component
11:32
51
Dividing Our Interface Into Components
16:48
52
Rendering the List of Facts
13:11
53
Passing and Receiving Props
13:19
54
Rendering the List of Categories
07:32
55
Introducing State
11:58
56
Displaying and Hiding the Form the React Way
10:18
57
Creating the Header Component
08:39
58
Working With Forms the React Way
16:46
59
Adding a New Fact – Part 1
11:18
60
Adding a New Fact – Part 2
12:39
61
Loading Data From Supabase with useEffect
17:36
62
Creating a Loader Component
15:50
63
Filtering by Categories
14:40
64
Uploading a Fact to Supabase
12:30
65
Handling Votes and Updating a Fact on Supabase
20:44
66
Finishing Touches and Creating a Production Build
17:50
67
Deploying to Netlify
05:55
68
Where to Go from Here
05:13
Unlock unlimited learning

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

Learn more about subscription

Related courses