JavaScript Tutorial for Beginners | JavaScript Crash Course + Project

Web Design
Norbert BM1

In this javascript crash course you will learn all the fundamentals of javascript that any beginner web developer should know.

Content of this course

  • How to create comments in JavaScript
    • Single line comments in JavaScript
    • Multi line comments JavaScript
  • What is the console
  • What are JavaScript Data Types
    • STRING
    • NUMBER
    • BOOLEAN
    • NULL
    • UNDEFINED
  • What are JavaScript Variables
    • var
    • let
    • const
  • JavaScript type Conversions
    • convert to type of Number
    • convert to type of String
    • convert to type of Date
  • How to create JavaScript Functions
    • Regular Functions
    • Arrow Functions
  • What are JavaScript Template Literals
    • create template literals and output them on the web page
  • What are JavaScript Arrays and Array Methods
    • How to create an JavaScript Array
    • How to select from an JavaScript Array
    • How to modify an JavaScript Array
  • What are JavaScript Objects and Object Methods
    • How to create an JavaScript Object
    • How to select from an JavaScript Object
    • How to output an JavaScript Object
  • Using the JavaScript Date and Time with the Date Object
    • How to get Date and Time in JavaScript
    • How to set Date and Time in JavaScript
  • JavaScript Conditionals
    • Using JavaScript if statement else if & else
    • JavaScript Comparison Operators
    • JavaScript Logical Operators
  • JavaScript Loop `s
    • JavaScript for loop
    • JavaScript forEach loop
  • The JavaScript Document Object Model (DOM)
    • DOM selectors
      • DOM single selectors
      • DOM multi selectors
    • Modifying the DOM
      • How to Change DOM elements
      • How to Create DOM elements
      • How to Replacing and Removing DOM elements

For more information about JavaScript get the Complete Modern JavaScript Course NOW and become a javascript developer

Web Development Courses

Modern JavaScript and NodeJS from Beginner to Advanced

Code for this Course:

HTML Code

<script>
    // console.log("Norbert");
    // const name = "Laura";
    // console.log(name);
  </script>
  <body>
    <h1>JAVASCRIPT</h1>
    <h2>test</h2>
    <!-- JavaScript -->
    <script src="main.js"></script>
</body>

JavaScript Comments:

/ console.log("Arabella");

// single line comment

/*
this
is 
a
multi

fagjkaiusah aolsjfoiash oiasff
*/

The Console


let name;

name = "Norbet";

console.log(name);

const fullName = "Norbert BM";
console.log(12);
console.log(true);
console.log(false);

console.error("No user age!");
console.error(fullName);
console.error(2021);

console.warn("this is a warning");
console.clear();

alert("New User was added!");

Data Types

Course Project

In this javascript project we are going to create

Source code:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>JS Project</title>
  </head>
  <body>
    <h1 id="Title" class="title">JavaScript Course</h1>
    <span id="JsDef">What is JavaScript?</span>
    <h2 class="title">Crash Course</h2>
    <button class="btn yellow black-text" id="Course-content">
      Get content
    </button>

    <ul class="content-list">
      <li id="Comments" class="content-list-item">Comments</li>
      <li id="TheConsole" class="content-list-item">The Console</li>
      <li id="DateTypes" class="content-list-item">Date Types</li>
      <li id="Variables" class="content-list-item">Variables</li>
      <li id="typeConversions" class="content-list-item">type Conversions</li>
      <li id="Functions" class="content-list-item">Functions</li>
      <li id="TempleLiterals" class="content-list-item">Temple Literals</li>
      <li id="Arrays" class="content-list-item">Array</li>
      <li id="Object" class="content-list-item">Object</li>
      <li id="Date-Time" class="content-list-item">Date & Time</li>
      <li id="ComparisonOperators" class="content-list-item">
        If Statements & Comparison Operators
      </li>
      <li id="Loops" class="content-list-item">Loops</li>
      <li id="The-DOM" class="content-list-item">The DOM</li>
    </ul>
    <script src="app.js"></script>
  </body>
</html>

CSS:

:root {
  --bg-color: #01202c;
  --js-color: #f0db4f;
  --light-c: #f0f7d4;
  --caution: #f55849;
}
body {
  background-color: var(--bg-color);
  color: var(--light-c);
  letter-spacing: 1.5px;
  position: relative;
  margin: 3rem 2rem;
  text-shadow: 1px 2px 1px #333;
  display: flex;
  flex-direction: column;
  text-align: center;
}

h1.title {
  cursor: pointer;
  color: var(--js-color);

  font-weight: 600;
}
h2 {
  color: var(--light-c);
}
li {
  font-weight: 600;
  font-size: 1.1rem;
  transition: 0.3s ease;
  color: var(--caution);
}
li:hover {
  cursor: pointer;

  color: var(--light-c);
  transition: 0.3s ease;
}
li:active {
  transform: scale(0.95);
}
span {
  font-weight: 400;
  color: var(--light-c);
}
#Course-content.btn {
  width: 200px;

  margin: auto;
}
.content-list {
  margin-top: 2rem;
  position: relative;
  display: none;
}

.item-container {
  display: none;
}
.content-list-item.active {
  color: var(--light-c);
}
.content-list-item.active > .item-container {
  display: block;
  cursor: default;
}
.item-container .def {
  color: var(--caution);
}
.item-container .content {
  color: var(--light-c);
}
.item-container .content li {
  color: #26a69a;
}
.item-container .content li:hover {
  color: var(--js-color);
}
/* Utility Classes */

.display {
  display: block;
}

.active {
  display: block;
  font-size: 2rem;
  font-style: italic;
  padding: 1rem;
}
/* .active:hover {
    color: #f55849;
  } */

.animate-in {
  animation: animate-in 0.3s ease-in;
}

@keyframes animate-in {
  from {
    left: -200px;
    opacity: 0;
  }
  to {
    left: 0px;
    opacity: 1;
  }
}

JS:

   {
      id: 2,
      contentName: "DataTypes",
      def:
        "JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:",
      ele: ["STRING", "NUMBER", "BOOLEAN", "NULL", "UNDEFINED"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 3,
      contentName: "Variables",
      def: "JavaScript variables are containers for storing data values.",
      ele: ["var", "let", "const"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },

    {
      id: 4,
      contentName: "typeConversions",
      def:
        "JavaScript variables can be converted to a new variable and another data type:.",
      ele: [
        "Number() converts to a Number",
        "String() converts to a String",
        "Date() converts to a DATE",
      ],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },

    {
      id: 5,
      contentName: "Functions",
      def:
        "A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. ",
      ele: ["Regular functions", "Arrow functions"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 6,
      contentName: "TempleLiterals",
      def:
        "Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.",
      ele: ["Regular string text", "`template literal string text`"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },

    {
      id: 7,
      contentName: "Arrays",
      def:
        "JavaScript arrays are used to store multiple values in a single variable.",
      ele: ["Creating an Array", "Select from array", "Modify a Array"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 8,
      contentName: "Object",
      def: "Objects are like variables, but can contain many values.",
      ele: ["Creating an Object", "Select from Object", "Output to the DOM"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 9,
      contentName: "Date-Time",
      def:
        "JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.",
      ele: [" Getting time and date", " Setting time and date"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 10,
      contentName: "ComparisonOperators",
      def: "JavaScript logic",
      ele: ["if, else if,else", "Comparison Operators", "Logical operators"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },
    {
      id: 11,
      contentName: "Loops",
      def: "Loops can execute a block of code a number of times.",
      ele: ["for", " forEach"],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },

    {
      id: 12,
      contentName: "TheDOM",
      def:
        "With The HTML DOM (Document Object Model), JavaScript can access and change all the elements of an HTML document..",
      ele: [
        "DOM selectors",
        "DOM single selectors",
        "DOM multi selectors",
        " Modifying the DOM",
        "Change DOM elements",
        "Create DOM elements",
        "Replacing and Removing DOM elements",
      ],
      returnEle: function () {
        return elementLoop(this.id);
      },
    },

For more information about JavaScript get the Complete Modern JavaScript Course NOW and become a javascript developer

Web Development Courses
https://norbertbm.com/web-development/web-dev-courses/

Modern JavaScript and NodeJS from Beginner to Advanced

Popular course:

https://www.udemy.com/course/30-html-css-javascript-projects-in-30-days-for-beginners/?couponCode=APR2021

30 HTML, CSS & JavaScript projects in 30 Days for Beginners

1 thought on “JavaScript Tutorial for Beginners | JavaScript Crash Course + Project”

  1. Pingback: JavaScript Tutorial for Beginners | JavaScript Crash Course with Project • Summary networks

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.