Učím se HTML/CSS

Rantic

4. 3. 2019 05:50:36

Dobre ráno

Učím se HTML/CSS formou samostudia. Chtěl bych vás požádat k kritiku co zlepšit a co zlepšit. Děkuji

http://rantic.jednoduse.cz Inspiraci jsem bral z free pád šablony.

4. 3. 2019 05:50:36

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391109

martinzsa

(1 hodnocení)

4. 3. 2019 07:23:04

nieje tam moc na kritiku kedze tak dokopy nic nieje. posobi to ako dizajn cca 10 rokov dozadu, a hlavne mi chyba responzivita co je v dnesnej dobe mobilov a tabletov nutnost kedze ako user nemam zaujem scrolovat dolava doprava...

skus mrknut tu

4. 3. 2019 07:23:04

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391108

Vladimír Pilný

(63 hodnocení)

4. 3. 2019 07:31:59

Nauč se základy s Bootstrap :)

4. 3. 2019 07:31:59

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391107

Oleg

(53 hodnocení)

4. 3. 2019 10:06:21

Na zacatecnika to neni spatne, ale hned delej weby responsivni, tj. adaptivni pro mobilni zarizeni.

Dbej na cistotu a logiku kodu a na jeho validitu, mas mnoho chyb v kodu: https://validator.w3.org/nu/?doc=http%3A%2F%2Frantic.jednoduse.cz%2F

Pouzivej treba bootstrap, ktery ti zjednodusi zivot: https://getbootstrap.com/docs/4.3/examples/ a muzes stylovat BT vlastni grafikou, nebo muzes vytvorit vlastni mini framework pro responsivni weby, nebo to psat pokazde v cistem HTM/CSS, coz neni z hlediska efektivity (pro tebe, v rychlosti praci) moc dobre.

Kazdopadne, drzim palce. Nevzdavej to :)

4. 3. 2019 10:06:21

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391106

Michal Jeřábek

4. 3. 2019 12:39:09

Těžko to zhodnotit, protože je to očividně udělané zjednodušeně, což nejspíš víte, ale minimálně bych to viděl takto:

V první řadě jsou v kódu chyby - nějaké nadbytečné uzavírací

V kódu je potřeba dodržovat konzistentní odsazení a lépe oddělovat jednotlivé bloky kódu. (Je to dost důležité, protože až s tím bude pracovat nějaký programátor, nevyzná se v tom. Pro něj je to úplně neznámý dokument.)

Stránka má špatnou horizontální velikost, takže se zobrazuje dole posuvník. (Stačí odstranit šířku 100% na .) Nevím, proč stránka není zarovnaná doprostřed, rozhodně by se měla zarovnat pomocí margin: 0 auto; (ne přesné hodnoty).

Logo v

je diskutabilní, ale hlavně je zvykem dělat logo jako odkaz na hlavní stránku.
Pokud nemá být menu s podmenu otevíratelné/odkazovat na stránku (poslední položka v menu), tak to nemůže být odkaz, jehož funkce se zruší javascriptem. (Musí-li tam být element, použít .)
Ovládací prvky (šipky) by měly být elementy

4. 3. 2019 12:39:09

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391105

TomasX

(4 hodnocení)

4. 3. 2019 16:50:57

mjerabek: moc pěkný rozbor

snad bych jen doplnil odkazy, asi jeden z nejlépe zpracovaných manuálů je na https://developer.mozilla.org/en-US/docs/Web/HTML/Element, také nelze zapomenout na fenoménální (i dnes) stránky od Yuhů https://www.jakpsatweb.cz/html/

4. 3. 2019 16:50:57

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391104

Rantic

5. 3. 2019 05:59:02

Děkuji za odpovědi.

