Szkolenie Tworzenie stron WWW. Twój pierwszy krok do IT to praktyczne wprowadzenie do budowy interfejsów z użyciem HTML i CSS. Zaczynamy od podstaw: struktury dokumentu, nagłówków, akapitów, list, tabel, odnośników oraz dodawania obrazów i audio. Następnie przechodzimy do CSS: łączenia stylów z HTML, selektorów, reguł i pozycjonowania. Poznasz Flex, Grid oraz zasady responsywności. W wersji 2025 znajdziesz projekt oparty na Bootstrap, a finał to Git, GitHub i wdrożenie na Netify.

Podstawy HTML od pierwszego pliku

Na starcie skupiamy się na HTML, bo to fundament każdej strony. Poznasz strukturę pliku i nauczysz się świadomie układać treści. Przećwiczymy nagłówki i akapity, aby sensownie porządkować informacje. Zobaczysz, jak tworzyć listy i tabele, gdy chcesz zaprezentować dane w klarownej formie. Dodasz odnośniki prowadzące do innych miejsc oraz obrazy, które wzbogacają wizualnie widok. Dołączysz też pliki audio. Całość uzupełnimy znacznikami strukturalnymi, które pomagają nadać przejrzysty układ interfejsowi. Dzięki temu łatwiej przejdziesz do stylowania.

Stylowanie i selektory w CSS

Po opanowaniu podstaw HTML czas na CSS. Zaczniesz od połączenia arkusza stylów z dokumentem, aby oddzielić wygląd od treści. Omówimy selektory, dzięki którym precyzyjnie wybierzesz elementy do ostylowania. Następnie zapiszesz spójne reguły budujące jednolity wygląd strony. Zobaczysz, jak drobne zmiany potrafią odmienić odbiór interfejsu i jak trzymać porządek w stylach. Ten etap przygotuje Cię do pracy z układami i przełoży wcześniej poznane znaczniki na estetyczny, czytelny widok.

Układy z Flex i Grid oraz responsywność

Poznasz właściwość position i jej praktyczne zastosowania przy rozmieszczaniu elementów. Następnie przejdziesz do nowoczesnych metod budowy układu: Flex i Grid. Dzięki nim wygodnie ustawisz bloki, kolumny i wiersze, tak aby tworzyły czytelną strukturę. Wpleciemy zasady responsywności, aby strona dobrze wyglądała na różnych szerokościach. Ćwiczenia pokażą, jak łączyć te techniki w spójną całość i płynnie przechodzić między rozwiązaniami, gdy wymagają tego widoki. Zobaczysz, że układ da się kontrolować bez chaosu.

Projekt w Bootstrap i klon strony Google

Wersja 2025 zawiera projekt responsywnej strony oparty na bibliotece Bootstrap. Dzięki temu zobaczysz, jak wykorzystać gotowe komponenty i siatkę do szybkiego budowania layoutu. Zrealizujemy także przykład klona strony wyszukiwarki Google, aby przełożyć teorię na praktykę. Te zadania pokazują, że kodowanie widoków nie jest trudne, a omawiane wcześniej tematy łączą się naturalnie. Krok po kroku powstaje kompletna strona, a kolejne elementy składają się w spójną całość.

Git, GitHub i wdrożenie na Netify

Na końcu przejdziesz przez prosty proces utrwalenia zmian w systemie kontroli wersji GIT. Zobaczysz, jak wykonać commit i wysłać kod do zdalnego repozytorium na GitHub, aby bezpiecznie go przechowywać. Następnie opublikujesz stronę na Netify, dzięki czemu efekt pracy będzie dostępny online. To domknięcie drogi od napisania kodu, przez kontrolę wersji i repozytorium, aż po działającą stronę widoczną publicznie.