Kurs Tworzenia Stron WWW cz. 3

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ć. 🙂

Wymagania

Przed przystąpieniem do tego kursu warto:

Płatność za kurs

Akceptowane formy płatności: karta, przelew, BLIK, Apple Pay, Google Pay.

Kliknij czerwony przycisk Kup kurs.
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.

Jeśli posiadasz cz. 1 oraz cz. 2, zgłoś się do Majek po kupon -40%!

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:

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

Karolina

Dział UI/UX jest po prostu świetny!

To tylko jeden dział, a mam wrażenie, że mógłby być osobnym kursem. 🙂 

Tomasz R.

Cz. 1 i cz. 2 były rewelacyjne. Ta część jest jeszcze lepsza! 😁 

Maggie

Kolejny kursik 10/10. 🙂

Najbardziej cieszy mnie to, że faktycznie pomógł mi on uporządkować wiedzę z poprzednich części i wszystkie pytania i problemy związane z pisaniem kodu same się rozwiązały. 

Gorąco i serdecznie polecam!

kizzy

Bardzo spoko kurs.

Najbardziej podobały mi się projekty i te dwie strony co robimy na końcu.

Dużo się nauczyłem, dział z UI/UX też jest mega.

Polecam i pozdrooo!

Adaś

Właśnie skończyłem przerabiać ten kurs.

Niesamowite ile braków pozwolił mi nadrobić! Zaczynałem od środka, a więc od cz. 3, bo wydawało mi się, że mam jakąś tam wiedzę o tworzeniu stron.

Jednak powiedzenie „nie wiesz, ile jeszcze nie wiesz” jest tu bardzo prawdziwe.

Wracam chłonąć wiedzę od cz. 1! 🙂 A cz. 3 polecam każdemu!

Okładka kursu tworzenia stron WWW

Informacje:

Cena:
299zł
Poziom:
średni
Czas trwania:
~12h
Ilość lekcji:
148
Certyfikat ukończenia
Bezpłatne aktualizacje
Dożywotni dostęp

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.

Lista odcinków

Animowane karty

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

Linki

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 & padding

Czym jest outline? Czemu jest tak ważny?

Dobra praktyka z paddingiem

Przyciski

Omówienie projektu #5

Projekt #5 – HTML i CSS

Projekt #5 – Slide

Projekt #5 – Slice

Projekt #5 – Hmm

Projekt #5 – Border

Projekt #5 – Glass

Nawigacja

Omówienie projektu #6

Projekt #6 – HTML & CSS

Projekt #6 – CSS cz. 1

Projekt #6 – CSS cz. 2

Tooltipy, inputy itd.

Tooltipy

Inputy

Git & GitHub

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 & SASS

BEM – wprowadzenie

Stylowanie elementów

Omówienie zadania – nadaj klasy BEM

Rozwiązanie zadania – nadaj klasy BEM

Projektuj lepsze strony internetowe! Porady UI/UX!

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 Flexbox

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 Grid

Kurs CSS Grid

Generator CSS Grid

Strona WWW Grid

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