Kurs Tworzenia Stron WWW cz. 1

Podglądowy odcinek z kursu.

Czego się nauczysz?

Pierwsza część kursu wprowadzi Cię w obszerny i fascynujący świat tworzenia stron internetowych.

Jeśli nie wiesz, czym różni się HTML od CSS, ani co te dziwne skróty oznaczają – nie musisz się niczym przejmować. Wszystkiego nauczysz się od podstaw.

Jedyne czego Ci potrzeba to komputer i dobra kawa. 🙂

Wymagania

Wymagań brak.

Wszystkiego nauczysz się od kompletnych podstaw. 🙂

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. 1
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 6200 recenzji. 🙂

Monika M.

Są ludzie, którzy urodzili się do uczenia innych. Posiadają dar głosu, którego chce się słuchać, dobierania słów oraz opisywania rzeczy w bardzo prosty i zrozumiały sposób i właśnie taką osobą jesteś Majku.

Zdecydowałam się, na zakup wszystkich kursów mając już pewien poziom wiedzy, a mimo to nauczyłam się nowych rzeczy z podstaw, które niby już miałam ogarnięte. Lubie się uczyć, zdobywać wiedzę w temacie, który mnie ciekawi a do tego kocham tworzyć.

Mam mgr z Architektury i Urbanistyki, ale front to mój wymarzony zawód. Cieszę się, że trafiłam na takim świetny i rzetelny kurs. Czuje, że skill rosnie!

Rafał U.

Ciekawy, konkretny kurs. 5 gwiazdek to za mało. 🙂

Dariusz W.

Świetny kurs dla początkujących. Mateusz ma smykałkę do przekazywania wiedzy w przystępny sposób. Gorąco polecam!

Remigiusz B.

Świetny kurs wprowadzający w podstawy HTML’a i CSS’a.

Prowadzący przystępnie tłumaczy, wszystko jest jasne, klarowne i zrozumiałe.

Polecam każdemu, kto chce postawić swoje pierwsze kroki na drodze do zostania front-end developerem 🙂

Artur80dec

I tego właśnie oczekiwałem od kursu.

Na początku nie chciałem przerabiać pierwszej części tworzenia stron WWW. Byłem po kilku kursach na YT – pomyślałem sobie, że pewne doświadczenie i wiedzę w tym zakresie już zdobyłem.

Człowiek z pewnym przeświadczeniem nabrał pewnego dystansu dla kursów od podstaw – nic bardziej mylnego. Teraz wiem, że to byłby błąd gdybym tego kursu nie przerobił.

Kawał naprawdę świetnej roboty. Dużo ważnych wskazówek jak zacząć przygodę z front-endem. Gorąco polecam.

Maciej K.

Pomimo tego, że znałem trochę HTMLa i CSSa, dzięki temu kursowi dowiedziałem się nowych rzeczy.

Świetnie wytłumaczone i przede wszystkim aktualne.

Polecam.

Agnieszka K.

Bardzo fajna forma kursu – przekazywanie wiedzy w formie wykładu na początku, testy zmuszające do przypominania sobie tego, co się dopiero co usłyszało i dużo ciekawych zadań, zmuszających do pomyślenia samodzielnie.

Widać duże doświadczenie i wiedzę, bez odcinania się od kursantów.

Duża chęć pomocy.

Daria D.

Naprawdę wszystko fajnie wytłumaczone, wiele razy powtarzane kluczowe informacje, fajne ćwiczenia.

Gorąco polecam.

Karolina M.

Świetny kurs!

Jestem totalnym laikiem, który uczy się wszystkiego od podstaw, a po pierwszej części naprawdę kumam czaczę. 😁

Informacje:

Cena:

99zł

Poziom:

łatwy

Czas trwania:

~10h

Ilość lekcji:

145

Certyfikat ukończenia

Bezpłatne aktualizacje

Dożywotni dostęp

Kup kurs