S tím marginem jsem měl problém ale byl jsem krásně navede. Ale nevím jak mi půjde responsivita.V kódu je poněkud bordel to uznavam.Pak mám další otázku píšete jména tříd a id v anglickém nebo českém jazyce?A co se týče toho boostrapu učit se z něčeho co už je nakodovane když ani nevím co to znamena a jak to funguje když základní je tam HTML/CSS?

Mjerabek:děkuji za výstižnou kritiku když jsem se na to poté podíval tak jsem viděl že to jde udělat i lépe.

Wladass: nepůsobil jsi jistou dobu na wowresource.eu (Avatar).

Edit: Dále bych chtěl dodat že se učím z knihy HTML/CSS od Elizabet Castro.jeste taková malá otazecka je lepší layout roztahovat po celé šířce displeje, aby tam nebyl viditelný ten obdélník jako tělo stránky ve kterém to je obaleno snad mě každý pochopil správně a omlouvám se za formulaci píší to na telefonu po cestě do prace.

5. 3. 2019 05:59:02

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391103

Vladimír Pilný

(63 hodnocení)

5. 3. 2019 08:00:21

Napsal Rantic;1515222

Wladass: nepůsobil jsi jistou dobu na wowresource.eu (Avatar).

To už nějakej pátek bude :D btw koukám, že už ani neběží :) Většina se přesunula na geekforum.cz, tak se stav :)

5. 3. 2019 08:00:21

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391102

Michal Jeřábek

5. 3. 2019 12:02:19

Třídy a id bych vám doporučoval psát v angličtině. Jednak většina návodů, pluginů a nástrojů, které budete používat, bude v AJ (takže by v tom byl akorát chaos) a za druhé tomu bude rozumět mnohem víc lidí (včetně Čechů, protože lidi jsou zvyklí na anglickou terminologii). "Rozumné" firmy to budou vyžadovat. Vyjímkou by pak mohly být id, které slouží pro navigaci na webu v češtině. (Pro soukromé využití je to asi jedno.)

Jestli dělat weby přes celou šířku nebo ne, záleží na tom, co je to za web.

Ta knížka je poměrně dost zastaralá. Jako efektivnější využití navrhuji s ní zatopit.

5. 3. 2019 12:02:19

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391101

skyppy2000

6. 3. 2019 12:34:08

Webdesign sice nedělám. Specializoval jsem se na aplikace pro iOS a OS X a nyní se k tomu zase vracím, protože mě to k tomu pořád táhne. Nicméně jednou jsem narazil na takovouto knihu. Vlastně jsem jí dostal jako dárek od člena rodiny, který nevěděl, že se zaměřuji jen na aplikace. Je to napsáno v roce 2018, čili všechno aktuální. Je celá v AJ, ale jelikož chcete být web developer, neměl by to být žádný problém. Pokud by vás lákaly aplikace pro iOS a MAC, mám tu hromadu knih v AJ a jsou napsány velmi dobře. Ca. 20 000 stran užitečných informací napsaných takovou formou, že se to zvládne naučit i lajk, který to nikdy předtím neviděl.

Napište mi kam mám tu knihu nahrát - neznám v CZ žádné servery, kde se to po čase smaže. Je zakoupená přes iBooks pomocí Reedem kódu, ale dal jsem Vám jí do PDF.

jmenuje se Learning Web Design 5th Edition - The beginner's guide to HTML, CSS, JAVASCRIPT, and WEB GRAPHICS od Jennifer Niederst Robbins.

na boku knihy je popis:

5TH EDITION

Whether you’re a beginner or bringing your skills up to date, this book gives you a solid footing in modern web production. I teach each topic visually at a pleasant pace, with frequent exercises to let you try out new skills. Reading it feels like sitting in my classroom! —Jennifer Robbins.

Datum vydání 16. dubna 2018

Počet stran bez rejstříku: 766

Počet stran včetně rejstříku: 790

Velikost: 79,7 MB

Jinak za mě nazývat třídy a další prvky kódu a komentovat kód vždy v angličtině. Nikdy nevíte, zda se zdroják nedostane do mezinárodního týmu. :)

