HTML CSS and JS by creating a Website / Web application

Web Development
Norbert BM0

In this class you will learn the core skills of web development HTML, CSS and JavaScript by creating a website / web application. This is a step by step class including best practices and industry tips, but also my personal tips and opinion on how to create a website / web application with HTML, CSS and JavaScript. This class is for beginners and intermediate level programmers but it is not for advanced programmers.

My name is Norbert BM and I am a self taught web developer. I have been programming for 10 years and I have been teaching programming for 5 years. I also run a YouTube channel, a Podcast, a personal website and blog on Web development with tutorials and top industry news.

By taking this class you will learn

  • HTML (Hypertext Markup Language) – The standard markup language for creating web pages and web applications. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  • CSS (Cascading Style Sheets) – A style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
  • JavaScript – A high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, JavaScript is one of the three core technologies of the World Wide Web.
  • CDN (Content Delivery Network) – A system of distributed servers (network) that deliver webpages and other web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.
  • How to create HTML files, add essential tags to it, how to add Id’s, class, and properties to them.

How to select css files and style html file by selecting, html elements by their tag name, id, class name or even by their properties

Create and use CSS variables for enhance code flexibility

Create JS Files

  • create variables using the let and const keywords
  • select DOM elements, and manipulate them , and also insert new elements to the WEb page
  • create function and initialize them
  • learn to use conditional and logical operators
  • but also multiple event listeners
  • At the and we will revisit our code and refactor it, making it more efficient. Where I will give you some of my personal Pro tips for code efficiency.
  • Thi class also includes a class project, because real learning happens when you apply what you learn. The class project is to create a website / web application and change it to your needs.

Pre requisites:

No prior knowledge is required
Windows PC or Mac / Laptop or tablet PC
Optional dual monitor setup
Internet connection

After finishing this course you will be able to:

Understand the building process of simple web applications using HTML CSS and JavaScript.
How to work with the console
How to use a code editor
Hope you are excited, and lets get started.

  • Refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior.

After taking this class you will be able to

  • Create a website / web application with HTML, CSS and JavaScript.
  • Create .html files and use the basic HTML tags.

Get the complete Web Development Course

Complete Web Development Course

Table of Contents

  1. Introduction
  2. Environmental setup
  • Web Browser (Chrome, Firefox, Safari, Opera, IE)
  • IDE (Sublime Text, Atom, Brackets, Visual Studio Code, Notepad++, Vim, Emacs)
high-topsDownload Img
  1. Create index.html file and add basic HTML tags
  2. Add Id’s and class to HTML tags
  3. Create a style.css file
<!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="./style.css" />
    <title>Discount App</title>
  </head>
  <body>
    <!-- Comment from code-->
    <h1>Promotion App</h1>
    <main class="container">
      <section class="grid-item">
        <img src="./img/high-tops.svg" alt="shoo" />
        <form>
          <button type="button" class="minus">-</button>
          <input
            type="number"
            id="q"
            placeholder="quantity"
            value="0"
            min="0"
          />
          <button type="button" class="plus">+</button>
          <button type="submit">Add</button>
        </form>
      </section>
      <section class="grid-item">
        <!-- Table -->
        <table>
          <tr>
            <th>Quantity</th>
            <th>Price/Discount</th>
          </tr>
          <tr>
            <td>1</td>
            <td>$99.99</td>
          </tr>
          <tr>
            <td>> 3</td>
            <td class="discount">-10%</td>
          </tr>
          <tr>
            <td>> 5</td>
            <td class="discount">-15%</td>
          </tr>
          <tr>
            <td>>10</td>
            <td class="discount">-20%</td>
          </tr>
        </table>
      </section>
      <div id="output"></div>
    </main>
    <script src="main.js"></script>
  </body>
</html>
  • add basic CSS rules
  • add to html file
  • style * (all)/html/body.container
* {
  margin: 0;
  padding: 0;
}

html {
  font-family: sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: var(--primary-color);
  /* color: lightblue; */
  background-color: #fff;
}
.container {
  margin: 0 auto;
  max-width: 800px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
  1. Create css variables
  • create :root add variables
  • style h1
:root {
  --primary-color: #073455;
  --secondary-color: #1dc200;
}
h1 {
  font-size: 5em;
  font-weight: normal;
  margin: 2rem 0;
  padding: 0;
  text-align: center;
  color: var(--primary-color);
}
  1. Style the form
  • style input
  • style button
/* Form */
form {
  margin-top: 2rem;
}
input {
  width: 80px;
  font-size: 1rem;
  padding: 0.4rem;
  margin: 0.5rem;
  border: 1px solid var(--primary-color);
  border-radius: 5px;
  text-align: center;
}

button {
  font-size: 1rem;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  outline: none;
  margin: none;
  width: 100px;
  font-weight: 600;
}
button[type="submit"] {
  background-color: var(--secondary-color);
}
  1. Style Table
  • style table
  • style th
  • style td
/* Table */

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 1.4rem;
}
th {
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.5rem;
}
td.discount {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--secondary-color);
}
  1. Style buttons and input
  • style button
  • style input
