CheatSheetsHero

Catalog / Web Development Cheatsheet

Web Development Cheatsheet

A comprehensive cheat sheet covering essential web development technologies, concepts, and best practices. Useful for both beginners and experienced developers.

HTML Fundamentals

Basic Structure 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Content here -->
</body>
</html>
  • <!DOCTYPE html>: Declares the document type.
  • <html lang="en">: Root element, specifies language.
  • <head>: Contains metadata, title, and links to stylesheets.
  • <body>: Contains the visible content of the page.

Common Tags

<h1> to <h6>

Heading tags, <h1> is the most important.

<p>

Paragraph tag for text content.

<a>

Anchor tag for creating hyperlinks. Use href attribute to specify the URL.

<img>

Image tag for embedding images. Use src attribute to specify the image source, and alt for alternative text.

<ul>, <ol>, <li>

Unordered list, ordered list, and list item tags.

<div>

Division tag, a generic container for grouping content.

Semantic Elements

<header>

Represents the header of a section or page.

<nav>

Represents a section of navigation links.

<main>

Specifies the main content of a document.

<article>

Represents a self-contained composition in a document.

<aside>

Represents content that is tangentially related to the content around it.

<footer>

Represents the footer of a section or page.

CSS Fundamentals

Selectors

*

Universal selector, selects all elements.

element

Type selector, selects all elements of the specified type (e.g., p, div).

.class

Class selector, selects all elements with the specified class.

#id

ID selector, selects the element with the specified ID.

element element

Descendant selector, selects all elements that are descendants of the specified element.

element > element

Child selector, selects all elements that are direct children of the specified element.

Box Model

The CSS box model defines the space around HTML elements. It consists of:

  • Content: The actual content of the element (e.g., text, images).
  • Padding: Clears the area around the content.
  • Border: A line that surrounds the padding and content.
  • Margin: Clears the area outside the border.

Common Properties

color

Sets the text color.

background-color

Sets the background color.

font-size

Sets the font size.

margin

Sets the margin around an element.

padding

Sets the padding around an element.

border

Sets the border around an element.

JavaScript Fundamentals

Variables

  • var: Function-scoped or globally-scoped.
  • let: Block-scoped.
  • const: Block-scoped, constant value (cannot be reassigned).
let x = 10;
const PI = 3.14;
var y = 20;

Data Types

Primitive

Number, String, Boolean, Null, Undefined, Symbol (ES6)

Object

Objects, Arrays, Functions

Functions 

function greet(name) {
  return "Hello, " + name + "!";
}

const add = (a, b) => a + b; // Arrow function

DOM Manipulation

document.getElementById(id)

Gets an element by its ID.

document.querySelector(selector)

Returns the first element that matches a CSS selector.

element.innerHTML

Gets or sets the HTML content of an element.

element.addEventListener(event, function)

Attaches an event handler to an element.

Responsive Web Design

Viewport Meta Tag 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: Sets the width of the viewport to the device width.
  • initial-scale=1.0: Sets the initial zoom level when the page is first loaded.

Media Queries 

@media (max-width: 768px) {
  /* Styles for screens smaller than 768px */
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* Styles for screens between 769px and 1200px */
}

Flexible Layouts

Flexbox

A CSS layout module that provides an efficient way to align and distribute space among items in a container.

Grid

A two-dimensional layout system that allows you to create complex layouts with rows and columns.

Responsive Images

Use the <picture> element or the srcset attribute of the <img> element to provide different image sources for different screen sizes.
Download PDF