Leren van de vaardigheden die je nodig hebt voor web design of web ontwikkeling is de eerste stap naar het werken op het web-maar dat betekent ook dat je vertrouwd moet raken met de gereedschappen van het vak. Daarom hebben we deze lijst samengesteld met 99 gratis tools die je nodig hebt voor web-ontwikkeling, web-ontwerp, of beide.

Alle hulpmiddelen op deze lijst zijn gratis te gebruiken en vullen de vaardigheden aan die we leren in onze Web Design, Web Developer, en Front End Developer Blueprints (door instructeur geleide lessen die je door de basis van elke rol leiden).

Tijdens het leren, houd deze lijst bij de hand en zie het als je eigen virtuele gereedschapskist.

Web Design Resources

Deze lijst met hulpmiddelen voor webdesign bevat hulpmiddelen voor beginners, maar ook ontwerpmiddelen die je gedurende je hele carrière van dienst zullen zijn.

(terug naar boven)

Nieuwsbrieflijsten

1. Creative Market
Voordat je iets anders doet, ga je op de Creative Market nieuwsbrief lijst. Eens per week krijgt u een e-mail vol met 5 gratis downloads, inclusief alles van patronen en lettertypen tot sjablonen en thema’s.

(terug naar boven)

Software + Apps

Deze softwareprogramma’s en webapplicaties bieden een solide basis voor webdesign.

2. CoffeeCup Software
Zij bieden allerlei gratis apps voor webdesigners, waaronder een HTML-editor, webformulierbouwer, winkelwagenontwerper en vele andere.

3. InVision-app
Krachtige prototyping- en samenwerkingstools. U kunt high-fidelity mockups en prototypen maken in slechts enkele minuten.

4. Pixlr
Bewerk afbeeldingen rechtstreeks in uw browser.

5. Canva
Een verbluffend eenvoudige grafische ontwerpsoftware die iedereen kan gebruiken. De zoek- en sleepfunctie is zo eenvoudig en nuttig!

6. Easel.ly
Geweldige gratis infografiesjablonen.

(terug naar boven)

Foto’s

Foto’s zijn een essentieel onderdeel van webdesign. Deze stockfotobronnen zijn de belangrijkste go-to’s wanneer u de juiste foto op dit moment nodig hebt.

7. Unsplash
De mooiste gratis stockfoto’s die er zijn, en met tonnen variatie. Elke dag worden nieuwe afbeeldingen toegevoegd.

8. PicJumbo
Krijg gratis foto’s in uw inbox die volledig gratis zijn voor persoonlijk en commercieel gebruik.

9. Gratisography
Gratis hoge-resolutie afbeeldingen die u kunt gebruiken in persoonlijke en commerciële projecten. Zij hebben gemakkelijk-aan-browse categorieën: dieren, aard, voorwerpen, grillig, en more.

10. Compfight
Zoek tonnen afbeeldingen met een licentie voor persoonlijk en/of commercieel gebruik, meestal van Flickr.

11. IM Free
Gezamenlijke web design bronnen, inclusief een ton van gecategoriseerde foto’s, plus pictogrammen en sjablonen.

12. Stock Up
Zoek meer dan 9.000 foto’s van 26 verschillende websites, allemaal op één plek.

13. Death to the Stock Photo
Kies voor hun e-maillijst en ontvang één keer per maand hun gratis fotopakketten in uw inbox.

14. Little Visuals
Als u op hun lijst komt te staan, krijgt u eens per week 7 gratis high-res foto’s per e-mail toegestuurd.

15. New Old Stock
Krijg gratis, oude foto’s uit openbare archieven.

16. Cupcake
Gratis high-res foto’s van Jonas Nilsson Lee.

17. Pexels
10 nieuwe gratis stockfoto’s elke dag.

18. Magdeleine
1 gratis high-res foto per dag.

19. SplitShire
Gratis stockfoto’s van hoge kwaliteit van een Italiaanse fotograaf.

20. ISO Republic
Stockfoto’s van hoge kwaliteit, gericht op creatieven.

21. Paul Jarvis
Teken in om 20 van Paul Jarvis’s top foto’s gratis te ontvangen.

(terug naar boven)

Symbolen + Pictogrammen

Op zoek naar symbolen of pictogrammen om op uw website te gebruiken? Zoek niet verder.

22. Pixeden
Veel gratis icon sets, inclusief weericonen, sociale iconen, lijniconen, en vele anderen.

23. Iconmonstr
Meer dan 2800 vetgedrukte grafische iconen in een paar verschillende stijlen.

24. Captain Icon
Meer dan 350 gratis vector iconen voor mobiele en web ontwerpen.

25. Linear Icons
Een icoon lettertype met 170 verschillende iconen om uit te kiezen.

26. Font Awesome
Een symboollettertype waarmee u symbolen aan uw websites kunt toevoegen.

27. Fontello
Genereert pictogram lettertype packs.

28. flaticon
Download vector pictogrammen of neem pictogrammen op als webfonts.

