Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

The Complete Firebase & JavaScript Beginner's Friendly Guide

Name: The Complete Firebase & JavaScript Beginner's Friendly Guide
Rating: 4.7 (95 reviews)

Build A Complete CRUD Web App using Firebase Firestore and JavaScript start to finish from scratch! (CSS Flexbox)

Highest Rated

Created byRaja Tamil | 35,000+ Students

Last updated 3/2024

English

What you'll learn

Be able to build any full-stack web app you want to advance your junior developer career.
Create feature-rich, scalable, and secure web applications without the need for extensive backend development for your business or startup.
Learn the latest version of Firebase 10 to stay current with technology trends and be a more attractive candidate for job opportunities and freelance projects.
Master HTML, CSS & JavaScript including ES6, DOM manipulation, events, functions, promise (async/await), error handling and much more.
Master No-SQL database queries using Cloud Firestore.
Craft any type of professional looking real world user interface using CSS Flexbox to enhance your web designing skills.

Course content

4 sections • 33 lectures • 4h 45m total length

Create A Brand New Firebase 9/10 Project3:59
By the end of this lecture, I’m going to show you how to get started with Cloud Firestore

Firestore Database is one of the two No-SQL databases that Firebase offers. No-SQL databases are the ones where you can actually store JSON data.
Setting Up Firebase 9/10 Via CDN7:32
By the end of this lecture, you’re going to learn how to set up Firebase in your javascript web app via Firebase CDN (Content Delivery Network)
Setting Up Firebase 9/10 Via NPM8:05
By the end of this lecture, you’re going to learn how to set up Firebase using Node and npm (node package manager)

Getting Started With Firestore Database9:57
Add Data To Cloud Firestore 9/10 Using addDoc()7:21
There are two methods that we can use to add data to the firestore database.

addDoc() method… another one is
setDoc() method.

Let’s learn how to use the addDoc() method to add data to the firestore database in this lecture.
setDoc() - Add Data To Cloud Firestore Using setDoc() Method7:37
By the end of this lecture, I’ll be showing you how to use the setDoc() method to add data to the Cloud Firestore database.
setDoc() - Update Data To Cloud Firestore9:47
There’re two ways we can update an existing document in Cloud Firestore.

One is using

setDoc() method
updateDoc() method.

In this lecture, I’ll be showing you how to update an existing document in the Cloud Firestore using setDoc() method.
updateDoc() - Update Data To Cloud Firestore7:48
In this lecture, I’ll be showing you how to update an existing document in Cloud Firestore using the updateDoc() method.
updateDoc() - Delete Document Field Cloud Firestore5:47
By the end of this lecture, you’re going to learn how to delete one or more key-value pairs, aka fields from an existing document in the Firestore Database using updateDoc() method.
deleteDoc() - Delete A Document4:11
By the end of this lecture, you’re going to learn how to delete an entire document from a collection in Cloud Firestore using the deleteDoc() method.
Get Document Data By ID From A Collection Using getDoc()6:33
By the end of this lecture, I’ll be teaching you how to get specific document data from a collection using the document ID in Cloud Firestore Firebase version 9.
Get All Documents Data From A Collection Using getDocs()1:26

What You Will Be Building By The End Of This Module6:46
Setting Up The Project Structure7:00
1. Create A Projet Folder like Lecture 14
2. Run The App On The Browser
3. Link The Style.css file
Create Two Column Base Layout Using CSS Flexbox6:51
By the end of this lecture, you’re going to create a two-column base layout for our application.
Create A Header13:01
By the end of this lecture, you’re going to learn how to create a header for our application.
Create A Custom Pop-up Modal Window8:53
By the end of this lecture, you’re going to learn how to create a custom pop-up modal window from scratch using Vanilla JavaScript.
Design Add Contact Form13:11
In this lecture, I’m going to be designing our add contacts form similar to this from start to finish using CSS flexbox.
Open & Close Add Contact Modal Window15:04
By the end of this lecture, you’re going to learn how to show and hide the modal window in four different scenarios.
Form Validation 1 - Check Required Fields20:11
By the end of this lecture, you’re going to learn how to do a simple form validation on the client-side using JavaScript.
Form Validation 2 - Email, Age & Phone Validation12:45
By the end of this lecture, you're going to learn how to validate the email field using JavaScript.
Add Firebase To The Project4:07
Get Firebase JavaScript SDK
Create firebase-sdk.js file and paste the code in there.
Link Firebase SDK to index.html file
Add type attribute to the script tags.
Add User Data To The Cloud Firestore Database15:47
By the end of this lecture, you’ll be able to add data as a document to the Cloud Firestore Database.
Get Contacts Data From Cloud Firestore6:47
By the end of this lecture, you’re going to learn how to get contacts data stored in Cloud Firestore.
Design Contacts List Item13:58
By the end of this lecture, I’m going to show you how to create and design a list item.
Display Contacts Data As List8:24
By the end of this lecture, you’ll be learning how to display contacts data stored in Cloud Firestore as a list collection on the left column of our app.
Update Live Changes When Adding Data4:04
By the end of this lecture, you’ll learn how to listen for any changes on the Cloud Firestore and update the frontend automatically without refreshing the page.
Show Contacts Data On Detail View15:40
By the end of this lecture, you’ll be learning how to show the contacts data on the details view (right side view) when a user clicks any of the items from the list.
Edit Contact13:09
By the end of this lecture, you’re going to learn how to update an existing contact document on the Cloud Firestore using the edit button.
Delete Contact7:49
By the end of this lecture, you’re going to learn how to delete contact data when a user clicks the delete button.
Make Responsive Contacts App11:33
By the end of this lecture, you’re going to learn how to make a Responsive Contacts App
Download A Complete Source Code0:28

