Educational Materials

Learning HTML and CSS

Learn the basics of web development. Below you'll find the most important HTML elements and CSS properties with code examples.

HTML Basics

HTML is the skeleton of every web page. Learn the most important elements.

Document Structure

Every HTML page starts with a <!DOCTYPE html> declaration and contains <html>, <head>, and <body> elements. Head contains metadata, and body contains visible content.

html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <title>Moja strona</title>
  </head>
  <body>
    <h1>Witaj!</h1>
  </body>
</html>

Headings (h1-h6)

Headings create content hierarchy. <h1> is the most important heading -- use it once per page. The higher the number, the smaller the heading.

html

<h1>Główny nagłówek</h1>
<h2>Podtytuł</h2>
<h3>Sekcja</h3>
<h4>Podsekcja</h4>

Text and Formatting

The <p> element creates a paragraph. Use <strong> for bold, <em> for italic, and <br> for line breaks within text.

html

<p>To jest akapit tekstu.</p>
<p>
  Tekst <strong>pogrubiony</strong>
  i <em>pochylony</em>.
</p>
<p>Pierwsza linia<br />Druga linia</p>

Links

The <a> element creates a link. The href attribute points to the target address. Add target="_blank" to open the link in a new tab.

html

<a href="https://example.com">
  Kliknij tutaj
</a>

<a href="/kontakt">Kontakt</a>

<a href="https://example.com"
   target="_blank">
  Otwórz w nowej karcie
</a>

Images

The <img> element displays an image. The src attribute is the file path, and alt is the alternative text -- important for accessibility.

html

<img
  src="zdjecie.jpg"
  alt="Opis obrazka"
  width="300"
  height="200"
/>

Lists

Ordered lists (<ol>) number items automatically. Unordered lists (<ul>) use bullet points. Each item is an <li>.

html

<ul>
  <li>Element pierwszy</li>
  <li>Element drugi</li>
</ul>

<ol>
  <li>Krok pierwszy</li>
  <li>Krok drugi</li>
</ol>

Div and Span

<div> is a block container -- it takes up the full width. <span> is an inline container -- it wraps text without breaking lines. They are used for grouping and styling.

html

<div class="karta">
  <h2>Tytuł</h2>
  <p>Treść karty</p>
</div>

<p>
  Tekst z <span class="kolor">
    wyróżnieniem
  </span>.
</p>

CSS Basics

CSS gives your page its look -- colors, sizes, layout, and animations.

Selectors

Selectors indicate which HTML elements we want to style. You can use element names, classes (with a dot), or IDs (with #).

css

/* Selektor elementu */
p { color: blue; }

/* Selektor klasy */
.karta { border: 1px solid gray; }

/* Selektor ID */
#naglowek { font-size: 24px; }

Colors and Backgrounds

You can specify colors as names (red), HEX codes (#ff0000), or rgb(). Background sets the element's background -- color, gradient, or image.

css

h1 {
  color: #6366f1;
  background-color: #f0f0ff;
}

.hero {
  background: linear-gradient(
    135deg, #667eea, #764ba2
  );
  color: white;
}

Text Styling

Control text appearance: size (font-size), font (font-family), color (color), alignment (text-align), and weight (font-weight).

css

p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #333;
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
}

Box Model

Every element is a "box": content, padding (inner spacing), border, and margin (outer spacing). This is the foundation of CSS layout.

css

.karta {
  /* Treść ma 300px */
  width: 300px;

  /* Odstęp wewnętrzny */
  padding: 20px;

  /* Obramowanie */
  border: 2px solid #ddd;
  border-radius: 12px;

  /* Odstęp zewnętrzny */
  margin: 16px;
}

Flexbox

Flexbox is a powerful tool for arranging elements. display: flex activates it, justify-content aligns horizontally, and align-items aligns vertically.

css

.kontener {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Flex w kolumnie */
.kolumna {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Tips for Beginners

A few practical tips to help you learn faster.

Use DevTools

Press F12 in the browser to open developer tools. You can inspect and edit HTML/CSS in real time.

Start with simple things

Don't try to build complicated pages right away. Start with simple text and gradually add new elements.

Experiment and test

Change CSS values and observe the effects. There's no better way to learn than trying different options.

Read others' code

Browse classmates' projects in the gallery. Analyzing others' code is a great way to learn new techniques.