update instructions and tips

README.md

@@ -4,7 +4,7 @@
 
 ## **Podmínky závěrečné práce budou řečeny před začátkem práce**
 
-## **Podmínky a zadání se může v průběhu měnit dle potřeby.**
+## **Podmínky, zadání a obsah se může v průběhu měnit dle potřeby.**
 
 # Zadání
 
@@ -12,6 +12,7 @@ Jednoduchá webová aplikace pro procvičení HTML, CSS, JS a aplikování a vyu
 
 ***Lore*: Vašim úkolem je vytvořit jednoduchou aplikaci pro začítající softwarovou firmu *MacroHard onfire***
 
+
 Aplikace bude obsahovat 3 stránky a budou mít název v menu:
 
 - index.hmtl - Domů
@@ -19,6 +20,7 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu:
 - contact.html - Kontakt
 
 ## Všechny stránky budou obsahovat
+### template.html obsahuje přčedpřipraveny layout header,main,footer
 
 - Horní navigační panel (navbar) obsahující:
   - Název aplikace (vaše příjmení)
@@ -34,16 +36,15 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu:
 
 ### Domů
 
-- uvítací pole *(example Heroes)* obsahující: 
+- uvítací pole *(example Heroes - ukazka Centered hero bez obrázku)* obsahující: 
   - název firmy
   - delší text (lorem)
-  - tlačítko "Zjistit více" (barva *warning*)
-- 3 Sloupce *(example Features)*
+  - tlačítko "Zjistit více" (barva *warning*) - ma funkci designu (někdo jiný už si to zprovozní ☺)
+- 3x Sloupec *(example Features - první bez ikon)* obsahující
   - Jednoslovný nadpis
   - lorem odstavec
-  - Tlačitka modální (modal) - každý bude obsahovat Lorem text a tlačítko na zavření
-  - tlačka budou obsahovat `d-flex justify-content-around`
-- horizontální čáru
+  - Tlačítko modální (modal) - každý bude obsahovat Lorem text a tlačítko na zavření
+- horizontální čáru `hr`
 - jednoduchý článek
   - *Display-2* s textem "Webové technologie"
   - *Lean text*  s lorem textem o 15 slov
@@ -58,9 +59,9 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu:
     - název (náhodné jméno)
     - krátky popis (lorem 10 slov)
     - na kartu použít třídy `col-6 col-md-4 col-xl-2`
-- horizontální čáru
-- List Group o 10 různých ovocích 
-  - jednotlivé prvky budou přes `<button>`
+- horizontální čáru `hr`
+- List Group o 10 různých ovocích
+  - jednotlivé prvky budou přes `<button>` (takže budou mít i *hover effekt*)
 
 ### Kontakt
 
@@ -71,4 +72,34 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu:
   - textarea s placeholder "Napište nám"
   - Tlačítko na reset formuláře
   - Tlačítko na odeslání formuláře
-    - toto tlačítko bude po stiknutí vypíše do ALERT jenom *textarea*
+    - toto tlačítko bude po stiknutí vypíše do ALERT jenom *textarea*
+
+____________
+
+## užitečné odkazy
+
+https://getbootstrap.com/docs/5.0/getting-started/introduction/
+
+https://icons.getbootstrap.com/
+
+https://getbootstrap.com/docs/5.0/examples/ (examply které by se mohli hodit: *Heroes, Features, Cheatsheet, Carousel*)
+
+https://getbootstrap.com/docs/5.0/layout/grid/
+
+https://getbootstrap.com/docs/5.0/content/typography/
+
+https://getbootstrap.com/docs/5.0/forms/input-group/
+
+https://getbootstrap.com/docs/5.0/forms/range/
+
+https://getbootstrap.com/docs/5.0/components/buttons/
+
+https://getbootstrap.com/docs/5.0/components/card/
+
+https://getbootstrap.com/docs/5.0/components/list-group/
+
+https://getbootstrap.com/docs/5.0/components/modal/
+
+https://www.w3schools.com/jsref/prop_textarea_value.asp
+
+https://www.w3schools.com/jsref/met_win_alert.asp

template.html

@@ -15,6 +15,7 @@
     <div class="container">
             <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
               <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <!-- V názvu využit <i> s třídama od knihovny Bootstrap Icons -->
                 <span class="fs-4">Name <i class="bi bi-arrow-down-circle"></i></span>
               </a>        
               <ul class="nav nav-pills">
@@ -34,6 +35,7 @@
     <!-- Footer - zakončení stránky -->    
     <footer class="footer mt-auto">
             <div class="nav justify-content-center py-2  mb-3">
+              <!-- Využité icony z knihovny Bootstrap Icons -->
                 <i class="bi bi-text-left"></i> Footer <i class="bi bi-text-right"></i>
             </div>
     </footer>