fbpx
Tworzenie stron internetowych w 2022 r

Naucz się od podstaw
tworzenia stron internetowych

Zrób pierwszy krok w kierunku zostania programistą frontend i opanuj wszystkie najważniejsze zagadnienia związane z HTML i CSS. Po ukończeniu tego kursu będziesz w stanie tworzyć nowoczesne, responsywne, wydajne oraz dostępne strony internetowe.

Zacznij naukę

KUP TERAZ

Wszystkie materiały wreszcie
zebrane w jednym miejscu.

Zapisz się na kompletny kurs tworzenia stron internetowych i zyskaj dożywotni dostęp do ponad 30 lekcji dotyczących najnowszych zagadnień HTML i CSS.

Zawartość tego kurs jest regularnie aktualizowana o wszelkie nowości pojawiające się w świecie frontendu, więc masz pewność, że będziesz uczył/uczyła się aktualnego materiału.

Czego nauczysz się na tym kursie?

Kurs tworzenia stron internetowych przygotuje Cię do samodzielnego tworzenia profesjonalnych stron internetowych. Przed przystąpieniem do kursu nie musisz posiadać żadnej wiedzy z zakresu programowania. Wszystkie podstawowe tematy, włącznie z instalacją wymaganych aplikacji, zostaną dokładnie omówione w kolejnych lekcjach.

Kurs ten skupia się głównie na tematach związanych z HTML i CSS – czyli najbardziej fundamentalnych zagadnieniach w świecie frontendu. Nie zabraknie jednak również tematów około deweloperskich takich jak konfiguracja środowiska pracy czy hosting i domeny www.

Po zakończeniu tego kursu będziesz miał bardzo dokładną wiedzę we wszystkich zagadnieniach związanych z tworzeniem stron internetowych i wystarczające doświadczenie, aby zacząć samodzielnie tworzyć swoje własne projekty.

Część 2

Podstawy
CSS

Druga część poświęcona będzie CSS. To tutaj nasze strony zaczną nabierać kolorów i ładnego wyglądu.
Mając już podstawową wiedzę, zaczniemy tutaj również tworzyć stronę “Portfolio”, którą to będziemy rozbudowywać przez pozostałą część kursu.

  • 6. Czym jest CSS?
    • 6.1. Składnia CSS
    • 6.2. Domyślne style oraz DevTools
  • 7. Osadzanie CSS
    • 7.1. Inline CSS
    • 7.2. Tag <style>
    • 7.3. Zewnętrzny plik
    • 7.4. Przegląd wszystkich metod osadzania
  • 8. Selektory CSS
    • 8.1. Selektory znaczników HTML
    • 8.2. Selektory klas i identyfikatorów
    • 8.3. Selektory atrybutów
    • 8.4. Selektor uniwersalny
    • 8.5. CSS Dinner
  • 9. Box model
    • 9.1. Border, padding, margin
    • 9.2. Elementy blokowe i liniowe
    • 9.3. Box sizing
    • 9.4. Box model – szybka powtórka
  • 10. Kolory i tło w CSS
    • 10.1. Różne formy zapisu kolorów
    • 10.2. Nakładanie tła na elementy
  • 11. Pseudo klasy i pseudo elementy
    • 11.1. Pseudo klasy
    • 11.2. Pseudo elementy
  • 12. Podstawowe stylowanie strony
    • 12.1. Popularne właściwości CSS
    • 12.2. Projekt – strona “Portfolio”
    • 12.3. Gdzie szukać inspiracji na nowe projekty?

Powtórka

Część 4

Nowoczesna
strona

Estetyczna, responsywna i wydajna – tak powinna prezentować się każda współcześnie tworzona strona. Nad tymi właśnie zagadnieniami pochylimy się w części czwartej.

  • 19. Reset i normalizacja CSS
  • 20. Responsywność (RWD)
  • 21. Multimedia na stronie
    • 21.1. Atrybut “srcset”
    • 21.2. Znacznik <picture>
    • 21.3. Rozmiar i formaty plików graficznych
    • 21.4. Wideo i audio
  • 22. Zmienne CSS
  • 23. Flexbox
    • 23.1. Flex container
    • 23.2. Flex items
    • 23.3. Gramy w Flexbox
  • 24. Animacje CSS
    • 24.1. Transform – poruszanie elementami
    • 24.2. Transition – zmiana wartości w czasie
    • 24.3. Keyframes
    • 24.4. Animation

