Nano Ink

Web Development

A comprehensive guide to web development technologies, covering frontend and backend concepts.

📚 Topics

Frontend

File Description
HTML Structure and semantic elements of web pages
CSS Styling, layouts, flexbox, grid, and responsive design
JavaScript Core JS concepts, DOM manipulation, ES6+ features

Backend

File Description
Express.js Node.js web framework, routing, middleware
REST REST API design, HTTP methods, status codes

🎯 Quick Reference

HTML Document Structure

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

CSS Box Model

┌─────────────────────────────────────┐
│              Margin                 │
│   ┌─────────────────────────────┐   │
│   │          Border             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │      Padding        │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   Content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