Kurs Tworzenia Stron WWW cz. 2
W drugiej części kursu poznasz zaawansowany CSS, podstawy języka JavaScript, Bootstrapa oraz stworzysz zaawansowaną stronę WWW.
- Certyfikat ukończenia
- Bezpłatne aktualizacje
- Dożywotni dostęp
Dożywotni dostępKupujesz raz, aktualizacje gratis.
średniPoziom
~10hCzas trwania
129Ilość lekcji
99złPłatność jednorazowa
Szczegóły
O kursie
Czego się nauczysz?
W drugiej części kursu poznasz zaawansowany CSS, a więc pseudoklasy, pseudoelementy, atrybuty, SASS i wiele więcej.
Dowiesz się jak tworzyć i optymalizować animacje, poznasz Flexboxa, a więc potężną technologię, dzięki której możemy w łatwy sposób rozmieszczać elementy na naszej stronie (Grid będzie w cz. 3 kursu).
Poznasz też podstawy JavaScriptu, a więc języka, który odpowiada za wprowadzenia życia na naszych stronach. Będzie to miłe i delikatne wprowadzenie do obszernego kursu JavaScript, który dopiero przed Tobą.
Na koniec poznasz świetne narzędzie, jakim jest Bootstrap i z jego pomocą stworzysz zaawansowaną, responsywną stronę WWW!
Ukończona cz. 1
Przed przystąpieniem do tego kursu warto ukończyć „Kurs Tworzenia Stron WWW cz. 1”.
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.
Program
Plan kursu
- 1
Visual Studio Code
W tej części kursu wskakujemy na poziom wyżej!
Zaczynamy od konfiguracji nowych narzędzi w VS Code.
- 2
SASS
SASS, czyli CSS na sterydach.
- 3
Pseudoklasy, pseudoelementy i atrybuty
Czas na zaawansowany CSS.
- 4
Animacje
Czy wiesz, że w CSS można tworzyć animacje, a nawet całe filmy?
- 5
Flexbox
Flexbox odpowiada za rozmieszczanie elementów na stronach WWW.
- 6
JavaScript
Podstawy, które ułatwią Ci zrozumienie JS’a i przygotują na kurs JS.
- 7
Bootstrap
Szybkość, prostota, wygoda.
Czas poznać najpopularniejszą bibliotekę CSS na świecie!
- 8
Tworzymy stronę internetową!
Twoja pierwsza zaawansowana strona WWW!
Zacznij już dziś
Kurs Tworzenia Stron WWW cz. 2
- Certyfikat ukończenia
- Bezpłatne aktualizacje
- Dożywotni dostęp
99złjednorazowo
Kup kurs139 lekcji
Lista odcinków
Visual Studio Code2
- Instalujemy nowe wtyczki
- SASS się nie kompiluje? Sprawdź ten artykuł!
SASS16
- Zagnieżdżanie CSS
- Czym jest SASS? SCSS czy SASS?
- Kompilujemy SASS
- Sourcemap
- html, :root oraz wstęp do zmiennych
- Zmienne w SASS
- Przykładowe rozwiązanie zadania
- Mapy w SASS
- Mixin
- @import
- @use
- Wprowadzenie do zadania – ostyluj stronę za pomocą poznanych technik
- Rozwiązanie zadania – ostyluj stronę za pomocą poznanych technik
- Zadanie z debugowania
- Rozwiązanie zadania z debugowania
- Ściąga SASS
Pseudoklasy, pseudoelementy i atrybuty7
- Pseudoklasy i pseudoelementy – wprowadzenie
- Pseudoklasy first & last
- Nth-child & nth-last-child
- Nth-of-type & nth-last-of-type
- Zadanie z pseudoklasami
- Pseudoelementy
- [atrybuty]
Animacje12
- Animacje – wprowadzenie
- @keyframes i właściwość animation
- Fill mode
- Zadanie z animacji
- Rozwiązanie zadania z animacji
- 2 proste projekty
- Stwórzmy razem animację cz. 1
- Stwórzmy razem animację cz. 2
- Stwórzmy razem animację cz. 3
- Przydatna strona do animacji
- Kilka słów na temat optymalizacji
- Co animować, aby optymalizacja była jak najlepsza?
Flexbox15
- Krótkie info
- Wprowadzenie do Flexboxa
- Ściąga z właściwości Flexa
- Zadanie #1
- Justify content
- Align items
- Quiz z justify content & align items
- Align content
- Zadanie #2
- Flex grow & shrink
- Flex basis
- Order
- Align self
- Zadanie #3
- Quiz z Flexboxa
JavaScript28
- Czym jest JS? Jak się go uczyć?
- Gdzie umieszczać JS na stronie?
- Czym są zmienne?
- Błędy i ostrzeżenia w konsoli
- Różnica między let i const
- Nazywanie zmiennych
- Dlaczego nie nazywamy zmiennych po polsku?
- Treść zadania #1
- Zadanie #1
- Document Object Model
- Typy danych w JS
- Operatory arytmetyczne
- Operatory przypisania
- Operatory porównania
- Operatory logiczne
- Wprowadzenie do zadania #2
- Zadanie #2
- Quiz ze zmiennych i operatorów logicznych
- Instrukcja warunkowa (IF, ELSE IF oraz ELSE)
- Tablice
- Pętla FOR
- Funkcje
- Zadanie #3
- Pobieranie elementów
- addEventListener – wprowadzenie
- addEventListener – projekt
- PROJEKT – chowanie i odkrywanie obrazka
- PROJEKT – zmniejsz, zwiększ i zmień kolor
Bootstrap25
- Aktualizacja Bootstrapa
- Wstęp do Bootstrapa
- Instalacja Bootstrapa
- Bootstrapowe kontenery
- Breakpointy w Bootstrapie
- Kolumny
- Zadanie z kolumn
- Rozwiązanie zadania z kolumnami
- Zabawa z tekstem
- Listy
- Obrazy
- Tabele
- Kolory
- Cienie
- Border
- Display
- Flex
- Zadanie z display
- Zadanie z display – rozwiązanie
- Overflow & position
- Width & height
- Margin & padding
- Ratio
- Komponenty
- Ikony
Tworzymy stronę internetową!34
- Wstęp
- Tworzymy strukturę strony WWW
- Nawigacja cz. 1
- Nawigacja cz. 2
- Header cz. 1
- Header cz. 2
- Header cz. 3
- Header cz. 4
- Header cz. 5
- Dodawanie tła do nawigacji za pomocą JS
- Sekcja about cz. 1
- Sekcja about cz. 2
- Sekcja about cz. 3
- Sekcja about cz. 4
- Sekcja about cz. 5
- Sekcja portfolio cz. 1
- Sekcja portfolio cz. 2
- Sekcja ceny cz. 1
- Kod sekcji
- Sekcja ceny cz. 2
- Slick.js & zdjęcia
- Sekcja zespół cz. 1
- Sekcja zespół cz. 2
- Sekcja zespół cz. 3
- Sekcja osiągnięcia
- Sekcja kontakt cz. 1
- Sekcja kontakt cz. 2
- Footer
- Animacje cz. 1
- Animacje cz. 2
- Animacje cz. 3
- Scrollspy
- Ważne info
- Na co zwracać uwagę po cz. 2
