Moduł 02 – HTML + CSS + Flexbox

Moduł kursu programowania o numerze 2, zatytułowany "HTML + CSS + Flexbox", skupia się na tworzeniu statycznych stron internetowych przy użyciu języków HTML i CSS.

W tym module omówimy, jak tworzy się statyczną stronę internetową w HTML i CSS, czyli językach opisujących odpowiednio strukturę i wygląd strony. Statyczną to znaczy, że strona nie będzie miała możliwości generowania treści na podstawie zalogowanego użytkownika czy bazy danych i nie będzie posiadała elementów, z którymi w interakcję będzie mógł wejść użytkownik. To omówimy później 😉

Chociaż w dzisiejszych czasach rzadko ktoś tworzy strony bezpośrednio w HTML i CSS, częściej korzysta się z tzw. frameworków JavaScriptowych, które zostaną omówione pod koniec kursu, nie można jednak pominąć "zwykłego" HTML-a, aby zdobyć solidne podstawy i zrozumienie tego, co dzieje się w przeglądarce 💪

📚 Zawartość modułu

Moduł "Narzędzia" jest podzielony na 51 lekcji:

1. Wstęp: Wprowadzenie do modułu i jego celu, przedstawienie tematów, które zostaną omówione.
2. Pierwszy znacznik: Przedstawienie podstawowego znacznika HTML i jego roli w tworzeniu struktury strony.
3. Struktura HTML: Omówienie struktury HTML, w tym znaczników nagłówka (head) oraz ciała (body).
4. Znacznik head: Wyjaśnienie roli i zawartości znacznika head w HTML.
5. Podstawy Emmet: Przedstawienie narzędzia Emmet, które przyspiesza pisanie, generując fragmenty kodu HTML.
6. Elementy HTML: Omówienie różnych elementów HTML, takich jak tekst, obrazy, linki, etc.
7. Elementy HTML - DIV: Szczegółowe omówienie znacznika div i jego zastosowań w tworzeniu struktury strony.
8. Elementy HTML - UL OL: Wyjaśnienie znaczników ul i ol do tworzenia list w HTML.
9. Elementy HTML - A cz. 1: Omówienie znacznika a, który służy do tworzenia hiperłączy w HTML.
10. Elementy HTML - A cz. 2: Kontynuacja tematu znacznika a, w tym ustawianie adresów URL i atrybutów.
11. Elementy HTML - IMG: Przedstawienie znacznika img do dodawania obrazów na stronie.
12. Elementy HTML - IFRAME: Omówienie znacznika iframe i jego zastosowań do osadzania treści z innych stron.
13. Mockupy, wireframey: Wprowadzenie do mockupów i wireframe'ów jako narzędzi planowania i projektowania stron internetowych.
14. Projekt 1 - HTML: Praca nad pierwszym projektem, który obejmuje tworzenie struktury strony w HTML.
15. CSS podstawy składni i załączanie do HTML: Wprowadzenie do CSS i wyjaśnienie podstawowej składni oraz sposobów dołączania CSS do dokumentu HTML.
16. Kolory w CSS: Omówienie różnych sposobów reprezentacji kolorów w CSS.
17. Podstawy selektorów: Przedstawienie różnych rodzajów selektorów w CSS do wybierania elementów do stylizacji.
18. Grupowanie selektorów: Wyjaśnienie grupowania selektorów w CSS i jego wpływu na stylizację.
19. Selektory łączone (kombinatory): Omówienie selektorów łączonych w CSS, takich jak potomkowie, dzieci, siostry, itp.
20. Pseudoklasy visited i hover: Przedstawienie pseudoklas visited i hover w CSS, które pozwalają na zmianę stylu odwiedzonych linków i interakcję z elementami po najechaniu kursorem.
21. Wybieranie elementów po tagu, id i klasie jednocześnie: Wyjaśnienie sposobów wybierania elementów w CSS przy użyciu kombinacji tagu, id i klasy.
22. Wagi selektorów (specificity) cz. 1: Wprowadzenie do wag selektorów w CSS i wyjaśnienie, jak określić, który styl zostanie zastosowany, gdy występuje konflikt.
23. Wagi selektorów (specificity) cz. 2: Kontynuacja tematu wag selektorów w CSS i przedstawienie bardziej zaawansowanych przypadków.
24. Dziedziczenie (inheritance): Omówienie dziedziczenia stylów w CSS i sposobu, w jaki pewne właściwości są dziedziczone przez elementy potomne.
25. Jednostki w CSS: Przedstawienie różnych jednostek używanych w CSS do określania rozmiarów, takich jak piksele, procenty, em, etc.
26. Jednostki w CSS - vw, vh: Wyjaśnienie jednostek vw (viewport width) i vh (viewport height) w CSS, które pozwalają na określanie rozmiarów względem szerokości i wysokości widoku przeglądarki.
27. Jednostki w CSS - procenty: Omówienie jednostek procentowych w CSS i ich zastosowań w responsywnym projektowaniu stron.
28. Overflow: Przedstawienie właściwości overflow w CSS, która kontroluje sposób obsługi zawartości, która nie mieści się w określonym obszarze.
29. Display, visibility, opacity: Omówienie właściwości display, visibility i opacity w CSS i ich wpływu na wyświetlanie elementów.
30. Box model, marginesy zewnętrze i wewnętrzne: Wyjaśnienie modelu pudełkowego (box model) w CSS i zastosowania marginesów zewnętrznych i wewnętrznych.
31. Box model — ramki: Przedstawienie właściwości box-model w CSS określającego przestrzeń, jaką zajmuje element (pudełka).
32. Box model – box-sizing: Wyjaśnienie właściwości box-sizing w CSS, która kontroluje sposób obliczania rozmiaru pudełka elementu.
33. Cienie: Omówienie właściwości cieni w CSS i ich tworzenia.
34. Zaokrąglone narożniki: Przedstawienie właściwości zaokrąglonych narożników w CSS i ich wykorzystania do tworzenia zaokrąglonych elementów.
35. Fonts: Wyjaśnienie różnych sposobów definiowania czcionek w CSS i zastosowania fontów zewnętrznych.
36. Iconfonty: Omówienie ikon fontowych i ich wykorzystania w CSS do wyświetlania ikon na stronie.
37. Obrazy tła: Przedstawienie techniki wykorzystywania obrazów tła w CSS do stylizacji elementów.
38. Pozycjonowanie (position): Wprowadzenie do właściwości position w CSS i sposobów pozycjonowania elementów na stronie.
39. Wstęp do flexbox — floaty: Zanim poznamy model pozycjonowania elementów – flexbox, omówimy jego poprzednika – float.
40. Flexbox - kolumny, flex-grow, flex-shrink, flex-basis, flex-wrap: Szczegółowe omówienie właściwości flexbox w CSS, takich jak tworzenie kolumn, flex-grow, flex-shrink, flex-basis i flex-wrap.
41. Flexbox - pozycjonowanie - centrowanie: Wyjaśnienie sposobów pozycjonowania i centrowania elementów przy użyciu flexbox w CSS.
42. Flexbox - pozycjonowanie - align-items, justify-content: Kontynuacja tematu pozycjonowania elementów w flexbox za pomocą właściwości align-items i justify-content.
43. Flexbox - kolejność elementów - flex-direction, order: Przedstawienie właściwości flex-direction i order w flexbox, które pozwalają na zmianę kolejności elementów.
44. Tabele - podstawy: Omówienie sposobu tworzenia tabel w HTML.
45. Tabele - th, tbody, theader, colspan, rowspan, style tabel: Szczegółowe omówienie różnych elementów i atrybutów tabel HTML, takich jak th, tbody, theader, colspan, rowspan i stylowanie tabel.
46. Wysyłanie formularzy: Wyjaśnienie procesu wysyłania formularzy w HTML i przetwarzania danych.
47. Pozostałe elementy formularzy: Przedstawienie innych elementów formularzy HTML, takich jak pola wyboru, pola tekstowe, checkboxy, itp.
48. Stylowanie formularzy - podstawy: Omówienie podstaw stylizacji formularzy za pomocą CSS.
49. BEM wprowadzenie: Wprowadzenie do metodologii BEM (Block, Element, Modifier) w CSS i jej zastosowania w organizacji kodu.
50. Projekt cz. 2 - HTML + CSS + Flexbox: Praca nad drugim projektem, który obejmuje zastosowanie HTML, CSS i flexbox do stworzenia statycznej strony.
51. Projekt cz. 3 - Semantyka HTML: Omówienie semantyki HTML i jej wpływu na strukturę i znaczenie elementów strony.

Moduł ten zapewnia uczestnikom kursu solidne podstawy w tworzeniu statycznych stron internetowych przy użyciu HTML, CSS i flexboxa.

👀 Zobacz przykładową lekcję z tej części kursu:

👨‍💻 Zobacz przykładowy kod z tej części kursu:

💸 Kup kurs

Kup cały kurs CodeRoad – TUTAJ

Kup ten moduł kursu – TUTAJ

💪 Odbierz bezpłatny kurs!