Powtórka

Część 1

Podstawy HTML

W pierwszej części kursu dowiesz się, czym tak w ogóle jest HTML oraz jakich narzędzi potrzebujesz, aby zacząć swoją przygodę z tworzeniem stron internetowych.
Tutaj również zobaczymy, co kryje się “za kulisami” stron internetowych.

  • 1. Środowisko deweloperskie
    • 1.1. Linux, Windows czy może MacOS?
    • 1.2. Edytor tekstowy
    • 1.3. Przeglądarka
    • 1.4. Terminal / wiersz poleceń
  • 2. Czym jest HTML?
  • 3. Znaczniki HTML
    • 3.1. Live server
    • 3.2. Struktura dokumentu
    • 3.3. Tagi używane przy pracy z tekstem
    • 3.4. Dzielenie dokumentu na pojedyncze sekcje
    • 3.5. Listy
    • 3.6. Grafika
  • 4. Atrybuty HTML
  • 5. Chrome DevTools
    • 5.1. Zakładka “Elements”
    • 5.2. Przełącznik widoku responsywnego
    • 5.3. Zakładka “Sources”

Powtórka

Część 3

HTML i CSS – dalsze kroki

Dwie poprzednie części mają za zadanie wprowadzić nas w świat HTML i CSS. Część trzecia z kolei wychodzi już nieco ponad podstawy. Poznamy w niej już te tematy, które pozwolą nam zagłębić się jeszcze bardziej w świat frontendu.

  • 13. Kaskadowość CSS
  • 14. Jednostki w CSS
    • 14.1. Matematyka w CSS
  • 15. Kolejne tagi HTML
    • 15.1. Umieszczanie linków
    • 15.2. Tworzenie tabel
  • 16. Semantyka HTML
  • 17. Pozycjonowanie elementów na stronie
    • 17.1. CSS Position
    • 17.2. z-index
  • 18. Formularze
    • 18.1. Wysyłanie i odbieranie danych z formularza

Powtórka

Część 5

Zaawansowana
strona

Ostatnia część kursu pozwoli nam zapoznać się z nieco bardziej zaawansowanymi tematami.
Poza samym tworzeniem stron dowiemy się również, w jaki sposób umieścić efekt naszej pracy w Internecie.

  • 25. Nagłówek dokumentu
  • 26. BEM
  • 27. Osadzanie zewnętrznych materiałów
  • 28. CSS Grid
    • 28.1. Wiersze i kolumny siatki
    • 28.2. Linie siatki
    • 28.3. Wyrównanie elementów
    • 28.4. Obszary siatki
    • 28.5. Responsywna siatka
    • 28.6. Grid + Flexbox
    • 28.7. Grid Garden
  • 29. Frameworki CSS
    • 29.1. Bootstrap
    • 29.2. Pozostałe frameworki
  • 30. A11y – dostępność strony
  • 31. Umieszczanie strony w Internecie
    • 31.1. Hosting
    • 31.2. Domena
    • 31.3. DNS

Powtórka

Czego nauczysz się na tym kursie?

Kurs ten przygotuje Cię do samodzielnego tworzenia profesjonalnych stron internetowych. Przed przystąpieniem do kursu nie musisz posiadać żadnej wiedzy z zakresu programowania. Wszystkie podstawowe tematy, włącznie z instalacją wymaganych aplikacji, zostaną dokładnie omówione w kolejnych lekcjach.

Kurs ten skupia się głównie na tematach związanych z HTML i CSS – czyli najbardziej fundamentalnych zagadnieniach w świecie frontendu. Nie zabraknie jednak również tematów około deweloperskich takich jak konfiguracja środowiska pracy czy hosting i domeny www.

Po zakończeniu tego kursu będziesz miał bardzo dokładną wiedzę we wszystkich zagadnieniach związanych z tworzeniem stron internetowych i wystarczające doświadczenie, aby zacząć samodzielnie tworzyć swoje własne projekty.

Część 1

Podstawy HTML

