Learn Web Development by Creating a Food Ordering App

Name: Learn Web Development by Creating a Food Ordering App
Rating: 4.7 (89 reviews)

Learn to build full stack web apps with React and Firebase in this fast paced course with a capstone project.

Created byAzim Ahmed

Last updated 10/2024

English

What you'll learn

Master frontend development with React
Master backend development with Firebase
Learn professional developer best practices.
Build fully-fledged websites and web apps for your startup or business.
After the course you will be able to build ANY website you want.
Learn the latest technologies, including Javascript, React, Node and Firebase

Course content

21 sections • 113 lectures • 18h 19m total length

Introduction3:17
House keeping1:30
Summary3:07

Introduction to HTML7:56
Explore HTML fundamentals by creating a .html file, viewing it in a browser, and using the Live Server extension in VS Code to render updates in real time.
VSCode6:50
HTML Tags11:49
HTML forms7:43
Learn how HTML form elements render user inputs using the form tag, input types, labels, and action, then build text, number, date, file, select, radio, and checkbox interfaces.
HTML blog11:10

Introduction6:21
Syntax11:25
Usage with HTML5:08
Objects10:33
Explore creating JavaScript objects with properties as key-value pairs, access them via dot or square bracket notation, and add object methods using this, including nesting objects for bottle dimensions.
Classes8:51
Template literals5:24
Learn to use template literals to render html from JavaScript, targeting the DOM with document.body.innerHTML and embedding bottle properties like id, size, and color.
DOM10:45
Data types12:09
Arrays10:19
Functions4:18
Arrow Functions5:08
Pass and return from functions8:42
Learn to pass parameters and return values from functions, using object parameters, destructuring, callbacks, and level-based logs with a date prefix via string interpolation.
If conditions and logical operators4:42
Explore how to implement if conditions and logical operators in JavaScript, using comparisons, truthy/falsy values, and and/or logic to control flow with hours.
Switch4:07
Looping through content7:42
Events5:03
Promises5:35
Troubleshooting Javascript in the browser5:43

Introduction to React3:50
Bootstrapping a React app with the TypeScript template via Create React App, install dependencies, and run the dev server to view on localhost 3000.
Files and folder structure10:12
Explore the React app's file and folder structure, including public and src directories, index.html, index.tsx, app.tsx, and assets, with notes on routing, hot reloading, and design system usage.
Components9:38
JSX5:59
Props10:48
State13:39
Conditional Rendering10:42
useContext15:56
Custom hooks7:49
Learn to create reusable custom hooks in React by wrapping useContext, exporting a useLogs hook, and extracting button behavior with a useButtonProps hook to manage handleClick, toggled state, and styling.
useEffect5:25
Chakra UI12:27

Start contact application16:35
Build a contact app with Create React App using a TypeScript template, integrate Chakra UI, and implement a context provider to render a mock contact list in the sidebar.
React router15:53
Add new contact11:14
Form validation13:32
Edit and Delete contact18:04
Implement edit and delete functionality for contacts by wiring routes, prefilled forms, and context methods, updating navigation and reflecting changes in the contact list.

Requirements

No programming experience needed - I’ll teach you everything you need to know
A computer with access to the internet
No paid software required
I’ll walk you through, step-by-step how to get all the software installed and set up

Description

Do you want to learn how to create modern and dynamic web applications using the latest technologies? Do you want to master the skills that are in high demand in the web development industry? Do you want to learn from a real web developer who has built successful projects for clients and startups?

If you answered yes to any of these questions, then this course is for you. Guide to Web Development (2024) - Hustler Edition is a comprehensive and practical course that will teach you how to build full-stack web apps with React and Firebase. React is a powerful and popular front-end library that lets you create interactive user interfaces with ease. Firebase is a cloud-based platform that provides various services such as authentication, database, storage, hosting, and more. Together, they form a perfect stack for building scalable and secure web apps.

In this course, you will learn by doing. You will work on real projects that will challenge you and help you apply what you learn. You will also get access to the source code and resources for each project. You will learn how to:

Set up your development environment and tools
Create responsive and attractive web pages with HTML, and CSS
Use JavaScript and React to add interactivity and functionality to your web pages
Use Firebase to store and retrieve data, authenticate users, upload files, and deploy your web apps
Use various React libraries and components such as React Router, React Hooks, Chakra UI, and more
Use best practices and tips for writing clean and maintainable code
Debug and troubleshoot common errors and issues
And much more!

This course is designed for beginners who have some basic knowledge of HTML, CSS, and JavaScript. You don’t need any prior experience with React or Firebase. You will learn everything from scratch in a clear and easy-to-follow way. This course is also fast-paced and project-led. You will only learn the information that is relevant and useful for building web apps. No fluff or filler content.

By the end of this course, you will have the confidence and skills to create your own full-stack web apps with React and Firebase. You will also have a portfolio of projects that you can showcase to potential employers or clients. You will be a hustler who can get things done.

So what are you waiting for? Enroll now and start your journey to becoming a web developer.

Who this course is for:

If you want to learn to code through building fun and useful projects, then take this course.
If you want to start your own startup by building your own websites and web apps.
If you want to take ONE COURSE and learn everything you need to know about web development, take this course

Learn Web Development by Creating a Food Ordering App

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 8min

Introduction to HTML5 lectures • 45min

CSS5 lectures • 40min

Javascript18 lectures • 2hr 12min

CLI3 lectures • 54min

Node2 lectures • 21min

Github4 lectures • 36min

Typescript1 lecture • 17min

React11 lectures • 1hr 46min

React Intermediate5 lectures • 1hr 15min

Requirements

Description

Who this course is for: