Att lära sig de färdigheter du behöver för webbdesign eller webbutveckling är det första steget mot att arbeta på webben – men det innebär också att du måste bekanta dig med verktygen. Därför har vi sammanställt den här listan med 99 kostnadsfria verktyg som du behöver för antingen webbutveckling, webbdesign eller både och.

Varje resurs på den här listan är gratis att använda och kompletterar de färdigheter som vi lär ut i våra Blueprints för webbdesign, webbutvecklare och front end-utvecklare (instruktionsledda klasser som går igenom grunderna för varje roll).

När du lär dig, ha den här listan till hands och se den som din egen virtuella verktygslåda.

Resurser för webbdesign

Denna lista över verktyg för webbdesign innehåller verktyg för nybörjare samt designresurser som kommer att tjäna dig genom en hel karriär.

(tillbaka till början)

Nyhetsbrevslistor

1. Creative Market
För att göra något annat bör du skriva upp dig på Creative Markets nyhetsbrevslista. En gång i veckan får du ett e-postmeddelande med fem gratis nedladdningar, inklusive allt från mönster och typsnitt till mallar och teman.

(tillbaka till början)

Mjukvara + appar

Dessa programvaror och webbapplikationer ger en solid grund för webbdesign.

2. CoffeeCup Software
De erbjuder alla sorters gratis appar för webbdesigners, inklusive en HTML-redigerare, en webbformulärsbyggare, en designer för kundvagnen och många andra.

3. InVision-appen
Kraftiga verktyg för prototypframställning och samarbete. Du kan få högtrohetsmockups och prototyper på bara några minuter.

4. Pixlr
Redigera bilder direkt i din webbläsare.

5. Canva
En otroligt enkel programvara för grafisk design som alla kan använda. Sök- och dragfunktionen är så enkel och hjälpsam!

6. Easel.ly
Grymma gratis infografikmallar.

(tillbaka till början)

Bilder

Bilder är en viktig del av webbdesign. De här bildresurserna är viktiga när du behöver rätt foto just nu.

7. Unsplash
Några av de vackraste gratis bilderna som finns, och med massor av variation. Nya bilder läggs till varje dag.

8. PicJumbo
Få gratis foton levererade till din inkorg som är helt fria för personlig och kommersiell användning.

9. Gratisography
Gratis högupplösta bilder som du kan använda i personliga och kommersiella projekt. De har kategorier som är lätta att bläddra i: djur, natur, objekt, finurligt med mera.

10. Compfight
Sök massor av bilder som är licensierade för personligt och/eller kommersiellt bruk, mestadels från Flickr.

11. IM Free
Kurerade webbdesignresurser, inklusive massor av kategoriserade foton, plus ikoner och mallar.

12. Stock Up
Sök över 9 000 foton från 26 olika webbplatser, allt på ett och samma ställe.

13. Death to the Stock Photo
Anslut dig till deras e-postlista och få deras gratis fotopaket i din inkorg en gång i månaden.

14. Little Visuals
Om du ansluter dig till deras lista får du 7 gratis högupplösta foton som e-postas till dig en gång i veckan.

15. New Old Stock
Få gratis vintagefoton från offentliga arkiv.

16. Cupcake
Gratis högupplösta foton av Jonas Nilsson Lee.

17. Pexels
10 nya gratis stockfoton varje dag.

18. Magdeleine
1 gratis högupplöst foto per dag.

19. SplitShire
Gratis stockfoton av hög kvalitet från en italiensk fotograf.

20. ISO Republic
Stockfoton av hög kvalitet som marknadsförs till kreatörer.

21. Paul Jarvis
Anmäl dig för att få 20 av Paul Jarvis bästa bilder gratis.

(tillbaka till början)

Symboler + ikoner

Söker du symboler eller ikoner att använda på din webbplats? Sök inte längre.

22. Pixeden
Tonvis av gratis ikonuppsättningar, inklusive väderikoner, sociala ikoner, linjeikoner och många andra.

23. Iconmonstr
Mer än 2800 djärvt grafiska ikoner i några olika stilar.

24. Captain Icon
Över 350 fria vektorikoner för mobil och webbdesign.

25. Linear Icons
Ett ikonfont med 170 olika ikoner att välja mellan.

26. Font Awesome
Ett symbolteckensnitt som gör att du kan lägga till symboler på dina webbplatser.

27. Fontello
Genererar ikonteckensnittspaket.

28. flaticon
Ladda ner vektorikoner eller inkludera ikoner som webbteckensnitt.

29. The Noun Project
Sök efter ett substantiv och få en gratis symbol eller ikon.

