Kódím.cz
4

BEM a responzivní design 1

Podíváme na princip psaní CSS pomocí metodiky BEM a uvedeme responzivní design. Vysvětlíme si, co znamená mobile-first, proč a jak bychom tak měli kódovat stránky.

1
Zájezdy

Použijte šablonu cviceni-BEM. Naklonujte si repozitář a spusťte si npx serve.

Na stránce je připravený obsah stránky se zájezdy. Prohlédněte si strukturu HTML souboru a také soubor style.css. Všechny styly už jsou připravené, jen je potřeba přiřadit v HTML správným prvkům správné CSS třídy. Zájezd má třídu holiday a následně elementy uvnitř mají odpovídající třídy jako holiday__title a další.

Podívejte se na výsledek:

výsledek

Pokud nevíte, odkud začít, ve složce se zadáním je soubor BEM_cviceni_hint, kde je nápověda, jak třídy přiřadit.

Pokud vám zbyde čas, můžete si odkomentovat obsah a nastylovat i další kartičky se zájezdy.

výsledek

Řešení