HTML, CSS, JavaScript & jQuery: Web Development Essentials

Posted on Mar 27, 2025 in Computer Engineering

HTML Structure

  • <!DOCTYPE html>: Declares HTML5 version.
  • <html lang="en">: Root element; lang specifies language.
  • <head>: Metadata, links to CSS/JS, SEO content.
  • <meta charset="UTF-8">: Ensures proper character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures responsiveness.
  • <title>: Defines page title.
  • <body>: Contains visible content.

Common HTML Elements

  • Text Formatting: <h1>-<h6>, <p>, <b>, <i&gt;, <u>, <strong>, <em>
  • Lists: <ul> (unordered), <ol> (ordered), <li> (list item)
  • Links: <a href="url">Link Text</a>
  • Images: <img src="image.jpg" alt="Description">
  • Tables: <table>, <tr>, <th>, <td>
  • Forms: <form>, <input>, <textarea>, <button>, <select>, <option>
  • Semantic HTML: <header>, <nav>, <section>, <article>, <aside>, <footer>


CSS Basics

Ways to Apply CSS

  1. Inline: <p style="color: red;">Text</p>
  2. Internal: <style>p{color:red}</style>
  3. External: <link rel="stylesheet" href="styles.css">

CSS Selectors

  • Element: p { color: blue; }
  • Class: .classname { color: green; }
  • ID: #idname { color: red; }
  • Attribute: [type="text"] { border: 1px solid black; }

Box Model

Content → Padding → Border → Margin

  • padding: Space inside the border.
  • border: Surrounds the padding and content.
  • margin: Space outside the border.

Display & Position

  • display: block | inline | inline-block | flex | grid | none;
  • position: static | relative | absolute | fixed | sticky;
  • z-index: Controls stacking order.

Flexbox

  • display: flex;
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | stretch | baseline;

Grid

  • display: grid;
  • grid-template-columns: auto auto; (2 equal columns)
  • grid-template-rows: 100px auto; (fixed height for first row)
  • gap: 10px;

Media Queries

@media (max-width: 600px) {
  body { background: lightgray; }
}


JavaScript Basics

Variables & Data Types

  • var, let, const
  • Primitive Types: String, Number, Boolean, Null, Undefined
  • Complex Types: Object, Array, Function

Operators

  • Arithmetic: +, -, *, /, %
  • Comparison: ==, ===, !=, !==, >, <, >=, <=
  • Logical: &&, ||, !

Control Structures

if (condition) { } else { }

switch (value) {
  case 1: break;
  default: break;
}

for (let i = 0; i < 10; i++) { }
while (condition) { }
do { } while (condition);

Functions

function myFunction() { return "Hello!"; }
const arrowFunc = () => "Hello!";

Events

document.getElementById("btn").addEventListener("click", function() { alert("Clicked!"); });

DOM Manipulation

document.getElementById("id").textContent = "Hello";
document.querySelector(".class").style.color = "red";

Asynchronous JS

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));



jQuery Basics

Syntax

  • $ is used to access elements
$(document).ready(function() {
  $("#btn").click(function() {
    $("p").hide();
  });
});

Selectors

  • $("p") – Selects all <p> elements
  • $(".class") – Selects all elements with class
  • $("#id") – Selects element with id

DOM Manipulation

$("#id").text("New Text");
$(".class").css("color", "blue");
$("ul").append("<li>Item</li>");

Event Handling

$("#btn").on("click", function() {
  alert("Button Clicked!");
});

AJAX with jQuery

$.get("https://api.example.com", function(data) {
  console.log(data);
});


Web Debugging

Chrome Developer Tools

  • Open DevTools: F12 or Ctrl+Shift+I
  • Elements Tab: Modify HTML and CSS
  • Console Tab: Run JavaScript, check errors
  • Sources Tab: Debug JS files
  • Network Tab: Monitor API requests
  • Performance Tab: Analyze loading speed

Common Errors & Fixes

  1. Undefined Variable → Check spelling, declare properly.
  2. Uncaught TypeError → Ensure method exists.
  3. CORS Error → Allow cross-origin requests in server settings.

Testing API Calls

  • Postman: Simulate HTTP requests.
  • Lighthouse: Analyze site performance.
  • Fiddler: Monitor network traffic.


Best Practices

Use external CSS & JS for maintainability. Use semantic HTML for better SEO & accessibility. Minimize inline styles and avoid !important in CSS. Use async/await instead of callback hell. Test on multiple devices or responsiveness. Optimize images & assets for faster load times. Keep code DRY (Don’t Repeat Yourself).


Quick Reference

🔹 HTML: Structure & Semantics 🔹 CSS: Box Model, Flexbox, Grid, Media Queries 🔹 JavaScript: Variables, Loops, Functions, DOM 🔹 jQuery: Selectors, Manipulation, AJAX 🔹 Debugging: DevTools, Console, Network