Bernard’s Notebook

Web Development Basics

Properties2
tagsweb, javascript, html, css, beginner
aliasesweb-dev, 前端开发

2 min read

Web Development Basics

Overview

Web development is the process of building and maintaining websites. It encompasses everything from creating simple static pages to complex web applications.

The Three Pillars

Web development rests on three core technologies:

  1. HTML — Structure and content
  2. CSS — Styling and layout
  3. JavaScript — Interactivity and logic
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, Quartz!</h1>
    <p>This is a test page.</p>
</body>
</html>

JavaScript Fundamentals

Modern JavaScript (ES6+) introduces powerful features:

// Arrow functions
const greet = (name) => `Hello, ${name}!`;
 
// Destructuring
const { title, author } = book;
 
// Async/Await
async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
}

Learning Resources

CSS Grid vs Flexbox

FeatureGridFlexbox
Dimension2D1D
Best forLayoutsComponents
Browser SupportExcellentExcellent
Learning CurveModerateEasy
/* Grid example */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
 
/* Flexbox example */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Common Pitfall

Don’t use !important excessively — it makes your CSS harder to maintain. See My PKM System for how I manage project-specific knowledge.

Frameworks and Tools

The modern web ecosystem includes many tools:

  • React, Vue, Svelte — UI frameworks
  • Vite, Webpack — Bundlers
  • TypeScript — Type-safe JavaScript
  • Tailwind CSS — Utility-first CSS

Related Topics

Footnotes

Web development has evolved significantly since the early days of the web1. Today, we have sophisticated tools and frameworks that make building complex applications much more accessible2.

*Tags: web javascript html css beginner

Footnotes

  1. The first website was created by Tim Berners-Lee at CERN in 1991. ↩

  2. See Machine Learning Intro for how AI is changing web development. ↩

Graph View