W pierwszej części kursu dowiesz się, czym tak w ogóle jest HTML oraz jakich narzędzi potrzebujesz, aby zacząć swoją przygodę z tworzeniem stron internetowych.
Tutaj również zobaczymy, co kryje się “za kulisami” stron internetowych.

  • 1. Środowisko deweloperskie
    • 1.1. Linux, Windows czy może MacOS?
    • 1.2. Edytor tekstowy
    • 1.3. Przeglądarka
    • 1.4. Terminal / wiersz poleceń
  • 2. Czym jest HTML?
  • 3. Znaczniki HTML
    • 3.1. Live server
    • 3.2. Struktura dokumentu
    • 3.3. Tagi używane przy pracy z tekstem
    • 3.4. Dzielenie dokumentu na pojedyncze sekcje
    • 3.5. Listy
    • 3.6. Grafika
  • 4. Atrybuty HTML
  • 5. Chrome DevTools
    • 5.1. Zakładka “Elements”
    • 5.2. Przełącznik widoku responsywnego
    • 5.3. Zakładka “Sources”

Powtórka

Część 2

Podstawy
CSS

Druga część poświęcona będzie CSS. To tutaj nasze strony zaczną nabierać kolorów i ładnego wyglądu.
Mając już podstawową wiedzę, zaczniemy tutaj również tworzyć stronę “Portfolio”, którą to będziemy rozbudowywać przez pozostałą część kursu.

  • 6. Czym jest CSS?
    • 6.1. Składnia CSS
    • 6.2. Domyślne style oraz DevTools
  • 7. Osadzanie CSS
    • 7.1. Inline CSS
    • 7.2. Tag <style>
    • 7.3. Zewnętrzny plik
    • 7.4. Przegląd wszystkich metod osadzania
  • 8. Selektory CSS
    • 8.1. Selektory znaczników HTML
    • 8.2. Selektory klas i identyfikatorów
    • 8.3. Selektory atrybutów
    • 8.4. Selektor uniwersalny
    • 8.5. CSS Dinner
  • 9. Box model
    • 9.1. Border, padding, margin
    • 9.2. Elementy blokowe i liniowe
    • 9.3. Box sizing
    • 9.4. Box model – szybka powtórka
  • 10. Kolory i tło w CSS
    • 10.1. Różne formy zapisu kolorów
    • 10.2. Nakładanie tła na elementy
  • 11. Pseudo klasy i pseudo elementy
    • 11.1. Pseudo klasy
    • 11.2. Pseudo elementy
  • 12. Podstawowe stylowanie strony
    • 12.1. Popularne właściwości CSS
    • 12.2. Projekt – strona “Portfolio”
    • 12.3. Gdzie szukać inspiracji na nowe projekty?

Powtórka

Część 3

HTML i CSS – dalsze kroki

Dwie poprzednie części mają za zadanie wprowadzić nas w świat HTML i CSS. Część trzecia z kolei wychodzi już nieco ponad podstawy. Poznamy w niej już te tematy, które pozwolą nam zagłębić się jeszcze bardziej w świat frontendu.

  • 13. Kaskadowość CSS
  • 14. Jednostki w CSS
    • 14.1. Matematyka w CSS
  • 15. Kolejne tagi HTML
    • 15.1. Umieszczanie linków
    • 15.2. Tworzenie tabel
  • 16. Semantyka HTML
  • 17. Pozycjonowanie elementów na stronie
    • 17.1. CSS Position
    • 17.2. z-index
  • 18. Formularze
    • 18.1. Wysyłanie i odbieranie danych z formularza

Powtórka

Część 4

Nowoczesna
strona

Estetyczna, responsywna i wydajna – tak powinna prezentować się każda współcześnie tworzona strona. Nad tymi właśnie zagadnieniami pochylimy się w części czwartej.

  • 19. Reset i normalizacja CSS
  • 20. Responsywność (RWD)
  • 21. Multimedia na stronie
    • 21.1. Atrybut “srcset”
    • 21.2. Znacznik <picture>
    • 21.3. Rozmiar i formaty plików graficznych
    • 21.4. Wideo i audio
  • 22. Zmienne CSS
  • 23. Flexbox
    • 23.1. Flex container
    • 23.2. Flex items
    • 23.3. Gramy w Flexbox
  • 24. Animacje CSS
    • 24.1. Transform – poruszanie elementami
    • 24.2. Transition – zmiana wartości w czasie
    • 24.3. Keyframes
    • 24.4. Animation

Powtórka

Część 5

Zaawansowana
strona

