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.