6. 3. 2019 12:34:08

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391100

Oleg

(53 hodnocení)

6. 3. 2019 13:16:08

Napsal skyppy2000;1515544
Jinak za mě nazývat třídy a další prvky kódu a komentovat kód vždy v angličtině. Nikdy nevíte, zda se zdroják nedostane do mezinárodního týmu. :)

ja bych je pojmenovaval v sanskrtu. je to nejefektivnejsi jazyk na svete.

6. 3. 2019 13:16:08

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391099

Rantic

10. 3. 2019 08:24:32

Děkuji za další odpovědi a omlouvám se za to že jsem neodpověděl hned ale měl jsem v práci těžký týden.

To wladass: tak jsem se u vás zaregistroval pěkný web akorát že je tam poněkud mrtvo ale asi jenom můj první dojem.

To skyppy2000: děkuji klidně mi to nějak hodně např ulož.to (jiný mě nenapadlo) a já se na to určitě podívám má angličtina je na základní úrovni kdyžtak je google překladač.

Stáhnul jsem si celý jakpsatweb.cz do mobilu abych mě učivo i když nebudu online.

Stáhnul jsem si knihu od vzhůru do CSS3 od Martina Michálka (učivo pro začátečníka nebo moc věcí které ještě dlouho dobu nepouziju?) a ten v knize píše o CSS preprocesory a ekosystému node.js má cenu je pro mě jako začátečníka využívat resp. se učit sass nebo less nebo se naučit čistě CSS bez preprocesoru?

Dále jsem se podíval na responsivitou sirky zadávám v procentech a zobrazení na menších zařízeních než je můj monitor po té těším přez média queries .

Používáte display:flex nebo grid?

To je asi zatím vše nic jiného mě nenapada? Děkuji za odpovědi.

10. 3. 2019 08:24:32

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391098

Michal Jeřábek

17. 3. 2019 13:10:18

Vidím, že se nikdo se nemá k odpovědi...

Vzhůru do CSS3 od Martina Michálka

Tohle jsem konkrétně nečetl, ale obsahově je to určitě základ.

CSS preprocesory a ekosystému node.js má cenu je pro mě jako začátečníka využívat resp. se učit sass nebo less nebo se naučit čistě CSS bez preprocesoru?

Určitě začněte bez preprocesorů. Napřed je potřeba rozumět tomu, co ty preprocesory vytváří. Druhá věc je, že z dlouhodobého hlediska by mělo být cílem se jich zbavit (preprocesory zvyšují komplexitu). Asi se bez nich neobejdete, ale při učení je to nadbytečná komplikace. Až budete ovládat CSS, tak přejít na nějaký preprocesor, není až tak náročné.

Základy node.js budete také určitě potřebovat. Zejména kvůli automatizaci různých procesů (minifikace a spojování kódu apod). Ale to bych také nechal až na dobu, kdy si budete alespoň trochu jistý tím, že to kódování ovládáte. (Kódování je dneska extrémně komplexní a učit se všechno dohromady, co by bylo ideální umět, vás může akorát odradit nebo zpomalit.)

Dále jsem se podíval na responsivitou sirky zadávám v procentech a zobrazení na menších zařízeních než je můj monitor po té těším přez média queries.

To je v zásadě dobře, jenom se neřiďte (jenom) podle vašeho monitoru. Důležité je také web otestovat na mobilním zařízení. Jednak kvůli tomu, že třeba na nich nebudete mít posuvník, který ubírá místo v dektopových prohlížečích, ale také ovládání dotykem je dost odlišné od ovládání myší, a mobilní prohlížeče mohou vykreslovat věci trochu jinak.

Používáte display:flex nebo grid?

Dost často ani jedno, protože:

