Kurs Tworzenia Stron WWW cz. 3

Trzecia część kursu to mnóstwo projektów, CSS Grid, dwie profesjonalne strony internetowe, Git oraz GitHub jak i cenne wskazówki UI/UX!

  • Certyfikat ukończenia
  • Bezpłatne aktualizacje
  • Dożywotni dostęp

Dożywotni dostępKupujesz raz, aktualizacje gratis.

Szczegóły

O kursie

Czego się nauczysz?

Trzecia część kursu pozwoli Ci powtórzyć zdobytą do tej pory wiedzę. Pierwsze działy poświęcone są ciekawym, zaawansowanym projektom, które możemy stworzyć w czystym CSS-ie.

W dalszej części kursu poznasz nowe narzędzia takie jak Git oraz GitHub, dowiesz się jak efektywnie wykorzystać SASS w połączeniu z metodologią BEM oraz poznasz mnóstwo porad dotyczących UI (user interface) / UX (user experience), dzięki czemu Twoje strony będą się mocno wyróżniały na tle konkurencji!

Na koniec stworzysz dwie piękne i zaawansowane strony internetowe. Pierwsza z nich oparta o Flexboxa, druga o Grida.

Warto dodać, że w kursie zobaczysz, jak wykorzystuje się JavaScript w praktyce.

I tak – wiemy.

Według mapy, kurs JavaScript dopiero przed Tobą, ale chodzi o to, aby zaspokoić Twoją ciekawość jeszcze przed nauką JSa.

Dzięki temu wiele rzeczy będzie Ci o wiele łatwiej zrozumieć.

Demo

Zajrzyj do środka

Podglądowy odcinek z kursu.

Opinie o kursie

Opinie pochodzą od kursantów, którzy przerobili kurs i podzielili się nimi na Discordzie.

Program

Plan kursu

  1. 1

    Animowane karty

    W tym dziale stworzymy ciekawe, animowane karty na strony WWW.

  2. 2

    Linki

    Strona bez unikalnych linków to jak ręka bez ręki!

    Czy jakoś tak.

  3. 3

    Przyciski

    Czas na animowane przyciski, które urozmajcą każdą stronę.

  4. 4

    Nawigacja

    Dobra nawigacja to podstawa!

  5. 5

    Tooltipy, inputy itd.

    Kolejne projekty – tym razem tooltipy czy inputy!

  6. 6

    Git & GitHub

    Podstawa podstaw, szczególnie podczas pracy nad dużymi projektami w grupie!

  7. 7

    BEM & SASS

    Połączenie BEM i SASS – coś pięknego.

  8. 8

    Projektuj lepsze strony internetowe! Porady UI/UX!

    Obszerny dział, który zrobi z Ciebie eksperta UI/UX!

  9. 9

    Strona WWW Flexbox

    Ogromna, zaawansowana strona WWW oparta o Flexboxa.

    Napisana w czystym HTML, CSS i JS.

  10. 10

    CSS Grid

    Alternatywa dla Flexboxa. Ale taka na sterydach.

  11. 11

    Strona WWW Grid

    Ogromna, zaawansowana strona WWW oparta o Grida.

    Napisana w czystym HTML, CSS i JS.

Zacznij już dziś

Kurs Tworzenia Stron WWW cz. 3

  • Certyfikat ukończenia
  • Bezpłatne aktualizacje
  • Dożywotni dostęp

199złjednorazowo

Kup kurs

150 lekcji

Lista odcinków

Animowane karty14
  • Pro tip do kursu
  • Omówienie projektu #1
  • Projekt #1 – HTML
  • Projekt #1 – CSS cz. 1
  • Projekt #1 – CSS cz. 2
  • Omówienie projektu #2
  • Projekt #2 – HTML
  • Projekt #2 – Karta 1 i 2
  • Projekt #2 – Karta 3
  • Omówienie projektu #3
  • Projekt #3 – HTML i CSS
  • Projekt #3 – CSS cz. 1
  • Projekt #3 – CSS cz. 2
  • Projekt #3 – CSS cz. 3
Linki8
  • Omówienie projektu #4
  • Projekt #4 – HTML i CSS
  • Do kolejnego odcinka
  • Projekt #4 – Link nr 1
  • Projekt #4 – Link nr 2
  • Projekt #4 – Link nr 3
  • Projekt #4 – Link nr 4
  • Projekt #4 – Link nr 5
Przyciski: outline & padding2
  • Czym jest outline? Czemu jest tak ważny?
  • Dobra praktyka z paddingiem
