Learn Programming — 03 HTML and Markdown

LearnProgramming Course 2: HTML and Markdown

This lecture follows /course/html.

HTML describes web-page structure. Markdown is a lighter way to write the same kinds of documents.

ch11 — Your First HTML Page

<h1>Hello World</h1>
<p>This is my first HTML page.</p>
<p>HTML is <strong>easy</strong> to learn!</p>

Tags describe content.
Most tags have an opening and closing form: <p>...</p>.
The browser renders the structure.

HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

head contains page information; body contains what people see.

ch12 — Lists

<h2>My Favorite Languages</h2>
<ul>
  <li>JavaScript</li>
  <li>Python</li>
  <li>HTML &amp; CSS</li>
</ul>

<ol>
  <li>Read</li>
  <li>Write code</li>
  <li>Practice</li>
</ol>

ul creates bullet lists; ol creates numbered lists; li is one list item.

ch13 — Links and Images

<p>
  Learn at <a href="https://developer.mozilla.org">MDN Web Docs</a>.
</p>

<img
  src="https://via.placeholder.com/300x100"
  alt="Example banner"
>

href, src, and alt are attributes: extra information placed inside a tag.

Why `alt` Matters

<img src="cat.jpg" alt="A sleeping orange cat on a chair">

Alternative text helps people using screen readers and explains an image when it cannot load.

ch14 — CSS Basics

CSS controls how HTML looks.

button {
  padding: 10px 18px;
  border: 1px solid #7dd3fc;
  border-radius: 8px;
  background: transparent;
  color: #eee;
}

The LearnProgramming lesson lets you edit colors, spacing, and borders, then see the result immediately.

ch15 — Flexbox Layout

Use Flexbox to arrange repeated content such as menu cards.

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

display: flex lays out children along one axis.
flex-wrap: wrap moves items to another row when necessary.
gap adds space between cards.

ch16 — Markdown Introduction

Markdown is document syntax that becomes HTML.

# Hello Markdown

This is **bold** and this is *italic*.

## A Subheading

- Item one
- Item two

Markdown is common in GitHub READMEs, documentation, notes, and these slides.

Markdown and HTML

Meaning	Markdown	HTML
Main heading	`# Title`	`<h1>Title</h1>`
Bold	`text`	`<strong>text</strong>`
Link	`[MDN](url)`	`<a href="url">MDN</a>`
List	`- Item`	`<li>Item</li>`

Markdown is shorter; HTML gives more control.

ch17 — Code and Tables in Markdown

Inline code: use `console.log()`.

```js
const greet = name => "Hello " + name
```

| Language | Type |
|---|---|
| JavaScript | Dynamic |
| Python | Dynamic |

Use fenced code blocks for multi-line code and tables for comparisons.

HTML and Markdown Summary

HTML     = explicit web-page structure
Markdown = concise document-writing syntax

Both turn ideas into readable documents. The LearnProgramming website lets you edit each example and see the rendered result.