Szkolenie prowadzi przez stworzenie dużej części aplikacji webowej po stronie frontendu. Zaczniesz od uruchomienia szablonu, pracy w Visual Studio Code oraz korzystania z GIT i GitHuba. Nauczysz się publikować aplikację w Internecie i włączyć automatyczne wdrażanie zmian. Przygotujesz grafiki webp, transparentne logo, wykorzystasz AI i ChatGPT, dodasz linki, Mapy Google i wersję mobilną. Projekt będzie gotowy na integrację z API.

Od szablonu do aplikacji w React

Zaczynasz od pracy z gotowym, statycznym szablonem z ThemeForest uruchomionym lokalnie na Twoim komputerze. Krok po kroku porządkujesz pliki, poznajesz strukturę projektu i przygotowujesz go do dalszych działań. Wykorzystasz możliwości języka JavaScript oraz frameworka React, by ożywić elementy interfejsu i nadać im logikę. Nauczysz się wstawiać odnośniki do zewnętrznych zasobów, takich jak social media, poczta czy platformy sprzedażowe. Dzięki temu szablon staje się funkcjonalną częścią frontendu gotową do rozwoju.

Narzędzia: VS Code, GIT i GitHub

Na etapie pracy nad kodem korzystasz z edytora Visual Studio Code. Uczysz się wygodnie edytować pliki, wyszukiwać fragmenty i poruszać się po projekcie. Wprowadzone zmiany zapisujesz w systemie kontroli wersji GIT, dzięki czemu łatwo śledzisz postęp prac. Dowiesz się, jak połączyć repozytorium lokalne ze zdalnym i opublikować projekt na GitHubie. Od tej chwili masz stabilne miejsce do przechowywania kodu oraz bazę do dalszych kroków, takich jak publikacja w Internecie.

Publikacja i automatyczne wdrażanie

Finalnym krokiem jest udostępnienie aplikacji w Internecie. Zobaczysz, jak przejść od repozytorium do działającej strony dostępnej publicznie. Kluczowym elementem będzie konfiguracja procesu, który po każdej zmianie w kodzie automatycznie aktualizuje aplikację online. Dzięki temu nie musisz ręcznie przenosić plików ani wykonywać dodatkowych czynności po każdej poprawce. Twoja praca w projekcie zostaje szybko odzwierciedlona w opublikowanej aplikacji.

Grafika, logo i zasoby zewnętrzne

W trakcie kursu przygotujesz materiały graficzne tak, aby były lekkie i wyglądały dobrze w sieci. Nauczysz się zapisywać obrazy w formacie webp oraz tworzyć transparentne logo, które sprawdzi się w różnych miejscach interfejsu. Poznasz także tworzenie grafik z użyciem sztucznej inteligencji, co ułatwi szybkie pozyskanie ilustracji do projektu. Następnie dodasz odnośniki do zewnętrznych zasobów: profili w social mediach, poczty, platform sprzedażowych i sklepów internetowych, aby użytkownicy mogli łatwo przejść dalej.

Responsywność, Mapy Google i przygotowanie pod API

Gotowa strona zostaje dostosowana do urządzeń mobilnych, tak aby wygodnie działała na małych ekranach. Dodasz lokalizację w Mapach Google, co pozwala umieścić na stronie punkt kontaktowy lub adres firmy. Wykorzystasz możliwości JavaScriptu i Reacta, by całość była elastyczna i przygotowana na dalszą rozbudowę. Efektem pracy jest spójna, działająca część frontendowa aplikacji, w pełni gotowa do integracji z API, dzięki czemu możesz w kolejnym kroku podłączyć dane i funkcje po stronie serwera.