A webdesignhoz vagy webfejlesztéshez szükséges készségek elsajátítása az első lépés a webes munka felé – de ez azt is jelenti, hogy meg kell ismerkednie a szakma eszközeivel. Ezért állítottuk össze ezt a 99 ingyenes eszközt tartalmazó listát, amelyre a webfejlesztéshez, a webtervezéshez vagy mindkettőhöz szükséged lehet.

A listán szereplő összes forrás ingyenesen használható, és kiegészíti azokat a készségeket, amelyeket a Webdesign, Webfejlesztő és Front End Developer Blueprints (oktató által vezetett tanfolyamok, amelyek végigvezetnek az egyes szerepkörök alapjain) során tanítunk.

A tanulás során tartsa kéznél ezt a listát, és tekintsen rá úgy, mint a saját virtuális eszköztárára.

Webtervezési erőforrások

Ez a webtervezési eszközök listája tartalmazza a kezdőknek szánt webtervezési eszközöket, valamint olyan tervezési forrásokat, amelyek egy egész karrier során szolgálják majd.

(vissza a tetejére)

Hírlevél-listák

1. Creative Market
Mielőtt bármi mást tennél, iratkozz fel a Creative Market hírlevéllistájára. Hetente egyszer kapsz egy e-mailt, amely tele van 5 ingyenes letöltéssel, beleértve a mintáktól és betűtípusoktól kezdve a sablonokig és témákig mindent.

(vissza a tetejére)

Szoftverek + alkalmazások

Ezek a szoftverprogramok és webes alkalmazások szilárd alapot nyújtanak a webtervezéshez.

2. CoffeeCup Software
Mindenféle ingyenes alkalmazást kínálnak a webdesignerek számára, többek között HTML-szerkesztőt, webes űrlapkészítőt, bevásárlókosár tervezőt és sok mást.

3. InVision alkalmazás
Egy hatalmas prototípuskészítő és együttműködési eszköz. Percek alatt nagy hűségű mockupokat és prototípusokat készíthet.

4. Pixlr
Képszerkesztés közvetlenül a böngészőben.

5. Pixlr
Képszerkesztés közvetlenül a böngészőben.

. Canva
Elképesztően egyszerű grafikai tervezőprogram, amelyet bárki használhat. A keresés és a húzás funkció nagyon egyszerű és hasznos!

6. Easel.ly
Félelmetes ingyenes infografikai sablonok.

(vissza a tetejére)

Fotók

A fotók a webdesign kritikus részei. Ezek a stockfotó-források kulcsfontosságúak, ha most azonnal szükséged van a megfelelő fotóra.

7. Unsplash
A legcsodálatosabb ingyenes stockfotók közül néhány, ráadásul rengeteg változatossággal. Minden nap új képek kerülnek hozzá.

8. PicJumbo
Ingyenes fotókat kapsz a postaládádba, amelyek teljesen ingyenesek, személyes és kereskedelmi felhasználásra is.

9. Gratisography
Ingyenes, nagy felbontású képek, amelyeket személyes és kereskedelmi projektekben használhatsz. Könnyen böngészhető kategóriák vannak: állatok, természet, tárgyak, szeszélyes és még sok más.

10. Compfight
Tonnaszámra kereshet személyes és/vagy kereskedelmi felhasználásra engedélyezett képek között, főként a Flickrről.

11. IM Free
Curated web design resources, beleértve rengeteg kategorizált fotót, valamint ikonokat és sablonokat.

12. Stock Up
Több mint 9000 fotó keresése 26 különböző weboldalról, egy helyen.

13. Death to the Stock Photo
Lépj fel az e-mail listájukra, és havonta egyszer megkapod az ingyenes fotócsomagjaikat a postaládádba.

14. Little Visuals
Ha feliratkozol a listájukra, hetente egyszer 7 ingyenes, nagy felbontású fotót kapsz e-mailben.

15. New Old Stock
Szerezzen ingyenes, vintage fotókat nyilvános archívumokból.