Implementace flexu má v Internet Exploreru tolik chyb, že jejich náprava mnohdy trvá déle, než použití nějaké starší metody. Navíc je potřeba často přidávát kód, který je zbytečný, a jen se tím zhoršuje udržovatelnost kódu.
Všeobecná podpora není tak velká a IE podporuje pouze starou verzi gridu, takže je stejně potřeba vymýšlet alternativní řešení. Mnohdy pak stačí použít to alternativní řešení.

Otázka nicméně nezní, jestli grid nebo flex. Obojí je vhodné k něčemu jinému. Grid je vhodný, pokud potřebujete mřížku (zarovnávat elementy v obou směrech). Flex, pokud potřebujete řadit elementy za/pod sebe (v jednom směru).

17. 3. 2019 13:10:18

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391097

Dominik Hašek

(12 hodnocení)

17. 3. 2019 19:07:35

Napsal mjerabek;1517447
Určitě začněte bez preprocesorů. Napřed je potřeba rozumět tomu, co ty preprocesory vytváří. Druhá věc je, že z dlouhodobého hlediska by mělo být cílem se jich zbavit (preprocesory zvyžují komplexitu). Asi se bez nich neobejdete, ale při učení je to nadbytečná komplikace. Až budete ovládat CSS, tak přejít na nějaký preprocesor, není až tak náročné.

Preprocesorů bych se vůbec nebál. Logika je vlastně stejná jako v čistém CSS, jen místo stálého opisování rodičovských prvků je možné zanořovat. Úspora času jen díky tomuto je opravdu velká. Osobně mi přijde kód například v lessu či sassu o dost přehlednější než čistém CSS, což bude ale asi hodně o zvyku a stylu zápisu.

Flexbox a grid osobně také ještě moc nepoužívám (snad jen ve vyjímečných případech, kdy se dá zaručit že uživatel bude mít nový prohlížeč = uživatelská administrace atd). Osobně mi přijde že někteří to používají jen protože si pak připadají cool, že tam mají něco moderního. Již několikrát jsem pro klienty řešit optimalizaci pro starší prohlížeče / zařízení a to co někdo udělá pomocí například flexboxu, se dá úplně za stejnou dobu udělat i například pomocí floatů či tabulek. Není to sice tak moderní a cool, ale vypadá to úplně stejně a funguje to prakticky všude :P

17. 3. 2019 19:07:35

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391096

Michal Jeřábek

17. 3. 2019 19:31:25

Napsal Toliceek;1517477
Preprocesorů bych se vůbec nebál. Logika je vlastně stejná jako v čistém CSS, jen místo stálého opisování rodičovských prvků je možné zanořovat. Úspora času jen díky tomuto je opravdu velká. Osobně mi přijde kód například v lessu či sassu o dost přehlednější než čistém CSS, což bude ale asi hodně o zvyku a stylu zápisu.

Bát se jich určitě není třeba, ale přijde mi to jako další problém navíc. Nicméně můžete skutečně dokázat tu úsporu času nebo se vám to jenom zdá? Protože v realitě přece ty rodičovské prvky snad nikdo neopisuje, ne?

Přehlednější to je tak do třetí úrovně a dokud se to vejde na obrazovku.

Flexbox a grid osobně také ještě moc nepoužívám (snad jen ve vyjímečných případech, kdy se dá zaručit že uživatel bude mít nový prohlížeč = uživatelská administrace atd). Osobně mi přijde že někteří to používají jen protože si pak připadají cool, že tam mají něco moderního. Již několikrát jsem pro klienty řešit optimalizaci pro starší prohlížeče / zařízení a to co někdo udělá pomocí například flexboxu, se dá úplně za stejnou dobu udělat i například pomocí floatů či tabulek. Není to sice tak moderní a cool, ale vypadá to úplně stejně a funguje to prakticky všude :P

Souhlas.

17. 3. 2019 19:31:25

https://webtrh.cz/diskuse/ucim-se-html-css#reply1391095