button.plus,
button.minus {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-shadow: 0.15px 0.1em 0.2rem var(--primary-color);
  transition: all 0.2s ease-in-out;
}
button.plus:active,
button.minus:active {
  transform: scale(0.98);
  box-shadow: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
  1. Create a JavaScript file
  • add to html file
  • get dom elements
const form = document.querySelector("form");
const plus = document.querySelector(".plus");
const minus = document.querySelector(".minus");
const quantity = document.getElementById("q");
const output = document.querySelector("#output");
  1. Add event listeners to the input
    1. reset input value
quantity.addEventListener("focus", function () {
  quantity.value = "";
});
  1. Add event listeners to the form
    1. prevent default
    2. check if input is empty or not
    3. reset input value
form.addEventListener("submit", function (event) {
  event.preventDefault();
    if (quantity.value == "") {
      alert("Add quantity");
    } else {
      handleSubmit();
    }
  quantity.value = "";
});
  1. Create variables and calc the discount
    1. cost ,discount
    2. create a function to calc teh discount and return the result
    3. add event listener to the input q and call the function
function calcDiscount() {
  if (quantity.value > 2 && quantity.value <= 4) {
    discount = 0.9;
  } else if (quantity.value >= 5 && quantity.value < 10) {
    discount = 0.85;
  } else if (quantity.value >= 10) {
    discount = 0.8;
  } else {
    discount = 1;
  }
  console.log(discount);
  return discount;
}
  1. Change the quant using the buttons
    1. add event listener to the buttons
    2. create a function to change the quant
    3. call the function
plus.addEventListener("click", function (e) {
  changeQuantity(e);
});
minus.addEventListener("click", function (e) {
  changeQuantity(e);
});

function changeQuantity(e) {
  //   console.log(e.target.className);
  if (e.target.classList.contains("plus")) {
    quantity.value++;
  } else {
    quantity.value--;
  }
  if (quantity.value < 1) {
    quantity.value = 1;
  }
}
  1. Handle the form submit
    1. add event listener to the form
    2. create a function to handle the form submit
    3. call the function
  2. Calculate the final including the discount
    1. create a function to calc the final
    2. add to the form submission by calling the function
  3. Out the result to the DOM
    1. create a function to out the result
    2. call the function
function displayDiscount() {
  if (discount == 0.9) {
    // console.log("-10%");
    return "-10%";
  } else if (discount == 0.85) {
    return "-15%";
  } else if (discount == 0.8) {
    return "-20%";
  } else {
    return "";
  }
}
function calcFinalPrice() {
  return itemPrice * quantity.value * discount;
}
function handleSubmit() {
  //   console.log("Success");
  calcDiscount();
  displayDiscount();
  //   console.log(calcFinalPrice());
  output.innerHTML = `<div class="result">
${
  quantity.value
} x $${itemPrice} <span class="percent">${displayDiscount()}</span> = $${calcFinalPrice().toFixed(
    2
  )}

</div>`;
}
  1. Style the output and result
  • style output
  • style result
#output {
  grid-column: 1/3;
  text-align: center;
}

div.result {
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  font-weight: 600;
  border: 1px solid #333;
  border-radius: 0.5rem;
  background-color: var(--primary-color);
  color: #fff;
  box-shadow: 0.15px 0.1rem 0.2rem var(--primary-color);
  max-width: fit-content;
}

span.percent {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--secondary-color);
}
  1. Refactor the code
    1. create a function to get the dom elements
    2. create a function to add event listeners
    3. create a function to calc the discount
    4. create a function to calc the final
    5. create a function to out the result
// Todo: Refactor
quantity.onfocus = () => (quantity.value = "");

// Todo: Refactor
form.onsubmit = (event) => {
  event.preventDefault();
  quantity.value == "" ? alert("Add quantity") : handleSubmit();
  quantity.value = "";
};

// Todo: Refactor
quantity.onkeyup = () => calcDiscount();
  1. Conclusion and next steps (class project)


Want to become a web developer ?

Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…

Web Development Courses

Love Podcast about web development?

Podcast

Leave a Reply

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