Kurs HTML i CSS · Moduł 11: Narzędzia deweloperskie
Zaawansowane techniki workflow
W tej lekcji8
Po tygodniu pracy otwierasz plik style.css i nie możesz znaleźć reguły od nagłówka. Kolor złota wpisałeś w dwunastu miejscach, więc gdy trzeba go przyciemnić, poprawiasz każde z osobna. To nie brak wiedzy, tylko brak organizacji. Każdy faraon miał system zarządzania budową piramidy. Jako web developer, Ty też potrzebujesz sprawnego workflow. W tej lekcji poznasz dodatkowe techniki, które usprawnią Twój proces tworzenia stron.
Kompletny zestaw meta tagów w head
Sekcja <head> to "fundament" każdej strony. Oto kompletny zestaw meta tagów, który warto wklejać do każdego nowego projektu:
1<head>
2 <!-- Kodowanie znaków - zawsze na początku -->
3 <meta charset="UTF-8">
4
5 <!-- Responsywność -->
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
8 <!-- Tytuł strony (pojawia się w zakładce) -->
9 <title>Muzeum Egiptu | Strona główna</title>
10
11 <!-- Opis dla wyszukiwarek -->
12 <meta name="description" content="Muzeum Starożytnego Egiptu - bilety online, wystawy, historia faraonów.">
13
14 <!-- Autor strony -->
15 <meta name="author" content="Mohamed">
16
17 <!-- Kolor motywu przeglądarki na mobile -->
18 <meta name="theme-color" content="#1a1a2e">
19</head>Nowe są tu dwa tagi: author podaje autora strony, a theme-color barwi pasek przeglądarki na telefonach na kolor Twojej marki. Reszta to ten sam porządek co w lekcji o faviconie i Open Graph.
Komentarze w kodzie
Komentarze to "notatki skryby" na marginesie papirusu - pomagają Tobie i innym zrozumieć kod. W HTML zaczynasz je od <!--, a kończysz na -->:
1<!-- To jest komentarz HTML - nie wyświetla się na stronie -->
2
3<!-- =============================
4 SEKCJA: Nawigacja główna
5 Autor: Mohamed
6 Data: 2024-01-15
7 ============================= -->
8<nav>
9 <!-- Lista linków nawigacyjnych -->
10 <ul>
11 <li><a href="/">Strona główna</a></li>
12 </ul>
13</nav>Komentarz nie pojawi się na stronie, ale każdy zobaczy go w źródle strony (Ctrl+U) i w DevTools, więc nigdy nie zapisuj w nim haseł. W arkuszach CSS komentarz ma zupełnie inną składnię: zaczyna się od /* i kończy na */:
1/* To jest komentarz CSS */
2
3/* ============================
4 SEKCJA: Typografia
5 ============================ */
6h1 { font-size: 2rem; }
7
8/* TODO: Dodać responsywność dla mobile */Uwaga na pułapkę: podwójny ukośnik // znany z JavaScriptu nie jest w CSS komentarzem i może zepsuć następną regułę. Znacznik TODO to umówiony sygnał "wrócę tu", który łatwo potem wyszukać.
Struktura plików projektu
Dobrze zorganizowany projekt to klucz do sukcesu. Każdy rodzaj plików ma swój katalog, jak magazyny w kompleksie świątynnym:
1<!-- Struktura katalogów: -->
2<!--
3 projekt/
4 index.html - Strona główna
5 about.html - Podstrona "O nas"
6 contact.html - Podstrona kontakt
7 css/
8 style.css - Główny arkusz stylów
9 reset.css - Reset CSS
10 js/
11 script.js - Główny skrypt
12 images/
13 logo.svg - Logo
14 hero.jpg - Zdjęcie główne
15 favicon.ico - Ikona zakładki
16 fonts/
17 custom-font.woff2 - Własna czcionka
18-->Strona główna zostaje w katalogu głównym jako index.html, jak wymaga hosting z poprzedniej lekcji. Nazwy plików pisz małymi literami, bez spacji i polskich znaków.
Szkielet każdej podstrony
Każda podstrona projektu ma ten sam semantyczny szkielet, ułożony od góry do dołu: nagłówek z nawigacją, treść główna z sekcjami i stopka:
1<body>
2 <header>
3 <nav>...</nav>
4 </header>
5 <main>
6 <section>...</section>
7 <section>...</section>
8 </main>
9 <footer>...</footer>
10</body>Kolejność jest stała: <header> z <nav> w środku, <main> i <footer> na końcu. Ten szkielet znasz z modułu o dostępności - teraz staje się szablonem każdej nowej podstrony.
Reset CSS i Normalize
Każda przeglądarka stosuje domyślne style (np. marginesy na body, rozmiary nagłówków). CSS Reset lub Normalize ujednolicają te style:
1/* Prosty CSS Reset */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10img {
11 max-width: 100%;
12 display: block;
13}
14
15body {
16 min-height: 100vh;
17 line-height: 1.6;
18}Pierwsza reguła zeruje marginesy i ustawia box-sizing: border-box, dzięki czemu padding i ramka wliczają się w szerokość elementu - width: 300px oznacza wtedy naprawdę 300 pikseli. Normalize.css zamiast zerować wszystko, zachowuje przydatne style domyślne i poprawia tylko niespójności.
Zmienne CSS (Custom Properties)
Zmienne CSS pozwalają zdefiniować wartości raz i używać w całym arkuszu - jak kartusz faraona, który raz zdefiniowany, pojawia się w wielu miejscach świątyni:
1:root {
2 --color-primary: #1a1a2e;
3 --color-accent: #d4af37;
4 --color-text: #333;
5 --font-main: 'Georgia', serif;
6 --spacing-sm: 0.5rem;
7 --spacing-md: 1rem;
8 --spacing-lg: 2rem;
9}
10
11body {
12 font-family: var(--font-main);
13 color: var(--color-text);
14}
15
16h1 {
17 color: var(--color-accent);
18 margin-bottom: var(--spacing-md);
19}Zmienne CSS definiuje się za pomocą prefiksu -- i odczytuje funkcją var(). Główne zalety:
- Jedno miejsce do zmiany - zmiana wartości zmiennej aktualizuje ją wszędzie
- Czytelność -
var(--color-accent)jest bardziej zrozumiałe niż#d4af37 - Tematyzacja - łatwo tworzysz dark/light mode zmieniając tylko zmienne
Nie myl ich z Sass: $color to zmienna preprocesora, znana tylko podczas kompilacji, a zmienne CSS działają w przeglądarce i mogą się zmieniać, np. w media query trybu ciemnego.
Favicon - ikona zakładki
Każda profesjonalna strona potrzebuje ikony zakładki. Przypomnij sobie zestaw z lekcji o faviconie, tym razem z wersją SVG:
1<head>
2 <!-- Favicon klasyczny -->
3 <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5 <!-- Favicon SVG (nowoczesne przeglądarki) -->
6 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
7
8 <!-- Ikona dla urządzeń Apple -->
9 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
10</head>Przeglądarki obsługujące SVG mogą użyć ikony wektorowej, ostrej w każdym rozmiarze, a starsze zostaną przy pliku .ico.
Dobre praktyki organizacji CSS
Organizuj swój CSS w logiczne sekcje - jak skryba organizuje hieroglify w kolumny. Kolejność sekcji prowadzi od ogółu do szczegółu:
1/* ============================
2 1. RESET / NORMALIZE
3 ============================ */
4*, *::before, *::after {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10/* ============================
11 2. ZMIENNE CSS
12 ============================ */
13:root {
14 --color-primary: #1a1a2e;
15 --color-accent: #d4af37;
16}
17
18/* ============================
19 3. TYPOGRAFIA
20 ============================ */
21body { font-family: 'Georgia', serif; }
22h1, h2, h3 { font-weight: 700; }
23
24/* ============================
25 4. LAYOUT
26 ============================ */
27.container { max-width: 1200px; margin: 0 auto; }
28
29/* ============================
30 5. KOMPONENTY
31 ============================ */
32.card { border: 1px solid #ddd; padding: 1rem; }
33.button { padding: 0.5rem 1rem; cursor: pointer; }
34
35/* ============================
36 6. MEDIA QUERIES
37 ============================ */
38@media (max-width: 768px) {
39 .container { padding: 0 1rem; }
40}Ta struktura sprawia, że nawet duży arkusz stylów pozostaje czytelny i łatwy w utrzymaniu. Media queries stoją na końcu, bo przy równej specyficzności wygrywa reguła zapisana później. Jak mawiał Mohamed: "Dobrze zorganizowany kod to jak dobrze zarządzana budowa piramidy - każdy blok ma swoje miejsce!"
Moja rada: zaczynaj każdy projekt od tych samych kroków - foldery, reset, zmienne. W projekcie końcowym połączysz je z faviconem, czcionkami i obrazami.
Praktyka
W edytorze poniżej znajdziesz stronę zbudowaną według tych zasad. Zmień wartość --color-accent i zobacz, ile miejsc zmieni się naraz:
Kod do tej lekcji: index.html
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Zaawansowany workflow</title>
7 <meta name="description" content="Praktyka zaawansowanych technik workflow">
8 <meta name="author" content="Mohamed">
9 <meta name="theme-color" content="#1a1a2e">
10 <link rel="stylesheet" href="style.css">
11</head>
12<body>
13 <h1>Zaawansowane techniki workflow</h1>
14
15 <!-- =============================
16 SEKCJA: Zmienne CSS
17 ============================= -->
18 <section>
19 <h2>Zmienne CSS (Custom Properties)</h2>
20 <div class="demo-vars">
21 <div class="color-swatch primary">--color-primary</div>
22 <div class="color-swatch accent">--color-accent</div>
23 <div class="color-swatch bg">--color-bg</div>
24 </div>
25 <p>Zmienne CSS pozwalaja zdefiniowac wartosci raz
26 i uzywac ich w calym arkuszu stylow.</p>
27 </section>
28
29 <!-- =============================
30 SEKCJA: CSS Reset
31 ============================= -->
32 <section>
33 <h2>CSS Reset</h2>
34 <p>Ta strona uzywa prostego CSS Reset,
35 ktory ujednolica domyslne style przegladarek:</p>
36 <ul>
37 <li><code>box-sizing: border-box</code> na wszystkich elementach</li>
38 <li><code>margin: 0; padding: 0</code> - reset marginesow</li>
39 <li><code>img { max-width: 100% }</code> - responsywne obrazy</li>
40 </ul>
41 </section>
42
43 <!-- =============================
44 SEKCJA: Komentarze
45 ============================= -->
46 <section>
47 <h2>Komentarze w kodzie</h2>
48 <p>Sprawdz kod zrodlowy tej strony - kazda sekcja
49 jest opisana komentarzem HTML.</p>
50 <p>Dobre komentarze pomagaja zrozumiec
51 strukture kodu i cel kazdej sekcji.</p>
52 </section>
53</body>
54</html>Pamiętaj: porządek na placu budowy to połowa piramidy - dobrze nazwane foldery, sekcje i zmienne oszczędzą Ci godzin szukania.
Widzisz błąd w tej lekcji?
Sprawdź się
Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.
1. Jak odwołać się do zmiennej CSS zdefiniowanej jako --color-accent: #d4af37?
2. Co robi reguła *, *::before, *::after { box-sizing: border-box; } w CSS Reset?
To 2 z 3 pytań do tej lekcji. Pozostałe rozwiążesz w grze.
Zadania praktyczne w grze
- Edytor kodu
Zdefiniuj zmienne CSS w :root i użyj ich zamiast sztywnych wartości w stylach.
- Układanie w pionie
Uporządkuj semantyczne sekcję strony HTML od góry do dołu:
- Edytor kodu
Stwórz kompletną stronę z header, main (2 sekcję) i footer.
- Układanie w poziomie
Jak zdefiniować zmienną CSS w :root?
- Klikanie w kolejności
Jak napisać komentarz w kodzie HTML?
- Układanie w poziomie
Jak wygląda komentarz w kodzie CSS?
- Klikanie w kolejności
Jak użyć zmiennej CSS we właściwości color?
- Edytor kodu
Stwórz kompletną stronę muzeum z meta tagami, faviconem, Google Fonts, obrazami z lazy loading i zmiennymi CSS.