Przejdź do treści
strefakursów

Warsztaty tworzenia stron internetowych

Zbuduj aż trzy kompletne strony na podstawie projektu graficznego

5,0 119 opinii Autor: Ksawery Kargól
97 lekcji 16 pytań testowych Poziom: Średniozaawansowany Język: polski Certyfikat
119 zł

Oferta specjalna

Kup ten kurs za 65 zł z kodem

00 dni
00 godz.
00 min.
00 sek.

Minimalna wartość w koszyku, aby aktywować kod: 199 zł.

Dostęp od razu po zakupie

Płacisz raz i wchodzisz prosto do lekcji - bez subskrypcji, bez czekania na grupę.

Dodaj do listy życzeń

Ten kurs jest częścią ścieżki

Web Designer

Szczegóły, które warto znać

11 godzin materiałów
Bezterminowy dostęp
Imienny certyfikat PDF
97 lekcji wideo
Poziom: Średniozaawansowany
Testy i zadania
16 pytań testowych
Rekomendacje na LinkedIn
Napisy dostępne w językach: polski, angielski, ukraiński
Dostęp w aplikacji mobilnej

Opis szkolenia

Czego się nauczysz?

  • kodowania strony na podstawie projektów

  • wielu przydatnych sztuczek przydanych w pracy CSS i HTML

  • modułowego podejścia do tworzenia stylów

  • praktycznego użycia narzędzi Sass, Gulp oraz NPM

  • technik tworzenia oraz użycia komponentów

  • tworzenia layoutów z użyciem flexbox

  • licznych technik optymalizujących pracę

  • metodologii BEM

Dowiedz się jak stworzyć aż trzy kompletne strony z użyciem HTML oraz CSS. Wykorzystaj swoje dotychczasowe umiejętności i zobacz jak w praktyce na podstawie projektu wizualnego zbudować strukturę oraz style strony.

Naucz się wielu nowych technik, które są na szeroką skalę używane przez współczesnych front-end deweloperów. Zdobądź umiejętności, które możesz wykorzystać podczas tworzenia dowolnych projektów zarówno na własne potrzeby jak i dla klientów.

Kompletna struktura HTML oraz CSS

Autor kursu pokaże Ci jak od podstaw zbudować kompletną strukturę oraz style. Nie będziemy używali żadnych bibliotek co w praktyce zapewni Ci pełną kontrolę nad kodem strony oraz jednocześnie będzie świetną okazją aby zrozumieć zawiłości oraz mechanizmy używane podczas tworzenia nowoczesnych witryn.

Trzy wszechstronne projekty

Z kursem stworzysz aż trzy różne witryny: front sklepu oraz dwie różne wizytówki firmowe. Każdy z tych projektów będzie okazją do opanowania nowych, niezwykle przydatnych umiejętności. Jednocześnie każdy z nich będziesz mógł dowolnie rozwijać, modyfikować oraz wdrażać jako front dla dowolnego zaplecza.

Modułowa struktura

Podczas tworzenia stron duży nacisk położymy na modułową strukturę, która bardzo ułatwi ich rozbudowę. Dowiesz się m.in jak wydzielić komponenty, które potem można wielokrotnie wykorzystać. Zobaczysz także jak zorganizować style z użyciem warstw, dzięki którym łatwiej będzie Ci zapanować nad kodem.

W każdym projekcie niezwykle ważne jest odpowiednie podejścia do nazywania oraz organizowania elementów. W kursie poznasz bardzo popularną metodologię BEM, które jest odpowiedzią na te właśnie wyzwania.

Nowoczesny layout z użyciem flexbox

Strony, które stworzysz są w pełni responsywne a ich układ bazuje na siatce kolumn. Stworzymy to wszystko z użyciem nowoczesnych technik flexbox, które mają bezdyskusyjną przewagę nad tradycyjnymi layoutami. Co ważne całą siatkę kolumn zbudujesz od podstaw z użyciem minimalnej ilości kodu nie używając do tego żadnych bibliotek ani frameworków.

Nowoczesny workflow

Z kursem opanujesz zestaw narzędzi, których znajomość jest niezbędna każdemu współczesnemu front-end developerowi. Dowiesz się m.in jak pisać style z użyciem SASS, jak budować pliki wyjściowe za pomocą Gulp oraz jak zarządzać zależnościami za pomocą NPM.

Kup w pakiecie i oszczędź

Warsztaty tworzenia stron internetowych

Warsztaty tworzenia stron internetowych

5.0 (119)

119 zł

Jak przyspieszać i optymalizować strony

Jak przyspieszać i optymalizować strony

