Article

web_dev basics / front end

web
On this page 9

WEB Dev Basic

Some notes from learning web application development, focusing mainly on the big-picture concepts.

Concepts

  • HTML
  • CSS
  • JavaScript
  • React
  • Vite

HTML

HTML is the structural skeleton of a web page: it defines what content exists.

  • HyperText Markup Language
  • It is not a programming language, but a markup language that uses tags to describe page structure
  • It determines what appears on a page: headings, paragraphs, images, links, buttons, forms, and more
  • The root element of a page is <html>, while the actual content lives inside <body>

Core purposes:

  • Define the page structure
  • Hold the content
  • Provide semantics to the browser (which part is a heading, navigation, or main text)

A simple analogy: HTML is the concrete-and-steel frame of a house: structure without decoration or interaction.

CSS

CSS controls the appearance of a web page: what it looks like.

  • Cascading Style Sheets
  • It styles HTML and controls color, size, position, fonts, layouts, animations, and more
  • It can be written inside an element (inline), in a <style> element (internal), or in a separate .css file (external)

Core purposes:

  • Control appearance and styling
  • Build layouts (centering, columns, flexbox, and grids)
  • Make pages attractive and responsive across screen sizes

A simple analogy: CSS is the interior decoration, paint, and furniture that makes the house attractive and orderly.

JavaScript

JavaScript provides a web page’s behavior and makes it interactive.

  • The standard scripting language of the web front end
  • It enables interaction: clicks, input, pop-ups, data requests, and changes to page content
  • It can manipulate HTML and CSS to update a page dynamically

Core purposes:

  • Implement interaction logic
  • Manipulate the DOM (HTML elements and CSS styles)
  • Handle events such as clicks, input, and scrolling
  • Send network requests and retrieve data
  • Implement complex features such as form validation, carousels, drop-down menus, and single-page applications

A simple analogy: JavaScript installs the house’s wiring, switches, and smart systems, making it functional and interactive.

React

React is a JavaScript library for building user interfaces and developing large front-end projects efficiently.

  • A mainstream front-end library developed by Meta (Facebook)
  • Based on components and functional programming ideas
  • Uses JSX, which lets you write HTML-like structures in JavaScript
  • Manages page state through Hooks such as useState, automatically updating the page when data changes

Core purposes:

  • Split pages into reusable, maintainable components
  • Drive views with data instead of manually manipulating the DOM
  • Support complex interactions and large projects, including admin systems, web apps, and desktop applications
  • Work with Electron or Tauri to build desktop software

A simple analogy: Vanilla HTML/CSS/JS is like building a house by hand; React is modular prefabricated construction, offering greater efficiency and scalability.

Some Characteristics

  • Under <StrictMode>, React may invoke functions twice during development to help detect violations of functional-programming expectations.
  • Snapshot: state behaves like a snapshot for the duration of a render. Be careful whether repeated operations inside one function are valid—for example, consecutive useState updates.
  • When changing an object, create a new object. The reference must change to trigger an update, and the old object can then be garbage-collected.

Vite

Vite is a front-end build tool responsible for running, compiling, and bundling a project.

  • A newer-generation front-end tool that is faster than traditional Webpack workflows
  • Created by Vue author Evan You, with support for React, Vue, vanilla JavaScript, and more
  • Starts quickly, hot-reloads code changes, and compiles JSX, TypeScript, CSS, and other assets automatically

Core purposes:

  • Quickly scaffold projects from templates
  • Start a development server for local previews
  • Process JSX, ES6+, CSS, and other syntax automatically
  • Bundle the result into deployable static files in the dist directory

A simple analogy: Vite is the front-end project’s site manager and construction crew: you write the code, and it handles compilation, execution, and bundling.

How They Fit Together

  • HTML: structure (what exists)
  • CSS: presentation (what it looks like)
  • JavaScript: behavior (what it can do)

React = an efficient development approach
Vite = project tooling

Front-end development means building pages with HTML, CSS, and JavaScript, using React to improve development efficiency, and using Vite to manage the project.