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

Just released in December 2022

"I have already learned more in this class than in a $12,000 coding BootCamp (...). Before taking one of the Bootcamp on Udemy, you should take this class first" – Robert

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

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.

If all this sounds great, then join me on this adventure right now. See you on the inside :)

What's inside

Learning objectives

You will build a fun web application in just a few days! no experience needed
You will not want 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

You will build a fun web application in just a few days! no experience needed
You will not want 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

Syllabus

Welcome, Welcome, Welcome!

Introduction

Read Before You Start!

A High-Level Overview of Web Development

Setting Up Our Code Editor

HTML – Building the App Skeleton [DAY 1]

What is HTML?

HTML Document Structure

Working With Text and Lists

Hyperlinks, Images, and Attributes

Structuring the App

Building a Form

Adding More Buttons

CSS – Styling the App [DAY 1]

What is CSS?

Styling Text

Including Google Fonts

Working With Color

Inheritance and the Global Selector

The CSS Box Model

Block and Inline Elements

Creating Small Layouts With Flexbox

Applying Flexbox to Our Facts

Creating Larger Layouts With CSS Grid

Centering the App

Styling Links and Transitions

Styling Buttons

Developer Skill: Googling and Reading Documentation

Styling the Voting Buttons

Styling Form Elements

Adapting the Layout to Smaller Screens

Supabase – Storing the App Data [DAY 1]

What is Supabase?

Creating Your First Database

Creating a Table

Adding Security Policies

JavaScript – Making the App Interactive [DAY 1 + 2]

What is JavaScript?

Displaying and Hiding the Form

Values, Variables, and Operators

Functions

Taking Decisions With if/else Statements

The Ternary Operator

Working With Strings

Arrow Functions

Arrays

Objects

Looping Over Arrays: The forEach and map Methods

What is the DOM?

Going Back to the First DOM Manipulation

Creating DOM Elements

Loading Data With fetch and async/await

The filter and find Array Methods

React – Building the Final App [DAY 2]

What is React?

Installing Node.js and Setting Up A React Project

Meeting JSX and Creating the App Component

Dividing Our Interface Into Components

Rendering the List of Facts

Passing and Receiving Props

Rendering the List of Categories

Introducing State

Displaying and Hiding the Form the React Way

Creating the Header Component

Working With Forms the React Way

Adding a New Fact – Part 1

Adding a New Fact – Part 2

Loading Data From Supabase with useEffect

Creating a Loader Component

Filtering by Categories

Uploading a Fact to Supabase

Handling Votes and Updating a Fact on Supabase

Deployment – Uploading the App to the Internet [DAY 2]

Displaying The App on All Mobile Phones

Finishing Touches and Creating a Production Build

Deploying to Netlify

The End!

Where to Go from Here

BONUS: Check Out My Other Courses!

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches the fundamentals of web development, providing a strong foundation for learners

Designed for absolute beginners with no prior coding experience

Provides a hands-on approach to learning through project-based activities

Covers essential web technologies such as HTML, CSS, JavaScript, and React

Guided by an experienced instructor recognized for their expertise in web development

Provides a comprehensive overview of the web development process, from building the interface to handling data and deployment

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Crash Course: Build a Full-Stack Web App in a Weekend! with these activities:

Read 'Head First HTML and CSS'

Show steps

Gain a comprehensive understanding of HTML and CSS fundamentals by reading this highly recommended book, which presents the concepts in a clear and engaging manner.

View Head First JavaScript Programming on Amazon

Show steps

Obtain a copy of 'Head First HTML and CSS'.
Read through the book, taking notes and highlighting important points.
Complete the exercises and quizzes within the book to reinforce your understanding.
Refer back to the book as a reference guide whenever needed.

Practice HTML coding exercises

Show steps

Improve your understanding and proficiency in HTML by completing coding exercises that reinforce the concepts covered in the course.

Browse courses on HTML

Show steps

Find online HTML coding exercises or create your own practice problems.
Solve the exercises by writing HTML code to meet the specified requirements.
Review your solutions and identify areas for improvement.
Repeat the process to enhance your skills and solidify your knowledge of HTML.

Follow online CSS tutorials

Show steps

Enhance your CSS skills by following guided tutorials that provide step-by-step instructions and examples.

Browse courses on CSS

Show steps

Identify reputable online resources or platforms offering CSS tutorials.
Select tutorials that align with your learning goals and skill level.
Follow the instructions and practice writing CSS code to achieve the desired visual effects.
Experiment with different CSS properties and values to explore their impact on web page appearance.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a simple web page using HTML and CSS

Show steps

Apply your HTML and CSS knowledge to create a functional web page, reinforcing your understanding of how these technologies work together.

Browse courses on HTML

Show steps

Plan the structure and layout of your web page.
Write the HTML code to create the basic structure of the page, including headings, paragraphs, and links.
Add CSS styles to enhance the visual appearance and layout of the page.
Test your web page in different browsers to ensure it renders correctly.
Refine your code and make improvements based on feedback or your own observations.

Solve JavaScript coding challenges

Show steps

Enhance your JavaScript skills by solving coding challenges that test your understanding of core concepts and problem-solving abilities.

Browse courses on JavaScript

Show steps

Identify online platforms or resources that offer JavaScript coding challenges.
Select challenges that are appropriate for your skill level and interests.
Attempt to solve the challenges by writing JavaScript code.
Review your solutions and identify areas for improvement.
Repeat the process to solidify your grasp of JavaScript.

Follow React tutorials to build a small React app

Show steps

Gain practical experience with React by following guided tutorials that walk you through the process of building a simple React application.

Browse courses on React

Show steps

Find online tutorials that provide step-by-step instructions for building a React app.
Set up your development environment and install the necessary tools.
Follow the tutorial to create the React app, including components, state management, and event handling.
Experiment with different React features and explore its capabilities.
Deploy your React app to a hosting platform to share it with others.

Develop a more complex web app using React

Show steps

Challenge yourself by building a more advanced web app using React, demonstrating your understanding of the framework and your ability to apply it to real-world projects.

Browse courses on React

Show steps

Plan the features and functionality of your web app.
Create a React project and set up the necessary components and state management.
Implement the core features of your web app, including data fetching, user interactions, and routing.
Refactor and optimize your code to improve performance and maintainability.
Deploy your web app and gather feedback from users.

Career center

Learners who complete Crash Course: Build a Full-Stack Web App in a Weekend! will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Crash Course

Build a Full-Stack Web App in a Weekend!

12 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses