Introduction to HTML and CSS
The two languages every web page is built from.
ConceptualbeginnerBeginner-friendlyFull course available
Overview
HTML describes what's on a page (structure and content); CSS describes how it looks (presentation). This entry is the on-ramp before the dedicated HTML and CSS guides/course -- what the split between the two languages actually means and why it matters.
- What it is
- A short orientation to the two foundational web languages and how they divide responsibility: structure versus presentation.
- Why it's used
- Every browser-rendered page, no matter what framework built it, ultimately compiles down to HTML and CSS.
- Where it fits
- Right after general programming basics, before the full HTML & CSS Fundamentals course.
Core concepts
- Elements and tags
- The document tree (parents, children, siblings)
- Separating structure from presentation
- The browser as a renderer, not just a viewer
Example
The <h1> and <p> tags describe structure and meaning (this is a heading, this is a paragraph); the style attribute is CSS, describing appearance -- the same paragraph could be restyled without touching its meaning.
<!doctype html>
<html>
<body>
<h1>Hello</h1>
<p style="color: teal;">A paragraph.</p>
</body>
</html>Common use cases
- Building any web page, regardless of framework
- Reading and modifying an existing site's markup
- Understanding what a framework like React ultimately renders to
Project ideas
- Build a single page with a heading, a paragraph, and one styled element, with no CSS framework