4.9 (133)

119 zł

Cena za zakup pakietu

190 zł 238 zł −20%

Oszczędzasz w pakiecie: 48 zł

Zyskujesz 19.04 zł w punktach na kolejne zakupy.

Kup w pakiecie

Program kursu

11 modułów · 97 lekcji

1 · Wprowadzenie
  • Wstęp 00m 31s
  • Jak używać plików 00m 48s
  • Co powinieneś umieć 03m 04s
  • Wspólne założenia 03m 30s
  • Podstawowe narzędzia 05m 19s
2 · Projekt Klinika - część 1
  • Wstępne omówienie projektu 07m 00s
  • Zacznijmy od SASS 04m 43s
  • Gulp oraz Gulpfile 06m 19s
  • Zadania gulp oraz kompilacja stylów 07m 52s
  • Warstwowa struktura stylów 07m 41s
  • Jakich warstw użyjemy 08m 40s
3 · Style w globalnych warstwach
  • Podstawowe zmienne 08m 36s
  • Jakie zmienne są jeszcze potrzebne 11m 22s
  • Przydatne mixins 07m 40s
  • Warstwa Generic 04m 41s
  • Elementy - body 05m 37s
  • Elementy - tekst 05m 53s
  • Elementy - pozostałe 06m 40s
4 · Layout - obiekty
  • Koncepcja layout 07m 01s
  • Stwórzmy kontener 06m 40s
  • Koncepcja wiersza - row 05m 38s
  • Stwórzmy wiersz 06m 37s
  • Kolumny - zasada działania 10m 12s
  • Kolumny dla IE10 oraz IE11 04m 24s
  • Uzupełnijmy pozostałe kolumny 06m 36s
5 · Warstwa komponentów
  • Jak tworzymy komponenty - BEM 09m 15s
  • Komponent przycisk - wstępne style 06m 36s
  • Komponent przycisk - warianty 09m 51s
  • Komponent nagłówka 07m 42s
  • Pozostałe warianty nagłówka 04m 31s
  • Komponent nawigacyjny 07m 14s
  • Komponent icon box 09m 37s
  • Komponent etykieta 02m 36s
  • Komponent listy 04m 11s
6 · Warstwa Utilities
  • Co przynależy do warstwy 03m 57s
  • Przykładowe utilities 07m 21s
7 · Templates - główna zawartość
  • Klinika - header cz.1 07m 20s
  • Klinika - header cz.2 08m 01s
  • Klinika - header cz.3 09m 40s
  • Ostatnie elementy header 04m 56s
  • O firmie - nowy template 06m 45s
  • O firmie - niezbędne style 07m 20s
  • Sekcja zalety firmy 06m 55s
  • Lista wpisów - html 05m 54s
  • Lista wpisów - style 08m 26s
  • Dekoracja na liście wpisów 06m 49s
  • Lokalizator - wstępna praca 06m 16s
  • Lokalizator - kontynuacja 09m 54s
  • Klinika - zawartość stopki 08m 41s
  • Klinika - style stopki 12m 38s
8 · Projekt Sklep - wprowadzenie
  • Szybkie omówienie projektu 02m 34s
  • Jak wykorzystamy istniejący kod 03m 19s
  • Nowe wartości zmiennych 06m 49s
  • Sklep - właściwości elementów 03m 58s
  • Przyciski dla sklepu - podstawy 04m 45s
  • Przyciski dla sklepu - pozostałe 08m 36s
  • Heading dla sklepu 03m 27s
  • Komponent input 09m 04s
  • Komponent nav w sklepie 04m 17s
  • Komponent icon-box w sklepie 04m 09s
  • Paginacja - style 04m 02s
  • Selektor produktów 04m 58s
  • Karta produktu - etap 1 09m 39s
  • Karta produktu - etap 2 09m 49s
  • Przycisk do koszyka 08m 32s
9 · Templates dla sklepu
  • Nagłówek sklepu - góra 09m 04s
  • Hero unit dla sklepu 07m 32s
  • Pozostałe style nagłówka w sklepie 07m 12s
  • Lista produktów 09m 34s
  • Promocje - struktura 09m 16s
  • Promocje - style 07m 22s
  • Promocje - style dodatkowe 07m 24s
  • Newsletter - podstawy 07m 38s
  • Newsletter- różne style 07m 42s
  • Sklep - sekcja info 04m 31s
  • Sklep - zawartość stopki 09m 26s
  • Sklep - style stopki 06m 23s
  • Pozostałe style stopki w sklepie 07m 37s
