Skip to content

Latest commit

 

History

History
659 lines (424 loc) · 19.4 KB

tasks.md

File metadata and controls

659 lines (424 loc) · 19.4 KB

Založíme si účet na Replit.com

  1. otevři si Replit
  2. Klikni na Sign up.
  3. Nyní máš 2 možnosti: přihlásit se prostřednictvím svého účtu na Facebooku či Googlu, anebo vytvořit účet.

1. varianta: prostřednictvím Facebooku/Googlu

  1. Klikni na správnou ikonku.
  2. Dotazníkem se nezabývej.
  3. Nic dalšího v Replit.com nepodnikej, stránku klidně zavři.
  4. Dej nám vědět, že máš hotovo, kliknutím na tlačítko „Hotovo“ na této stránce.

2. varianta: vytvořit účet na Replit.com

  1. Uživatelské jméno musí být 2‒15 znaků dlouhé.
  2. Zadej e-mail, na který máš přístup, přijde ti na něj ověřovací odkaz.
  3. Heslo musí být nejméně 6 znaků dlouhé.
  4. V dalším okně vyplň svůj profil (stačí skutečné jméno a příjmení ‒ zjednoduší to komunikaci).
  5. Dotazníkem se nezabývej.
  6. Podívej se do doručené pošty (prohledej i spam) a najdi e-mail od Replit.com s textem Verify your e-mail. Klikni na odkaz v něm obsažený a účet máš ověřen.
  7. Nic dalšího v Replit.com nepodnikej, stránku klidně zavři.
  8. Dej nám vědět, že máš hotovo, kliknutím na tlačítko „Hotovo“ na této stránce.

Shrnutí zkratek

Základní

Home End začátek, konec řádku

Ctrl+A Výběr všeho

Ctrl+C Kopírovat výběr nebo bez výběru pro celý řádek

Ctrl+V Vložit

Ctrl+X Kopírovat a smazat (vyjmout) výběr nebo bez výběru pro celý řádek

Tab odsazení přidat Shift+Tab ubrat
lze odsazovat více řádků najednou

Ctrl+Enter spustit kód (to samé, co kliknutí na zelené tlačítko run)

Další

Ctrl+→ Posun po slovech doprava

Ctrl+← Posun po slovech doleva

Ctrl+Shift+→ Výběr po slovech doprava

Ctrl+Shift+← Výběr po slovech doleva

Shift+Alt+F zformátovat celý dokument

F1 nebo Ctrl+Shift+P vyhledávání ve všech dostupných příkazech

Pokročilé

Ctrl+K Ctrl+C zakomentuje/odkomentuje řádek (není nutno vybírat)

Ctrl+D Najde další výskyt vybraného (označeného) textu

Ctrl+I vybere celý řádek

Alt+G přenese kurzor na zadané číslo řádku

01 Osaháme si Replit.com a klávesové zkratky

  1. Otevři si výchozí cvičení a nahoře klikni na fork.
  2. Podívej se pod ozubené kolečko (nastavení): nastav si velikost textu (font size) a barevné schéma (theme) tak, abys kód dobře viděla.
  3. Dále si případně pod ozubeným kolečkem nastav: code intelligence na disabled
  4. Ve složce podklady nalezneš soubor texty.txt. Vyber z něj všechen text Ctrl+A, zkopíruj ho Ctrl+C a vlož ho do souboru index.html Ctrl+V místo komentáře v souboru (šedý text).
  5. Klávesovou zkratkou Ctrl+Enter (na Macu Cmd+Enter) aktualizuj náhled stránky.
  6. Opět dej prosím „Hotovo“.

Shrnutí výkladu

<h1>Nadpis nejvyšší úrovně</h1>

<h2>Nadpis druhé úrovně</h2>

<h3>Nadpis třetí úrovně</h3>

<p>odstavec</p>

<strong>důležitý text</strong>

