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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 71 lectures (12h 15m) | 8.15 GB

A quick, fun, and hands-on introduction to web development. Build a complete app with HTML, CSS, JavaScript, and React!

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.

What you’ll learn

  • You WILL build a fun web application in just a few days! No experience needed
  • You will NOT be able to pause the course once you start 😉
  • You WILL learn the very fundamentals of modern web development (fast!)
  • You will NOT master web technologies (that takes years…)
  • You WILL get the experience of building a complete web app
  • You will NOT be able to build complex applications on your own, but small ones
  • You WILL discover if web development is a good career path for you
Table of Contents

Welcome Welcome Welcome
1 Introduction
2 Read Before You Start
3 A HighLevel Overview of Web Development
4 Setting Up Our Code Editor

HTML Building the App Skeleton DAY 1
5 What is HTML
6 HTML Document Structure
7 Working With Text and Lists
8 Hyperlinks Images and Attributes
9 Structuring the App
10 Building a Form
11 Adding More Buttons

CSS Styling the App DAY 1
12 What is CSS
13 Styling Text
14 Including Google Fonts
15 Working With Color
16 Inheritance and the Global Selector
17 The CSS Box Model
18 Block and Inline Elements
19 Creating Small Layouts With Flexbox
20 Applying Flexbox to Our Facts
21 Creating Larger Layouts With CSS Grid
22 Centering the App
23 Styling Links and Transitions
24 Styling Buttons
25 Developer Skill Googling and Reading Documentation
26 Styling the Voting Buttons
27 Styling Form Elements
28 Adapting the Layout to Smaller Screens

Supabase Storing the App Data DAY 1
29 What is Supabase
30 Creating Your First Database
31 Creating a Table
32 Adding Security Policies

JavaScript Making the App Interactive DAY 1 2
33 What is JavaScript
34 Displaying and Hiding the Form
35 Values Variables and Operators
36 Functions
37 Taking Decisions With ifelse Statements
38 The Ternary Operator
39 Working With Strings
40 Arrow Functions
41 Arrays
42 Objects
43 Looping Over Arrays The forEach and map Methods
44 What is the DOM
45 Going Back to the First DOM Manipulation
46 Creating DOM Elements
47 Loading Data With fetch and asyncawait
48 The filter and find Array Methods

React Building the Final App DAY 2
49 What is React
50 Installing Nodejs and Setting Up A React Project
51 Meeting JSX and Creating the App Component
52 Dividing Our Interface Into Components
53 Rendering the List of Facts
54 Passing and Receiving Props
55 Rendering the List of Categories
56 Introducing State
57 Displaying and Hiding the Form the React Way
58 Creating the Header Component
59 Working With Forms the React Way
60 Adding a New Fact Part 1
61 Adding a New Fact Part 2
62 Loading Data From Supabase with useEffect
63 Creating a Loader Component
64 Filtering by Categories
65 Uploading a Fact to Supabase
66 Handling Votes and Updating a Fact on Supabase

Deployment Uploading the App to the Internet DAY 2
67 Displaying The App on All Mobile Phones
68 Finishing Touches and Creating a Production Build
69 Deploying to Netlify

The End
70 Where to Go from Here
71 BONUS Check Out My Other Courses

Homepage