10 · Projekt kopalnia
  • Szybki start z projektem 02m 00s
  • Wyedytujmy bazowe wartości 06m 12s
  • Style dla elementów globalnych 04m 51s
  • Przyciski w ostatnim projekcie 06m 04s
  • Heading dla ostatniego projektu 04m 02s
  • Listy oraz komponent icon-box 08m 56s
  • Input oraz nav 04m 12s
  • Ostatni projekt - site header 05m 56s
  • Ostatni projekt - hero unit 10m 28s
  • Sekcja z boxami 02m 53s
11 · Kończymy ostatni projekt
  • Oferty pracy - komponent 11m 35s
  • Oferty pracy - template 10m 57s
  • Sekcja Feature - struktura 05m 27s
  • Sekcja Feature - style 06m 25s
  • Sekcja newsletter w ostatnim projekcie 05m 40s
  • Sekcja newsletter - style ostatniego projektu 11m 40s
  • Stopka w ostatnim projekcie 07m 31s
  • Ostatnie elementy projektu 03m 08s
  • Zakończenie 00m 24s

Twój instruktor

Ksawery Kargól

Ksawery Kargól

Trener - praktyk AI

Ksawery Kargól to jeden z najbardziej rozpoznawalnych autorów technicznych na platformie Strefa Kursów. Od lat tworzy szkolenia, które pomagają uczestnikom wejść w świat nowych technologii krok po kroku, bez chaosu, zbędnego żargonu i poczucia, że „to nie dla mnie”. Jego największą siłą jest umiejętność tłumaczenia trudnych tematów prostym, uporządkowanym językiem. W swoich kursach prowadzi uczestnika od podstaw do praktycznego działania, pokazując nie tylko, co należy zrobić, ale też dlaczego dane rozwiązanie działa i jak można wykorzystać je w realnych projektach. Uczestnicy jego kursów szczególnie doceniają spokojne tempo, jasną strukturę i praktyczne podejście do nauki. To autor, który dobrze sprawdza się zwłaszcza wtedy, gdy temat wydaje się techniczny, trudny albo zarezerwowany tylko dla osób z doświadczeniem. Ksawery potrafi rozłożyć go na mniejsze kroki i przeprowadzić uczestnika przez cały proces w sposób zrozumiały i bez przytłoczenia. Jego szkolenia są dobrym wyborem zarówno dla osób początkujących, jak i tych, które chcą uporządkować swoją wiedzę, wrócić do podstaw albo pewniej korzystać z nowoczesnych narzędzi cyfrowych. Zamiast suchej teorii uczestnik otrzymuje konkretne przykłady, ćwiczenia i praktyczne rozwiązania, które pomagają szybciej przejść od oglądania lekcji do samodzielnego działania. Ksawery od lat współtworzy bibliotekę kursów Strefy Kursów, a jego materiały zebrały setki wysokich ocen od uczestników. To potwierdza, że jego największą wartością jest nie tylko znajomość technologii, ale przede wszystkim umiejętność przekładania jej na język zrozumiały dla szerokiego grona odbiorców. To dobry wybór dla osób, które chcą wejść w świat nowych technologii spokojnie, praktycznie i bez poczucia zagubienia.

Opinie kursantów

5,0 Zweryfikowana
„Kurs bardzo dobry, pokazuje jak stworzyć 3 kompletne tzw. "landing page". Autor od początku wprowadza dobre praktyki tworzenia stron internetowych w dzisiejszym świecie froment developmentu. Otrzymujemy tutaj sporą dawkę wiedzy, którą można śmiało wykorzystywać w komercyjnych projektach. Kurs nie porusza podstaw, ale nie po to on jest, jedynie mogłoby być więcej o flex-boxie, chociaż dla niektórych będą to podstawy - ja muszę sam doczytać. Polecam wszystkim, którzy chcą tworzyć przejrzystsze i lepiej napisane strony internetowe. "
Czytaj więcej
B Bartosz Jasiewicz zweryfikowany kursant
5,0 Zweryfikowana
„Kurs zrobiony bardzo profesjonalnie. Wprowadzający w techniki nowoczesnego tworzenia stron internetowych. Materiały zawarte w kursie bardzo pomogły mi w pracy, ponieważ na codzień zajmuję się back-endem jednak musiałem stworzyć parę stron internetowych wykorzystując technologie front-endowe. Dzięki lekcjom zawartych w szkoleniu nauczyłem się stawiać środowisko oraz budować aplikacje FE według najnowszych standardów. Szkolenie polecam na nowicjuszy, a także ludziom którzy chcą poznać czym jest tworzenie front-endu."
Czytaj więcej
M Maciej Płoński zweryfikowany kursant
5,0 Zweryfikowana
„Może pracy od razu po tym nie znajdziesz, ale nabyte kompetencje staną się absolutnym fundamentem Twojej kariery w IT. Jeśli nie chcesz wydawać tysięcy na kursy stacjonarne to ten kurs jest Twoim must have. To już któryś mój kurs na tej platformie i jak dotąd się nie zawiodłem. To też świetna okazja, aby zaznajomić się z narzędziami IT, o których wcześniej nie miałeś pojęcia :)"
Czytaj więcej
O Olaf Oli zweryfikowany kursant
5,0 Zweryfikowana
„Kurs bardzo ciekawy zarówno dla początkujących jak i zaawansowanych osób. Kurs jest prowadzony bardzo merytorycznie pokazując wszystko na praktycznych przykładach Gorąco polecam"
K Krzysztof Piech zweryfikowany kursant

