Kurs Tworzenia Stron WWW cz. 1
Pierwsza część kursu tworzenia stron internetowych, w którym poznasz podstawy HTML i CSS oraz stworzysz swoje pierwsze projekty!
- Certyfikat ukończenia
- Bezpłatne aktualizacje
- Dożywotni dostęp
Dożywotni dostępKupujesz raz, aktualizacje gratis.
łatwyPoziom
~10hCzas trwania
145Ilość lekcji
49złPłatność jednorazowa
Szczegóły
O kursie
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.
Brak wymagań
Wszystkiego nauczysz się od kompletnych podstaw. Nie musisz wiedzieć, czym różni się HTML od CSS.
Komputer i dobra kawa
To jedyne, czego Ci potrzeba, żeby zacząć.
Płatność
Płacisz jednorazowo na naszej platformie kursowej.
Zniżki
Aktualne zniżki znajdziesz na Discordzie, na kanale #zniżki.
Zostań częścią naszej społeczności i korzystaj ze specjalnych ofert!
Zwrot do 14 dni
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 14 dni od zakupu
- po przerobieniu więcej niż 30% kursu
- w przypadku zakupu na fakturę
Demo
Zajrzyj do środka
Podglądowy odcinek z kursu.
Program
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!
Zacznij już dziś
Kurs Tworzenia Stron WWW cz. 1
- Certyfikat ukończenia
- Bezpłatne aktualizacje
- Dożywotni dostęp
49złjednorazowo
Kup kurs161 lekcji
Lista odcinków
Wstęp i organizacja7
- 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 Code7
- 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 HTML22
- 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!13
- 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 internetowe3
- Z jakich przeglądarek korzystać?
- Domyślne style przeglądarek
- Narzędzia deweloperskie
Fonty, kolory i obrazy15
- 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 kombinatory13
- 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, position26
- 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 & transform13
- 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 Design9
- 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 kodu3
- Dobre praktyki pisania kodu
- Dlatego dbanie o kolejność jest tak ważne…
- Polish-english
Zadania i projekty17
- 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
Ciekawostki13
- 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
