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.
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.
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
Nauč se základy s Bootstrap :)
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=htt...ednoduse.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 :)
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í </div>.
- 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 <body>.) 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 <h1> 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 <span>.)
- Ovládací prvky (šipky) by měly být elementy <button>.
- Texty velkým písmem by se měly napsat "normálně" a nastavit v CSS na text-transform: uppercase; (čtečky to mohou číst po písmenech).
- Neroztahovat obrázky na větší velikost, než jakou mají (s vyjímkou vektorů).
- Na stránce by měl být element <main> označující hlavní obsah stránky (mohl by být element .wrapper).
- .wrapper by také mohl být spíše <article> než <section> (lze to považovat za zcela samostatný obsah). A pokud to <article> není, pak by mohly být <article> sekce "WHAT WE DO" a "LAST WORK".
- Každá sekce by ideálně také měla mít název (h1-h6), proto může být lepší .wrapper udělat jako <main>.
- V sekci "WHAT WE DO" a "LAST WORK" by jednotlivé položky měly být v <ul> – jsou to seznamy služeb a prací.
- Podobně "LATEST POST" a "TWITTER" by měly mít seznamy. V tomto případě spíš <ol>, protože se jedná o seřazené položky, přičemž uvnitř každé by mohl být <article>.
- Také není důvod, aby sekce "LATEST POST" byla <section> a "TWITTER" jenom <div>. Obojí je spíše potenciálně <aside> (jedná se spíše o vedlejší obsah stránky).
- Taktéž formulář by mohl být <section> nebo <aside>.
- Formulářové prvky vždy potřebují <label>, tedy název, který se spojí atributem "for" s atributem "id" příslušného inputu.
Dále se rozhodně vyhněte Bootstrapu! S tím se kódovat nenaučíte, protože tam už je všechno předkódované. A tím, že nebudete mít žádné zkušenosti a smysluplné znalosti, tak ho budete ohýbat naprosto nevhodným způsobem. Na práci s věcí jako je Bootstrap potřebujete napřed pár let zkušeností.
Nejprve je potřeba se správně naučit významy elementů a kde je používat a co nejdříve se naučit responzivitu (k tomu budete potřebovat i trochu webdesignu). Důležité je také umět nakódovat web tak, aby byl obsah vždy přístupný a layout stabilní, a to i když se obsah změní od návrhu (např. obsah se nesmí začít skrývat za jinými prvky jenom proto, že je tam o tři znaky delší věta; fixní menu musí být přístupné i na malých obrazovkách). Pak se můžete zaměřit třeba na použitelnost webu nebo udržovatelnost kódu (např. rozdělování CSS do souborů podle sekcí/komponentů). Potom se naučit něco o tom, jak prohlížeče načítají zdrojové soubory a také jak vykreslují obsah (ale to nechte až na konec). Pak se podívejte třeba na nějaké metodologie práce s CSS (BEM) a naučte se vytvářet vlastní znovupoužitelné komponenty. (Pak se můžete podívat na ten Bootstrap a třeba ho i někdy použít.)
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/...b/HTML/Element, také nelze zapomenout na fenoménální (i dnes) stránky od Yuhů https://www.jakpsatweb.cz/html/
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.
Naposledy upravil Rantic : 05.03.2019 v 06:54
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 :)Původně odeslal Rantic
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.
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. :)
Naposledy upravil skyppy2000 : 06.03.2019 v 12:55
ja bych je pojmenovaval v sanskrtu. je to nejefektivnejsi jazyk na svete.
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.
Vidím, že se nikdo se nemá k odpovědi...
Tohle jsem konkrétně nečetl, ale obsahově je to určitě základ.Vzhůru do CSS3 od Martina Michálka
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é.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?
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.)
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.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?
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).
Naposledy upravil mjerabek : 17.03.2019 v 19:33
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
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.
Souhlas.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
Jasně že neopisuje, ale musí se to rozkopírovávat, což zabere o hodně déle času, než jen zmáčknout enter :) A to ani nepočítám další výhody jako proměnné (například na barvy, breakpointy v responzivu) či předpřipravené mixiny.
Pokud by po mě někdo chtěl, abych napsal web v čistém CSS (neberme v úvahu že je to blbost, protože z preprocessoru také vyleze čisté CSS) tak bych to odmítl. Bylo by to pro mě utrpení.
Určitě to zabere více času, ale právě trochu pochybuji, že o hodně. Záleží, jak to děláte.
Pro mě je utrpení pracovat s preprocesorem, přicházím pak o jiné zefektivňovací funkce: zejména live aktualizace změn* a označování vybraných elementů, což dělá v práci podle mého mnohem větší rozdíl.
Kdyby po vás někdo chtěl web v čistém CSS, tak ho prosím odkažte na mě :).
* Tohle už umí rozšíření do Sublimu, jenže to bych si zase musel přeprogramovat několik svých dalších rozšíření. A zase mi tam nebude fungovat live aktualizace HTML.
Naposledy upravil mjerabek : 17.03.2019 v 20:49
Automatickou aktualizaci stránky v prohlížeči také používám, less soubor se mi automaticky kompiluje po uložení, následně se provede reload stránky. Co přesně znamená to "označování vybraných elementů"?
Já bych tomu preprocessoru dal šanci, neznám nikoho kdo by to chvíli používal a následně přestal.
Takováto aktualizace je úplně něco jiného. Jde o to, že bez ukládání a reloadu souborů se mění CSS/HTML v prohlížeči. Takže například měníte barvu pomocí color-pickeru a vidíte jak se to projevuje na stránce. Nebo se potřebuji podívat, co udělá nějaká změna animace, tak ji zakomentuji -> odkomentuji a automaticky se to spustí třeba ve dveceti oknech najednou. Nebo prostě měním velikost písma, odsazení apod a všechno je to naprosto realtime. V HTML také můžu třeba kliknout na element v prohlížeči a kurzor se přesune na příslušné místo v souboru.
Označování vybraných elementů znamená to, že kolem elementů, které odpovídají selektoru, na kterém máte kurzor, se vykreslí box ukazující, kde takové elementy jsou. Tedy teď to funguje tak, že to ukazuje border, padding a margin (box model).
Máme každej jinou work flow koukám. Já si vždy navrhnu HTML strukturu nějakého bloku stránky, následně napíšu CSS (v lessu či sassu) a poté se jen ujistím pohledem do prohlížeče, že jsem nikde neudělal chybu. Dělám tedy weby vždy oproti grafickému návrhu, takže pokud vím co píšu, vím i jak to bude vypadat v prohlížeči. Je tedy pravda že to přišlo až časem, ze začátku jsem potřeboval také po nakódování každého elementu vidět online, jestli jsem to udělal dobře. Nicméně to poměrně brzdí práci, alespoň z mého pohledu, proto jsem se učil metodu "code in the dark" a po čase si člověk v mozku udělá takové vlastní vykreslovací jádro :-D
Chápu ale že pokud toho člověk potřebuje, výhody psaní v preprocesoru se tím částečně mažou, protože kompilovat po každém zapsaném pravidlu není opravdu dobrý nápad a oproti psaní CSS by to bylo asi i pomalejší. Paradoxně ale neznám osobně žádného frontend kodéra, co by psal čisté CSS.
Jak se ten addon jmenuje prosím?
Toliceek: Já jsem právě na tom celkem dost závislý. Ono je sice fakt, že člověk má pak tendenci se dívat na skoro každou změnu, ale zase to šetří kognitivní sílu. Jinak se ten postup asi zase tak neliší – nakóduji si nějakou sekci webu v HTML a už přitom v hlavě vím, jak bude vypadat CSS. Ve chvili, když ale píšu CSS, tak jsou ty realtime aktualizace naprosto neocenitelné, protože když to nedělá to, co jsem chtěl, tak můžu snadno zkoušet různá řešení. Ale nejužitečnější je to při jakémkoliv designování. Když si pak na samostatném monitoru otevřete 10 prohlížečů v různých velikostech, tak je to ještě větší pecka.
Jan Stejskal: Tohle, co tady popisuji, dělá editor Adobe Brackets. Pro Sublime Text a pro Atom (v beta verzi) existuje LiveStyle pro živé aktualizace CSS/SASS/LESS.
