Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Frontend basics dla Python devs
Witaj w Module 5, @name! Darwin tutaj z nowym rozdziałem - Web Development!
Do tej pory pracowałeś/aś wyłącznie z backendem - Python, bazy danych, API. Teraz czas poznać frontend - interfejs użytkownika, który widzą odwiedzający Twoją stronę! 🌐🎨
Analogia Safari: Backend to jak laboratorium badawcze za kulisami - Python, bazy danych, logika. Frontend to centrum informacyjne dla turystów - kolorowe tablice, interaktywne mapy, przyciski "Zobacz więcej o lwach"! 📊🖼️
Po co Python dev potrzebuje frontend?
Jako programista Pythona będziesz budować aplikacje webowe - potrzebujesz więc podstaw frontendu!
Frontend = HTML + CSS + JavaScript
- HTML - struktura (co jest na stronie)
- CSS - wygląd (jak to wygląda)
- JavaScript - interakcja (co się dzieje po kliknięciu)
Analogia: HTML to szkielet dinozaura, CSS to skóra i kolory, JavaScript to mięśnie pozwalające się poruszać! 🦴🎨💪
HTML - struktura strony
HTML (HyperText Markup Language) to język znaczników definiujący strukturę strony.
Podstawowa struktura
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>Safari Database</title>
7</head>
8<body>
9 <h1>Witaj w Safari Database</h1>
10 <p>System zarządzania danymi o gatunkach</p>
11</body>
12</html>Struktura:
- deklaracja typu dokumentu<!DOCTYPE html>
- root element<html>
- metadane (tytuł, charset, style)<head>
- treść widoczna na stronie<body>
Ważne tagi HTML
1<!-- Nagłówki (h1 najważniejszy, h6 najmniej) -->
2<h1>Safari Database</h1>
3<h2>Gatunki Afryki</h2>
4<h3>Lew (Panthera leo)</h3>
5
6<!-- Paragraf -->
7<p>Lew to największy drapieżnik Afryki...</p>
8
9<!-- Link -->
10<a href="/species/lion">Zobacz szczegóły lwa</a>
11
12<!-- Obrazek -->
13<img src="/static/images/lion.jpg" alt="Lew w Serengeti">
14
15<!-- Lista nieuporządkowana -->
16<ul>
17 <li>Lew</li>
18 <li>Słoń</li>
19 <li>Gepard</li>
20</ul>
21
22<!-- Lista uporządkowana -->
23<ol>
24 <li>Pobierz dane</li>
25 <li>Przetwórz</li>
26 <li>Wyświetl</li>
27</ol>
28
29<!-- Przycisk -->
30<button>Dodaj obserwację</button>
31
32<!-- Formularz -->
33<form action="/add-species" method="POST">
34 <label for="name">Nazwa:</label>
35 <input type="text" id="name" name="name" required>
36
37 <label for="population">Populacja:</label>
38 <input type="number" id="population" name="population">
39
40 <button type="submit">Zapisz</button>
41</form>
42
43<!-- Tabela -->
44<table>
45 <thead>
46 <tr>
47 <th>Gatunek</th>
48 <th>Populacja</th>
49 <th>Siedlisko</th>
50 </tr>
51 </thead>
52 <tbody>
53 <tr>
54 <td>Lew</td>
55 <td>120</td>
56 <td>Sawanna</td>
57 </tr>
58 <tr>
59 <td>Słoń</td>
60 <td>450</td>
61 <td>Sawanna</td>
62 </tr>
63 </tbody>
64</table>
65
66<!-- Div - kontener blokowy -->
67<div class="species-card">
68 <h3>Lew</h3>
69 <p>Populacja: 120</p>
70</div>
71
72<!-- Span - kontener inline -->
73<p>Status: <span class="endangered">Zagrożony</span></p>Atrybuty HTML
1<!-- class - klasa CSS -->
2<div class="species-card endangered">...</div>
3
4<!-- id - unikalny identyfikator -->
5<div id="lion-details">...</div>
6
7<!-- data-* - własne atrybuty danych -->
8<div class="species" data-id="123" data-population="120">...</div>
9
10<!-- href - link -->
11<a href="https://example.com">Link</a>
12
13<!-- src, alt - obrazki -->
14<img src="image.jpg" alt="Opis obrazka">
15
16<!-- placeholder, required - formularze -->
17<input type="text" placeholder="Wpisz nazwę" required>CSS - stylowanie strony
CSS (Cascading Style Sheets) definiuje wygląd elementów HTML.
Sposoby dodawania CSS
1<!-- 1. Inline CSS (niezalecane) -->
2<p style="color: green; font-size: 18px;">Tekst</p>
3
4<!-- 2. Internal CSS (w <head>) -->
5<head>
6 <style>
7 p {
8 color: green;
9 font-size: 18px;
10 }
11 </style>
12</head>
13
14<!-- 3. External CSS (zalecane) -->
15<head>
16 <link rel="stylesheet" href="/static/css/style.css">
17</head>Selektory CSS
1/* Tag selector */
2p {
3 color: #333;
4 line-height: 1.6;
5}
6
7/* Class selector */
8.species-card {
9 border: 2px solid #ddd;
10 padding: 20px;
11 margin: 10px;
12 border-radius: 8px;
13}
14
15/* ID selector */
16#lion-details {
17 background-color: #f9f9f9;
18}
19
20/* Attribute selector */
21[data-endangered="true"] {
22 border-color: red;
23}
24
25/* Child selector */
26.species-card > h3 {
27 color: #2c5f2d;
28}
29
30/* Hover state */
31button:hover {
32 background-color: #45a049;
33 cursor: pointer;
34}Podstawowe właściwości CSS
1/* Kolory */
2.endangered {
3 color: red;
4 background-color: #ffe6e6;
5}
6
7/* Typografia */
8h1 {
9 font-family: 'Arial', sans-serif;
10 font-size: 32px;
11 font-weight: bold;
12 text-align: center;
13}
14
15/* Box model */
16.species-card {
17 width: 300px;
18 height: 200px;
19 padding: 20px; /* Wewnętrzny odstęp */
20 margin: 10px; /* Zewnętrzny odstęp */
21 border: 2px solid #ddd;
22}
23
24/* Flexbox - layout */
25.species-list {
26 display: flex;
27 flex-wrap: wrap;
28 gap: 20px;
29 justify-content: center;
30}
31
32/* Grid - layout */
33.species-grid {
34 display: grid;
35 grid-template-columns: repeat(3, 1fr);
36 gap: 20px;
37}Safari przykład - stylowanie karty gatunku
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <title>Safari Database</title>
6 <style>
7 body {
8 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9 background-color: #f4f1de;
10 margin: 0;
11 padding: 20px;
12 }
13
14 h1 {
15 text-align: center;
16 color: #2c5f2d;
17 }
18
19 .species-list {
20 display: flex;
21 flex-wrap: wrap;
22 gap: 20px;
23 justify-content: center;
24 max-width: 1200px;
25 margin: 0 auto;
26 }
27
28 .species-card {
29 background-color: white;
30 border: 2px solid #e0afa0;
31 border-radius: 12px;
32 padding: 20px;
33 width: 280px;
34 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
35 transition: transform 0.2s;
36 }
37
38 .species-card:hover {
39 transform: translateY(-5px);
40 box-shadow: 0 6px 12px rgba(0,0,0,0.15);
41 }
42
43 .species-card.endangered {
44 border-color: #d62828;
45 border-width: 3px;
46 }
47
48 .species-name {
49 color: #2c5f2d;
50 font-size: 24px;
51 margin-top: 0;
52 }
53
54 .badge {
55 display: inline-block;
56 padding: 4px 8px;
57 border-radius: 4px;
58 font-size: 12px;
59 font-weight: bold;
60 }
61
62 .badge-endangered {
63 background-color: #d62828;
64 color: white;
65 }
66
67 .badge-safe {
68 background-color: #4caf50;
69 color: white;
70 }
71 </style>
72</head>
73<body>
74 <h1>🦁 Safari Database 🐘</h1>
75
76 <div class="species-list">
77 <div class="species-card endangered">
78 <h3 class="species-name">Lew</h3>
79 <p><strong>Populacja:</strong> 120 osobników</p>
80 <p><strong>Siedlisko:</strong> Sawanna</p>
81 <span class="badge badge-endangered">Zagrożony</span>
82 </div>
83
84 <div class="species-card endangered">
85 <h3 class="species-name">Słoń afrykański</h3>
86 <p><strong>Populacja:</strong> 450 osobników</p>
87 <p><strong>Siedlisko:</strong> Sawanna</p>
88 <span class="badge badge-endangered">Zagrożony</span>
89 </div>
90
91 <div class="species-card">
92 <h3 class="species-name">Żyrafa</h3>
93 <p><strong>Populacja:</strong> 850 osobników</p>
94 <p><strong>Siedlisko:</strong> Sawanna</p>
95 <span class="badge badge-safe">Bezpieczny</span>
96 </div>
97 </div>
98</body>
99</html>JavaScript - interaktywność
JavaScript dodaje interakcję - reakcje na kliknięcia, animacje, dynamiczne zmiany.
Podstawy JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Safari JS</title>
5</head>
6<body>
7 <h1 id="title">Safari Database</h1>
8 <button onclick="changeName()">Zmień tytuł</button>
9 <button id="addBtn">Dodaj gatunek</button>
10
11 <div id="species-count">Gatunków: 0</div>
12
13 <script>
14 // Zmienne
15 let speciesCount = 3;
16 const databaseName = "Safari DB";
17
18 // Funkcja
19 function changeName() {
20 document.getElementById("title").textContent = "🦁 Nowy tytuł!";
21 }
22
23 // Event listener (lepszy sposób niż onclick)
24 document.getElementById("addBtn").addEventListener("click", function() {
25 speciesCount++;
26 document.getElementById("species-count").textContent = `Gatunków: ${speciesCount}`;
27 });
28
29 // Console log
30 console.log("Strona załadowana!");
31
32 // Fetch data z API
33 fetch("/api/species")
34 .then(response => response.json())
35 .then(data => {
36 console.log("Pobrano dane:", data);
37 })
38 .catch(error => console.error("Błąd:", error));
39 </script>
40</body>
41</html>Manipulacja DOM
1// Pobierz element
2const title = document.getElementById("title");
3const cards = document.querySelectorAll(".species-card");
4const firstCard = document.querySelector(".species-card");
5
6// Zmień treść
7title.textContent = "Nowy tytuł";
8title.innerHTML = "<strong>Pogrubiony tytuł</strong>";
9
10// Zmień style
11title.style.color = "red";
12title.style.fontSize = "32px";
13
14// Dodaj/usuń klasy
15title.classList.add("highlight");
16title.classList.remove("old-class");
17title.classList.toggle("active");
18
19// Utwórz nowy element
20const newCard = document.createElement("div");
21newCard.className = "species-card";
22newCard.innerHTML = \`
23 <h3>Gepard</h3>
24 <p>Populacja: 7100</p>
25\`;
26
27// Dodaj do strony
28document.querySelector(".species-list").appendChild(newCard);
29
30// Usuń element
31const cardToRemove = document.querySelector(".species-card");
32cardToRemove.remove();Safari przykład - interaktywna lista
1<!DOCTYPE html>
2<html lang="pl">
3<head>
4 <meta charset="UTF-8">
5 <title>Interactive Safari</title>
6 <style>
7 body {
8 font-family: Arial, sans-serif;
9 max-width: 800px;
10 margin: 0 auto;
11 padding: 20px;
12 background-color: #f4f1de;
13 }
14
15 .add-form {
16 background: white;
17 padding: 20px;
18 border-radius: 8px;
19 margin-bottom: 20px;
20 }
21
22 input, button {
23 padding: 10px;
24 margin: 5px;
25 border-radius: 4px;
26 border: 1px solid #ddd;
27 }
28
29 button {
30 background-color: #2c5f2d;
31 color: white;
32 cursor: pointer;
33 border: none;
34 }
35
36 button:hover {
37 background-color: #45a049;
38 }
39
40 .species-card {
41 background: white;
42 padding: 15px;
43 margin: 10px 0;
44 border-radius: 8px;
45 border-left: 4px solid #2c5f2d;
46 display: flex;
47 justify-content: space-between;
48 align-items: center;
49 }
50
51 .delete-btn {
52 background-color: #d62828;
53 padding: 8px 12px;
54 font-size: 14px;
55 }
56
57 .delete-btn:hover {
58 background-color: #9d0208;
59 }
60 </style>
61</head>
62<body>
63 <h1>🦁 Safari Database - Interaktywna Lista</h1>
64
65 <div class="add-form">
66 <h3>Dodaj nowy gatunek</h3>
67 <input type="text" id="speciesName" placeholder="Nazwa gatunku">
68 <input type="number" id="speciesPopulation" placeholder="Populacja">
69 <button id="addBtn">Dodaj</button>
70 </div>
71
72 <div id="speciesList"></div>
73
74 <p><strong>Łącznie gatunków:</strong> <span id="totalCount">0</span></p>
75
76 <script>
77 // Stan aplikacji
78 let species = [
79 { id: 1, name: "Lew", population: 120 },
80 { id: 2, name: "Słoń", population: 450 },
81 { id: 3, name: "Gepard", population: 7100 }
82 ];
83 let nextId = 4;
84
85 // Renderuj listę
86 function renderSpecies() {
87 const listElement = document.getElementById("speciesList");
88 listElement.innerHTML = "";
89
90 species.forEach(spec => {
91 const card = document.createElement("div");
92 card.className = "species-card";
93 card.innerHTML = `94 <div>
95 <strong>${spec.name}</strong> - Populacja: ${spec.population} osobników
96 </div>
97 <button class="delete-btn" onclick="deleteSpecies(${spec.id})">Usuń</button>
98`;
99 listElement.appendChild(card);
100 });
101
102 // Aktualizuj licznik
103 document.getElementById("totalCount").textContent = species.length;
104 }
105
106 // Dodaj gatunek
107 document.getElementById("addBtn").addEventListener("click", function() {
108 const nameInput = document.getElementById("speciesName");
109 const popInput = document.getElementById("speciesPopulation");
110
111 const name = nameInput.value.trim();
112 const population = parseInt(popInput.value);
113
114 if (name && population) {
115 species.push({
116 id: nextId++,
117 name: name,
118 population: population
119 });
120
121 // Wyczyść formularz
122 nameInput.value = "";
123 popInput.value = "";
124
125 // Przerenderuj
126 renderSpecies();
127 } else {
128 alert("Wypełnij wszystkie pola!");
129 }
130 });
131
132 // Usuń gatunek
133 function deleteSpecies(id) {
134 if (confirm("Czy na pewno chcesz usunąć ten gatunek?")) {
135 species = species.filter(s => s.id !== id);
136 renderSpecies();
137 }
138 }
139
140 // Początkowe renderowanie
141 renderSpecies();
142 </script>
143</body>
144</html>Jak to wszystko działa razem?
HTML → Struktura ("co") CSS → Wygląd ("jak wygląda") JavaScript → Interakcja ("co się dzieje")
1<!-- HTML - struktura -->
2<button id="likeBtn" class="btn">Lubię to!</button>
3
4<!-- CSS - wygląd -->
5<style>
6 .btn {
7 background-color: #4CAF50;
8 color: white;
9 padding: 15px 32px;
10 border: none;
11 border-radius: 4px;
12 cursor: pointer;
13 }
14 .btn.liked {
15 background-color: #f44336;
16 }
17</style>
18
19<!-- JavaScript - interakcja -->
20<script>
21 document.getElementById("likeBtn").addEventListener("click", function() {
22 this.classList.toggle("liked");
23 this.textContent = this.classList.contains("liked")
24 ? "Nie lubię :("
25 : "Lubię to!";
26 });
27</script>Python devs - co musisz wiedzieć?
Minimalne frontend dla Flask:
- HTML - podstawy (tagi, formularze, tabele)
- CSS - podstawy (selektory, box model, flexbox)
- JavaScript - podstawy (DOM, event listeners, fetch)
Nie musisz być ekspertem frontend - Flask z Jinja2 generuje HTML za Ciebie!
Co będziesz robić w Flask:
- Tworzenie templates (HTML z Jinja2)
- Podstawowe CSS dla stylu
- Minimalne JS dla formularzy/walidacji
Frameworki CSS (gotowe style) pomogą Ci szybko stworzyć ładne interfejsy:
- Bootstrap - najpopularniejszy
- Tailwind CSS - utility-first
- Bulma - prosty i lekki
Podsumowanie
W tej lekcji nauczyłeś/aś się:
- ✅ Po co Python dev potrzebuje frontendu
- ✅ HTML - struktura (tagi, atrybuty, formularze)
- ✅ CSS - stylowanie (selektory, kolory, layout)
- ✅ JavaScript - interakcja (DOM, event listeners)
- ✅ Jak HTML, CSS i JS działają razem
- ✅ Praktyczne przykłady Safari
Analogia Safari finalna: Frontend to centrum informacyjne parku - kolorowe tablice (CSS), mapy tras (HTML), interaktywne przyciski "Zobacz więcej" (JavaScript). Backend to laboratorium za kulisami (Python + bazy danych)! 🏛️🔬
W następnej lekcji Darwin pokaże Ci Flask - mikroframework do budowania aplikacji webowych w Pythonie! 🐍🌐