Ostatnia część kursu pozwoli nam zapoznać się z nieco bardziej zaawansowanymi tematami.
Poza samym tworzeniem stron dowiemy się również, w jaki sposób umieścić efekt naszej pracy w Internecie.

  • 25. Nagłówek dokumentu
  • 26. BEM
  • 27. Osadzanie zewnętrznych materiałów
  • 28. CSS Grid
    • 28.1. Wiersze i kolumny siatki
    • 28.2. Linie siatki
    • 28.3. Wyrównanie elementów
    • 28.4. Obszary siatki
    • 28.5. Responsywna siatka
    • 28.6. Grid + Flexbox
    • 28.7. Grid Garden
  • 29. Frameworki CSS
    • 29.1. Bootstrap
    • 29.2. Pozostałe frameworki
  • 30. A11y – dostępność strony
  • 31. Umieszczanie strony w Internecie
    • 31.1. Hosting
    • 31.2. Domena
    • 31.3. DNS

Powtórka

A gdzie jest JavaScript?

JavaScript jest językiem programowania o bardzo szerokim obecnie zastosowaniu. Jego znajomość nie jest potrzebna w przypadku tworzenia statycznych stron internetowych.

Dzięki JavaScript możemy umieścić na naszej stronie dodatkową logikę i funkcjonalności takie jak:
• rejestracja i logowanie,
• pobieranie i zapisywanie danych,
• tworzenie skomplikowanych animacji,
• zmiana treści na stronie w wyniku działań użytkownika,
• itp.

Tak długo, jak będziemy tworzyć strony, których treść nie będzie zmieniała się dość często i nie będziemy mieli potrzeby stworzenia interaktywnej aplikacji, znajomość HTML i CSS w zupełności wystarczy nam do tworzenia stron typu portfolio, wizytówka lub nawet prosty blog.

Zacznij naukę

Jak wygląda kurs?

Sprawdź, w jaki sposób przygotowany jest nasz kurs tworzenia stron internetowych.

Materiały tekstowe

Zdecydowana większość lekcji w tym kursie ma format tekstowy. Dzięki temu możesz przerabiać je we własnym tempie i w dowolnym miejscu, kopiować do notatek najważniejsze dla Ciebie informacje, a także szybko odświeżać wiedzę “skanując” wzrokiem treść lekcji.

Materiały wideo

W przypadku nieco trudniejszych tematów zagadnienia w nich prezentowane są dodatkowo omawiane w materiale wideo. Materiał wideo w takim przypadku skupia się na praktycznych aspekcie poruszanego zagadnienia.

Cheat sheets

Liczba znaczników HTML oraz właściwości CSS, których musimy się nauczyć, w pierwszym momencie może wydawać się nieco przytłaczająca. Z tego powodu w początkowych lekcjach znajdziesz przydatne cheatsheety, które pozwolą Ci się odnaleźć w tej pierwszej fazie nauki.

Kod… dużo kodu

Czytanie teorii bądź oglądanie “filmików” o programowaniu jest bardzo wygodne, jednak stwarza fałszywe wrażenie nauki. To praktyka jest tą czynnością, która zbliża nas do umiejętności tworzenia stron. Głównie z tego powodu każda lekcja opatrzona jest przykładami, które możemy edytować i uruchamiać bezpośrednio w przeglądarce.

Powtórki

Każdy z pięciu rozdziałów zakończony jest obszerną powtórką wideo, w której omówione zostały wszystkie najważniejsze zagadnienia poruszane w danym rozdziale. Dzięki takim powtórkom możemy sprawdzić, czy jesteśmy już gotowi do kontynuowania nauki, a także szybko odświeżyć wiedzę bez konieczności przechodzenia przez wszystkie lekcje konkretnego rozdziału.

Projekt

W trakcie tego kursu będziemy rozwijać projekt, którego celem będzie stworzenie strony portfolio dla naszego tajemniczego klienta 🕵️‍♂️. Zaczniemy od prostej strony zbudowanej za pomocą podstawowych znaczników HTML i właściwości CSS. Wraz z kolejnymi lekcjami i nowo nabytymi umiejętnościami będziemy stopniowo tą stroną rozwijać i poprawiać.

Przykładowe lekcje

Na naszym kanale YouTube umieściliśmy przykładowe lekcje dostępne na kursie.
Lekcja 1 – VS Code
Lekcja 2 – CSS Transform

Grupa dyskusyjna

