Kurs Tworzenia Stron WWW cz. 2

Podglądowy odcinek z kursu.

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!

Wymagania

Przed przystąpieniem do tego kursu warto ukończyć:

„Kurs Tworzenia Stron WWW cz. 1”

Płatność za kurs

Dostępne formy płatności:

karta & przelew,
BLIK,
PayPal,
Apple Pay, Google Pay & Link,
Klarna (płatności odroczone / płatności na raty).

Kup: Kurs Tworzenia Stron WWW cz. 2
Po kliknięciu linku zostaniesz przeniesiony na naszą platformę kursową, na której można dokonać płatności.

Zniżki

Aktualne zniżki znajdziesz na Discordzie na kanale #zniżki.

Zostań częścią naszej społeczności i korzystaj ze specjalnych ofert! 🙂

Zwroty

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 wyżej wymienionego terminu,
po przerobieniu więcej, niż 30% kursu,
w przypadku zakupu na fakturę.

Opinie o kursie:

Kurs był w przeszłości dostępny na platformie Udemy.
Jego ocena to 4.9/5 na podstawie ponad 3100 recenzji. 🙂

Artur80dec

Jednym słowem – wyśmienity kurs. Jest tak samo dobry jak część pierwsza. Polecam

Angelika J.

Świetne tłumaczenie, sztos porównania, dużo motywacji do działania i ogrom praktyki!

Rafał M.

Kurs prowadzi przez proces nauczanie krok po kroku, a poszczególne części układają się w zgrabną całość.

„Gęsty” podział na sekcje i tematy pozwala wracać do poszczególnych lekcji, co ułatwia powtórki.

Wiadomości przekazywane są w dobrym tempie.

Prowadzący zachęca do samodzielnego zgłębiania wiedzy, wskazując jednocześnie źródła i dzieląc się dobrą praktyką.

Seria kursów godna polecenia.

Waldemar K.

Świetny kurs, mnóstwo wiedzy przekazanej w bardzo przystępny sposób, bez nadmiarowych wodotrysków. Polecam!!!

Paweł P.

Tak jak w I części Majek nie tylko skupia się na przekazaniu wiedzy, ale zawsze pamięta o praktyce i dosłownie w każdym dziale jest kilka zadań do wykonania, które później pokazuje, jak należało zrobić.

Tłumaczy wszystko zrozumiałym językiem, głos nie irytuje. Co więcej, z tego co mówi i też odnoszę takie wrażenie to ma zaplanowane jakie treści kiedy wprowadzać w odniesieniu do wszystkich części kursu, jak choćby JavaScript.

A najlepsze są momenty kiedy pisze kod i coś powinno działać, a nie działa.

Nie wycina tego materiału z odcinka tylko można zobaczyć jak szuka przyczyny – to uważam za największy plus tych kursów.

Polecam!

Adam G.

Mega pozytywne wrażenia.

Bardzo dużo rzeczowej, dobrze wytłumaczonej wiedzy. Tutaj nic nie dzieje się przypadkowo.

Na wszystko przychodzi odpowiedni moment. Przez cały okres trwania kursu ani razu nie czułem się zagubiony. 😉

Rafał U.

Cz. 1 i cz. 2 skończona. Jestem „głodny” większej ilości materiału.

Przede mną kolejne etapy z MMC 🙂

Bartosz M.

Doprecyzowane kursy, wiedza przekazywana w łatwy i przyjemny sposób.

Patryk K.

Co tu dużo mówić. 🙂 Bawiłem się przednio.

Jeżeli jesteście tutaj, aby zmienić swoje życie – pamiętajcie również o dobrej zabawie!

Efekt końcowy strony napawa dumą – jedziemy! 🙂

Informacje:

Cena:

249zł

Poziom:

średni

Czas trwania:

~10h

Ilość lekcji:

129

Certyfikat ukończenia

Bezpłatne aktualizacje

Dożywotni dostęp

Kup kurs

(przycisk przenosi na naszą platformę kursową)

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!

Kup kurs

Lista odcinków

Visual Studio Code

Instalujemy nowe wtyczki

SASS się nie kompiluje? Sprawdź ten artykuł!

SASS

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 atrybuty

Pseudoklasy i pseudoelementy – wprowadzenie

Pseudoklasy first & last

Nth-child & nth-last-child

Nth-of-type & nth-last-of-type

Zadanie z pseudoklasami

Pseudoelementy

[atrybuty]

Animacje

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?

Flexbox

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

JavaScript

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

Bootstrap

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ą!

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