HTML Tutorial

Examples

HTML Practice & Useful Resources

Bootstrap

Web Development Cheatsheet

By IncludeHelp Last updated : October 30, 2024

This web development cheatsheet is useful for web developers to provide quick and all important information about the technologies used in web development, such as HTML, CSS, JavaScript, Git, SEO Meta Tags, shortcuts, etc. Go through this cheatsheet to speed up your web development.

HTML Snippets
CSS Snippets
JavaScript Snippets
Keyboard Shortcuts
Git Shortcuts
Meta Tags
Time-Saving Tips

1. HTML Snippets

HTML Boilerplate

Here is the basic HTML code to create any page for web development:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Title</title>
</head>
<body>
  <!-- Content here -->
</body>
</html>

Image Tag with Alt and Title

Use the following <img> tag to display an image on the webpage with alt and title attributes:

<img src="image.jpg" alt="Description" title="Hover text">

Link Tag for CSS

The <link> tag is used to include an external CSS file in an HTML document. Use the following syntax:

<link rel="stylesheet" href="styles.css">

Script Tag for JavaScript

The <script> tag is used to include an external JavaScript file in an HTML document. Use the following syntax:

<script src="script.js"></script>

Read our complete cheatsheet on HTML: HTML Cheatsheet.

2. CSS Snippets

Centering Elements

Use the following CSS code to center all elements on the webpage:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Responsive Design

You can use the @media query to create responsive design. Consider the following syntax: In this way, you can define different CSS classes for different screen sizes with respect to making them responsive.

@media (max-width: 768px) {
  /* Responsive styles here */
}

Box Shadow

You can use the following CSS to apply shadow to any elements, such as div, p, etc.

.box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Flexbox Layout

Here is the CSS to create a flexbox layout:

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

Grid Layout

Here is the CSS to create a grid layout:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

3. JavaScript Snippets

Show Alert

Use the following JavaScript code to show a message in an alert box when a user clicks a button:

<button onclick="showMessage()">Click Me</button>
<script>
  function showMessage() {
    alert("Hello! This is your message.");
  }
</script>

Console Log Object

Use the following form of console.log() to display the log of an object with indentation:

console.log(JSON.stringify(obj, null, 2));

Deep Clone an Object

Use the following code to create a deep copy of an object:

const clonedObj = JSON.parse(JSON.stringify(originalObj));

Check for Empty Object

Use the following code to check whether an object is empty or not:

const isEmpty = (obj) => Object.keys(obj).length === 0;

Smooth Scrolling

You can use the following JavaScript code for smooth scrolling:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

Debounce Function

Use the following code for debounce function:

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

Fetch API

To fetch data from an API, use the following code:

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

Event Delegation

Use the following code for event delegation:

document.querySelector('#parent').addEventListener('click', function(e) {
  if (e.target.matches('.child')) {
    // Handle child click
  }
});

Local Storage

Here is an example for local storage in JS:

localStorage.setItem('key', 'value');
  const value = localStorage.getItem('key');

4. Keyboard Shortcuts

VS Code Shortcuts

The following table lists the useful Visual Studio Code shortcuts for web development:

