Tutorial video, wersja MP3

Mirosław Zelent

W poprzednim odcinku kursu dokonaliśmy starannego przeglądu znaczników HTML, zaś w tym odcinku przepracujemy wszystko co na pewno trzeba do egzaminu wiedzieć, jeśli chodzi o arkusze stylów CSS.

Znajdź w filmie

Nasze tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:13 ] Tytułem wstępu
[ 00:02:34 ] Omówienie plików projektu
[ 00:03:49 ] Jaką witrynę wykonamy?
[ 00:04:14 ] CSS = kaskadowe arkusze stylów
[ 00:04:31 ] Selektory, atrybuty, wartości
[ 00:06:17 ] Identyfikator ID i klasa CLASS
[ 00:08:01 ] Kiedy użyć klasy a kiedy identyfikatora?
[ 00:11:20 ] Podstawowe rodzaje selektorów
[ 00:12:00 ] Różne metody dołączenia stylów CSS do HTML
[ 00:16:08 ] Klauzula !important
[ 00:18:06 ] Wyśrodkowanie elementu, automatyczne marginesy
[ 00:19:38 ] Operator myślnika "-", hierarchia atrybutów
[ 00:20:29 ] Tło elementu: background
[ 00:21:27 ] Ścieżka do pliku zewnętrznego: url, background-image
[ 00:23:05 ] Powtarzanie tła: background-repeat
[ 00:24:59 ] Pozycja tła: background-position
[ 00:27:22 ] Tworzenie struktury witryny
[ 00:30:29 ] Krój czcionki: font-family
[ 00:31:21 ] Rozmiar czcionki: font-size
[ 00:32:10 ] Waga czcionki: font-weight
[ 00:32:46 ] Styl czcionki: font-style
[ 00:33:20 ] Wyrównanie tekstu: text-align
[ 00:33:54 ] Zmiana wielkości liter: text-transform
[ 00:34:41 ] Odstęp pomiędzy znakami: letter-spacing
[ 00:38:44 ] Wysokość linii tekstu: line-height
[ 00:39:17 ] Nadawanie odstępów: margin, padding
[ 00:39:48 ] Nakładanie się (collapse) pionowych marginesów
[ 00:40:37 ] Przykłady koniecznego użycia paddingu
[ 00:41:24 ] Możliwe zapisy marginesów w CSS
[ 00:45:32 ] Obramowanie: border
[ 00:47:25 ] Stylizowanie list (ul, ol)
[ 00:49:38 ] Uchwycenie kilku list z użyciem klas
[ 00:51:41 ] Wygląd markera listy: list-style-type
[ 00:53:18 ] Obraz jako marker listy: list-style-image
[ 00:54:08 ] Pozycja markera listy: list-style-position
[ 00:55:34 ] Zapis złożony (potrójny): list-style
[ 00:56:20 ] Uchwycenie elementu listy (li)
[ 00:58:00 ] Stylizowanie hiperłączy (a href)
[ 00:59:33 ] Wyróżnienie tekstu: text-decoration
[ 01:00:12 ] Stylizowanie hiperłączy z użyciem pseudoklas
[ 01:03:11 ] Stworzenie kilku rodzajów linków w podstronie
[ 01:05:32 ] Zapis kolorów w CSS, zapis szesnastkowy
[ 01:06:37 ] Zapis dziesiętny koloru - z użyciem rgb()
[ 01:08:23 ] Skrócony, trzyznakowy zapis szesnastkowy koloru
[ 01:08:51 ] Color pickery, trening interpetowania barw
[ 01:09:13 ] Nieprzezroczystość: opacity
[ 01:10:17 ] Nadawanie przezroczystego koloru: rgba()
[ 01:11:08 ] Położenie elementu: position
[ 01:11:46 ] Pozycja statyczna - position:static
[ 01:13:49 ] Pozycja relatywna - position:relative
[ 01:15:05 ] Pozycja absolutna - position:absolute
[ 01:16:17 ] Pozycja ustalona - position:fixed
[ 01:17:37 ] Słowo końcowe
[ 01:18:15 ] Podsumowanie odcinka na slajdach

Pobierz wersję MP3

Dobrym rozwiązaniem w czasie przygotowań do egzaminu jest pobrać sobie odcinki w formacie mp3, aby w wolnej chwili (kiedy np. ćwiczysz fizycznie, podróżujesz) wrzucić sobie tutorial na słuchawki i odtworzyć w umiarkowanym skupieniu, aby osłuchać się wstępnie z nowym tematem. Natomiast jeśli tutorial zawiera momenty, w których prowadzący wykonuje jakieś konkretne działania na pulpicie komputera, to spróbuj następującego ćwiczenia: postaraj się zwizualizować sobie co dzieje się na video, mimo iż tylko słyszysz co prowadzący zapisuje, klika, zaznacza, zmienia.

A następnie, po powrocie do domu, zajrzyj na ile to czego się spodziewasz, odbiegać będzie od rzeczywistej czynności ukazanej na filmie. Przypomina to trening szachistów, którzy rozgrywają partie na wirtualnej szachownicy w swojej głowie - to fantastyczne ćwiczenie, gdyż pozwala głębiej zapamiętać oraz zrozumieć co i dlaczego zostało wykonane.

Poprzedni wpis