Zaawansowane techniki workflow
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.
Prefiksy i meta tagi w head
Sekcja
<head>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>Komentarze w kodzie
Komentarze to "notatki skryby" - pomagają Tobie i innym zrozumieć kod:
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 linkow nawigacyjnych -->
10 <ul>
11 <li><a href="/">Strona główna</a></li>
12 </ul>
13</nav>1/* To jest komentarz CSS */
2
3/* ============================
4 SEKCJA: Typografia
5 ============================ */
6h1 { font-size: 2rem; }
7
8/* TODO: Dodać responsywność dla mobile */Struktura plików projektu
Dobrze zorganizowany projekt to klucz do sukcesu:
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 stylow
9 reset.css - Reset CSS
10 js/
11 script.js - Główny skrypt
12 images/
13 logo.svg - Logo
14 hero.jpg - Zdjecie główne
15 favicon.ico - Ikona zakładki
16 fonts/
17 custom-font.woff2 - Własna czcionka
18-->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}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
--var()- Jedno miejsce do zmiany - zmiana wartości zmiennej aktualizuje ją wszędzie
- Czytelność -
jest bardziej zrozumiałe niżvar(--color-accent)#d4af37 - Tematyzacja - łatwo tworzysz dark/light mode zmieniając tylko zmienne
Favicon - ikona zakładki
Każda profesjonalna strona potrzebuje ikony zakładki:
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>Dobre praktyki organizacji CSS
Organizuj swój CSS w logiczne sekcje - jak skryba organizuje hieroglify w kolumny:
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. Jak mawiał Mohamed: "Dobrze zorganizowany kod to jak dobrze zarządzana budowa piramidy - każdy blok ma swoje miejsce!"