Mikuláš je tu! Získaj 90 % extra kreditov ZADARMO s promo kódom CERTIK90 pri nákupe od 1 199 kreditov. Len do nedele 7. 12. 2025! Zisti viac:
NOVINKA: Najžiadanejšie rekvalifikačné kurzy teraz s 50% zľavou + kurz AI ZADARMO. Nečakaj, táto ponuka dlho nevydrží! Zisti viac:

Diskusia – 14. diel - Obtekanie v HTML - Float, Tieň

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre
Posledné komentáre sú na spodnej časti poslednej stránky.
Avatar
Odpovedá na Josef Mašek
Václav Dachs:8.1.2022 22:53

Pod článkem je tlačítko: "Stáhnout web (lekce 10).zip, tam můžeš kouknout jak má výsledný zdrojový kód vypadat. Jo a když chceš do komentu vložit kód, nevkládej printscrean, ale klikni si na ikonu </> (slouží pro vkládání kódu) a kód do vzniklého oddílu zkopíruj. 😀

Odpovedať
S úsměvem jde všechno lépe :-)
Avatar
Mirek Nikel
Člen
Avatar
Mirek Nikel:18.1.2022 15:24

Je to dost nepřehledné, jedeme, postupujeme a jsme na konci a náš výsledek se autorovu nepodobá, jak by měl. Nutné se dopátrat kde a co autor změnil aby náš výsledek byl stejný, to se v článku nedočteme...

Avatar
Václav Janča:27.1.2022 21:42

No, když jsem se tu začal design učit, byl autorem Honza. Krok po kroku bylo vše vysvětleno, každý krok jsem chápal, až jsem se poměrně snadno dostal k finálnímu výsledku. Vynikající pro naprostého začátečníka kódem nepolíbeného. Nemusel jsem se nezbytně nikam jinam dívat nebo hledat další návody. Teď je autorem David, kterého si vážím a jehož schopnost vysvětlit různé programovací jazyky a postupy úplným začátečníkům, právě způsobem "krok po kroku", obdivuji. Asi má pravdu v tom, že tak jak byl tutoriál napsán Jenem, již není úplně aktuální podle moderních konvencí. Bohužel mi však tutoriál v současné podobě přijde pro naprosté začátečníky velice náročný. Konkrétně od odstavce "Flexbox" (včetně). Až do této kapitoly šel člověk postupně, a najednou musí začít studovat 9. lekci následujícího tutoriálu, aby alespoň rámcově pochopil co vlastně má udělat a hlavně proč. Pokud bych nyní začínal, zde bych asi skončil a buď se věnoval jiným tutoriálům na zdejším webu nebo bych to úplně vzdal s tím, že na to nemám. Dokonce bych si dovolil říct, že by pro mě bylo snad lepší naučit se nejdříve Hobiho tutoriál tak jak byl, s tím že takto se to již nedělá (podobně jako se učím v jiných tutoriálech nejprve procedurální a pak teprve funkcionální a objektové programování) a pak bych si své vědomosti postupně rozšiřoval. Vím, že se mi to mluví, když jsem sám žádný takový návod nenapsal. Na druhou stranu, mám určité zkušenosti s učením dětí a dokonce krátkou zkušenost i s mentálně postiženými a z této pozice si snad mohu dovolit upozornit na to, že co se jeví odborníkovi jednoduché, snadno pochopitelné, může být pro nezkušeného leckdy oříšek. Jinak cítím velký respekt k celému projektu a hlubokou vděčnost za to, co jsem se zde dosud naučil prakticky zadarmo. Je za tím obrovské množství práce. Zde ale, by to chtělo možná ještě trochu doladit, vzhledem k tomu, že právě tímto tutoriálem (alespoň myslím) spousta lidí začíná. Jistě, do budoucna se musí každý naučit samostatnosti, ale jak jsem již zmínil, nevím jestli bych u IT vydržel, kdyby mě Hobi až do konce mého prvního webu nevedl "za ručičku".

Editované
Avatar
Matej Quarda
Člen
Avatar
Odpovedá na Václav Janča
Matej Quarda:28.1.2022 12:53

Díky za ta slova. Vidím to naprosto stejně a i ve stejném místě (Flexbox) jsem zatím skončil, protože se v tom topím a nikde nevidím na blízku záchranný kruh. Sice nemám zkušenost s výukou dětí, ale za to dospělých ano a jsem taktéž toho názoru, že mi v mnoha místech chybí odpověď na otázku "proč?" a těch míst je nyní moc. Zcela přesné je pak vyjádření, že co přijde profíkovi jako naprosto samozřejmé, je pro totálního začátečníka jeden velký otazník. Znám to ze svého oboru, který je taktéž specifický a když jsem měl za úkol školit nové kolegy, byl to vždycky boj o to, oprostit se od toho "vždyť to přece ví každý" a jít cestou "tohle prostě nemusí umět, protože jim to nikdo neřekl, tak jim to budu muset vysvětlit já".
Rád bych se ve schopnostech nějak posunul, ale momentálně před sebou vidím jen obrovskou hromadu dřeva, přes kterou přelezu jen horko těžko.
A ještě jeden příklad. Na pokročilém příkladu z lekcí 6-9 jsem si vylámal zuby, protože jsem se nikde nedozvěděl, že vlastnosti stínů se dají nějak řetězit a jaké to řetězení může mít a má efekt.

Editované
Avatar
Odpovedá na Josef Mašek
Dominik Bican:11.2.2022 19:39

Ahoj Pepo, měl jsem také obrázek vlevo, tak jsem si stáhl jejich verzi a pomohlo opravdu to, když jsi obrázek neměl uvnitř odstavce, takže párový tag <p> a </p> prostě odstraň a nech tam vložený jen samotný obrázek takto:

<img src="obrazky/avatar.jpg" alt="Programátor HoBi" />
Avatar
Bc.Mahmoud Alqimah:16.2.2022 17:08

Ja od lekce 9 nic nerozumím !

Avatar
Oldřich Tylšar:23.2.2022 14:58

Článek je nedodělaný. Začíná se tu s layoutem pomocí FLEX, kde se něco napíše, a poté se to uzavře větou "Výsledek bude vypadat takto, byť zatím není plná funkcionalita flexboxu patrná:" a tím končí poslední zmínka o FLEXu, mám tedy ve svém kódu něco, o čem nic nevím. Pak následuje float, ok. A pak GRID, který je velmi okleštěný a nevysvětlený. Tento článek by stál za revizi a nebo možná sloučení do manuálu na který odkazuje. Nerad hate-uju, ale tady to bohužel není dobré.

Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:25.2.2022 12:06

Kolegové co komentovali mají pravdu. Návod je nově předělaný do "moderního" formátu, nicméně spousta věcí zůstává nevysvětlena a půl hodiny jsem se snažil přijít na to, proč mám ten obrázek vlevo (nechtěl jsem si to usnadnit pomocí komentářů). A kdybych půl hodiny neluštil z jiných stránek jak vlastně grid funguje a že pokud v class ".domu-article" upravím přímo "img", musím ho také vypustit z odstavce, nikdy bych pomocí tohoto článku nepřišel na to, kde mám chybu. Ano, teď zpětně to dává smysl, protože je o tom zmínka u vysvětlení, jak funguje selektor

article > header {}

. Ovšem pokud bych si to nenašel na jiné stránce, nikdy by mě nenapadlo, že to tak funguje všude a že pokud upravím pouze "img", tak ho musím vypustit z odstavce...

Návod nedokončený a podle mého názoru většina začínajících lidí by skončilo už u předchozího článku. Všechno rychle, nedovysvětlené a špatně pochopitelné... Určitě by to chtěli revizi.

Odpovedať
Selhání není propast nebo překážka. Jsou to dveře k novým možnostem, které bychom bez ponaučení z chyb neměli šanci o...
Avatar
Martin Libich:7.3.2022 14:49

Souhlas se všemi výše uvedenými kritiky. Takže nebudu znovu rozepisovat, co již bylo řečeno. Tak se rovnou zeptám na CSS styl, co přesně dělá "span" v tomto:

grid-row-end: span 2;

(Chápu číslo 2, jakože v mřížce je uvedený obrázek na 2 řádku, ale co to span dělá)?

Odpovedať
Pokud se ráno probudím, je vše v pořádku
Avatar
Gabriela Feiková :7.3.2022 16:08

Já měla ve finále obrázek uprostřed mezi 2 větami, když se zkoušelo obtékání - obrázek v textu/obklopen textem .

Je tu upomínka na:

  • Zkusme si to s naším avatarem (později tuto část kódu smažeme a nahradíme float technologií grid).
  • když obrázek stylujeme přímo v CSS, odebrat vlastnosti height a width

Ale už není nikde zmíněno, vrátit obrázek zpět nakonec pod </section>, a někoho to prostě nenapadne (jako třeba můj případ). Přijde mi to někdy vysvětlené jako páté přes deváté.

Také se v tom už začínám ztrácet 😕 Občas zbytečně řeším nějakou prkotinu velmi dlouho. Pro úplné začátečníky je to složité, a je těžké si to pak zapamatovat.

Posledné komentáre sú na spodnej časti poslednej stránky.
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 250.