(przycisk przenosi na naszą platformę kursową)

Plan kursu

1. Wstęp i organizacja

Pierwsze dwa działy to tak naprawdę kwestie organizacyjne, które pomogą Ci w wykorzystaniu pełnego potencjału kursu. 🙂

2. Visual Studio Code

W tym dziale poznasz najlepszy edytor kodu!

3. HTML & CSS

Kolejnym etapem nauki będzie poznanie HTML oraz CSS.

Technologii, bez których nie stworzymy żadnej strony WWW!

4. Przeglądarki internetowe

Różnic pomiędzy przeglądarkami jest więcej, niż się może oku wydawać! 😉

5. Fonty, kolory, obrazy

Czymże byłaby strona bez odpowiednio dobranych kolorów i fontów? Nie można zapomnieć o obrazach!

6. Jednostki, kaskadowość, dziedziczenie i kombinatory

Sprawy techniczno-techniczne, rodzinne i inne takie. 👀

7. Box model, display, position

Widzieć czy nie widzieć? Z prawej, a może z lewej?

Odpowiedzi na te i inne pytania znajdziesz w tym dziale.

8. Transition, transform, background

Wstęp do obszernego świata animacji i transformacji.

A i o tłach będzie co nieco.

9. Responsive Web Design

Magia, która sprawia, że strona wyświetla się poprawnie zarówno na małym telefonie jak i na największym ekranie komputera!

10. Dobre praktyki pisania kodu

Każdy chce pisać dobry kod, ale nie każdy wie jak… Na szczęście ten problem nie będzie dotyczył Ciebie. 🙂

11. Zadania i projekty

Czas na zadania i projekty, które utrwalą Twoją nowo nabytą wiedzę!

Zaczynamy budować doświadczenie. 💪

12. Ciekawostki

Kawał świetnej roboty za Tobą!

Zanim przejdziesz do kolejnej części kursu, czas na porcję ciekawostek!

Kup kurs

Lista odcinków

Wstęp i organizacja

Informacje

Jak się uczyć?

Mapa, frontend & backend

Bardzo ważne narzędzie, które niesamowicie Ci pomoże

Pomoc

Dowód na to, że mapa działa

Monitory

Visual Studio Code

Podstawowa konfiguracja

Dodawanie folderów, tworzenie plików

Struktura plików i dalsza konfiguracja

Ładniejsze formatowanie HTML

Praca z Live Serverem

Lista fajnych styli i ustawień VS Code

Aktualizacje

Poznajmy HTML

HTML – wprowadzenie

Podstawowa struktura HTML

Semantyka i najczęściej używane tagi HTML

Kod do kolejnych odcinków

Elementy blokowe i liniowe

Nagłówki

Linki

Podstawowa struktura strony

Quiz z tagów HTML

Metatagi

Formularze

Formatowanie i zabawa z tekstem

Quiz – metatagi, formularze i formatowanie

Informacje do list w HTML

Listy w HTML

Kod do odcinka o tabelach

Tabele w HTML

Audio, video, obrazki

Quiz ze wszystkich tagów HTML

DOCTYPE & HTML lang

Wprowadzenie do zadania – stwórz stronę!

Rozwiązanie do zadania – stwórz stronę!

Witajcie w świecie CSS!

CSS – wprowadzenie

Quiz z budowy CSS

Gdzie umieszczać CSS?

Ścieżki do plików

Emmet

Quiz z umieszczania CSS

Zadanie – napraw CSS!

Rozwiązanie zadania z CSS

Krótszy zapis i komentarze

!important oraz dobra praktyka nazywania klas

Wprowadzenie do zadania – ostyluj stronę

Treść zadania – ostyluj stronę

Rozwiązanie zadania – ostyluj stronę

Przeglądarki internetowe

Z jakich przeglądarek korzystać?

Domyślne style przeglądarek

Narzędzia deweloperskie

Fonty, kolory i obrazy

