emarichterova / PROJEKT-Penzion

Domácí úkol Penzion pro kurz Staň se kóderkou.

Home Page:https://ema-projekt-penzion.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Penzion u vody

Povinný úkol pro kurz Staň se kóderkou od Czechitas.

Než začneš s projektem cokoliv dělat, přečti si prosím celý tento text až do konce.

Tentokrát jako podklad dostáváš kompletně nakódovaný web o pěti stránkách. Tvým úkolem je udělat z něho Eleventy projekt, z částí stránky společných pro celý web udělat šablonu, ve stránkách samotných nechat pouze obsah a vše nastavit tak, aby výsledkem byl opět hotový a funkční web. Tento web pak vystav na Netlify.

Ukázka výsledku

Cíl úkolu

Cílem tohoto úkolu je hlavně vyzkoušet si základní práci s generátorem statických webů Eleventy:

  • Práce s Eleventy
    • součástí zadání je kompletně nakódovaný pětistránkový web (HTML, CSS, obrázky)
    • proveď v projektu npm init a nainstaluj Eleventy
    • nakonfiguruj Eleventy podle instrukcí v lekci Eleventy - konfigurace (hlavně aby se do sestaveného webu kopírovaly složky css a images)
    • v sekci scripts souboru package.json vytvoř dva skripty build a serve
    • spusť web lokálně pomocí skriptu serve a vyzkoušej, zda vše funguje správně
  • Vytvoření šablony
    • všech pět stránek webu má společnou hlavičku a patičku
    • vytvoř ze společných částí šablonu podle instrukcí v lekci Eleventy - První šablona
    • v HTML stránkách nech pouze obsah unikátní pro danou stránku
    • do stránek přidej front matter a nastav stránky tak, aby používaly vytvořenou šablonu
    • v HTML (v šabloně i v obsahu) a v CSS uprav cesty k obrázkům, stylům, apod. tak, aby začínaly lomítkem a ukazovaly na správné soubory
    • v šabloně uprav menu, aby ukazovalo na správné adresy stránek, až Eleventy vygeneruje výsledný web
  • Práce s Gitem
    • ověř, že v souboru .gitignore ignorujeme složku _site a node_modules, protože ani jednu z nich v Gitu nechceme ukládat
    • proveď commit a push řešení na GitHub
  • Netlify
    • pokud ještě nemáš, tak si vytvoř účet na Netlify
    • na Netlify si založ nový web podle instrukcí v lekci Eleventy - Publikování na Netlify
    • jako zdroj pro vytvořený web nastav svůj GitHub repozitář s tímto úkolem
    • pokud se na Netlify podaří web sestavit a publikovat, zkopíruj jeho adresu a vlož ji do popisu GitHub repozitáře, aby koučové mohli zkontrolovat, zda ti web na Netlify opravdu běží

Bonusové úkoly

Kdyby ti chybělo kódování HTML a CSS a máš-li hotovou povinnou část úkolu, můžeš si s úkolem dál pohrát:

  • Responzivní webdesign
    • v CSS je nakódovaná pouze počítačová verze webu
    • vymysli, jak by mohla vypadat mobilní a tabletová verze a doplň je do CSS
    • nezapomeň, že používáme přístup mobile first, takže je pravděpodobné, že části již hotového CSS budeš muset trochu přeskládat
  • Kódování CSS
    • pokud se opravdu nudíš, můžeš obsah CSS souboru kompletně vymazat a celý web si nákódovat od začátku sama
    • když budeš chtít, můžeš použít i Sass
  • BEM
    • v extrémním případě, že ani předchozí úkol nezahnal tvoji nudu, můžeš vymazat i obsah HTML souborů a nakódovat si i celou strukturu webu
    • odhodláš-li se k tomuto kroku, snaž se při kódování HTML držet metodiky BEM pro pojmenování tříd

Jak si stáhnout podklady

  1. Udělej si fork této repozitáře - tím se ti úkol zkopíruje do tvého GitHub profilu.
  2. Forknutou repozitář si naklonuj k sobě na disk.

Pokud nevíš, co je to fork repozitáře a jak ho provést, podívej se na krátké video.

About

Domácí úkol Penzion pro kurz Staň se kóderkou.

https://ema-projekt-penzion.netlify.app/


Languages

Language:HTML 51.1%Language:CSS 32.8%Language:Nunjucks 13.9%Language:JavaScript 2.2%