30. Endless Icons
Gratis ikonbibliotek.

31. Perfect Icons
Anpassa och optimera ikoner för sociala medier för din webbplats.

32. iconSweets
60 fria vektorikoner i Photoshop.

33. Round Icons
Gratis skruvade och professionella ikonpaket.

(tillbaka till början)

Fonts

Fonts är en så viktig del av designen att de kan vara lätta att förbise. Titta istället här och hitta de typsnitt som tar din design till nästa nivå.

34. Google Webfonts
Lägg till typsnitt till din webbplats med några få klick.

35. typegenius
Typsnittspargenerator.

36. Font Squirrel
Hundratals helt gratis typsnitt.

37. Beautiful Web Type
Kolla in en samling av de vackraste Google-webbtyperna.

38. Lost Type
Vackra teckensnitt som du kan betala för.

(tillbaka till början)

Färger

Brakar du hjälp med att välja de bästa färgerna för din design? De här färgverktygen står till din tjänst.

39. Material UI
Ett galleri med färger för Material Design och platt design som du kan använda i din design.

40. Paletton
Start med en valfri färg och få en palett (med 5 nyanser per färg) baserad på några olika färgschemamönster: monokromatisk, intilliggande, triad, tetrad eller anpassad.

41. Design Seeds
Toner av fantastiska färgpaletter tagna från fotografier. Du kan söka efter nyckelord eller efter liknande färger.

42. Adobe Color Wheel
Välj mellan olika typer av färgkombinationer och spara dina färgpaletter.

43. Materialpalett
Generera en färgpalett baserad på 2 färger.

44. Flat UI Color Picker
Namnet säger allt.

45. Flat UI Colors
Ditto.

46. Bootflat
Fat färgval.

47. Coolors
Färgpalettgenerator.

48. Skala Color
Gratis färgplockare att ladda ner.

49. BrandColors
Kontrollera de exakta färgerna som stora varumärken använder.

50. 0 till 255
Finn den perfekta färgvariationen du letar efter.

51. Färgälskare
Bläddra bland användarnas färgpaletter och lägg till dina egna i gemenskapen.

52. Palette for Chrome
Genererar färgpaletter baserade på bilder.

(tillbaka till början)

Bakgrunder + texturer

Bilder, typsnitt och färger är inte slutet på en design – du behöver också bakgrunder och texturer för att hålla ihop allt. Hitta dina med de här verktygen.

53. Mönster8
Mängder av roliga, djärva och ljusa repetitiva mönster att välja mellan.

54. Repeat-X Repeat-Y
Fantastiska upprepande mönster från hela världen.

55. Texture King
Alla texturer du kan önska dig: grunge, rost, gips, betong, smuts och många fler.

56. Patternico
Skapa dina egna mönster med hjälp av Font Awesome-ikoner. Anpassa bakgrundsfärg, canvasstorlek och formtransparens.

57. Subtle Patterns
Mönster som kan laddas ner gratis.

58. Lost and Taken
Gratis texturer i massor av kategorier, bland annat kartong, sten, metall, bubblor, sömlösa med mera.

59. BG Patterns
Skapa sömlösa mönster med anpassningsbara färger, former med mera.

(tillbaka till början)

UI (User Interface) Kits/Guides

Webdesign är mer än bara visuellt tilltalande. Hur en webbplats användargränssnitt ”känns” för användaren är också en avgörande faktor. De här verktygen hjälper dig att se till att din egen användargränssnittsdesign är på topp.

60. 55+ Elements Free UI Kit
Ett rent och modernt UI-kit. Se till att söka runt på webbplatsen Behance för massor av bra resurser från andra designers!

61. Oh no, not another UI Kit
Ett enkelt, platt UI-kit för mobil och webb med öppen källkod som levereras som PSD-fil.

62. PSD Booster Freebies
Mängder av fantastiska Photoshop freebies, inklusive UI-kit, teman och mycket mer.

63. Material Design Guidelines
Den officiella guiden till Googles Material Design-standarder.

(tillbaka till början)

Resurser för webbutveckling

När en webbplats är utformad måste den utvecklas! Oavsett om du arbetar på båda sidorna av processen (utformning OCH uppbyggnad av en webbplats), eller om du bygger en webbplats utifrån någon annans utformning, hjälper de här utvecklingsverktygen dig att göra utformningen till virtuell verklighet.

(tillbaka uppåt)

Sökmotorer för domännamn

Domännamnen är kärnan i en webbplats – de är den direkta adressen där användarna kan hitta din webbplats på nätet. Men internet är en överfylld plats och det kan vara svårt att hitta exakt det domännamn du vill ha. De här verktygen hjälper dig att ta reda på om det namn du vill ha finns tillgängligt, och att skapa ett som ÄR om ditt första val inte är tillgängligt.

64. Namemesh
En kraftfull sökmotor för domännamn som hjälper dig att hitta domäner som är korta, roliga, vanliga, liknande och olika andra kvalificeringsfaktorer.

65. Nameboy
Inför ett eller två nyckelord och få en lista över tillgängliga domäner som innehåller dem.

66. Panabee
Beskriv vad du vill ha med två ord och Panabee genererar en lista över potentiella domännamn.

67. Impossibility
Generera slumpmässiga domännamn baserat på ett ord.

68. LeanDomainSearch
Sök efter ett domännamn efter nyckelord.

(tillbaka till början)

Frameworks, mallar, kodpaket + teman

Ibland behöver du koda varje del av en webbplats från grunden – men ibland behöver du inte det. Här är en lista över ramverk, mallar, kodpaket och teman som du kan använda för att minska det tunga arbetet.

69. WP-Flex
En tom, responsiv WordPress-tema boilerplate som följer den officiella WordPress Codex bästa praxis och krav.

70. Foundation
Ett avancerat responsivt ramverk som är ett av de mest populära som finns.

71. Ionic
Skapa mobilappar med hjälp av den webbteknik du känner till och älskar.

72. Initializr
Generera snabbt en mall baserad på HTML5 Boilerplate.

73. Materialize
Ett modernt, responsivt ramverk baserat på Googles Material Design-specifikationer.

74. WordPress Plugin Boilerplate
Om du vill skapa WordPress-plugins är Plugin Boilerplate en standardiserad, objektorienterad utgångspunkt.

75. Front-end Boilerplate
En grundläggande utgångspunkt för att skapa dina webbplatser så att du inte behöver återskapa allt från grunden varje gång.

76. HTML5 Boilerplate
Den första och bästa. Gratis HTML5 boilerplate-kod.

77. HTML5 UP
Gratis helt responsiv HTML5-mall.

78. 1 Line CSS Grid Framework
En ram för CSS som bara är en rad lång!

79. 960 Grid System
En Skillcrush-favorit.

80. Starkers for WordPress
En grundläggande mall för att utveckla ditt första WordPress-tema.

81. Barebones for WordPress
Gratis WordPress-mall för utvecklare.

82. Underscores
Mall för WordPress för att bygga upp ett helt nytt tema.

83. Sage for WordPress
Ett starttema för WordPress baserat på HTML5 boilerplate och Bootstrap.

84. Whiteboard för WordPress
Ett rent, grundläggande WordPress-tema för utvecklare.

85. Bootstrap
En responsiv ram för HTML, CSS och JS.

86. Bootswatch
Gratis teman för Bootstrap.

(tillbaka till början)

Code Style Guides

Du kan inte börja koda utan att lära dig grundläggande färdigheter, men när du väl har dessa färdigheter spikade är det dags att lära dig att koda konstnärligt. De här guiderna lär dig de bästa kodningsmetoderna som kommer att lyfta ditt arbete bortom den grundläggande nivån.

87. Web Field Manual
En samling resurser, bästa praxis, inspiration och referensmaterial för modern kodning. Det finns också avsnitt fyllda med verktyg och ytterligare resurser och språkspecifik information.

88. Google Developers Web Fundamentals
En omfattande resurs för bästa praxis för webbutveckling, direkt från Google. Perfekt för både nya utvecklare och de som vill göra sina projekt bättre.

89. Best Practices för driftsättningar
För att driftsätta en webbplats eller app ska du se till att kolla in de här bästa metoderna för att se till att allt går smidigt.

90. GitHub
GitHubs egen kodstilguide.

91. Google
Googles kodstilguide.

92. Mozilla
En kodstilguide från proffsen på Mozilla.

(tillbaka till början)

Kodvalidering

Är du klar med webbplatsen? Inte så snabbt. Innan du markerar projektet som ”färdigt” kan du använda de här verktygen för att få ordning på lösa trådar i koden och kontrollera om du uppfyller standarderna för tillgänglighet, stil och bästa praxis i branschen.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(tillbaka till början)

Är du redo att kombinera dessa verktyg med de färdigheter du behöver för att tjäna pengar inom teknik? Kolla in vår programsida för att hitta den kurs i Skillcrush Blueprint som passar dig. På bara tre månader kan du vara kvalificerad för att börja arbeta på webben.