Requirements

Basic knowledge of HTML and CSS
No Firebase experience needed - I'll teach you everything you need to know
No JavaScript experience required
Time and commitment
I'll walk you through with easy to follow step-by-step instructions from scratch

Description

Welcome to The Complete Firebase 9/10 & JavaScript ES6 Beginner's Friendly Guide, the only course you need to learn and code to become a full-stack web developer. With 5K students and a 4.7 average, my latest Firebase & JavaScript beginner's course is currently one of the HIGHEST-RATED Firebase courses on Udemy.

With almost 5 hours of HD video content, this Firebase & JavaScript course is the most up-to-date Firebase course available online. Even if you've no experience with Firebase, this course will take you from beginner to pro!

Why take this course?

The course is taught by the instructor at SoftAuthor, a Canadian-based software training & development company.
In this 2024 course, you'll be learning the latest tools and techniques used at big companies such as Google, Instacart, Alibaba, and The New York Times.
This course is thoughtfully structured with a beginner-friendly approach in all aspects to make it simple and easy to follow by building a professional-looking real-world full-stack web app with me.
The curriculum was carefully developed over 1 year, with comprehensive student feedback.
The course is constantly updated with new content, projects, and modules determined by you, the students!

I'll take you step-by-step through engaging and fun video tutorials that are rich in content!

Throughout this fully practical course, we cover a massive amount of tools and technologies, including:

JavaScript

Variables
Arrow Functions
JS Array
JS Object
JS For Loop
Reusable Form Validation
- Empty Check
- Email Validation
- Character Length Validation
JavaScript Events
DOM Manipulation
Promise (Async/Await)
Error Handling
ES6 Modules
String Interpolation
Higher Order Functions (forEach)
Dynamic HTML
Dynamic CSS
Control Flow
Regex (Regular Expression)

Firebase

Create A Firebase Project
Add Firebase SDK To The Web App (CDN)
Add Firebase SDK To The Web App (NPM)
Add Data To The Firestore Database using addDoc()/setDoc()
Update Data To The Firestore Database using updateDoc()/setDoc()
Delete Data To The Firestore Database using updateDoc()/deleteDoc()
Get Data By ID From The Firestore Database using getDoc()
Get Real-Time Data Updates Using onSnapshot()

CSS Flexbox

Create A Two Column Layout
Create A Reusable Header Element
Responsive Web Layout

By the end of this course, you will be fluently coding in JavaScript and utilizing Firebase as a back-end server to build your own full-stack web apps faster, like a pro!

You'll also build a portfolio of a complete full-stack web app that you can show off to any potential employer.

REMEMBER… I'm so confident that you'll love this course that's why all eligible courses purchased on Udemy can be refunded within 30 days, provided the request meets the guidelines in their refund policy. (please refer to the Udemy Refund Policy for more)

Don't just take my word for it, check out what existing students have to say about the course:

"The instructor's explanations were clear, concise, and engaging, making complex topics easy to understand. Overall, it exceeded my expectations, and I'm grateful for the knowledge gained. A definite 5-star rating!" - Jennifer I.

"The Firebase & JavaScript course exceeded my expectations in every way. The instructor, Raja Tamil, demonstrated a deep understanding of the subject matter and presented the content in a clear and concise manner. I highly recommend this course to anyone looking to master Firebase and JavaScript for building dynamic web apps." - Sriram S

"It's been thrilling to learn from the tutor" - David M G.

"Amazing explanation by the tutor. I highly recommend for firebase and JavaScript developer to learn in-depth!!" - Manish Kumar V.

"Very clear and easy to follow, best tutorial. One of the videos had the cursor out of focus, but overall the course has really helped me understand Java Script this far." - Walusiku J. M.

So it's a complete no-brainer, sign up today with ZERO risk and EVERYTHING to gain.

I will be here to support you throughout this journey, so if you ever have any questions, suggestions, or feedback, please do not hesitate to contact me!

So what are you waiting for? Click the buy now button and join one of the highest-rated Firebase courses.

Who this course is for:

If you want to learn Firebase & JavaScript through building a fun and real world project, then take this course
Junior developers who want to learn the latest version of Firebase 9/10
If you're a front-end developer, take this course to build full-stack web apps without the need for extensive back-end development
Students who want enhance their portfolio and skills to attract more job opportunities.
If you want to take ONE COURSE and learn everything you need to know about full-stack web development, take this course

The Complete Firebase & JavaScript Beginner's Friendly Guide

What you'll learn

Explore related topics

Course content

Getting Started3 lectures • 20min

Firestore Database CRUD Queries9 lectures • 1hr

Build A Simple CRUD App20 lectures • 3hr 25min

Bonus1 lecture • 1min

Requirements

Description

Who this course is for: