Diskuze – Lekce 14 - Obtékání v HTML - Float, Stín
ZpětUpozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.
Podrobnější vysvětlení flexboxu a gridu jsem našel v těchto lekcích
kurzu o responzivním webdesignu 
https://www.itnetwork.cz/…nich-layoutu
https://www.itnetwork.cz/…grid-systemu
https://www.itnetwork.cz/…flexbox-grid
https://www.itnetwork.cz/…ystem-od-css
Jaromír Křížek:7.6.2022 11:22
Ahoj Lubore, to s tím debuggerem v prohlížeči zní zajímavě. Napsal bys
prosím nějaké bližší info jak ho použít? Děkuju
Lubor Pešek:7.6.2022 11:53
S radostí.
Já tedy používám operu (prosím nelynčovat:D Vím, že je nás ve světě
cca 1,2% 
, ale na chromu je
to podobné, protože opera vychází prý z google jádra)
- Normálně si zobrazíš svoji stránku v prohlížeči
- Kdekoliv na stránce klikneš pravým myšítkem a zvolíš položku:
v opeře revize prvků (klávesová zkratka Ctrl + Shift + C)
v chromu prozkoumat (klávesová zkratka F12)
- Otevře se ti napravo lišta debuggeru. On to není jenom debugger, ale kompletně celá vývojářská správa stránky. Takže kupříkladu tady hned v záložce Elements najdeš konkrétní HTML tagy, třídy atd. Když si tu záložku trošku roztáhneš doprava, tak spodní část (Styles) se ti přehodí doprava a je to pak přehlednější.
To samé jak v Opeře, tak v Chromu. Pozor!! Abys tedy měl tu záložku stylů, musíš nahoře přepnout na záložku Elements (v obou případech)
- No a když už jsi v těch stylech, tak si v záložce Elements přepneš na určitou část, kterou chceš zkoušet. Nemusíš to ani hledat složitě v kódu. Existuje velmi snadný způsob, jak vybrat element. Nahoře vedle záložky Elements (vlevo od ní) máš k dispozici tlačítko se šipkou (viz obrázek v příloze). To, když klikneš, tak ti na jeden klik přestane stránka fungovat, ale naopak všechno, na co bys klikl, tak se ti označí v tom stromu Elementů.
- V momentě, kdy to máš označený nějaký element, tak vpravo se ti ve
stylech zobrazí i jeho css (trošku to dává i smysl Co jiného bys ve stylech chtěl
hledat )
No a ty si je různě můžeš právě editovat a veškeré změny se ti
dynamicky ihned projevují na stránce.
Dokonce je to tak chytré, že když máš kurzor třeba na nějaké hodnotě
(dejme tomu 25px) a buď točíš kolečkem na myšce a nebo zmačkneš šipky
nahoru a dolů, tak ti to o jeden bod vždy zvyšuje/zmenšuje hodnotu
Současně si tam můžeš přidávat nové styly a právě si s nimi takto
hrát. Nebo když je v check boxu zakážeš, tak naopak ten styl na chvíli
deaktivuješ. Nebo jej můžeš rovnou celý smazat, prostě můžeš si s tím
takto hrát.
POZOR!! Neukládá se to do souboru. Všechno, co provedeš, tak je pouze v
tomto okamžiku. Jak refreshneš stránku, máš tam zase styly z css
souboru.
Můžeš si samozřejmě tyto styly pak zkopírovat a uložit do csska. Pak je
tam budeš mít.
Nebo je tam přímo možnost uložit css jako (pravým kliknutím někam do toho
kódování v záložce styles a vybereš volbu).
Pokud by bylo něco nejasného, dej vědět. Rád ještě objasním.
Lubor Pešek:7.6.2022 12:06
Jinak jen pro doplnění (co třeba já používám a snad se tu najde někdo
také ochotný, kdo se nebude posmívat, že nevyužívám všechno, ale zmíní
i zbylé funkce tohoto vývojářského nástroje:) )
Console **- to je prostě output. Určitě v lekci Javascriptu o něm
bude zmínka. Je to prostě to samé, jako v Javě nebo jakémkoliv jiném
jazyce výstupní konzole. Tam třeba i najdeš různé chyby, když ti aplikace
padá případně výpisy, co apka provádí. Prostě pro vývojáře je výpis
vždy nezbytnou součástí.
**Sources - toto je přímo skutečný debuger. Problém je, že
přímo v čistém HTML je ti asi na nic (nebo nevím o tom, jak jej v HTML
použít), ale třeba v angularu či přímo v samotném JavaSriptu (či
TypeScriptu, to je už fuk) si můžeš tady najít soubor, který chceš
vydebuggovat, zarazíš si breakpoint na konkrétní řádek, refreshneš
stránku a při skriptování (čtení stránky interpretem) ti interpret
zastaví na tvém breakpointu a ty si můžeš vesele debuggovat jako
normálně.
Můžeš si to třeba vyzkoušet na velmi jednoduchém skriptíčku.
přidej si třeba na začátek stránky ihned za tag <body> tohle:
<script>
alert("To mi ho vyndej");
</script>No a pak si tu stránku spusť v prohlížeči. Hned po načtení ti
samozřejmě vyskočí okno se slušným nápisem. Zvol OK, jdi do
vývojářské lišty (viz popis v předchozím komentáři), přejdi na
záložku source, vyhledej si v levém stromu ten soubor, který jsi editoval a
na řádek s alert("To mi ho vyndej"); si hoď breakpoint (prostě klikni na
číslo toho řádku) a pak stránku přes F5 znovu načti.
No a zastaví ti to před tím, než spustí to okno. Nahoře pak máš v tom
debuggeru šipečku, kterou pokračuješ k dalšímu break pointu či až do
konce čtení stránky.
Je to blbůstka, ale jen na ukázku
Pak ještě osobně využívám Network záložku, ale to více méně když potřebuji zjišťovat aktuální IDčka či klíčky u provolaných služeb atd (spíš na kontrolu nebo při nastavování restových OAuth autorizací atd)
Zobrazeno 10 zpráv z 250.