Introduction

This mini documentation is a practical reference for web basics.

The goal is to keep things simple: structure first, then style, then responsiveness.

// Tip: build small, test often, keep it readable.
  • Start with semantic structure
  • Style with consistency
  • Make it responsive and accessible
HTML Foundations

HTML defines the structure of a web page.

Elements are written using tags and arranged in a meaningful hierarchy.

<h1>Hello World</h1>

Use headings in order and keep your markup clear.

  • Headings define hierarchy
  • Lists group related items
  • Links connect content
Semantic HTML

Semantic tags describe meaning, not just layout.

This improves accessibility and makes code easier to maintain.

<main>...</main>   <nav>...</nav>

Prefer semantic elements over generic divs when possible.

  • <header> for page/section header
  • <section> for grouped content
  • <footer> for closing info
CSS Selectors

CSS selectors target elements to apply styles.

You can select by tag, class, id, or attributes.

.card { border-radius: 16px; }

Specificity determines which rule wins.

  • Tag selectors are generic
  • Class selectors are reusable
  • ID selectors are very specific
Box Model

Every element is a rectangular box: content, padding, border, margin.

Understanding this avoids spacing and alignment bugs.

.card { padding: 16px; border: 1px solid #ccc; }

Tip: use box-sizing: border-box; for predictable sizing.

  • Content holds text/images
  • Padding adds inner spacing
  • Margin adds outer spacing
Flexbox Basics

Flexbox is great for alignment and layout rows/columns.

It’s perfect for navbars, cards, and centered layouts.

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

Use it when you want fast, clean alignment.

  • justify-content aligns horizontally
  • align-items aligns vertically
  • gap adds spacing between items
Forms and Validation

Forms collect user input using inputs, selects, textareas and buttons.

Labels should be associated with inputs for accessibility.

<label for="email">Email</label> <input id="email" type="email" required />

HTML provides built-in validation with attributes.

  • required blocks empty submit
  • type="email" checks format
  • minlength sets minimum characters
Accessibility Basics

Accessibility makes your UI usable for more people.

Good semantics + labels + focus states are a strong baseline.

/* Example: make focus visible */ button:focus { outline: 2px solid; }

Small changes make a big difference.

  • Use semantic HTML
  • Connect labels to inputs
  • Ensure contrast and focus visibility
Responsive Layout

Responsive design adapts to different screen sizes.

Media queries apply styles conditionally.

@media (max-width: 768px) { #navbar { position: static; } }

Flexbox and relative units help a lot.

  • Use rem and % instead of fixed px
  • Use breakpoints for layout changes
  • Mobile-first is often easier
Debugging Tips

Debugging is part of building. Keep it systematic.

Change one thing at a time and verify with DevTools.

/* quick reset to spot layout issues */ * { outline: 1px solid rgba(255,255,255,.08); }

Most “weird bugs” are usually spacing, specificity, or HTML structure.

  • Inspect element and computed styles
  • Check specificity conflicts
  • Verify mobile layout with device tools