Altammoj Study Guide

HTML is the structure of the web. Use semantic tags so the browser and screen readers understand your layout.

Elements: <h1>, <p>, <img>, <a>.
Attributes: href, src, alt, id, class.
Document flow: Block vs inline elements.
Semantic layout: <header>, <nav>, <main>, <section>, <article>, <footer>.

Minimal HTML template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

Common Tags

Tag	Purpose	Notes
`<a>`	Link to pages or sections	Use `href` and `target` carefully
`<img>`	Embed images	Always include descriptive `alt`
`<ul>/<ol><li>`	Lists	Use ordered lists for steps
`<table>`	Tabular data	Always include `<th>` headings

CSS controls presentation: color, spacing, typography, and layout. Link your CSS with <link rel="stylesheet" href="style.css">.

Property	Description	Example
`color`	Text color	`color: #005faf;`
`background`	Background paint	`background: #f5f7fb;`
`margin`	Outside spacing	`margin: 1rem;`
`padding`	Inside spacing	`padding: 1rem;`
`border-radius`	Rounded corners	`border-radius: 12px;`
`box-shadow`	Shadow behind boxes	`box-shadow: 0 2px 8px rgba(0,0,0,.1);`

Example: Button styles

.btn {
  display: inline-block;
  padding: .6rem 1rem;
  border: 1px solid #005faf;
  border-radius: 8px;
  text-decoration: none;
}
.btn--primary { background: #005faf; color: #fff; }
.btn--ghost   { background: transparent; color: #005faf; }

Know how to link CSS and use selectors.
Write semantic HTML with proper nesting.
Build at least one table and one list from scratch.
Use a consistent color palette and spacing scale.
Validate HTML on W3C and scan CSS quickly for typos.

Open Cheat‑Sheet Back to top

Box Model

margin: outer space
border: line around the box
padding: inner space
content: actual element content

Flex Layout

.row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

Web Development 1 – Study Guide

HTML Basics

Common Tags

CSS Fundamentals

Example: Button styles

Midterm Tips

Cheat‑Sheet (Quick Reference)

Box Model

Flex Layout