16. Cupcake
Ingyenes, nagy felbontású fotók Jonas Nilsson Lee-től.

17. Pexels
10 új ingyenes stock fotó minden nap.

18. Magdeleine
Naponta 1 ingyenes, nagy felbontású fotó.

19. SplitShire
Ingyenes, kiváló minőségű stock fotók egy olasz fotóstól.

20. ISO Republic
Kiváló minőségű stock fotók kreatívok számára forgalmazva.

21. Paul Jarvis
Feliratkozhat, hogy ingyen megkapja Paul Jarvis 20 legjobb fotóját.

(vissza a tetejére)

Szimbólumok + ikonok

Szimbólumokat vagy ikonokat keres a weboldalára? Ne keressen tovább.

22. Pixeden
Tonnányi ingyenes ikonkészlet, köztük időjárási ikonok, közösségi ikonok, vonalas ikonok és sok más.

23. Iconmonstr
Több mint 2800 merészen grafikus ikon többféle stílusban.

24. Captain Icon
Több mint 350 ingyenes vektoros ikon mobil- és webdesignhoz.

25. Linear Icons
Egy ikonfont 170 különböző ikon közül választhat.

26. Font Awesome
Egy szimbólumfont, amellyel szimbólumokat adhatsz hozzá a webhelyeidhez.

27. Fontello
Ikonbetűkészleteket generál.

28. Flaticon
Vektoros ikonok letöltése vagy ikonok webfontként való felvétele.

29. Fontello
. The Noun Project
Keressen egy főnévre, kap egy ingyenes szimbólumot vagy ikont.

30. Endless Icons
Ingyenes ikonkönyvtár.

31. Perfect Icons
Szabályozza és optimalizálja a közösségi média ikonokat az oldalához.

32. iconSweets
60 ingyenes vektoros Photoshop ikon.

33. Round Icons
Ingyenes mókás és professzionális ikoncsomagok.

(vissza a tetejére)

Fonts

A betűtípusok olyan fontos részét képezik a tervezésnek, hogy könnyen figyelmen kívül lehet hagyni őket. Nézzen inkább ide, és találja meg azokat a betűtípusokat, amelyekkel a következő szintre emelheti a tervezését.

34. Google Webfonts
Betűtípusok hozzáadása a weboldalához mindössze néhány kattintással.

35. Typegenius
Betűpárosító generátor.

36. Font Squirrel
Teljesen ingyenes betűtípusok százai.

37. Beautiful Web Type
Nézze meg a legszebb Google Webfonts kurátori gyűjteményét.

38. Lost Type
Gyönyörű fizetős betűtípusok.

(vissza a tetejére)

Színek

Segítségre van szüksége a legjobb színek kiválasztásához? Ezek a színeszközök az Ön rendelkezésére állnak.

39. Material UI
A Material Design és flat design színek galériája, amelyeket használhatsz a terveidben.

40. Paletton
Kezdjen bármilyen színnel, és kap egy palettát (színenként 5 árnyalattal) néhány különböző színsémamintázat alapján: monokróm, szomszédos, hármas, tetrad vagy egyéni.

41. Design Seeds
Tonnányi nagyszerű színpaletta fényképek alapján. Kereshetsz kulcsszó alapján vagy hasonló színekre.

42. Adobe Color Wheel
Választhat különböző típusú színpárosítások közül, és elmentheti a színpalettáit.

43. Material Palette
Generáljon színpalettát 2 szín alapján.

44. Flat UI Color Picker
A név mindent elmond.

45. Flat UI Colors
Dettó.

46. Bootflat
Flat színválasztó.

47. Coolors
Színpaletta generátor.

48. Skala Color
Ingyenes színválasztó letöltése.

49. BrandColors
Nézze meg a nagy márkák által használt pontos színeket.

50. 0-tól 255-ig
Keresd meg a tökéletes színvariációt, amit keresel.

51. Színbarátok
Böngéssz a felhasználók színpalettái között, és add hozzá a sajátodat a közösséghez.

