Web Development Cheat Sheet

Web Development Cheat Sheet: HTML, CSS, JavaScript, APIs & Essential Concepts

Web development is the process of building and maintaining websites and web applications. It includes creating page structures, designing user interfaces, implementing interactive functionality, managing servers, connecting databases, and protecting user information.

This cheat sheet provides a practical introduction to web development, including frontend and backend technologies, HTML, CSS, JavaScript, APIs, databases, responsive design, web performance, accessibility, security, and deployment.

1. What Is Web Development?

Web development involves creating websites and applications that users access through web browsers.

Main Types of Web Development

How a Website Works

A simplified website request follows this sequence:

1. A user enters a URL or clicks a link.

2. The browser resolves the domain through DNS when necessary.

3. The browser connects to the website's server.

4. The server or application returns a response.

5. The browser processes HTML, CSS, JavaScript, and other resources.

6. The browser displays the page and handles user interactions.

Modern websites may also use content delivery networks, caches, APIs, and third-party services.

2. Essential Web Development Technologies

You do not need to learn every language at once. HTML, CSS, and JavaScript provide a useful starting point for frontend development.

3. HTML Cheat Sheet

HTML stands for HyperText Markup Language. It defines the structure and meaning of webpage content.

Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is my first webpage.</p>
  <a href="https://example.com">Visit Example</a>
</body>
</html>

Common HTML Tags

HTML Links and Images

<a href="/about/">About Us</a>

<img
  src="/images/workspace.jpg"
  alt="A desk with a laptop and notebook"
>

Use meaningful alternative text for informative images. Decorative images can use an empty alt attribute.

HTML Forms

<form action="/contact/" method="post">
  <label for="email">Email address</label>
  <input
    type="email"
    id="email"
    name="email"
    required
  >

  <button type="submit">Submit</button>
</form>

HTML form validation improves usability but does not replace server-side validation.

Semantic HTML

Semantic elements communicate the purpose of content.

For example, use <nav> for navigation and <main> for the main content instead of using generic <div> elements for everything.

Semantic HTML can improve accessibility, maintainability, and the clarity of page structure.

4. CSS Cheat Sheet

CSS stands for Cascading Style Sheets. It controls colors, spacing, typography, layout, and responsive behavior.

Basic CSS Syntax

h1 {
  color: #1d4ed8;
  font-size: 32px;
  margin-bottom: 16px;
}

A CSS rule generally consists of a selector and one or more declarations.

Common CSS Properties

CSS Selectors

/* Element selector */
p {
  color: #333;
}

/* Class selector */
.card {
  padding: 20px;
}

/* ID selector */
#main-title {
  font-size: 30px;
}

/* Descendant selector */
nav a {
  text-decoration: none;
}

/* Hover state */
button:hover {
  opacity: 0.85;
}

Class selectors are useful for reusable styling. IDs should generally be unique within a document.

Flexbox

Flexbox is useful for arranging items along one primary axis.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Useful properties include flex-direction, justify-content, align-items, flex-wrap, and gap.

CSS Grid

Grid is useful for two-dimensional layouts.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

Responsive Design

Responsive design adapts a website to different screen sizes.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Test layouts on mobile, tablet, and desktop screens. Avoid assuming every mobile device has the same width.

5. JavaScript Cheat Sheet

JavaScript adds behavior to webpages, such as dropdown menus, form interactions, filters, and dynamic content.

Variables

const siteName = "GoBizly";
let visitorCount = 100;

visitorCount += 1;

• const prevents reassignment of the variable binding.

• let permits reassignment.

• Avoid using var in new code unless a specific compatibility or legacy reason exists.

A const object can still have its properties modified; const does not automatically make an object immutable.

Data Types

Common JavaScript types include:

• String

• Number

• Boolean

• Undefined

• Null

• BigInt

• Symbol

• Object

Arrays and functions are also objects in JavaScript's type system.

const name = "Practical Learning";
const count = 10;
const isPublished = true;
const topics = ["HTML", "CSS", "JavaScript"];
const article = { title: "Web Development Basics" };

Conditional Statements

const score = 75;

if (score >= 80) {
  console.log("Excellent");
} else if (score >= 60) {
  console.log("Good");
} else {
  console.log("Keep practising");
}

Loops

for (let i = 0; i < 5; i++) {
  console.log(i);
}

const topics = ["HTML", "CSS", "JavaScript"];

for (const topic of topics) {
  console.log(topic);
}

Functions

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(500, 3);
console.log(total);

Arrow function:

const add = (a, b) => a + b;

Arrays and Objects

const tools = ["HTML", "CSS", "JavaScript"];

tools.push("TypeScript");