Wprowadzenie do fontów

Aktualizacja Google Fonts

Google Fonts

Lista fajnych fontów

Font Awesome

Info do Font Awesome

Alternatywy dla Font Awesome

Stylowanie tekstu

Stylowanie tekstu – właściwości CSS

Quiz z fontów

Kolory

Obrazy

Wprowadzenie do zadania

Treść zadania

Rozwiązanie zadania

Jednostki, kaskadowość, dziedziczenie i kombinatory

px, %, vw, vh

Rem & em

Max/min-width & height

Wprowadzenie do zadania z kształtami

Rozwiązanie zadania z kształtami

Specyficzność CSS

Kaskadowość i dziedziczenie

Kombinatory

Quiz z dziedziczenia i rodziny w CSS

Wprowadzenie do zadania z kombinatorami

Treść zadania z kombinatorami

Rozwiązanie zadania z kombinatorami

BONUS: Ściąga CSS

Box model, display, position

Box model

Margin & padding

Wprowadzenie do zadania margin & padding

Rozwiązanie zadania margin & padding

Overflow

Quiz z box model

Border

Stylowanie linków

Stylowanie przycisków i :hover

Display inline, inline-block & block

Quiz z display

Position relative & z-index

Position absolute

Notatka relative & absolute

Kod do zadania z position

Wprowadzenie do zadania z position

Rozwiązanie zadania z position

Position fixed

Position sticky

Quiz z position

Kod i treść do zadania – ułóż elementy za pomocą position

Wprowadzenie do zadania – ułóż elementy za pomocą position

Rozwiązanie zadania – ułóż elementy za pomocą position

Wprowadzenie do zadania – zoom, move & color

Treść zadania – zoom, move & color

Rozwiązanie zadania – zoom, move & color

Transition & transform

Transition

Transition – porównanie

Quiz z transition

Transform

Nowy transform

Transform origin

Calc

Wprowadzenie do zadania – transform & transition

Treść zadania – transform & transition

Rozwiązanie zadania – transform & transition

Optymalizacja zadania z transform & transition

Float

Background

Responsive Web Design

RWD – co to jest? Czemu jest tak ważne?

Lista urządzeń w dev toolsach

Metatag viewport

@media queries

Wprowadzenie do zadania z media queries

Treść zadania z media queries

Rozwiązanie zadania z media queries

Mobile first

Nowy zapis @media

Dobre praktyki pisania kodu

Dlatego dbanie o kolejność jest tak ważne… 😉

Polish-english

Zadania i projekty

Tworzymy stronę z podstronami cz. 1 (struktura i nawigacja)

Tworzymy stronę z podstronami cz. 2 (header)

Tworzymy stronę z podstronami cz. 3 (footer)

Tworzymy stronę z podstronami cz. 4 (main)

Tworzymy stronę z podstronami cz. 5 (podstrony)

Zadanie z @media queries

Tworzymy responsywną stronę WWW cz. 1 (struktura i nawigacja)

Tworzymy responsywną stronę WWW cz. 2 (header)

Tworzymy responsywną stronę WWW cz. 3 (sekcja main)

Tworzymy responsywną stronę WWW cz. 4 (sekcja main)

Tworzymy responsywną stronę WWW cz. 5 (main + footer)

Tworzymy responsywną stronę WWW cz. 6 (ostatnie szlify)

Treść zadania – powtórka z rozrywki

Rozwiązanie zadania – powtórka z rozrywki! 🙂

Wprowadzenie do zadania – hero image

Treść zadania – hero image

Rozwiązanie zadania – hero image

Ciekawostki

Hosting stron WWW, kupowanie domeny

Przydatne strony

Minifikacja kodu

Walidator kodu HTML

Prefiksy

Kursor

Reset i normalizacja CSS

Mój reset CSS

Problem z listami

Kwestie zdrowotne

AI w IT

Złodzieje w IT

Na co zwracać uwagę po cz. 1