52. Palette for Chrome
Generál színpalettákat képek alapján.

(vissza a tetejére)

Háttér + textúrák

A fotók, betűtípusok és színek nem jelentik a design végét – szükség van hátterekre és textúrákra is, amelyek mindezt összetartják. Találd meg a tiédet ezekkel az eszközökkel.

53. Pattern8
Tonnányi funky, merész és világos ismétlődő minta közül választhatsz.

54. Repeat-X Repeat-Y
Bámulatos ismétlődő minták a világ minden tájáról.

55. Texture King
Minden textúra, amire csak vágyhatsz: grunge, rozsda, vakolat, beton, kosz és még sok más.

56. Patternico
Készíts saját mintákat a Font Awesome ikonok segítségével. Testre szabhatod a háttérszínt, a vászon méretét és az alakzat átláthatóságát.

57. Subtle Patterns
Ingyenesen letölthető minták.

58. Lost and Taken
Ingyenes textúrák rengeteg kategóriában, köztük karton, kő, fém, buborékok, varrat nélküli és sok más.

59. BG Patterns
Hézagmentes minták készítése testreszabható színekkel, formákkal és egyebekkel.

(vissza a tetejére)

UI (User Interface) Kits/Guides

A webdesign több, mint a vizuális megjelenés. Az, ahogyan egy webhely felhasználói felülete “érzi” magát a felhasználó számára, szintén kritikus tényező. Ezek az eszközök segítenek megbizonyosodni arról, hogy a saját felhasználói felületének kialakítása megfelelő.

60. 55+ Elements Free UI Kit
Tiszta, modern UI kit. Mindenképpen nézz körül a Behance weboldalon, ahol rengeteg nagyszerű forrást találsz más tervezőktől!

61. Oh no, not another UI Kit
Egy egyszerű, lapos, nyílt forráskódú mobil és webes UI kit, amely PSD fájlként érkezik.

62. PSD Booster Freebies
Tonnányi nagyszerű Photoshop freebies, köztük UI-készletek, témák és még sok más.

63. Material Design Guidelines
A Google Material Design szabványainak hivatalos útmutatója.

(vissza a tetejére)

Webfejlesztési források

A weboldal megtervezése után azt fejleszteni kell! Akár a folyamat mindkét oldalán dolgozik (tervezi ÉS építi a webhelyet), akár valaki más tervei alapján épít webhelyet, ezek a fejlesztői eszközök segítenek abban, hogy a terv virtuális valósággá váljon.

(vissza a tetejére)

Domainnév keresőmotorok

A domainnevek a webhely központi elemei – ezek azok a közvetlen címek, amelyeken a felhasználók megtalálják webhelyét az interneten. Az internet azonban zsúfolt hely, és nehéz lehet megtalálni a kívánt domainnevet. Ezek az eszközök segítenek kideríteni, hogy a kívánt név elérhető-e, és létrehozni egy olyat, ami elérhető, ha az első választása nem az.

64. Namemesh
Egy hatékony domainnév keresőmotor, amely segít megtalálni a rövid, szórakoztató, gyakori, hasonló és különféle más minősítő tulajdonságokkal rendelkező domainneveket.

65. Nameboy
Adjon meg egy-két kulcsszót, és kap egy listát az azokat tartalmazó elérhető domainnevekről.

66. Panabee
Írd le két szóban, hogy mit szeretnél, és a Panabee létrehoz egy listát a lehetséges domainnevekről.

67. Impossibility
Generáljon véletlenszerű domainneveket egy szó alapján.

68. LeanDomainSearch
Keres egy domain nevet kulcsszó alapján.

(vissza a tetejére)

Frameworks, Templates, Code Packs, + Themes

Néha egy weboldal minden részét a nulláról kell kódolnia – de néha nem. Íme egy lista azokról a keretrendszerekről, sablonokról, kódcsomagokról és témákról, amelyekkel csökkentheti a nehéz munkát.

69. WP-Flex
Egy üres, reszponzív WordPress téma boilerplate, amely követi a hivatalos WordPress Codex legjobb gyakorlatokat és követelményeket.