02 Vytvoříme základní strukturu stránky

  1. Vytvoř nadpis nejvyšší úrovně (název webu) z textu „Adéla na cestách“.
  2. Nadpisy 4 hlavních sekcí budou nadpisy 2. úrovně: O mně, Fotogalerie, Turistický průvodce, Kontakt
  3. V sekcích Průvodce a Kontakt jsou ještě nadpisy 3. úrovně:Orientační ceník, Kontaktní údaje.
  4. Zbývající texty uvnitř sekcí jsou odstavce. Ceník zatím přeskoč.
  5. Patička je jen odstavec.
  6. Nezapomeň dát vědět, že máš hotovo a nezapomeň na to ani až dokončíš další úkoly.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus (pokud máš hotovo)

  1. Označ nadpisy E-mail a Mobil v sekci Kontakty jako důležitý text
  2. Zalom adresu na víc řádku pomocí značky <br> (nový řádek)

Shrnutí výkladu

<ul>
	<li>položka seznamu</li>
	<li>další položka seznamu</li>
</ul>

03 Ceník jako odrážkový seznam

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Z ceníku vytvoř odrážkový seznam.
  2. Dej hotovo a jestli chceš, můžeš se pustit do bonusového úkolu.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus (pokud máš hotovo)

  1. Ceník patří do tabulky. Mrkni se, jakou strukturu mají tabulky v HTML, a nahraď odrážkový seznam tabulkou.

Shrnutí výkladu

<a href="https://google.com">odkaz na Google.com</a>
<a href="mailto:[email protected]">[email protected]</a>

04 Přidáme odkazy

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. V sekci Kontakt (uvnitř odstavce) vytvoř odkaz z textu „napiš na email“. Odkaz povede na e-mailovou adresu [email protected].
  2. V témže odstavci vytvoř odkaz na Facebook z textu „ozvi na Facebooku“.
  3. V kontaktních údajích doplň znovu odkaz na Adélin e-mail.
  4. Vyzkoušej, že odkazy fungují!
  5. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus (pokud máš hotovo)

  1. Odkazem může být i telefonní číslo. Když na takový odkaz ťukneš na telefonu, vytočí se dané číslo a můžeš rovnou volat. Podívej se, co je potřeba napsat do atributu href, aby to fungovalo.

Shrnutí výkladu

<img src="adela.jpg" alt="Adéla">

Ctr+Alt+Shift+↑/Ctrl+Alt+Shift+↓ Pohybem nahoru/dolů se přidávají kurzory. Alt+Shift+I Vloží kurzor na každý řádek ve výběru Home End začátek, konec řádku (srovná kurzory na stejnou pozici)

05 Přidáme obrázky

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Přidej fotku Adély foto.jpg za nadpis O mně
  2. Přidej obrázek turistika.jpg za nadpis Turistický průvodce
  3. Přidej obrázek mapa.png před nadpis Kontaktní údaje
  4. Přidej 9 obrázků hory1-9.jpg za odstavec v sekci Fotogalerie. Ale použij vícenásobný kurzor! Nevíš, co to je? Za chvíli ti to předvedeme.
hory1.jpg
hory2.jpg
hory3.jpg
hory4.jpg
hory5.jpg
hory6.jpg
hory7.jpg
hory8.jpg
hory9.jpg
  1. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus (pokud máš hotovo)

  1. Odkazem můžeš obalit nejen text, ale třeba i obrázek. Vytvoř z obrázku mapy odkaz na mapy.cz.

Shrnutí výkladu

<head>
	…
	<title>Název stránky</title>
	…
</head>

06 Doplníme titulek

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Doplň titulek: Adéliny cesty po horách
  2. Abys viděla výsledek, je třeba stránku v samostatném okně. Klikni na ikonu se šipkou vpravo vedle adresního řádku v podokně s náhledem. V Replit.com totiž vidíme vlastně náhled stránky což stačí na vše, co dnes budeme dělat, kromě zobrazení titulku, kdy potřebujeme vidět stránku samostatně.
  3. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

p {
	color: white;
	background-color: black;
}

07 Obarvíme nadpisy a odkazy

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

Použij barvy ze souboru podklady/barvy.txt, ale zkus klidně i svoje vlastní barvy. Záleží jen na tobě, jak moc chceš, aby se tvůj web podobal vzorové stránce.

  1. Hlavní nadpis obarvi na červenou.
  2. Nadpisy 2. úrovně obarvi na hnědou.
  3. Odkazy budou hnědé.
  4. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

<head>
	…
	<link rel="stylesheet" href="nazev-stylopisu.css">
	…
