Prvním krokem k práci na webu je osvojení si dovedností potřebných pro webdesign nebo vývoj webu – to však znamená také seznámení se s nástroji tohoto oboru. Proto jsme sestavili tento seznam 99 bezplatných nástrojů, které budete potřebovat buď pro vývoj webu, webový design, nebo pro obojí.

Každý zdroj na tomto seznamu je zdarma a doplňuje dovednosti, které vyučujeme v našich modulech Web Design, Web Developer a Front End Developer Blueprints (kurzy vedené instruktorem, které vás provedou základy jednotlivých rolí).

Když se budete učit, mějte tento seznam po ruce a považujte ho za svou vlastní virtuální sadu nástrojů.

Zdroje pro webdesign

Tento seznam nástrojů pro webdesign obsahuje nástroje pro webdesign pro začátečníky i zdroje pro design, které vám budou sloužit po celou kariéru.

(zpět na začátek)

Seznamy novinek

1. Creative Market
Předtím, než uděláte cokoli jiného, běžte se zapsat do seznamu newsletterů Creative Market. Jednou týdně vám přijde e-mail plný 5 souborů ke stažení zdarma, včetně všeho od vzorů a písem po šablony a motivy.

(zpět na začátek)

Software + aplikace

Tyto softwarové programy a webové aplikace poskytují pevný základ pro tvorbu webových stránek.

2. CoffeeCup Software
Nabízejí až nejrůznější bezplatné aplikace pro webové designéry, včetně editoru HTML, nástroje pro tvorbu webových formulářů, návrháře nákupních košíků a mnoha dalších.

3. Aplikace InVision
Výkonné nástroje pro tvorbu prototypů a spolupráci. Můžete získat vysoce věrné makety a prototypy během několika minut.

4. Pixlr
Upravujte obrázky přímo v prohlížeči.

5. Pixlr
Přímo v prohlížeči. Canva
Úžasně jednoduchý software pro grafický design, který může používat každý. Funkce vyhledávání a přetahování je tak jednoduchá a užitečná!

6. Easel.ly
Úžasné bezplatné šablony infografik.

(zpět na začátek)

Fotografie

Fotografie jsou důležitou součástí webového designu. Tyto zdroje stock fotografií jsou klíčové, když potřebujete tu správnou fotografii právě teď.

7. Unsplash
Některé z nejkrásnějších bezplatných stock fotografií, navíc s velkou rozmanitostí. Každý den přibývají nové snímky.

8. PicJumbo
Získejte do své e-mailové schránky bezplatné fotografie, které jsou zcela zdarma pro osobní i komerční použití.

9. Gratisography
Snímky ve vysokém rozlišení zdarma, které můžete použít v osobních i komerčních projektech. Mají přehledné kategorie: zvířata, příroda, objekty, náladové a další.

10. Compfight
Prohledejte tuny obrázků s licencí pro osobní a/nebo komerční použití, většinou z Flickru.

11. IM Free
Sortiment zdrojů pro webový design, včetně spousty roztříděných fotografií a navíc ikon a šablon.

12. Stock Up
Vyhledávání více než 9 000 fotografií z 26 různých webových stránek, vše na jednom místě.

13. Death to the Stock Photo
Zařaďte se do jejich e-mailového seznamu a dostávejte jednou měsíčně do schránky jejich bezplatné balíčky fotografií.

14. Little Visuals
Přihlásíte-li se do jejich seznamu, budete jednou týdně dostávat e-mailem 7 bezplatných fotografií ve vysokém rozlišení.

15. New Old Stock
Získejte zdarma historické fotografie z veřejných archivů.

16. Cupcake
Zdarma získejte fotografie ve vysokém rozlišení od Jonase Nilssona Lee.

17. Pexels
10 nových bezplatných fotografií každý den.

18. Magdeleine
1 bezplatná fotografie ve vysokém rozlišení denně.

19. SplitShire
Zdarma vysoce kvalitní stock fotografie od italského fotografa.

20. ISO Republic
Vysoce kvalitní stock fotografie prodávané kreativcům.

21. Paul Jarvis
Přihlaste se a získejte 20 nejlepších fotografií Paula Jarvise zdarma.

(zpět na začátek)

Symboly + ikony

Hledáte symboly nebo ikony pro použití na svých webových stránkách? Už nemusíte hledat dál.

22. Pixeden
Tuny bezplatných sad ikon, včetně ikon počasí, ikon sociálních sítí, čárových ikon a mnoha dalších.

23. Iconmonstr
Více než 2800 odvážně grafických ikon v několika různých stylech.

24. Captain Icon
Více než 350 bezplatných vektorových ikon pro mobilní a webové návrhy.

25. Lineární ikony
Písmo ikon se 170 různými ikonami na výběr.

26. Font Awesome
Písmo symbolů, které vám umožní přidávat symboly na vaše webové stránky.

27. Fontello
Vytváří balíčky písem ikon.

28. Flaticon
Stáhněte si vektorové ikony nebo zahrňte ikony jako webové fonty.