Najczęściej zadawane pytania

Jak wygląda uczestnictwo w kursie online?

Kursy online w strefakursów.pl to kompletne pakiety materiałów wideo przygotowane przez zespół naszych specjalistów. Po zakupie otrzymujesz natychmiastowy dostęp do wszystkich lekcji, testów i materiałów dodatkowych na swoim koncie - możesz zacząć się uczyć od razu, bez czekania. Konto jest bezpłatne i możesz założyć je w dowolnym momencie lub w trakcie dokonywania pierwszego zakupu w serwisie strefakursów.pl. Materiały, do których otrzymasz dostęp, pozwolą Ci rozwinąć się zawodowo i podnieść swoje kwalifikacje. Każdy kurs przepełniony jest praktyczną wiedzą, która ułatwi Ci osiągnięcie wymarzonych życiowych celów. Zdobytą wiedzę i postępy możesz w łatwy sposób zweryfikować za pomocą licznych testów i ćwiczeń dołączonych do każdego kursu.

Czy otrzymam certyfikat ukończenia kursu?

Do każdego ukończonego przez Ciebie kursu wystawiamy imienny certyfikat w formacie PDF - będzie on dostępny na Twoim koncie w zakładce Certyfikaty. Warunkiem jego otrzymania jest zaliczenie testów dołączonych do kursu oraz obejrzenie wszystkich lekcji. Na certyfikacie znajduje się Twoje imię oraz nazwisko, nazwa ukończonego kursu, data wystawienia i unikalny numer certyfikatu. Certyfikat możesz wydrukować lub opublikować w Internecie za pośrednictwem specjalnego odnośnika np. na LinkedIn lub innych portalach społecznościowych, jak również dołączyć do swojego CV. Pamiętaj, że certyfikatów nie wysyłamy w formie papierowej.

Czy otrzymam fakturę VAT za zamówienie?

Tak, do każdego zamówienia wystawiamy fakturę VAT (23%) lub paragon - w zależności od danych podanych przy zakupie. Pobierzesz ją z zakładki Historia zamówień na swoim koncie. Powiadomimy Cię mailowo, gdy dokument będzie gotowy.
Potrzebujesz proformy? Zaznacz pole "Chcę otrzymać dokument proforma" przy składaniu zamówienia lub napisz: biuro@strefakursow.pl


Zakup w aplikacji mobilnej? Jeśli kupujesz przez App Store lub Google Play, sprzedawcą jest odpowiednio Apple lub Google. Fakturę otrzymasz od nich zgodnie z ich zasadami:



Możesz również pobrać dokument przez stronę Apple. Przejdź pod ten adres: https://reportaproblem.apple.com/, następnie zaloguj się swoim Apple ID, znajdź zakup na liście i kliknij, aby zobaczyć szczegóły i ewentualnie pobrać dokument. Apple zwykle wystawia fakturę jako dostawca usług cyfrowych. Jeśli potrzebujesz faktury VAT, możesz skontaktować się z pomocą techniczną Apple, aby uzyskać dodatkowe informacje na temat zgodności faktury z przepisami w Twoim kraju.

Zakup w Google Play(Android)

Gdy dokonujesz zakupu w aplikacji strefakursów.pl na Android za pośrednictwem Google Pay sprzedawcą jest Google. Fakturę lub dokument zakupu znajdziesz zgodnie z poniższą instrukcją:

  • Otwórz aplikację Google Play.
  • Kliknij ikonę swojego profilu w prawym górnym rogu.
  • Wybierz Płatności i subskrypcje > Historia zakupów.
  • Znajdź interesujący Cię zakup i kliknij na niego, aby zobaczyć szczegóły. Jeśli chcesz pobrać fakturę, kliknij przycisk Faktura (jeśli jest dostępny).

    • Możesz również znaleźć fakturę na stronie Google Pay. Przejdź pod ten adres: pay.google.com i zaloguj się na swoje konto Google, z którego dokonano zakupu. W sekcji Aktywność znajdziesz wszystkie transakcje dokonane w Google Play. Kliknij daną transakcję, aby zobaczyć szczegóły i pobrać fakturę.

