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.

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!

Demo

Zajrzyj do środka

Podglądowy odcinek z kursu.

Opinie o kursie

Kurs był w przeszłości dostępny na platformie Udemy. Poniżej kilka opinii kursantów.

4.9/5 ponad 3100 recenzji Zrzut z Udemy

Program

Plan kursu

  1. 1

    Visual Studio Code

    W tej części kursu wskakujemy na poziom wyżej!

    Zaczynamy od konfiguracji nowych narzędzi w VS Code.

  2. 2

    SASS

    SASS, czyli CSS na sterydach.

  3. 3

    Pseudoklasy, pseudoelementy i atrybuty

    Czas na zaawansowany CSS.

  4. 4

    Animacje

    Czy wiesz, że w CSS można tworzyć animacje, a nawet całe filmy?

  5. 5

    Flexbox

    Flexbox odpowiada za rozmieszczanie elementów na stronach WWW.

  6. 6

    JavaScript

    Podstawy, które ułatwią Ci zrozumienie JS’a i przygotują na kurs JS.

  7. 7

    Bootstrap

    Szybkość, prostota, wygoda.

    Czas poznać najpopularniejszą bibliotekę CSS na świecie!

  8. 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 kurs

139 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