DEV Community

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

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

The Nerdy Dev
Building products is my profession, Creating content is my passion. We believe that Education should be freely accessible to everyone and no one should be deprived of it.
・2 min read

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

AND MORE....

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
COMING SOON

MongoDB Section
COMING SOON

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.

Follow me on Twitter for more updates : https://twitter.com/The_Nerdy_Dev

Discussion (7)

Collapse
kingsszx profile image
KINGSSZX

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 reactjs.org/link/invalid-hook-call 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)}
});
setClientSecret(response.data.clientSecret)
}

    getClientSecret();
Enter fullscreen mode Exit fullscreen mode

}, [basket])

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

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

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        history.replaceState('/orders')
    })

    //const payload = await stripe
}

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

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


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

            {/**payment section - Review item */}
            <div className= 'payment_section'>
                <div className='payment_title'>
                    <h3>Review item and delivery</h3>
                </div>
                <div className='payment_items'>
                    {basket.map(item => (
                       <CheckoutProduct 
                          id={item.id} 
                          title={item.title}
                          image={item.image}
                          price={item.price}
                          rating={item.rating}
                       />
                    ))}
                </div>
            </div>

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

                            <div className='payment_priceContainer'>
                                <CurrencyFormat
                                    renderText={(value) => (
                                        <h3>order Total: {value}</h3>
                                    )}
                                    decimalScale={2}
                                    value={getBasketTotal(basket)}
                                    displayType={"text"}
                                    thousandSeparator= {true}
                                    prefix={"$"}
                                />
                                <button disabled={processing || disabled || 
                                succeeded}>
                                    <span>{processing ? <p>Processing</p> : 
                                    "Buy Now"}</span>
                                </button>
                            </div>

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

);
Enter fullscreen mode Exit fullscreen mode

}

export default Payment;

Collapse
diegomonteiro profile image
Diego Monteiro

Great Work, Congratulations...

Collapse
thenerdydev profile image
The Nerdy Dev Author

Thanks dude !

Collapse
zippytyro profile image
Shashwat Verma

Love it, dude! Keep going

Collapse
somanathgoudar profile image
Somanath Goudar

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

Collapse
thenerdydev profile image
The Nerdy Dev Author

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

Collapse
kingsszx profile image
KINGSSZX

Hello i need help here