Ile mam czasu na przerobienie materiałów?

Tyle, ile potrzebujesz! Uczysz się we własnym tempie - bez presji i bez abonamentu. Płacisz raz i zachowujesz dostęp do zakupionego kursu na swoim koncie bez z góry określonej daty końcowej. Przez pierwsze 12 miesięcy od zakupu dbamy o aktualność materiałów i zapewniamy pełną dostępność testów oraz certyfikatu. Później kurs nadal pozostaje na Twoim koncie - wracasz do lekcji, kiedy masz ochotę. Szczegółowe zasady dostępu znajdziesz w regulaminie.

Dla firm
Uczysz się do pracy? Kup ten kurs przez firmę
Dla siebie, pracownika lub zespołu – z fakturą i opcją ceny zespołowej.
Sprawdź zakup firmowy
Sprawdź zakup firmowy

Powiązane tematy

Web Designer Tworzenie stron internetowych HTML CSS JavaScript SASS

Zobacz też

Podobne kursy

Produktywne tworzenie stron z LESS & SASS

Programowanie

Produktywne tworzenie stron z LESS & SASS

4.9 (236)

119 zł

Flexbox & Grid - responsywne layouty od podstaw

Programowanie

Flexbox & Grid - responsywne layouty od podstaw

4.8 (111)

119 zł

Kurs HTML i JavaScript - praktyczne projekty

Programowanie

Kurs HTML i JavaScript - praktyczne projekty

4.8 (69)

149 zł

Fundamenty CSS - stylowanie stron od podstaw

Programowanie

Fundamenty CSS - stylowanie stron od podstaw

4.9 (121)

159 zł

Fundamenty języka HTML - kodowanie stron od podstaw

Programowanie

Fundamenty języka HTML - kodowanie stron od podstaw

4.9 (178)

159 zł

Kurs Bootstrap 4 - od podstaw

Programowanie

Kurs Bootstrap 4 - od podstaw

5.0 (193)

119 zł

Kurs Bootstrap 4 - praktyczny projekt

Programowanie

Kurs Bootstrap 4 - praktyczny projekt

4.9 (127)

119 zł

Kurs Metodologia BEM - jak pisać dobry kod CSS

Programowanie

Kurs Metodologia BEM - jak pisać dobry kod CSS

4.9 (38)

129 zł

Kurs Tworzenie stron internetowych - praktyczne projekty

Programowanie

Kurs Tworzenie stron internetowych - praktyczne projekty

4.9 (48)

159 zł

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

Programowanie

Kurs Błyskawiczne tworzenie stron z Tailwind CSS

4.8 (39)

159 zł

Ten kurs jest częścią ścieżki

4,8

Web Designer

Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony!

675 wykładów 21578 uczestników
Dowiedz się więcej

Dostęp od razu po zakupie

119 zł

Zwrot w 3 krokach

Masz 30 dni na zwrot od daty zakupu.

  1. 1

    Zleć zwrot jednym kliknięciem

    Przejdź do Historii zamówień i wybierz „Dokonaj zwrotu" przy zamówieniu, które chcesz zwrócić.

  2. 2

    Potwierdzamy zwrot

    Dostajesz potwierdzenie przyjęcia zwrotu - zwykle w 1 dzień roboczy.

  3. 3

    Pieniądze wracają

    Tą samą metodą, którą zapłacono - zwykle w 3-5 dni roboczych, maksymalnie 14 dni.

Pełne warunki znajdziesz w regulaminie zakupów.

Kod na pierwszy zakup

Odbierz 10% rabatu na pierwsze zamówienie

Dołącz do newslettera z promocjami i odbierz kod rabatowy.

Jest z nami już ponad 106 tys. subskrybentów

Podając adres e-mail zapisujesz się do newslettera i akceptujesz politykę prywatności. W każdej chwili możesz się wypisać.

Ups! Coś poszło nie tak

Zabezpieczenie antybotowe uznało, że Twoje ostatnie zgłoszenie mogło pochodzić od bota, i je zablokowało. Spróbuj ponownie. W razie problemów skontaktuj się z nami.