Crash Course: Build a Full-Stack Web App in a Weekend!
 | 12hrs 15m total length |
 | 8 sections |
| 71 lectures |
Course Overview
Crash Course: Build a Full-Stack Web App in a Weekend!
By the end of this full-stack crash course, you will have mastered the essential building blocks of modern web technologies, including HTML, CSS, JavaScript, and React. We’ll begin with a solid foundation, taking things step-by-step, and gradually pick up the pace as you gain confidence and experience. More importantly, this course will help you discover if web development is something you’re truly passionate about, and whether you want to pursue it as a rewarding, potentially lucrative career
What you’ll learn:
- 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
Course Title
Crash Course: Build a Full-Stack Web App in a Weekend!
This course includes:
- 12 hours on-demand video
- 3 articles
- 10 downloadable resources
- Access on mobile and TV
- Full lifetime access
- Certificate of completion
Requirements
- No programming experience needed!
- Any computer works — Windows, macOS or Linux
- You don’t need to buy any software — we will use the best free code editor in the world
Who this course is for:
- Take this course if you need a quick introduction to modern web development
- Take this course if you want to find out if web development is a good career choice
- Take this course if you want to impress your friends by building a super cool web app in a few days!
Course content
8 sections • 71 lectures • 12h 15m total length
1. Welcome, Welcome, Welcome! – 4 lectures 26min
| Introduction Preview | 7:41 |
| Read Before You Start! | 1:42 |
| A High-Level Overview of Web Development Preview | 08:23 |
| Setting Up Our Code Editor | 8:32 |
2. HTML – Building the app Skeleton [DAY 1] – 7 lectures 52min
| What is HTML? Preview | 3:11 |
| HTML Document Structure | 7:32 |
| Working With Text and Lists | 8:26 |
| Hyperlinks, Images, and Attributes | 9:08 |
| Structuring the App | 6:53 |
| Building a Form Preview | 08:53 |
| Adding More Buttons | 8:18 |
3. CSS – Styling the app [DAY 1] – 17 lectures 3hr 22min
| What is CSS? | 3:46 |
| Styling Text | 8:33 |
| Including Google Fonts | 15:41 |
| Working With Color Preview | 09:56 |
| Inheritance and the Global Selector | 6:32 |
| The CSS Box Model | 17:13 |
| Block and Inline Elements | 10:48 |
| Creating Small Layouts With Flexbox | 14:10 |
| Applying Flexbox to Our Facts | 10:56 |
| Creating Larger Layouts With CSS Grid | 11:59 |
| Centering the App | 12:07 |
| Styling Links and Transitions | 9:15 |
| Styling Buttons | 20:17 |
| Developer Skill: Googling and Reading Documentation | 6:33 |
| Styling the Voting Buttons | 13:44 |
| Styling Form Elements | 14:07 |
| Adapting the Layout to Smaller Screens | 16:46 |
4. Supabase – Storing the app Data [DAY 1] – 4 lectures 27min
| What is Supabase? | 2:39 |
| Creating Your First Database | 4:29 |
| Creating a Table | 13:16 |
| Adding Security Policies | 6:42 |
5. JavaScript – Making the App Interactive [DAY 1+2] – 16 lectures 2hr 42min
| What is JavaScript? | 1:42 |
| Displaying and Hiding the Form Preview | 15:52 |
| Values, Variables, and Operators | 10:53 |
| Functions | 10:36 |
| Taking Decisions With if/else Statements | 11:50 |
| The Ternary Operator | 7:34 |
| Working With Strings | 8:32 |
| Arrow Functions | 8:49 |
| Arrays | 10:30 |
| Objects | 9:24 |
| Looping Over Arrays: The forEach and map Methods | 14:04 |
| What is the DOM? | 2:03 |
| Going Back to the First DOM Manipulation | 8:11 |
| Creating DOM Elements | 15:58 |
| Loading Data With fetch and async/await | 13:45 |
| The filter and find Array Methods | 12:25 |
6. React – Building the Final App [DAY 2] – 18 lectures 3hr 55min
| What is React? | 6:42 |
| Installing Node.js and Setting Up A React Project | 13:02 |
| Meeting JSX and Creating the App Component | 11:31 |
| Dividing Our Interface Into Components | 16:47 |
| Rendering the List of Facts | 13:10 |
| Passing and Receiving Props | 13:18 |
| Rendering the List of Categories | 7:31 |
| Introducing State | 11:57 |
| Displaying and Hiding the Form the React Way Preview | 10:17 |
| Creating the Header Component | 8:38 |
| Working With Forms the React Way | 16:45 |
| Adding a New Fact – Part 1 | 11:17 |
| Adding a New Fact – Part 2 | 12:38 |
| Loading Data From Supabase with useEffect | 17:34 |
| Creating a Loader Component | 15:48 |
| Filtering by Categories | 14:39 |
| Uploading a Fact to Supabase | 12:29 |
| Handling Votes and Updating a Fact on Supabase | 20:43 |
7. Deployment – Uploading the App to the Internet [DAY 2] – 3 lectures 24min
| Displaying The App on All Mobile Phones | 0:17 |
| Finishing Touches and Creating a Production Build | 17:49 |
| Deploying to Netlify | 5:54 |
8. The End! – 2 lectures 7min
| Where to Go from Here | 5:12 |
| BONUS: Check Out My Other Courses! | 1:23 |
Instructor: Jonas Schmedtmann
Hi, I’m Jonas! I’m one of Udemy’s Top Instructors and all my premium courses have earned the best-selling status for outstanding performance and student satisfaction.
I’m a full-stack web developer and designer with a passion for building beautiful web interfaces from scratch. I’ve been building websites and apps since 2010 and also have a Master’s degree in Engineering.
I discovered my passion for teaching and helping others by sharing everything I knew during college. This passion led me to Udemy in 2015, where I now have the privilege of training 1,500,000+ learners in the field of web development.
What learners love the most about all my courses is the fact that I take the time to explain every single concept in a way that everyone can easily understand.
So, do you want to learn how to build awesome websites with modern HTML and CSS?
Looking for a complete JavaScript course that takes you from zero to an advanced developer?
Or maybe you want to build modern and powerful front-end applications with React?
Then don’t waste your time with random tutorials or incomplete youtube videos. All my courses are easy-to-follow, all-in-one packages that will take your skills to the next level.
These courses are exactly the courses I wish I had when I was first getting into web development!
But see for yourself, enroll in one of my courses, and join 1,500,000+ happy students today.
Course Feature
Course Feature
Course Provider: Udemy
UEN: N/A
Course Reference Number: N/A
Mode Of Training: Online
| FULL COURSE FEE | $129.98 |
|---|---|
| Duration | 12hrs 15min |
Available in: English