29. Fontello
Vytváří balíčky písem ikon. The Noun Project
Vyhledejte podstatné jméno, získejte zdarma symbol nebo ikonu.

30. Endless Icons
Knihovna ikon zdarma.

31. Dokonalé ikony
Přizpůsobte si a optimalizujte ikony sociálních médií pro své stránky.

32. IkonaSladkosti
60 vektorových ikon Photoshop zdarma.

33. IkonaSladkosti
IkonaSladkosti
IkonaSladkosti
60 vektorových ikon Photoshop zdarma. Kulaté ikony
Bezplatné nepředvídatelné a profesionální svazky ikon.

(zpět na začátek)

Fonty

Fonty jsou tak důležitou součástí designu, že je lze snadno přehlédnout. Podívejte se raději sem a najděte písma, která posunou váš design na vyšší úroveň.

34. Google Webfonts
Přidejte písma na své webové stránky pomocí několika kliknutí.

35. typegenius
Generátor párování písem.

36. Font Squirrel
Stovky písem zcela zdarma.

37. Beautiful Web Type
Podívejte se na kurátorskou sbírku nejkrásnějších webových písem Google.

38. Lost Type
Nádherná písma, za která se platí.

(zpět na začátek)

Barvy

Potřebujete pomoci s výběrem nejlepších barev pro váš design? Tyto barevné nástroje jsou vám k dispozici.

39. Material UI
Galerie barev Material Designu a flat designu, které můžete použít ve svých návrzích.

40. Paletton
Začněte s libovolnou barvou a získejte paletu (s 5 odstíny na barvu) založenou na několika různých vzorcích barevného schématu: monochromatický, sousední, triáda, tetráda nebo vlastní.

41. Design Seeds
Tuny skvělých barevných palet převzatých z fotografií. Můžete vyhledávat podle klíčových slov nebo podobných barev.

42. Adobe Color Wheel
Vyberte si z různých typů barevných dvojic a uložte si palety barev.

43. Paleta materiálů
Vygenerujte paletu barev na základě 2 barev.

44. Flat UI Color Picker
Jméno říká vše.

45. Ploché barvy uživatelského rozhraní
To je ono.

46. Bootflat
Plochý výběr barev.

47. Coolors
Generátor barevných palet.

48. Skala Color
Bezplatný nástroj pro výběr barev ke stažení.

49. BrandColors
Podívejte se na přesné barvy, které používají hlavní značky.

50. 0 až 255
Najděte dokonalou barevnou variantu, kterou hledáte.

51. Milovníci barev
Prohlédněte si palety barev uživatelů a přidejte do komunity vlastní.

52. Palette for Chrome
Generuje palety barev na základě obrázků.

(zpět na začátek)

Pozadí + textury

Fotografiemi, písmy a barvami design nekončí – potřebujete také pozadí a textury, které je drží pohromadě. Najděte si ty své pomocí těchto nástrojů.

53. Vzor8
Tuny zábavných, odvážných a jasných opakujících se vzorů, ze kterých si můžete vybrat.

54. Opakování-X Opakování-Y
Úžasné opakující se vzory z celého světa.

55. Texture King
Všechny textury, které si můžete přát: grunge, rez, omítka, beton, špína a mnoho dalších.

56. Patternico
Vytvořte si vlastní vzory pomocí ikon Font Awesome. Přizpůsobte si barvu pozadí, velikost plátna a průhlednost tvaru.

57. Subtle Patterns
Vzorce ke stažení zdarma.

58. Lost and Taken
Svobodné textury v mnoha kategoriích, včetně lepenky, kamene, kovu, bublin, bezešvých a dalších.

59. BG Patterns
Vytvářejte bezešvé vzory s přizpůsobitelnými barvami, tvary a dalšími možnostmi.

(zpět na začátek)

Sady/průvodci UI (User Interface)

Webový design je víc než jen vizuální přitažlivost. Způsob, jakým uživatelské rozhraní webu „působí“ na uživatele, je také rozhodujícím faktorem. Tyto nástroje vám pomohou ujistit se, že váš vlastní návrh uživatelského rozhraní je v pořádku.

60. Sada uživatelského rozhraní 55+ prvků zdarma
Čistá, moderní sada uživatelského rozhraní. Nezapomeňte se porozhlédnout po webu Behance, kde najdete spoustu skvělých zdrojů od jiných designérů!

61. Oh no, not another UI Kit
Jednoduchá, plochá, open source sada uživatelského rozhraní pro mobilní zařízení a web, která je dodávána jako soubor PSD.

62. PSD Booster Freebies
Tuny skvělých souborů pro Photoshop zdarma, včetně sad uživatelských rozhraní, motivů a dalších.

63. Material Design Guidelines
Oficiální průvodce standardy Material Design společnosti Google.

(zpět na začátek)

Zdroje pro vývoj webu

Po navržení webu je třeba ho vyvinout! Ať už pracujete na obou stranách procesu (navrhujete A vytváříte web), nebo vytváříte web na základě návrhů někoho jiného, tyto vývojářské nástroje vám pomohou tento návrh proměnit ve virtuální realitu.

(zpět na začátek)