70. Foundation
Egy fejlett reszponzív keretrendszer, amely az egyik legnépszerűbb a piacon.

71. Ionic
Mobilalkalmazások készítése az ismert és szeretett webes technológiák felhasználásával.

72. Initializr
Gyorsan generáljon sablont a HTML5 Boilerplate alapján.

73. Materialize
A Google Material Design specifikációin alapuló modern, reszponzív keretrendszer.

74. WordPress Plugin Boilerplate
Ha WordPress bővítményeket szeretne készíteni, a Plugin Boilerplate egy szabványosított, objektumorientált kiindulópont.

75. Front-end Boilerplate
Egy alapvető kiindulópont a webhelyek létrehozásához, hogy ne kelljen minden alkalommal mindent a semmiből újra létrehozni.

76. HTML5 Boilerplate
Az első és a legjobb. Ingyenes HTML5 boilerplate kód.

77. HTML5 UP
Ingyenes, teljesen reszponzív HTML5 sablon.

78. 1 Line CSS Grid Framework
Egy mindössze 1 soros CSS keretrendszer!

79. 960 Grid System
Egy Skillcrush kedvenc.

80. Starkers for WordPress
Egy alapvető sablon az első WordPress témád fejlesztéséhez.

81. Barebones for WordPress
Ingyenes WordPress sablon fejlesztőknek.

82. Underscores
WordPress sablon egy vadonatúj téma kialakításához.

83. Sage for WordPress
HTML5 boilerplate és Bootstrap alapú WordPress kezdő téma.

84. Whiteboard for WordPress
Egy tiszta, alapvető WordPress téma fejlesztőknek.

85. Bootstrap
Egy reszponzív HTML, CSS és JS keretrendszer.

86. Bootswatch
Ingyenes témák a Bootstraphez.

(vissza a tetejére)

Code Style Guides

Az alapkészségek elsajátítása nélkül nem kezdhetsz el kódolni, de ha már elsajátítottad ezeket a készségeket, itt az ideje megtanulni, hogyan kell művészien kódolni. Ezek az útmutatók megtanítják a legjobb kódolási gyakorlatokat, amelyek az alapszintet meghaladóan emelik a munkádat.

87. Web Field Manual
A modern kódolás forrásainak, legjobb gyakorlatainak, inspirációinak és referenciaanyagainak gyűjteménye. Eszközökkel és további forrásokkal, valamint nyelvspecifikus információkkal teli részeket is tartalmaz.

88. Google Developers Web Fundamentals
A webfejlesztés legjobb gyakorlatainak átfogó forrása, egyenesen a Google-től. Tökéletes mind az új fejlesztőknek, mind azoknak, akik jobbá szeretnék tenni projektjeiket.

89. Telepítések legjobb gyakorlatai
A weboldal vagy alkalmazás telepítése előtt mindenképpen olvassa el ezeket a legjobb gyakorlatokat, hogy minden zökkenőmentesen menjen.

90. GitHub
A GitHub saját kódstílus útmutatója.

91. Google
Google saját kódstílus útmutatója.

92. Mozilla
A Mozilla profijainak kódstílus útmutatója.

(vissza a tetejére)

Kódellenőrzés

Végeztél azzal a weboldallal? Ne olyan gyorsan. Mielőtt a projektet “késznek” jelölné, használja ezeket az eszközöket, hogy elvarrja az elvarratlan szálakat a kódban, és ellenőrizze, hogy megfelel-e a hozzáférhetőségi, stílusbeli és iparági legjobb gyakorlatokra vonatkozó szabványoknak.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(vissza a tetejére)

Készen áll arra, hogy ezeket az eszközöket kombinálja a technológiai pénzkereséshez szükséges készségekkel? Nézd meg a programok oldalunkat, hogy megtaláld a számodra megfelelő Skillcrush Blueprint tanfolyamot. Mindössze három hónap alatt képesítést szerezhetsz arra, hogy elkezdj dolgozni a weben.