DEV Community

Cover image for (2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB
The Nerdy Dev
The Nerdy Dev

Posted on • Updated on • Originally published at

(2021) - Web Developer Full Course : HTML, CSS, JavaScript, Node.js and MongoDB

Alt Text
I recently started to create a Full Web Developer Course on my YouTube Channel and recently finished with the HTML and the CSS Section of this FREE course. More videos will be up on upload.

HTML Section

CSS Section

JavaScript Section

This section covers the basics of JavaScript along with the modern features that the language offers. We cover concepts like :

  1. JavaScript Basics (variables, loops, conditionals, functions)
  2. JavaScript Types (Strings, Numbers, Objects, Booleans, Functions, Symbols)
  3. Immediately Invoked Function Expressions
  4. Document Object Model (DOM) - Querying, Traversal, Inserting and Removing Elements from the DOM
  5. Arrays and Iterables
  6. Mutator methods - push, pop, shift, unshift, splice
  7. Other array methods like - slice, indexOf, findIndex, find, sort, reverse
  8. Higher Order Methods - filter, reduce, map
  9. Split and Join Methods
  10. The spread operator
  11. Sets and Maps
  12. Understanding the this keyword in JavaScript
  13. Overview of Objects, Constructor Functions, Classes, OOP, Instance and Static Methods, Inheritance
  14. Events - Adding and Removing Event Listeners
  15. Event Capturing - Bubbling Phases, Propagation and Event Delegation
  16. Asynchronous JavaScript - Event Loop (Call Stack, Message Queue)
  17. Asynchronous JavaScript - Understanding Promises and Error Handling
  18. Asynchronous JavaScript - Promise.race, Promise.all, Promise.allSettled
  19. Demystifying Async Await, From Promises to Async Await
  20. Scopes in JavaScript, Closures
  21. Symbols in JavaScript
  22. Iterators and Generators in JavaScript
  23. The Concept of Pure and Impure Functions in JavaScript
  24. Understanding Hoisting in JavaScript


A lot of exercises and projects were made in this section of the course.

Here are the Projects that we made in this JavaScript Section :

Building COVID-19 Tracker Application using JavaScript and Mapbox

Making a Todo List Application in JavaScript using Custom Events

Implementation of Infinite Scroll in JavaScript

10 JavaScript Projects in 2 Hours

Node.js Section

MongoDB Section

Make sure to subscribe to the channel for more such videos.
A lot of AWESOME videos are coming this month... So make sure to SUBSCRIBE to the channel for more amazing videos.

If you enjoy my articles and videos, consider following me on Twitter for more interesting stuff :

Image description

⚡Twitter :

Discussion (8)

kingsszx profile image

This is the Error i get with this page i have been trying to solve the problem but all i have tried didn't work so i need your help to help me solve this problem. i am using firebase. i am almost done with the project i am have problem with the payment page

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem. ▶ 24 stack frames were collapsed.

/* eslint-disable no-unused-vars */
import React, {useState, useEffect} from 'react';
import './Payment.css';
import {useStateValue} from "./StateProvider";
import CheckoutProduct from './CheckoutProduct';
import {Link, useHistory} from "react-router-dom";
import {CardElement, useStripe, useElements,} from "@stripe/react-stripe-js";
import CurrencyFormat from 'react-currency-format';
import {getBasketTotal} from "./reducer";
import axios from './axios';

function Payment() {
const [{basket, user}, dispatch] = useStateValue();
const history = useHistory();

const stripe = useStripe();
const elements = useElements();

const [succeeded, setSucceeded] = useState(false);
const [processing, setProcessing] = useState(0);
const [error, setError] = useState(null);
const [disabled, setDisabled] = useState(true);
const [clientSecret, setClientSecret] = useState(true);
Enter fullscreen mode Exit fullscreen mode

useEffect(() => {
//generate the special stripe secret which allows us to charge a coustomer
const getClientSecret = async () => {
const response = await axios({
method: 'post',
url: /payments/create?total=${getBasketTotal(basket)}

Enter fullscreen mode Exit fullscreen mode

}, [basket])

const handleSubmit = async (event) => {
    //do all the fancy stripe stuff...

    // eslint-disable-next-line no-unused-vars
    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
    }).then(({paymentIntent}) => {
        //paymentIntent = payment confirmatio



    //const payload = await stripe

const handleChange = event => {
    //listen for changes in CardElement
    //and display any error as the customer type their card details
    setError(event.error? event.error.message : "");

return (
    <div className='payment'>
        <div className='payment_container'>
                Checkout (<Link to="/checkout">{basket?.length} items</Link>)

            {/**payment section - delievery address */}
            <div className='payment_section'>
                <div className='payment_title'>
                    <h3>Delivery Address</h3>
                <div className= 'payment_address'>
                    <p>123 React lane</p>
                    <p>Los Angeles, CA</p>

            {/**payment section - Review item */}
            <div className= 'payment_section'>
                <div className='payment_title'>
                    <h3>Review item and delivery</h3>
                <div className='payment_items'>
                    { => (

            {/**payment section - payment method */}
            <div className='payment_section'>
                <div className="payment_title">
                   <h3>Payment Method</h3>
                <div className="payment_details">
                      {/**Stripe magic will go */}
                        <form onSubmit={handleSubmit}>
                          <CardElement onChange={handleChange}/>

                            <div className='payment_priceContainer'>
                                    renderText={(value) => (
                                        <h3>order Total: {value}</h3>
                                    thousandSeparator= {true}
                                <button disabled={processing || disabled || 
                                    <span>{processing ? <p>Processing</p> : 
                                    "Buy Now"}</span>

                            {/**Error */}
                            {error && <div>{error}</div>}

Enter fullscreen mode Exit fullscreen mode


export default Payment;

diegomonteiro profile image
Diego Monteiro

Great Work, Congratulations...

thenerdydev profile image
The Nerdy Dev Author

Thanks dude !

zippytyro profile image
Shashwat Verma

Love it, dude! Keep going

dominicdavies profile image
Dominic Davies

what an excellent set of resources!

somanathgoudar profile image
Somanath Goudar

Appreciate the hard work. but one question, why isn't your channel monetized yet.

thenerdydev profile image
The Nerdy Dev Author

Thanks Somanth.
I guess it's going to take some time for me to get there :)

kingsszx profile image

Hello i need help here