const user = {
  name: "Alex",
  role: "Developer"
};

console.log(user.role);

DOM Manipulation

The Document Object Model (DOM) represents a webpage as objects that JavaScript can inspect and modify.

const heading = document.querySelector("h1");

if (heading) {
  heading.textContent = "Welcome to Web Development";
}

Event Handling

const button = document.querySelector("#myButton");

button?.addEventListener("click", () => {
  console.log("Button clicked");
});

Use addEventListener() to respond to events such as clicks, form submissions, and keyboard interactions.

Asynchronous JavaScript

Promises and async/await help manage operations that complete later, such as API requests.

async function loadPosts() {
  try {
    const response = await fetch("/api/posts");

    if (!response.ok) {
      throw new Error("Unable to load posts");
    }

    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

In production, display appropriate user-facing error messages rather than exposing sensitive technical details.

6. Frontend vs. Backend

Important: frontend validation can improve the user experience, but the backend must independently enforce security rules and business requirements.

7. Backend Development Fundamentals

Backend systems process requests, interact with databases, enforce permissions, and return responses.

Common Backend Responsibilities

• User registration and login.

• Authorization.

• Business logic.

• Database queries.

• Payment and order processing.

• File handling.

• API development.

• Logging and error handling.

• Data validation.

Popular Backend Frameworks

Framework selection depends on the project, team expertise, ecosystem, security requirements, and operational needs.

8. APIs and HTTP Fundamentals

An API allows software systems to communicate through defined interfaces.

Web APIs commonly receive HTTP requests and return HTTP responses.

HTTP Methods

The actual behavior depends on the API contract. Do not assume every endpoint implements all methods.

Common HTTP Status Codes

Example API Request

GET /api/articles HTTP/1.1
Host: example.com
Accept: application/json

Example JSON response:

{
  "articles": [
    {
      "id": 1,
      "title": "Web Development Basics"
    }
  ]
}

API Security Basics

• Use HTTPS.

• Authenticate requests when necessary.

• Enforce authorization on the server.

• Validate inputs.

• Apply rate limits where appropriate.

• Protect API keys and tokens.

• Avoid placing confidential credentials in public frontend code.

9. Databases and SQL

Databases store and organize information used by websites and applications.

Relational vs. NoSQL Databases

The best database depends on the application's access patterns, consistency needs, scale, and data model.

Basic SQL Example

SELECT title, published_at
FROM articles
WHERE status = 'published'
ORDER BY published_at DESC;

This query retrieves the titles and publication dates of published articles, newest first.

Database Best Practices

• Use appropriate constraints.

• Create indexes based on actual query patterns.

• Use parameterized queries.

• Restrict database permissions.

• Back up important data.

• Monitor slow queries.

• Avoid exposing database credentials in public code.

10. Responsive Design and Mobile-First Development

Responsive design helps websites remain usable across screen sizes and devices.

Key Principles

1. Use flexible layouts.

2. Avoid fixed widths where they cause overflow.

3. Optimize images for different screen sizes.

4. Make buttons and interactive controls easy to use.

5. Ensure text remains readable.

6. Test navigation on mobile.

7. Use appropriate viewport settings.

8. Test real content, not only placeholder text.

Mobile-First Approach

Start by designing for smaller screens, then enhance the layout for larger displays.

This can help teams prioritize essential content and avoid creating desktop layouts that are difficult to adapt to mobile devices.

11. Website Accessibility

Accessibility helps people with different abilities use websites and applications.

Essential Practices

• Use semantic HTML.

• Associate form labels with controls.

• Provide meaningful alternative text for informative images.

• Ensure keyboard navigation works.

• Show visible focus indicators.

• Maintain sufficient color contrast.

• Use descriptive link text.

• Provide captions for relevant video content.

• Avoid communicating important information through color alone.

• Test forms and interactive components with keyboard navigation.

Accessibility should be incorporated into design and development rather than added only at the end.

12. Website Performance Optimization

A fast website improves usability and can support business outcomes.

Common Optimization Techniques

• Compress and resize images.

• Use modern image formats where appropriate.

• Reduce unnecessary JavaScript.

• Minimize render-blocking resources.

• Cache suitable resources.

• Use a content delivery network when beneficial.

• Reduce unnecessary third-party scripts.

• Optimize database queries.

• Monitor server response times.

• Avoid excessive animations and layout shifts.

Core Web Vitals

Core Web Vitals are Google metrics used to evaluate important aspects of user experience.

These thresholds are generally evaluated at the 75th percentile of page visits, separated by mobile and desktop. Results can vary by page and user conditions.

13. Web Development and SEO

Technical implementation affects how search engines discover, understand, and present website content.

Technical SEO Checklist

• Give each important page a descriptive title.

• Write useful meta descriptions.

• Use meaningful headings.

• Provide crawlable internal links.

• Submit an XML sitemap where appropriate.

• Configure robots.txt carefully.

• Use canonical URLs when needed.

• Avoid accidental noindex directives on pages intended to appear in search.

• Ensure important content is accessible to search engines.

• Use descriptive image alternative text.

• Implement structured data where appropriate.

• Maintain a useful mobile experience.

• Monitor indexing and technical issues in Google Search Console.

Meta descriptions can influence how a search result is presented, but they are not a direct Google ranking factor.

14. Web Security Checklist

Security must be considered throughout development and maintenance.

Essential Controls

• Enforce HTTPS.

• Keep frameworks and dependencies updated.

• Validate inputs on the server.

• Use parameterized SQL queries.

• Apply secure authentication.

• Enforce server-side authorization.

• Store secrets outside public source code.

• Protect sessions and cookies.

• Configure access controls.

• Back up important data.

• Monitor errors and suspicious activity.

• Test security before releasing significant changes.

Never assume that hiding a button in the frontend prevents an unauthorized user from calling the underlying endpoint.

15. Git and Version Control

Git tracks changes to files and helps teams collaborate.

Common Git Commands

git init
git status
git add .
git commit -m "Create homepage"
git branch
git switch -c feature/navigation
git pull
git push

Typical Workflow

1. Create or switch to a working branch.

2. Make changes.

3. Review the changes.

4. Run relevant tests.

5. Commit meaningful updates.

6. Push the branch to a remote repository.

7. Submit a pull request or merge request.

8. Review and merge according to team procedures.

Avoid committing passwords, API keys, private keys, or other secrets. If a secret is committed, removing it from the latest version may not remove it from repository history; rotate the exposed credential.

16. Website Testing

Testing helps identify defects before and after deployment.

Pre-Launch Checklist

• Test navigation and internal links.

• Check mobile and desktop layouts.

• Verify forms and validation.

• Test important user journeys.

• Check error and empty states.

• Confirm page titles and metadata.

• Verify analytics and tracking.

• Review security settings.

• Check performance.

• Confirm backups and rollback procedures where appropriate.

17. Web Hosting and Deployment

Deployment makes a website or application available in its intended environment.

Common Hosting Options

• Shared hosting.

• Virtual private servers.

• Cloud infrastructure.

• Managed application hosting.

• Static website hosting.

• Serverless platforms.

Typical Deployment Process

1. Prepare and review the code.

2. Run tests.

3. Configure environment variables and secrets.

4. Build the application when required.

5. Deploy to a staging environment.

6. Verify functionality.

7. Release to production.

8. Monitor errors and performance.

9. Maintain a rollback or recovery strategy.

A domain name is the address people use to reach a website. Hosting provides the infrastructure or service that delivers the website. DNS connects domain names to relevant internet resources.

18. Essential Web Development Terminology

19. Web Development Interview Questions

What is the difference between HTML, CSS, and JavaScript?

HTML structures content, CSS controls presentation, and JavaScript implements dynamic behavior.

What is the difference between frontend and backend development?

Frontend development focuses on the user-facing interface, while backend development handles server-side processing, business rules, and data access.

What is an API?

An API defines how software components or systems communicate.

What is the difference between GET and POST?

GET is generally used to retrieve information. POST submits information or requests processing, depending on the endpoint's contract.

What is responsive design?

Responsive design adapts a website's layout and behavior to different screen sizes and devices.

What is the DOM?

The Document Object Model represents a document as objects that scripts can inspect and manipulate.

What is the difference between a library and a framework?

A library provides reusable functionality that developers call. A framework supplies a broader structure and conventions for building applications.

What is Git used for?

Git tracks file changes, supports branching, and enables collaboration on software projects.

What is the difference between SQL and a database?

A database stores and organizes information. SQL is a language commonly used to query and manage relational databases.

Why is HTTPS important?

HTTPS protects web communication through TLS, helping provide confidentiality and integrity and authenticate the server when certificate validation succeeds.

What is the purpose of testing?

Testing helps detect defects, validate expected behavior, and reduce the risk of releasing broken or insecure software.

20. Web Development Quick Reference

Conclusion

Web development combines structure, design, programming, data management, testing, security, and deployment. HTML, CSS, and JavaScript are a practical starting point, while APIs, databases, Git, accessibility, and performance optimization help developers build more complete and reliable applications.

For beginners, start by building a simple responsive webpage. Add JavaScript interactions, connect an API, learn version control, and gradually explore backend development and databases. Practising these skills through small projects builds a stronger foundation than memorizing terminology alone.