</head>

08 Připojíme styly (a obarvíme nadpisy a odkazy)

  1. Připoj si style.css k HTML.

Shrnutí výkladu

p {
	font-style: italic;  /* nebo normal */

	font-weight: bold; /* nebo normal */

	font-family: sans-serif; /* nebo serif */

	font-size: 1.5rem;

	text-align: center; /* nebo left nebo right */
}

09 Upravíme písmo

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Všechny texty na stránce udělej bezpatkovým písmem (sans-serif) o velikosti 1.2rem.
  2. Všechny nadpisy patkovým písmem (serif) a kurzívou.
  3. Hlavní nadpis na střed a písmem velkým 5rem
  4. Nadpisy 2. úrovně jsou písmem velkým 3rem.
  5. Nadpisy 3. úrovně jsou písmem velkým 1.5rem.
  6. Odkazy kurzívou.
  7. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus

  1. Použij zajímavější písma. Na nadpisy písmo Playfair Display a pro všechen ostatní text nastav písmo Raleway.
  2. Abys je mohla používat, je potřeba připojit fonty ze služby Google Fonts. To se udělá připojením CSS (získá se na jejich stránce v závislosti na požadovaných písmech a jejich řezech). Do hlavičky dokumentu přidej následující link, který písma načte: <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i|Raleway:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
  3. Odteď s nimi můžeš v CSS pracovat, upravuj vlastnost font-family.

Shrnutí výkladu

<section>
	<h2>Nadpis</h2>
	<img src="foto.jpg" alt="fotka">
	<p>Úryvek novinky…</p>
</section>

<header> … </header>

<footer> … </footer>
section {
	background-color: #fff1e6;
}

10 Rozdělení stránky

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Obal hlavní nadpis značkou pro záhlaví.
  2. Obal odstavec s patičkou značkou pro zápatí.
  3. Rozděl zbytek stránky na sekce pomocí značek pro sekci.
  4. Všechny sekce stránky (O mně, Fotogalerie, Turistický průvodce a Kontakt) budou mít žlutou barvu pozadí (později změníme).
  5. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

<h1 class="tip">Nadpis článku</h1>
<p class="perex tip">Úvodní odstavec článku…</p>
.tip { color: blue; }
.perex { font-size: 1.2rem; }

