fbpx

Ako šetriť čas pri práci s HTML a CSS


  • Zdieľať na Google+

Celý svet sa začal v posledných mesiacoch presúvať do online priestoru. Ak cítite vašu šancu, vidíte sa ako budúci front-end developer a HTML s CSS vám už nie je až tak cudzie, prinášame vám niekoľko tipov, ako si niektoré časti práce uľahčiť, aby ste mali viac času sa venovať tým zložitejším.

Mozilla developer network

MDN patrí celosvetovo k najrešpektovanejším open webom pre web dizajnérov, kde nájdete veľmi dobre spracované tutoriály k rôznym technológiám ako napríklad HTML, CSS alebo JavaScript aj s praktickým vysvetlením a možnosťou si niektoré veci vyskúšať. Veľmi obdobným a taktiež často využívaným webom je  w3schools.com.

Stack Overflow

Je to najväčšia online komunita združujúca vývojárov z celého sveta, navyše ochotných pomôcť keď treba. Nenahraditeľným zdrojom informácií je Stack Overflow fórum. Ak totižto narazíte na problém, už ho tam určite pred vami niekto riešil.

Jak psát web

OK, toto nie je celosvetovo uznávaný web, ale má svoje opodstatnenie. Pri návšteve tohto webu nedajte na prvý dojem. Za štandardných okolností obal síce predáva, ale táto stránka je typickým príkladom toho, že práve obsah je dôležitý. Najmä začiatočníci tu nájdu veľa užitočných rád ako funguje HTML alebo CSS. Výhodou pre menej zdatných v anglickom jazyku je, že všetko je písané a vysvetľované v češtine.

BRM

Kde by všetci začínajúci programátori na Slovensku boli bez Yablka. Na jeho blogu nájdete veľa kurzov, alebo užitočných informácií, ako napríklad aj CSS tipy a triky. Tento konkrétny článok je síce trošku staršieho dátumu, ale väčšina jeho obsahu je stále aktuálna.

VS CODE EXTENSIONS

Extensions… Ak ste siahli po voľne dostupných code editoroch ako napríklad Sublime Text, alebo v súčasnosti veľmi obľúbený Visual Studio Code, je dobré mať nainštalovaný aspoň základný balík rozšírení odporúčaných pre web developérov. Nájdete tu veľa zoznamov, pri ktorých zistíte, že sa v nich opakuje 5-6 MUST HAVE rozšírení.

Reset.css

Reset.css je overená klasika aktualizovaná na HTML5. Alternatívou je prípadne normalize.css. Jeden z týchto súborov chcete mať určite nalinkovaný vo vašom HTML. Aj keď na to ide každý inak, ich cieľom je eliminovať rozdielnosti v zobrazovaní vášho webu v rôznych prehliadačoch. Zatiaľ čo reset.css doslova všetko vynuluje a je potrebné si vo vlastnom stylesheet podľa vašich potrieb všetko naštýlovať. Normalize.css už obsahuje preddefinované, štandardne zaužívané štýly jednotlivých HTML elementov.

Bootstrap

Bezpochyby je to najpopulárnejší front-end framework alebo ak chcete knižnica komponentov a open source projekt na svete. Už dávno sa zistilo, že netreba vymýšľať to, čo je už vymyslené, že aj tak všetci všetko kopírujú a ono to prekvapivo funguje. Bootstrap ponúka množstvo voľne dostupných komponentov pre váš web v rôznych variáciách, ktorých dostupný HTML kód stačí skopírovať a pridať tam, kde ho chcete na vašej webke mať.

Kód si stačí upraviť podľa vašich potrieb a mať vo vašom HTML nalinkované zdrojové CSS a JavaScript súbory. Nie je to nič zložité, bootstrap vás tým prevedie. Každý jeden komponent viete štýlovaním vo vašom stylesheet.css priviesť k vizuálnej dokonalosti. Tu platí len to, že váš CSS súbor musí byť nalinkovaný v HTML pod bootstrap CSS súborom. To skutočné čaro bootstrapu ale je, že všetky komponenty sú vytvorené Mobile-first prístupom a sú 100%  responzívne.

Ak preferujete vytváranie layoutu flexbox spôsobom, potom ideálnym miestom pre hľadanie komponentov je obdoba Bootstrapu – Bulma.io

FlexBox Cheatsheet

Keď už spomíname flexbox. FlexBox Cheatsheet vás prevedie veľmi jednoduchými krokmi ako nastaviť hodnoty CSS vlastností flexovaných elementov tak, aby ste sa dopracovali k vami požadovanému layoutu.

Boxshadow CSS generator

Takéto generátory sú skvelí pomocníci na vytváranie tieňového efektu obaľovacích elementov.  Ušetria veľa času s hľadaním ideálnych box-shadow hodnôt. Dnes sú u grafikov veľmi obľúbené long shadow generátory.

Tinypng

Používate veľa obrázkov s vysokým rozlíšením na vašom webe a začalo sa to odrážať na rýchlosti načítania stránky? Neoceniteľný nástroj na zmenšovanie ich veľkosti tak, aby rozdiel v kvalite bol „nepostrehnuteľný“, je Tinypng. Tento pomocník selektívne zníži počet farieb v obrázku. Výsledok je skoro nepostrehnuteľný, no spraví obrovský rozdiel v jeho výslednej veľkosti.

PIXLR

Ak predsa len potrebujete spraviť rýchlu úpravu obrázkov a váš grafik na vás nemá čas, môžete vyskúšať tento bezplatný online editor. Dokáže otvoriť a pracovať s rôznymi formátmi a ponúka širokú škálu možností.

MDN Color Picker alebo Adobe Color

Obidva tieto nástroje vám pomôžu rýchlo nájsť vhodnú farbu pre váš HTML element a ponúknu vám jej CSS hodnotu v RGB alebo hexadecimálnom tvare.  Adobe Color navyše ponúka veľa zaujímavých features.

Social media Icons

Ak hľadáte ikony, ktoré zapadnú do vášho dizajnu, vyskúšajte tento web. Ponúka ich rôzne variácie a grafické spracovanie.

Ale…!

Aj keď je našou snahou uľahčiť vám prácu s HTML a CSS, dôležité je skúšať, vymýšľať a písať vlastné veci. Každý jeden programátor vám povie, že za úspechom sú schované kilometre zbytočného alebo nefungujúceho kódu. Najmä zo začiatku. Nakoniec, nie je lepšieho pocitu, ako si svojpomocne dokončiť po dvoch dňoch písania kódu a preplakanej noci napríklad vlastný responzívny navigation bar s animovaným hamburger menu a pri tom sa ešte naučiť čo to o JavaScripte a JQuery.