KURS HTML5, CSS3 I NOWOCZESNY JAVASCRIPT (ES6)
Intensywny, 24-godzinny kurs tworzenia nowoczesnych stron i aplikacji internetowych. Uczestnicy poznają aktualne standardy HTML5, stylowanie interfejsów w CSS3 oraz praktyczne zastosowanie JavaScript i ES6. Szkolenie łączy teorię z warsztatami, dzięki czemu każdy moduł kończy się praktycznym projektem lub ćwiczeniami.
Kurs przygotowuje do samodzielnego tworzenia semantycznych stron, interaktywnych komponentów oraz prostych aplikacji webowych działających również w trybie offline.
Moduł 4 — CSS3 w praktyce (4 godz.)
1. Selektory, pseudoklasy i pseudoelementy
- Podstawowe selektory:
div, p, #id, .klasa. - Pseudoklasy:
:hover, :focus, :nth-child(n). - Pseudoelementy:
::before, ::after.
2. Nowe właściwości CSS3 i efekty wizualne
- Zaokrąglone rogi, cienie, gradienty i przejścia.
3. Fonty zewnętrzne (@font-face)
- Dodawanie własnych fontów do strony bez instalacji na komputerze użytkownika.
4. Animacje i transformacje
- Animacje klatkowe (
@keyframes), transformacje 2D/3D (rotate,scale,translate).
Moduł 4 — CSS3 w praktyce (4 godz.)
W tym module uczestnicy poznają nowoczesne techniki stylizacji stron internetowych za pomocą CSS3, w tym selektory, pseudoklasy, efekty wizualne oraz animacje.
1. Selektory, pseudoklasy i pseudoelementy
Poniżej znajduje się **pełny przykład HTML i CSS** pokazujący selektory, pseudoklasy (:hover) oraz pseudoelementy (::before i ::after). Kod jest widoczny i gotowy do skopiowania przez uczniów.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Selektory, pseudoklasy i pseudoelementy</title>
<style>
/* Pseudoklasa */
button:hover {
background-color: teal;
color: white;
cursor: pointer;
}
/* Pseudoelementy */
p::before {
content: "👉 ";
}
p::after {
content: " ✅";
}
/* Dodatkowe style */
body {
font-family: Arial, sans-serif;
padding: 20px;
line-height: 1.8;
background-color: #f8fafc;
}
button {
padding: 10px 20px;
margin-top: 10px;
border: 2px solid teal;
background-color: white;
color: teal;
border-radius: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>🌐 Moja Strona</h1>
<p>To jest paragraf pokazujący pseudoelementy.</p>
<button>Kliknij mnie!</button>
</body>
</html>
Uczniowie mogą teraz skopiować cały kod i otworzyć go jako plik `.html` w przeglądarce, żeby testować pseudoklasy i pseudoelementy samodzielnie.
2. Nowe właściwości CSS3 i efekty wizualne
CSS3 wprowadza nowe możliwości wizualne, takie jak zaokrąglone rogi, cienie, gradienty oraz płynne przejścia między stylami.
.box {
width: 150px;
height: 150px;
background: linear-gradient(to right, #0ea5a3, #fef3c7);
border-radius: 12px;
box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
transition: transform 0.3s;
}
.box:hover {
transform: scale(1.1);
}
3. Fonty zewnętrzne (@font-face)
Dzięki @font-face można używać własnych fontów bez konieczności ich instalacji na komputerze użytkownika.
@font-face {
font-family: "MojaCzcionka";
src: url("fonts/MojaCzcionka.woff2") format("woff2"),
url("fonts/MojaCzcionka.woff") format("woff");
}
h1 {
font-family: "MojaCzcionka", sans-serif;
}
4. Animacje i transformacje
Animacje CSS i transformacje pozwalają tworzyć dynamiczne efekty ruchu i zmian wyglądu elementów bez użycia JavaScript. Poniżej znajduje się pełny dokument HTML, który uczniowie mogą skopiować i uruchomić w przeglądarce, aby zobaczyć działającą animację.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Animacje i transformacje</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8fafc;
padding: 20px;
line-height: 1.8;
}
h1 {
color: #0ea5a3;
}
/* Kwadrat z animacją przesuwania w poziomie */
.boxAnim {
width: 100px;
height: 100px;
background-color: #0ea5a3;
animation: przesun 3s infinite alternate;
}
/* Definicja animacji */
@keyframes przesun {
from { transform: translateX(0); }
to { transform: translateX(200px); }
}
</style>
</head>
<body>
<h1>Przykład animacji CSS</h1>
<p>Kwadrat przesuwa się w poziomie dzięki animacji i transformacji.</p>
<div class="boxAnim"></div>
</body>
</html>
Po ukończeniu tego ćwiczenia uczniowie będą mogli:
- rozumieć podstawy animacji CSS,
- stosować transformacje,
- tworzyć proste dynamiczne efekty wizualne bez użycia JavaScript.
Po ukończeniu modułu uczestnicy będą potrafili korzystać z selektorów, pseudoklas i pseudoelementów, stosować nowe właściwości CSS3, dodawać fonty zewnętrzne oraz tworzyć animacje i transformacje elementów.