29. The Noun Project
Zoek een zelfstandig naamwoord, krijg een gratis symbool of icoon.

30. Endless Icons
Gratis icon library.

31. Perfect Icons
Aanpassen en optimaliseren van social media iconen voor uw site.

32. iconSweets
60 gratis vector Photoshop pictogrammen.

33. Round Icons
Gratis eigenzinnige en professionele pictogrammenbundels.

(terug naar boven)

Fonts

Fonts zijn zo’n cruciaal onderdeel van ontwerp dat ze gemakkelijk over het hoofd kunnen worden gezien. Kijk in plaats daarvan hier, en vind de lettertypen die uw ontwerp naar het volgende niveau tillen.

34. Google Webfonts
Voeg lettertypen aan uw website toe in slechts een paar klikken.

35. typegenius
Font pairing generator.

36. Font Squirrel
Honderden volledig gratis lettertypes.

37. Beautiful Web Type
Bekijk een samengestelde verzameling van de mooiste Google-webfonts.

38. Lost Type
Mooie pay-what-you-can fonts.

(terug naar het begin)

Colors

Hulp nodig bij het kiezen van de beste kleuren voor uw ontwerp? Deze kleurentools staan tot uw dienst.

39. Material UI
Een galerij van Material Design- en flat design-kleuren om in uw ontwerpen te gebruiken.

40. Paletton
Start met een willekeurige kleur en krijg een palet (met 5 tinten per kleur) gebaseerd op een paar verschillende kleurenschema patronen: monochromatisch, aangrenzend, triade, tetrad, of aangepast.

41. Design Seeds
Tonnen geweldige kleurenpaletten van foto’s. Je kunt zoeken op trefwoord of naar vergelijkbare kleuren.

42. Adobe Kleurenwiel
Kies uit verschillende soorten kleurencombinaties en sla uw kleurenpaletten op.

43. Material Palette
Genereer een kleuren palet gebaseerd op 2 kleuren.

44. Flat UI Color Picker
De naam zegt het al.

45. Flat UI Colors
Dito.

46. Bootflat
Vlakke kleurenkiezer.

47. Coolors
Kleurenpalet generator.

48. Skala Color
Gratis kleurenkiezer downloaden.

49. BrandColors
Kijk naar de exacte kleuren die grote merken gebruiken.

50. 0 tot 255
Vind de perfecte kleurvariatie die u zoekt.

51. Colour Lovers
Bekijk kleurenpaletten van gebruikers en voeg uw eigen palet toe aan de community.

52. Palette for Chrome
Genereert kleurenpaletten op basis van afbeeldingen.

(terug naar het begin)

Achtergronden + Texturen

Foto’s, lettertypen en kleuren zijn niet het einde van een ontwerp-je hebt ook achtergronden en texturen nodig om ze allemaal bij elkaar te houden. Vind de jouwe met deze tools.

53. Pattern8
Veel funky, gedurfde en heldere herhalende patronen om uit te kiezen.

54. Repeat-X Repeat-Y
Verstillende herhalende patronen van over de hele wereld.

55. Texture King
Alle texturen die je maar kunt wensen: grunge, roest, gips, beton, vuil, en nog veel meer.

56. Patternico
Maak je eigen patronen met Font Awesome-pictogrammen. Pas de achtergrondkleur, canvasgrootte en vormtransparantie aan.

57. Subtle Patterns
Gratis patronen om te downloaden.

58. Lost and Taken
Gratis patronen in een heleboel categorieën, waaronder karton, steen, metaal, bellen, naadloos, en meer.

59. BG Patterns
Maak naadloze patronen met aanpasbare kleuren, vormen, en meer.

(terug naar het begin)

UI (User Interface) Kits/Guides

Web design is meer dan alleen visuele aantrekkingskracht. De manier waarop de gebruikersinterface van een site “aanvoelt” voor de gebruiker is ook een kritische factor. Met deze tools kunt u ervoor zorgen dat uw eigen UI-ontwerp op punt staat.

60. 55+ Elements Free UI Kit
Een strakke, moderne UI kit. Zorg ervoor dat je op de Behance website rondkijkt voor tonnen geweldige bronnen van andere ontwerpers!

61. Oh nee, niet weer een UI Kit
Een eenvoudige, platte, open source mobiele en web UI kit die wordt geleverd als een PSD bestand.

62. PSD Booster Freebies
Veel geweldige Photoshop freebies, waaronder UI kits, thema’s en meer.

63. Material Design Guidelines
De officiële gids voor Google’s Material Design-standaarden.

(terug naar boven)

Web Development Resources

Nadat een website is ontworpen, moet hij worden ontwikkeld! Of u nu aan beide kanten van het proces werkt (ontwerpen EN bouwen van een site), of een site bouwt op basis van het ontwerp van iemand anders, deze hulpmiddelen voor ontwikkelaars helpen u om dat ontwerp virtuele werkelijkheid te maken.

(terug naar boven)