Shortcut	Description
Ctrl + P	Quick open files by name.
Ctrl + Shift + P	Open the command palette to access all commands.
Ctrl + `	Toggle the integrated terminal.
Ctrl + B	Toggle the sidebar visibility.
Ctrl + Space	Trigger suggestions and autocomplete.
Ctrl + /	Toggle line comment for selected lines.
Alt + Shift + F	Format the selected code or entire file.
F12	Go to definition of a variable or function.
Ctrl + Shift + O	Go to symbol in the file (functions, variables, etc.).
Ctrl + Shift + [	Collapse the current code block.
Ctrl + Shift + ]	Expand the current code block.
Ctrl + K, Ctrl + X	Show the Markdown preview of the current file.
Ctrl + K, Z	Zen mode for distraction-free coding.
Ctrl + D	Select the next occurrence of the selected text.
Ctrl + Shift + L	Select all occurrences of the selected text.
Ctrl + K, S	Open keyboard shortcuts reference.

Browser DevTools Shortcuts

The following table lists the useful shortcuts of common web browsers for web development:

Shortcut	Description
F12 or Ctrl + Shift + I	Open DevTools in most browsers.
Ctrl + Shift + C	Toggle element selection tool for inspecting elements.
Ctrl + R or Cmd + R	Reload the page (refresh).
Ctrl + Shift + R or Cmd + Shift + R	Reload the page, ignoring the cache.
F5	Reload the page (refresh) without cache.
Esc	Open or close the console panel in DevTools.
Ctrl + Shift + J	Open the JavaScript console directly.
Ctrl + D	Duplicate the current line in the console.
Ctrl + P	Open the file navigator (to search for files in the source panel).
Ctrl + [ or Ctrl + ]	Navigate through the elements in the elements panel.
Ctrl + Shift + M	Toggle device mode for responsive design testing.
Ctrl + Shift + F	Search across all sources for a specific string.
Ctrl + Shift + S	Take a screenshot of the visible part of the page.
Cmd + Option + I	Open DevTools in Safari.
F1	Open the DevTools command menu for additional options.

5. Git Shortcuts

Initialize a Repository

To initialize a new repository, run:

git init

Clone a Repository

To clone an existing repository, use:

git clone <repo-url>

Check Status

To check the current status of the repository, run:

git status

Commit Changes

To commit changes with a message, run:

git commit -m "Commit message"

Push to Remote

To push local changes to the remote repository, run:

git push origin main

6. Meta Tags

The meta tags define information related to a page for search engines and browsers; these tags are useful for SEO purposes.

Meta Title

The <title> tag is used to define an SEO title for a webpage. It should contain a maximum of 65 characters for best SEO practice.

<title>SEO title for a webpage</title>

Meta SEO Description, Keywords, and Author Tags

The <meta> tag, along with the pair of name and content attributes, is used to define description, keywords, and author information about the page and content.

<meta name="description" content="Provide a brief summary of a webpage's content.">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author's Name">

Meta Open Graph Tags

Use the following tags to define the meta-open graph for social media:

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Provide page description that will be shown on sharing on social media">
<meta property="og:image" content="topic's_image.jpg">

Twitter Card Tags

Use the following tags to define the Twitter card that will be shown when you share the link on Twitter:

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Title">

Canonical Tag

If you have multiple pages on the same topic, the canonical tag defines the primary (original) page for search enigines. This tag tells the search engines which version of a webpage should be displayed on the search result. Use the following syntax to write a canonical link:

<link rel="canonical" href="https://www.example.com/page">

Robots Meta Tag

You can use the robots meta tag to define a webpage for indexing or non-indexing. The following are the content values for the robot mega tag:

Content Value	Description
`noindex`	Prevents search engines from indexing the page.
`nofollow`	Tells search engines not to follow links on the page.
`noarchive`	Prevents search engines from storing a cached copy of the page.
`nosnippet`	Prevents search engines from showing a snippet or preview in search results.
`noodp`	Instructs search engines not to use the Open Directory Project (DMOZ) description for the page.
`none`	Combines all directives: noindex, nofollow, noarchive, and nosnippet.
`index`	Allows search engines to index the page (default behavior).
`follow`	Allows search engines to follow links on the page (default behavior).

<meta name="robots" content="index, follow">

7. Time-Saving Tips

Feature	Description
Prettier for Code Formatting	Format code in one click with Prettier in VS Code (Shift + Alt + F).
Live Server Extension	Use VS Code's Live Server to view changes in real-time.
Google Chrome Lighthouse	Analyze your site’s performance with Lighthouse in Chrome DevTools.
Bookmarking Important Links	Use browser bookmarks to save frequently used resources.

Comments and Discussions!

Load comments ↻