Każda osoba, która zakupi kurs otrzyma dostęp do prywatnego kanału na Discordzie, na którym będzie mogła otrzymać od autora kursu odpowiedzi na pojawiające się pytania.

Dla kogo jest ten kurs?

Umiejętność tworzenia stron internetowych przynosi wiele korzyści nie tylko programistom.

WordPress developer

Jeżeli tworzysz strony za pomocą WordPressa i brakuje Ci pełnej kontroli nad tym, jak wygląda Twoja strona lub nie do końca rozumiesz kod, który generuje dla Ciebie WordPress, zdecydowanie powinieneś solidnie nauczyć się HTML i CSS.

Pierwsze kroki

Nie miałeś jeszcze zbyt dużo do czynienia ze światem IT i rozważasz rozpoczęcie nowej kariery jako programista frontend? W takim przypadku bardzo dobra znajomość HTML i CSS jest absolutnym wymogiem, niezależnie od tego, czy i jaki framework JavaScript wybierzesz.

Dodatkowy zarobek

Masz nieco wolnego czasu i chciałbyś go zmonetyzować? Umiejętność tworzenia stron internetowych pozwoli Ci na realizację niedużych zleceń takich jak stworzenie strony dla lokalnego salonu fryzjerskiego, mechanika samochodowego czy siłowni.

Rozwój biznesu

Prowadzisz firmę i nie posiadasz strony internetowej? Oczywiście może zrobić ją dla Ciebie zewnętrza agencja, ale koszty związane ze stworzeniem, aktualizacją i utrzymaniem strony wielokrotnie przewyższą cenę, jaką zapłacisz za zainwestowanie w nowe umiejętności.

Marketing

Zajmujesz się sprzedażą lub marketingiem i czujesz, że wysyłanie klientom kolejnych plików PDF z ofertami nie przynosi zamierzonego skutku? Zaskocz wszystkich, przygotowując oferty i reklamy w formie nowoczesnych stron internetowych.

Hobby

Jesteś samoukiem i uwielbiasz ciągle zdobywać wiedzę w nowych dziedzinach? To świetnie się składa – umiejętność tworzenia stron internetowych w dzisiejszych czasach jest niezwykle przydatna i wiedza ta prędzej czy później na pewno zaprocentuje.

Najczęściej zadawane pytania (FAQ)

Kurs tworzenia stron internetowych w pytaniach i odpowiedziach

W jaki sposób mogę zakupić i opłacić kurs ?

Kurs można kupić, klikając na jeden z dostępnych na tej stronie przycisków. Kurs można opłacić jedynie online. Wszystkie płatności są bezpiecznie przetwarzane przez międzynarodowego operatora płatności Stripe oraz Przelewy24. Bez problemu można płacić szybkim przelewem, Blikiem oraz kartą płatniczą.

Kiedy otrzymam dostęp do kursu?

Kurs pojawi się na koncie kupującego automatycznie po pozytywnym potwierdzeniu płatności. W przypadku jakichkolwiek problemów prosimy o informację poprzez formularz kontaktowy.

Czy mogę otrzymać fakturę VAT?

Tak, na wszystkie zakupione kursy wystawiane są faktury VAT. Szczegółowe dane, na jakie ma zostać wystawiona faktura (w tym NIP), można podać w szczegółach zamówienia na ekranie płatności.

Czy jeżeli kurs mi się nie spodoba, to mogę odzyskać pieniądze?

Oczywiście, że tak. Jeżeli w ciągu dwóch tygodni nie przekonasz się do naszego kursu tworzenia stron internetowych, to zwrócimy Ci pieniądze.

Czy kurs jest prowadzony przez nauczyciela?

Nie, wszystkie materiały są dostępne od razu po opłaceniu kursu i to od kupującego zależy, kiedy i w jakim tempie będzie przechodził przez kolejne lekcje. W przypadku problemów w nauce zawsze można zadać pytanie autorowi kursu na dedykowanej grupie na platformie Discord.

Czy kurs będzie aktualizowany?

Tak, kurs będzie aktualizowany i poprawiany na bieżąco. Największą rolę odegrają tutaj sami kursanci, gdyż to ich feedback będzie miał największy wpływ na przyszłe poprawki i usprawnienia w tym kursie.

Gdzie mogę zadać dodatkowe pytania ?

W takim przypadku polecamy korzystać z formularza kontaktowego dostępnego na stronie.