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

Focused View

Jonas Schmedtmann

12:12:15

150 View

1. Welcome, Welcome, Welcome!

1. Introduction.mp4

07:41

2.1 course-slides.pdf

2.2 final-after-section-02.zip

2.3 final-after-section-03.zip

2.4 final-after-section-05.zip

2.5 final-after-section-06.zip

2.6 starter-files.zip

2. Read Before You Start!.html

3. A High-Level Overview of Web Development.mp4

08:23

4. Setting Up Our Code Editor.mp4

08:32

2. HTML Building the App Skeleton [DAY 1]

1. What is HTML.mp4

03:11

2.1 final-after-section-02.zip

2. HTML Document Structure.mp4

07:32

3. Working With Text and Lists.mp4

08:26

4. Hyperlinks, Images, and Attributes.mp4

09:08

5. Structuring the App.mp4

06:53

6. Building a Form.mp4

08:53

7. Adding More Buttons.mp4

08:18

3. CSS Styling the App [DAY 1]

1. What is CSS.mp4

03:46

2.1 final-after-section-03.zip

2. Styling Text.mp4

08:33

3. Including Google Fonts.mp4

15:41

4. Working With Color.mp4

09:56

5. Inheritance and the Global Selector.mp4

06:32

6. The CSS Box Model.mp4

17:13

7. Block and Inline Elements.mp4

10:48

8. Creating Small Layouts With Flexbox.mp4

14:10

9. Applying Flexbox to Our Facts.mp4

10:56

10. Creating Larger Layouts With CSS Grid.mp4

11:59

11. Centering the App.mp4

12:07

12. Styling Links and Transitions.mp4

09:15

13. Styling Buttons.mp4

20:17

14. Developer Skill Googling and Reading Documentation.mp4

06:33

15. Styling the Voting Buttons.mp4

13:44

16. Styling Form Elements.mp4

14:07

17. Adapting the Layout to Smaller Screens.mp4

16:46

4. Supabase Storing the App Data [DAY 1]

1. What is Supabase.mp4

02:39

2. Creating Your First Database.mp4

04:29

3. Creating a Table.mp4

13:16

4. Adding Security Policies.mp4

06:42

5. JavaScript Making the App Interactive [DAY 1 + 2]

1. What is JavaScript.mp4

01:42

2.1 final-after-section-05.zip

2. Displaying and Hiding the Form.mp4

15:52

3. Values, Variables, and Operators.mp4

10:53

4. Functions.mp4

10:36

5. Taking Decisions With ifelse Statements.mp4

11:50

6. The Ternary Operator.mp4

07:34

7. Working With Strings.mp4

08:32

8. Arrow Functions.mp4

08:49

9. Arrays.mp4

10:30

10. Objects.mp4

09:24

11. Looping Over Arrays The forEach and map Methods.mp4

14:04

12. What is the DOM.mp4

02:03

13. Going Back to the First DOM Manipulation.mp4

08:11

14. Creating DOM Elements.mp4

15:58

15. Loading Data With fetch and asyncawait.mp4

13:45

16. The filter and find Array Methods.mp4

12:25

6. React Building the Final App [DAY 2]

1. What is React.mp4

06:42

2.1 final-after-section-06.zip

2. Installing Node.js and Setting Up A React Project.mp4

13:02

3. Meeting JSX and Creating the App Component.mp4

11:31

4. Dividing Our Interface Into Components.mp4

16:47

5. Rendering the List of Facts.mp4

13:10

6. Passing and Receiving Props.mp4

13:18

7. Rendering the List of Categories.mp4

07:31

8. Introducing State.mp4

11:57

9. Displaying and Hiding the Form the React Way.mp4

10:17

10. Creating the Header Component.mp4

08:38

11. Working With Forms the React Way.mp4

16:45

12. Adding a New Fact Part 1.mp4

11:17

13. Adding a New Fact Part 2.mp4

12:38

14. Loading Data From Supabase with useEffect.mp4

17:34

15. Creating a Loader Component.mp4

15:48

16. Filtering by Categories.mp4

14:39

17. Uploading a Fact to Supabase.mp4

12:29

18. Handling Votes and Updating a Fact on Supabase.mp4

20:43

7. Deployment Uploading the App to the Internet [DAY 2]

1. Finishing Touches and Creating a Production Build.mp4

17:49

2. Deploying to Netlify.mp4

05:54

8. The End!

1. Where to Go from Here.mp4

05:12

2. BONUS Check Out My Other Courses!.html

Description

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

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

Who is this 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!

More details

Description
* 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 (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.

If all this sounds great, then join me on this adventure right now! See you on the inside :)
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!

User Reviews

Rating

average 0

Total votes0

Focused display

Full Stack Web Development

Jonas Schmedtmann

Instructor's Courses

Hi, I'm Jonas! I have been identified as 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 things 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 all I knew when I was in college, and that passion brought me to Udemy in 2015.Here, in all my courses, what students love the most is that I take the time to explain every 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 fast back-end applications with Node.js?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!So see for yourself, enroll in one of my courses (or all of them :D) and join 1,000,000+ happy students today.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.