Przyciski7
  • Omówienie projektu #5
  • Projekt #5 – HTML i CSS
  • Projekt #5 – Slide
  • Projekt #5 – Slice
  • Projekt #5 – Hmm
  • Projekt #5 – Border
  • Projekt #5 – Glass
Nawigacja4
  • Omówienie projektu #6
  • Projekt #6 – HTML & CSS
  • Projekt #6 – CSS cz. 1
  • Projekt #6 – CSS cz. 2
Tooltipy, inputy itd.2
  • Tooltipy
  • Inputy
Git & GitHub26
  • Mała aktualizacja + info o instalacji
  • Instalacja Gita
  • Instalacja na MacOS
  • Terminal
  • Do czego służy Git?
  • Jeśli nie widzisz folderu .git
  • Tworzymy repozytorium
  • Info dla użytkowników Windowsa
  • Sprawdzamy historię zmian
  • Branch & merge cz. 1
  • Branch & merge cz. 2
  • Omówienie zadania – zabawa z repo
  • Rozwiązanie zadania – zabawa z repo
  • GitHub – wprowadzenie
  • HTTPS – wysyłamy repo na GitHuba
  • Ciekawostka o origin
  • README.md
  • Nadawanie uprawnień innym użytkownikom
  • Pobieranie repo
  • Praca na branchach
  • Aktualizowanie repo
  • Pull request
  • Git lens
  • gitignore
  • SSH
  • Hostowanie strony na GitHub
BEM & SASS4
  • BEM – wprowadzenie
  • Stylowanie elementów
  • Omówienie zadania – nadaj klasy BEM
  • Rozwiązanie zadania – nadaj klasy BEM
Projektuj lepsze strony internetowe! Porady UI/UX!27
  • Wszystko co musisz wiedzieć o hostingu, domenie itd.
  • Whitespace
  • Dobieranie kolorów stron
  • Skala szarości
  • Nie zamykajmy się na wąską grupę kolorów
  • Kontrast
  • Kontrast favicony
  • Kolor CTA
  • Dodatkowe info do CTA
  • Palety kolorów
  • Text-shadow
  • Przyciski
  • Kursor cz. 1
  • Kursor cz. 2
  • Nawigacja
  • Typografia cz. 1
  • Typografia cz. 2
  • Polish-english
  • Przecież u mnie działa…
  • Textarea
  • Textarea i resize
  • REM & EM
  • Jak używać REM i EM?
  • Nazwy folderów
  • Kółko nie pasuje do kwadratu
  • Tekst góra/dół/prawo/lewo
  • Customowy font na serwerze
Strona WWW Flexbox31
  • Info do projektu
  • Omówienie projektu
  • Tworzymy strukturę
  • Tworzymy burger button
  • Header cz. 1
  • Header cz. 2
  • Header cz. 3
  • Do nawigacji
  • Nawigacja cz. 1
  • Nawigacja cz. 2
  • Nawigacja cz. 3
  • Dreams cz. 1
  • Dreams cz. 2
  • Dreams cz. 3
  • Hero image
  • Wyspy cz. 1
  • Wyspy cz. 2
  • Wyspy cz. 3
  • Wyspy cz. 4
  • Oferty cz. 1
  • Oferty cz. 2
  • Oferty cz. 3
  • Opinie cz. 1
  • Opinie cz. 2
  • Opinie cz. 3
  • Kontakt cz. 1
  • Kontakt cz. 2
  • Footer cz. 1
  • Footer cz. 2
  • Kończymy stronę – JS cz. 1
  • Kończymy stronę – JS cz. 2
CSS Grid2
  • Kurs CSS Grid
  • Generator CSS Grid
Strona WWW Grid23
  • Omówienie projektu
  • Tworzymy strukturę cz. 1
  • Tworzymy strukturę cz. 2
  • Header cz. 1
  • Header cz. 2
  • Header cz. 3
  • Header cz. 4
  • Header cz. 5
  • Header cz. 6
  • Sekcja Cards cz. 1
  • Sekcja Cards cz. 2
  • Sekcja Cards cz. 3 – zadanie
  • Sekcja Invest cz. 1
  • Sekcja Invest cz. 2
  • Sekcja Invest cz. 3
  • Sekcja Plans cz. 1
  • Sekcja Plans cz. 2
  • Sekcja Newsletter cz. 1
  • Sekcja Newsletter cz. 2
  • Sekcja Galeria
  • Sekcja Kontakt
  • Krótka informacja odnośnie sekcji „Kontakt”
  • Na co zwracać uwagę po cz. 3