11 Využijeme třídy

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Pomocí tříd nastav každé sekci jinou barvu pozadí (dej si pozor na dostatečný kontrast). Doporučené názvy tříd: omne, fotogalerie, pruvodce, kontakt
  2. Každá sekce bude mít jinou barvu pozadí. Střídavě béžovou a světle hnědou (#fff1e6, #f9e3d0). Případně vyzkoušej vlastní barvy.
  3. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

/* vícenásobný selektor */
h1,
a {
	color: crimson;
}

/* kontextový selektor */
.tip h2 { color: aqua; }

12 Zjednodušujeme kód

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Zjednoduš svoje CSS. Styly společné pro všechny nadpisy, nadpisy 2. a 3. úrovně spoj vždy do jednoho vícenásobného selektoru. Spoj i styly společné pro více sekcí. Pokud jsi postupovala správně, tvoje stránka se vizuálně nezměnila.
  2. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

a { color: navy; }
a:hover { color: red; } /* najetí myší */
a:focus { color: green; } /* aktivace klávesnicí */ 
a:visited { color: purple; } /* navštívený */
a:active { color: yellow; } /* při kliknutí */

13 Změníme vzhled odkazů po najetí myši

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Všechny odkazy po najetí myši změní barvu písma a pozadí.
  2. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

.tip {
	width: 300px;
	height: 100px;
	max-width: 100%;
}

14 Nastavíme obrázkům v galerii šířku

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Obrázky v galerii budou široké 30% stránky.
  2. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

p {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

/* totéž pomocí shorthandu */
p {
	border: 1px solid black;
	border-radius: 6px;
}

15 Orámujeme obrázky

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Nastav obrázkům v galerii hnědý rámeček (třeba #756158) široký 2 pixely.
  2. Zaobli obrázkům rohy.
  3. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

.tip { padding: 1rem; }

16 Odsazení sekcí

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Všem sekcím na stránce nastav padding tak, aby měly naše barevné pruhy pěkné odsazení.
  2. Nastav horní a dolní padding patičce.
  3. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

.tip { 
	float: left; /* nebo right */
	margin-bottom: 1rem; /* -top, -right, -bottom -left */
}

17 Obtékání obrázků

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Obrázkům v sekci O mně, Turistický průvodce a Kontakt přidej CSS třídy foto-omne, foto-pruvodce, foto-kontakt.
  2. Pro jednotlivé třídy nastav obtékání zprava nebo zleva podle grafického návrhu stránky ve složce podklady.
  3. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus

  1. Nastav fotce v sekci O mně menší šířku a takový border-radius, aby byla úplně kulatá. Tip: použij procenta.
  2. Fotce v sekci Turistický průvodce nastav border-radius jen pro 3 rohy.

Shrnutí výkladu

<nav>
	<a href="#omne">O mně</a>
	<a href="#fotogalerie">Fotogalerie</a>
</nav>

…

<section id="omne"> … </section>

18 Přidáme navigaci

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Mezi hlavičku stránky a sekci O mně přidej navigaci pomocí tagu <nav>.
  2. Dovnitř vlož odkazy pro všechny sekce stránky.
  3. Aby ti navigace fungovala, musíš ještě přidat atribut id jednotlivým sekcím.
  4. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Shrnutí výkladu

a { display: block; }

p { display: inline; }

li { display: inline-block; }

19 Odkazy v navigaci do pruhu

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Odkazy vycentruj.
  2. Aby se na ně lépe trefovalo, bylo by fajn jim dát nějaký padding. Ale aby to fungovalo, musíš jim změnit vlastnost display.
  3. Podbarvi navigaci hnědou barvou (třeba #282425).
  4. Odkazům dej bílou barvu písma, aby byly čitelné.
  5. Změň odkazům barvu pozadí po najetí myši (třeba #756158).
  6. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus

  1. Abys dodržela předlohu, doplň navigaci horní ohraničení. Ohraničení má být světle hnědé (třeba #9c8175).
  2. Odstraň odkazům v navigaci podtržení pomocí vlastnosti text-decoration. Zjisti si jak.

Shrnutí (místo) výkladu

background-image: url('obrazky/hlavicka.jpg');
background-position: center;
background-repeat: no-repeat; /* nebo repeat, pokud chceme, aby se obrázek opakoval */

20 Záhlaví s fotkou na pozadí

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

  1. Záhlaví přidej obrázek na pozadí pomocí vlastnosti background-image.
  2. Nechceme, aby se obrázek opakoval, proto mu nastav background-repeat na no-repeat.
  3. Obrázek na pozadí vycentruj.
  4. Aby byl obrázek vidět celý, dej hlavnímu nadpisu opravdu velký svislý padding (aspoň 150px).
  5. Jestli chceš mít obrázek roztažený pěkně do kraje, vynuluj margin na prvku body.
  6. Dej hotovo.

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Bonus

  1. Pro lepší kontrast změň barvu hlavního nadpisu na bílou.
  2. Vlasnost background-size umožňuje nastavit velikost pozadí. Nastav ji na hodnotu cover, aby obrázek vždy vyplnil celou hlavičku (i kdyby měl prohlížeč obrázek zvětšit víc, než na 100%)

21 Vylepšíme tabulku

Pokud jsi nestihla předchozí cvičení, udělej si znovu fork z této verze

Aby web odpovídal předloze, zbývá dotáhnout tabulku.

  1. Buňkám v pravém sloupci přidej třídu cena.
  2. Buňky s třídou cena zarovnej doprava.
  3. Aby bylo zarovnání doprava výrazné, přidej ještě levý padding asi 3rem.
  4. Všem buňkám přidej spodní ohraničení hnědou barvou (třeba #756158)

Pokud si nejsi jista, podívej se, jak má výsledek vypadat

Publikujeme hotový web na internet

  1. V podokně s náhledem stránky klikni na iknou se šipkou vpravo vedle adresního řádku.
  2. Na nové záložce vidíš svou stránku. Na adrese, kterou vidíš v adresním řádku je tvůj web veřejně k vidění.
  3. Máš hotovo!