Jak nauczyć się robić proste szablony WWW?

Question

Jak mogę nauczyć się robić od zera proste czytelne szablony, bez frameworków, z minimalną ilością JavaScriptu niezbędną do zapewnienia użytkownikowi dobrego doświadczenia, działających na najważniejszych przeglądarkach internetowych? Nie chcę pchać niepotrzebnego bloatu w swoje strony internetowe

Chcę, aby robione przeze mnie szablony były w podobnym stylu i klimacie co ten na stronie slackware.com

Answer 1

Slackware to naprawdę stara strona, która stoi na php i czystym HTML używając tabeli do layoutu (tak dla jasności, nie powinno się już tak robić).

Jak chcesz coś naprawdę prostego to normalnie robisz stronę i używasz backendu do wypełniania zawartości (php też starczy). Osobiście używam text/template w Go.

Alternatywnie masz jeszcze framework typu HUGO, który z templatek/motywów i plików markdown generuje statyczne strony, fajna opcja do dokumentacji czy bloga.

Answer 2

Frameworki i inne tego typu rzeczy nie są na ten moment dla Ciebie .

Zainteresuj się trochę układem stron robionych na floatach , Mirek w jednym swoich kursów to pokazuje na YT. Potem już z czasem jak załapiesz HTML, CSS możesz zainteresować się Gridem albo Flexem .

1. https://miroslawzelent.pl/kurs-html/struktura-witryny-metoda-float-left-clear-both/

2. https://youtu.be/k2IydkL3EOs

Zacznij od kompletnych podstaw. Ewentualnie odzywaj się do mnie.

Co do podstaw . HMTL - Czyli struktura strony , tabele i inne pierdoły które wielu uważa za nie potrzebne . oraz CSS stylizowanie elementów ale na początku na FLOATACH, że tak nazwę.

Comments

Czemu na floatach? IMO flexbox i grid są o wiele lepsze na start, bo powstały jako systemy layoutowe i layouty tworzone przy ich pomocy mają sens. Te na floatach – niekoniecznie,  zwłaszcza że trzeba różnych dziwnych sztuczek, żeby całość się trzymała w ryzach (np. clearfix).

---

Masz rację, że flexbox i grid są nowocześniejsze i wygodniejsze – w pełni się zgadzam.
Ale moim zdaniem floaty też uczą paru istotnych zasad CSS-a, np. jak działa box model, clear, display, itp.

Flex i grid ułatwiają wiele rzeczy:

• równe kolumny,

• wyrównywanie elementów,

• automatyczne dopasowanie rozmiarów.

Floaty zmuszają do zrozumienia, co dzieje się „pod spodem”. Uważam, że to dobre fundamenty, żeby potem lepiej docenić flexa i grida.

To tylko moja perspektywa – każdy uczy się inaczej

---

Nie zgodzę się, że akurat float uczy tego, co dzieje się "pod spodem". Uczy w takim samym stopniu jak flexbox czy grid. Przy każdym z nich trzeba wiedzieć, czym jest box model, tak samo czym jest display (a przy fleksie i gridzie nawet bardziej, bo przecież tak się je włącza – przy pomocy odpowiednich wartości display; float jest tylko pośrednio związany z tą własnością, przez interakcje, w jakie wchodzą pływające elementy z elementami o konkretnych display).

---

Też podzielam opinie Comandeer-a.

AFAIK,

Pierwotne przeznaczenie float (zgodne ze specyfikacją CSS 1 z 1996 roku):

Umieszczanie elementów (głównie obrazków) wewnątrz tekstu, tak aby tekst owijał je dookoła.

Inspirowane układami typograficznymi w druku:
Podobnie jak w gazetach czy czasopismach – obrazki są często umieszczane po lewej lub prawej stronie kolumny tekstu, a tekst "owija się" wokół nich. float miał to właśnie umożliwiać.

Nie był zaprojektowany do tworzenia pełnych układów stron (layoutów).

Problemy z użyciem:

• Wymóg "czyszczenia" (clear: both; lub clearfix),

• Nieprzewidywalne zachowanie przy zmianach zawartości,

• Brak naturalnego wsparcia dla siatek/kolumn,

• Utrudnione responsywne projektowanie.

---

Każdy może mieć swoje zdanie opinię. Tak samo jak przyjmuję każdą krytykę tak ja tylko wyrażam swoją opinię :-) jestem dużo mniej doświadczony i może się mylę nie mówię , że nie. Posiedzę w tym trochę dłużej to za jakiś czas wam po prostu mogę napisać , że macie rację i tyle :)