Vyhledávače doménových jmen

Doménová jména jsou jádrem webu – jsou přímou adresou, kde mohou uživatelé najít váš web online. Internet je však přeplněný a může být obtížné najít přesně to jméno domény, které chcete. Tyto nástroje vám pomohou zjistit, zda je požadované jméno k dispozici, a vytvořit takové, které JE, pokud vaše první volba není k dispozici.

64. Namemesh
Výkonný vyhledávač doménových jmen, který vám pomůže najít domény, které jsou krátké, zábavné, běžné, podobné a různé další kvalifikátory.

65. Nameboy
Zadejte jedno nebo dvě klíčová slova a získáte seznam dostupných domén, které je obsahují.

66. Panabee
Popište dvěma slovy, co chcete, a Panabee vygeneruje seznam potenciálních doménových jmen.

67. Impossibility
Vygeneruje náhodné názvy domén na základě jednoho slova.

68. LeanDomainSearch
Vyhledání názvu domény podle klíčového slova.

(zpět na začátek)

Rámce, šablony, balíčky kódu + motivy

Někdy budete muset nakódovat každou část webu od začátku – ale někdy ne. Zde je seznam frameworků, šablon, balíčků kódu a motivů, které můžete použít, abyste si zkrátili práci s těžkými úkoly.

69. WP-Flex
Prázdný, responzivní šablona tématu WordPress, která dodržuje oficiální osvědčené postupy a požadavky kodexu WordPress.

70. Foundation
Pokročilý responzivní framework, který patří k nejoblíbenějším.

71. Ionic
Vytvářejte mobilní aplikace pomocí webových technologií, které znáte a máte rádi.

72. Initializr
Rychle vygenerujte šablonu založenou na HTML5 Boilerplate.

73. Materialize
Moderní responzivní framework založený na specifikacích Material Designu společnosti Google.

74. WordPress Plugin Boilerplate
Pokud chcete vytvářet zásuvné moduly WordPress, je Plugin Boilerplate standardizovaným, objektově orientovaným výchozím bodem.

75. Front-end Boilerplate
Základní výchozí bod pro tvorbu webových stránek, abyste nemuseli pokaždé vše vytvářet znovu od začátku.

76. HTML5 Boilerplate
První a nejlepší. Bezplatný kód kotle HTML5.

77. HTML5 UP
Svobodná plně responzivní šablona HTML5.

78. 1 Line CSS Grid Framework
Rámec pro CSS, který má pouze 1 řádek!

79. 960 Grid System
Oblíbený systém Skillcrush.

80. Starkers pro WordPress
Základní šablona pro vývoj vašeho prvního tématu pro WordPress.

81. Barebones pro WordPress
Svobodná šablona WordPressu pro vývojáře.

82. Underscores
Šablona pro WordPress pro vytvoření zcela nového tématu.

83. Sage for WordPress
Startovací šablona pro WordPress založená na kotli HTML5 a Bootstrapu.

84. Whiteboard pro WordPress
Čisté základní téma WordPressu pro vývojáře.

85. Bootstrap
Responzivní framework HTML, CSS a JS.

86. Bootswatch
Svobodná témata pro Bootstrap.

(zpět na začátek)

Průvodci stylem kódování

Nemůžete začít kódovat, aniž byste se naučili základní dovednosti, ale jakmile tyto dovednosti zvládnete, je čas naučit se kódovat umělecky. Tyto příručky vás naučí osvědčené postupy kódování, které vaši práci povýší nad základní úroveň.

87. Příručka z oblasti webu
Sbírka zdrojů, osvědčených postupů, inspirace a referenčních materiálů pro moderní kódování. Nechybí ani části plné nástrojů a dalších zdrojů a informací specifických pro daný jazyk.

88. Google Developers Web Fundamentals
Komplexní zdroj osvědčených postupů pro vývoj webových aplikací přímo od společnosti Google. Ideální pro začínající vývojáře i pro ty, kteří chtějí vylepšit své projekty.

89. Osvědčené postupy pro nasazení
Před nasazením webu nebo aplikace se určitě podívejte na tyto osvědčené postupy, abyste měli jistotu, že vše proběhne hladce.

90. GitHub
Vlastní průvodce stylem kódu služby GitHub.

91. Google
Průvodce stylem kódu společnosti Google.

92. Mozilla
Průvodce stylem kódu od profesionálů z Mozilly.

(zpět na začátek)

Ověřování kódu

Jste s touto webovou stránkou hotovi? Ne tak rychle. Než projekt označíte za „hotový“, použijte tyto nástroje, abyste v kódu uzavřeli volné konce a zkontrolovali, zda splňujete standardy přístupnosti, stylu a osvědčené postupy v oboru.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(zpět na začátek)

Jste připraveni spojit tyto nástroje s dovednostmi, které potřebujete k vydělávání peněz v oblasti technologií? Podívejte se na naši stránku s programy a najděte si kurz Skillcrush Blueprint, který je pro vás ten pravý. Za pouhé tři měsíce můžete získat kvalifikaci, abyste mohli začít pracovat na internetu.