HTML & CSS

Storage, layout systems, script loading, semantics, and browser APIs.

Local Storage

Browser key-value storage for persistent client-side data.
Typically around 5-10MB per origin depending on browser.

localStorage.setItem('lastname', 'bansal');
localStorage.getItem('lastname');
localStorage.removeItem('lastname');

Session Storage

Same API as localStorage, but scoped to a browser tab session.
Data is cleared when the tab is closed.

sessionStorage.setItem('lastname', 'bansal');
sessionStorage.getItem('lastname');
sessionStorage.removeItem('lastname');

Cookies (Client + Server)

Small key-value storage (~4KB per cookie), sent with HTTP requests.
Supports expiry and security flags like HttpOnly, Secure, SameSite.
Use for server-readable state like sessions; avoid storing large data.

document.cookie = 'name=sarthak; Path=/; SameSite=Lax';

IndexedDB

Asynchronous browser database for structured data and larger storage.
Good for offline apps and large object collections.
Prefer IndexedDB when localStorage serialization becomes costly.

Flexbox

flexbox.css

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.item {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 0 1 auto;
  align-self: auto;
}

Grid Layout

Common layout pattern using named areas and responsive collapse.

grid-layout.css

.grid-container {
  display: grid;
  gap: 50px 100px; /* A shorthand property for the row-gap and the column-gap properties */
  grid-template-columns: auto auto auto; /* Specifies the size and no. of columns in a grid layout */
  grid-template-rows: auto auto auto; /* Specifies the size and no. of rows in a grid layout */
  background-color: #2196f3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  grid-column: 1 / 5; /* start / end of column(from 1 to end of 4th box) */
  grid-row: 1 / 4; /* start / end of row(from 1 to end of 3rd box) */
}

SASS / SCSS

Example with variables, mixins, and nested BEM-style selectors.

styles.scss

$primary-color: #036;

@mixin btn {
  padding: 5px;
  list-style: none;
}

@mixin btnPrimary {
  @include btn;
  background-color: invert($primary-color, 50%);
}

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return $inverse;
}

button {
  @include btnPrimary;
  color: #fff;
}

/* Example for loop to generate padding utility classes */
@for $i from 1 through 3 {
  .p-#{$i} {
    padding: #{$i * 10}px;
  }
}

Data Attributes

Use data-* attributes to store custom metadata directly on DOM nodes.

Access it in JS with the dataset API.

<div id="person" data-name="sarthak" data-age="28"></div>

const el = document.getElementById('person');
console.log(el.dataset.name); // "sarthak"

defer vs async

Plain <script> blocks HTML parsing. For external scripts, defer and async avoid parser blocking.

defer (best default for app scripts)

Downloads in parallel, executes after DOM is parsed, and preserves script order.

async (best for independent scripts)

Downloads in parallel and executes as soon as ready; execution order is not guaranteed.

Accessibility

In Progress

Browser APIs

In Progress