Domeinnaamzoekmachines

Domeinnamen vormen het hart van een website – ze zijn het directe adres waar gebruikers uw site online kunnen vinden. Maar het internet is een drukke plek, en het kan moeilijk zijn om de exacte domeinnaam te vinden die u wilt. Deze hulpmiddelen helpen u erachter te komen of een naam die u wilt beschikbaar is, en om er een te maken die IS als uw eerste keuze dat niet is.

64. Namemesh
Een krachtige zoekmachine voor domeinnamen die u helpt bij het vinden van domeinen die kort, leuk, veelvoorkomend, vergelijkbaar en diverse andere kwalificeerders zijn.

65. Nameboy
Voer een trefwoord of twee in en krijg een lijst met beschikbare domeinen die deze bevatten.

66. Panabee
Beschrijf in twee woorden wat u wilt en Panabee genereert een lijst met potentiële domeinnamen.

67. Impossibility
Genereer willekeurige domeinnamen op basis van één woord.

68. LeanDomainSearch
Zoek naar een domeinnaam op trefwoord.

(terug naar het begin)

Frameworks, Templates, Code Packs, + Themes

Soms moet je elk onderdeel van een website van de grond af coderen, maar soms ook niet. Hier is een lijst van frameworks, templates, code packs, en thema’s die u kunt gebruiken om het zware werk te verminderen.

69. WP-Flex
Een blanco, responsieve WordPress thema boilerplate die de officiële WordPress Codex best practices en vereisten volgt.

70. Foundation
Een geavanceerd responsive framework dat een van de populairste is die er zijn.

71. Ionic
Maak mobiele apps met de webtechnologieën die u kent en waar u van houdt.

72. Initializr
Genereer snel een sjabloon op basis van HTML5 Boilerplate.

73. Materialize
Een modern, responsive framework gebaseerd op Google’s Material Design specificaties.

74. WordPress Plugin Boilerplate
Als u WordPress plugins wilt maken, is de Plugin Boilerplate een gestandaardiseerd, objectgeoriënteerd startpunt.

75. Front-end Boilerplate
Een basis startpunt voor het maken van uw websites zodat u niet elke keer alles vanaf nul opnieuw hoeft te maken.

76. HTML5 Boilerplate
De eerste en de beste. Gratis HTML5 boilerplate code.

77. HTML5 UP
Gratis volledig responsive HTML5 template.

78. 1 Regel CSS Raster Framework
Een framework voor CSS dat slechts 1 regel lang is.

79. 960 Grid System
Een Skillcrush favoriet.

80. Starkers voor WordPress
Een basissjabloon voor het ontwikkelen van uw eerste WordPress thema.

81. Barebones voor WordPress
Gratis WordPress sjabloon voor ontwikkelaars.

82. Underscores
WordPress sjabloon voor het bouwen van een gloednieuw thema.

83. Sage voor WordPress
Een WordPress starter thema gebaseerd op HTML5 boilerplate en Bootstrap.

84. Whiteboard voor WordPress
Een schoon, eenvoudig WordPress-thema voor ontwikkelaars.

85. Bootstrap
Een responsief HTML, CSS, en JS framework.

86. Bootswatch
Gratis thema’s voor Bootstrap.

(terug naar boven)

Code Style Guides

Je kunt niet beginnen met coderen zonder basisvaardigheden te leren, maar als je die vaardigheden eenmaal onder de knie hebt, is het tijd om te leren hoe je kunstig kunt coderen. Deze gidsen leren je de beste codeerpraktijken die je werk boven het basisniveau zullen tillen.

87. Web Field Manual
Een verzameling bronnen, beste praktijken, inspiratie en referentiemateriaal voor moderne codering. Er zijn ook secties gevuld met hulpmiddelen en aanvullende bronnen en taalspecifieke informatie.

88. Google Developers Web Fundamentals
Een uitgebreide bron voor best practices op het gebied van webontwikkeling, rechtstreeks van Google. Perfect voor zowel nieuwe ontwikkelaars als degenen die hun projecten beter willen maken.

89. Deployments Best Practices
Voordat u een website of app implementeert, moet u deze best practices bekijken om ervoor te zorgen dat alles soepel verloopt.

90. GitHub
GitHub’s eigen code stijlgids.

91. Google
Google’s code style guide.

92. Mozilla
Een code style guide van de profs bij Mozilla.

(terug naar het begin)

Code Validation

Voltooid met die website? Niet zo snel. Gebruik deze hulpmiddelen om de losse eindjes van uw code af te werken en te controleren of u voldoet aan de normen voor toegankelijkheid, stijl en beste praktijken in de branche voordat u het project als “klaar” bestempelt.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(terug naar boven)

Klaar om deze tools te combineren met de vaardigheden die je nodig hebt om geld te verdienen in tech? Kijk op onze programma pagina om de Skillcrush Blueprint cursus te vinden die bij jou past. In slechts drie maanden kun je gekwalificeerd zijn om te beginnen met werken op het web.