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. 🙂
Wymagań brak.
Wszystkiego nauczysz się od kompletnych podstaw. 🙂
Kurs możesz kupić kartą, przelewem lub BLIK-iem.
Kliknij czerwony przycisk „Kup kurs”.
Zostaniesz przeniesiony na platformę Udemy, na której można dokonać płatności.
Aktualne zniżki znajdziesz na Discordzie na kanale #zniżki.
Zasady zwrotów w przypadku tego kursu ustala Udemy.
Kurs jest dostępny na platformie Udemy.
Jego ocena to 4.9/5 na podstawie ponad 6200 recenzji. 🙂
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!
Ciekawy, konkretny kurs. 5 gwiazdek to za mało. 🙂
Świetny kurs dla początkujących. Mateusz ma smykałkę do przekazywania wiedzy w przystępny sposób. Gorąco polecam!
Ś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 🙂
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.
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.
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.
Naprawdę wszystko fajnie wytłumaczone, wiele razy powtarzane kluczowe informacje, fajne ćwiczenia.
Gorąco polecam.
Świetny kurs!
Jestem totalnym laikiem, który uczy się wszystkiego od podstaw, a po pierwszej części naprawdę kumam czaczę. 😁
Pierwsze dwa działy to tak naprawdę kwestie organizacyjne, które pomogą Ci w wykorzystaniu pełnego potencjału kursu. 🙂
W tym dziale poznasz najlepszy edytor kodu!
Kolejnym etapem nauki będzie poznanie HTML oraz CSS.
Technologii, bez których nie stworzymy żadnej strony WWW!
Różnic pomiędzy przeglądarkami jest więcej, niż się może oku wydawać! 😉
Czymże byłaby strona bez odpowiednio dobranych kolorów i fontów? Nie można zapomnieć o obrazach!
Sprawy techniczno-techniczne, rodzinne i inne takie. 👀
Widzieć czy nie widzieć? Z prawej, a może z lewej?
Odpowiedzi na te i inne pytania znajdziesz w tym dziale.
Wstęp do obszernego świata animacji i transformacji.
A i o tłach będzie co nieco.
Magia, która sprawia, że strona wyświetla się poprawnie zarówno na małym telefonie jak i na największym ekranie komputera!
Każdy chce pisać dobry kod, ale nie każdy wie jak… Na szczęście ten problem nie będzie dotyczył Ciebie. 🙂
Czas na zadania i projekty, które utrwalą Twoją nowo nabytą wiedzę!
Zaczynamy budować doświadczenie. 💪
Kawał świetnej roboty za Tobą!
Zanim przejdziesz do kolejnej części kursu, czas na porcję ciekawostek!
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
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
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ę!
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ę
Z jakich przeglądarek korzystać?
Domyślne style przeglądarek
Narzędzia deweloperskie
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
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
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
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
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
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
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