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.
średniPoziom
~12hCzas trwania
148Ilość lekcji
199złPłatność jednorazowa
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ć.
Ukończona cz. 2
Przed przystąpieniem do tego kursu warto ukończyć „Kurs Tworzenia Stron WWW cz. 2”.
Lub dobra wiedza o HTML i CSS
Jeśli nie przerabiałeś/łaś cz. 2, wystarczy dobra wiedza o HTML i CSS.
Płatność
Płacisz jednorazowo na naszej platformie kursowej.
Zniżki
Aktualne zniżki znajdziesz na Discordzie, na kanale #zniżki.
Zostań częścią naszej społeczności i korzystaj ze specjalnych ofert!
Zwrot do 14 dni
Jeśli kurs Ci się nie spodoba, możesz go zwrócić w ciągu 14 dni od zakupu.
Zwrot nie przysługuje:
- po upływie 14 dni od zakupu
- po przerobieniu więcej niż 30% kursu
- w przypadku zakupu na fakturę
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
Animowane karty
W tym dziale stworzymy ciekawe, animowane karty na strony WWW.
- 2
Linki
Strona bez unikalnych linków to jak ręka bez ręki!
Czy jakoś tak.
- 3
Przyciski
Czas na animowane przyciski, które urozmajcą każdą stronę.
- 4
Nawigacja
Dobra nawigacja to podstawa!
- 5
Tooltipy, inputy itd.
Kolejne projekty – tym razem tooltipy czy inputy!
- 6
Git & GitHub
Podstawa podstaw, szczególnie podczas pracy nad dużymi projektami w grupie!
- 7
BEM & SASS
Połączenie BEM i SASS – coś pięknego.
- 8
Projektuj lepsze strony internetowe! Porady UI/UX!
Obszerny dział, który zrobi z Ciebie eksperta UI/UX!
- 9
Strona WWW Flexbox
Ogromna, zaawansowana strona WWW oparta o Flexboxa.
Napisana w czystym HTML, CSS i JS.
- 10
CSS Grid
Alternatywa dla Flexboxa. Ale taka na sterydach.
- 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 kurs150 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
