Programowanie webowe | 02. Float left vs. Display inline-block

Tutorial video, wersja MP3

Mirosław Zelent

Po zapoznaniu się z sekcją <head> witryny, pora najwyższa nauczyć się tworzenia struktury ciała witryny w sekcji <body> dokumentu HTML. Naszym celem dzisiaj jest zrozumieć sposoby tworzenia klasycznej siatki elementów blokowych, tak aby podczas egzaminu móc stworzyć zadaną strukturę w ciągu zaledwie 5-7 minut. W praktyce jednak, dzisiejszy odcinek zaprosi nas do eksploracji całej gamy przeróżnych metod budowania szkieletów witryn internetowych – od tabel, przez divy, po nowe znaczniki strukturalne wprowadzone w HTML5 i responsywne siatki (RWD = ang. Responsive Web Design).

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:15 ] Tytułem wstępu
[ 00:00:38 ] Nauka z pasji czy z przymusu
[ 00:03:30 ] Agenda wykładu, cel odcinka
[ 00:05:04 ] Wznowienie pracy od poprzedniego kodu
[ 00:06:02 ] Ustawienie subtelnego obrazu jako tła witryny
[ 00:09:16 ] Orientowanie grafiki tła względem CSS czy HTML?
[ 00:13:08 ] Elementy blokowe i ich domyślne zachowanie
[ 00:14:11 ] Struktura do wykonania w sekcji body
[ 00:14:33 ] Intuicja zastosowania tabeli do rozmieszczenia contentu
[ 00:16:25 ] Siedem grzechów głównych tabel jako fundamentu struktury
[ 00:19:35 ] Nowe znaczniki wprowadzone w HTML5, html5shiv
[ 00:20:09 ] Bootstrap na egzaminie?
[ 00:20:36 ] Holistyczna ewolucja umiejętności budowania struktur
[ 00:22:48 ] Zbiorczy kontener, wyśrodkowanie interfejsu
[ 00:24:45 ] Niewidzialny div, użycie opcji zbadaj
[ 00:25:42 ] Określanie roboczych wymiarów bloku
[ 00:26:28 ] Wyzerowanie domyślnych marginesów przeglądarki
[ 00:27:13 ] Wyśrodkowanie pojemnika na ekranie
[ 00:27:50 ] Tworzenie bloków interfejsu o domyślnym zachowaniu
[ 00:29:46 ] Ułożenie divów obok siebie - dwie klasyczne metody
[ 00:31:19 ] Realizacja struktury z użyciem opływania float:left;
[ 00:34:58 ] Przypadek wyjęcia jednego bloku z flow witryny
[ 00:36:57 ] Przypadek wyjęcia trzech bloków z flow witryny
[ 00:39:49 ] Poprawne wyczyszczenie floatu zapisem clear:both;
[ 00:41:23 ] Czy atrybut clear:both; jest zawsze potrzebny?
[ 00:43:50 ] Realizacja struktury z użyciem display:inline-block;
[ 00:44:32 ] Problem znaków białych w podejściu display:inline-block;
[ 00:46:05 ] Rozwiązanie 1: usunięcie znaków białych w HTML
[ 00:48:11 ] Rozwiązanie 2: negatywne marginesy bloków inline
[ 00:49:24 ] Rozwiązanie 3: font-size:0 kontenera i dodatni dla bloków
[ 00:51:12 ] Podsumowanie podejścia display:inline-block;
[ 00:52:44 ] Flexbox
[ 00:54:07 ] Optymalizacja wielokryterialna, umiejętności miękkie
[ 01:08:26 ] Tytułem podsumowania

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.

Pobierz plik MP3

Poprzedni wpis

Następny wpis