Lær de færdigheder, du har brug for til webdesign eller webudvikling, er det første skridt i retning af at arbejde på nettet – men det betyder også, at du skal gøre dig bekendt med værktøjerne i branchen. Derfor har vi sammensat denne liste med 99 gratis værktøjer, som du har brug for til enten webudvikling, webdesign eller begge dele.

Alle ressourcer på denne liste er gratis at bruge og supplerer de færdigheder, som vi underviser i vores Web Design, Web Developer og Front End Developer Blueprints (kurser med instruktør, der viser dig de grundlæggende færdigheder for hver rolle).

Hol denne liste ved hånden, mens du lærer, og tænk på den som din egen virtuelle værktøjskasse.

Webdesignressourcer

Denne liste over værktøjer til webdesign omfatter værktøjer til webdesign for begyndere samt designressourcer, der vil tjene dig gennem en hel karriere.

(tilbage til toppen)

Nyhedsbrevslister

1. Creative Market
Før du gør noget andet, skal du skrive dig på Creative Markets nyhedsbrevsliste. En gang om ugen får du en e-mail fyldt med 5 gratis downloads, herunder alt fra mønstre og skrifttyper til skabeloner og temaer.

(tilbage til toppen)

Software + Apps

Disse softwareprogrammer og webapplikationer giver et solidt grundlag for webdesign.

2. CoffeeCup Software
De tilbyder alle mulige gratis apps til webdesignere, herunder en HTML-editor, en webformularbygger, en indkøbsvognsdesigner og mange andre.

3. InVision-app
Kraftige prototype- og samarbejdsværktøjer. Du kan få high-fidelity mockups og prototyper på få minutter.

4. Pixlr
Redigér billeder direkte i din browser.

5. Canva
Fantastisk nem grafisk designsoftware, som alle kan bruge. Søge- og trækfunktionen er så enkel og hjælpsom!

6. Easel.ly
Fantastiske gratis infografikskabeloner.

(tilbage til toppen)

Fotos

Fotos er en vigtig del af webdesign. Disse stockfoto-ressourcer er vigtige go-to’s, når du har brug for det rigtige foto lige nu.

7. Unsplash
Nogle af de smukkeste gratis stockfotos derude, og med tonsvis af variation. Der tilføjes nye billeder hver dag.

8. PicJumbo
Få gratis billeder leveret til din indbakke, som er helt gratis til personlig og kommerciel brug.

9. Gratisography
Gratis billeder i høj opløsning, som du kan bruge i personlige og kommercielle projekter. De har kategorier, der er nemme at gennemse: dyr, natur, objekter, finurlige og meget mere.

10. Compfight
Søg tonsvis af billeder, der er licenseret til personlig og/eller kommerciel brug, for det meste fra Flickr.

11. IM Free
Kuraterede webdesignressourcer, herunder et væld af kategoriserede billeder samt ikoner og skabeloner.

12. Stock Up
Søg over 9.000 fotos fra 26 forskellige websteder, alt sammen på ét sted.

13. Death to the Stock Photo
Optag dig på deres e-mail-liste, og få deres gratis fotopakker i din indbakke en gang om måneden.

14. Little Visuals
Hvis du tilmelder dig deres liste, får du 7 gratis fotos i høj opløsning tilsendt pr. e-mail en gang om ugen.

15. New Old Stock
Få gratis, vintage fotos fra offentlige arkiver.

16. Cupcake
Gratis, højopløste fotos af Jonas Nilsson Lee.

17. Pexels
10 nye gratis stockfotos hver dag.

18. Magdeleine
1 gratis foto i høj opløsning om dagen.

19. SplitShire
Gratis stockfotos i høj kvalitet af en italiensk fotograf.

20. ISO Republic
Stockfotos af høj kvalitet, der markedsføres til kreative.

21. Paul Jarvis
Tilmeld dig for at få 20 af Paul Jarvis’ bedste fotos gratis.

(tilbage til toppen)

Symboler + ikoner

Søger du symboler eller ikoner til brug på dit websted? Du behøver ikke lede længere.

22. Pixeden
Tonsvis af gratis ikonsæt, herunder vejrikoner, sociale ikoner, linjeikoner og mange andre.

23. Iconmonstr
Mere end 2800 fed grafiske ikoner i et par forskellige stilarter.

24. Captain Icon
Over 350 gratis vektorikoner til mobil og webdesign.

25. Linear Icons
En ikonskrifttype med 170 forskellige ikoner at vælge imellem.

26. Font Awesome
En symbolskrifttype, der giver dig mulighed for at tilføje symboler til dine websteder.

27. Fontello
Genererer ikonskriftpakker.

28. flaticon
Download vektorikoner eller inkluder ikoner som webfonts.

29. The Noun Project
Søg efter et navneord, få et gratis symbol eller ikon.

30. Endless Icons
Gratis ikonbibliotek.

31. Perfekte ikoner
Apas og optimer ikoner til sociale medier til dit websted.

32. iconSweets
60 gratis vektor Photoshop-ikoner.

33. Runde ikoner
Gratis skæve og professionelle ikonpakker.

(tilbage til toppen)

Fonts

Fonts er en så afgørende del af design, at de kan være lette at overse. Se i stedet her, og find de skrifttyper, der kan tage dit design til det næste niveau.

34. Google Webfonts
Føj skrifttyper til dit websted med få klik.

35. typegenius
Fontparringsgenerator.

36. Font Squirrel
Hundredvis af helt gratis skrifttyper.

37. Beautiful Web Type
Kig på en kurateret samling af de smukkeste Google-webtyper.

38. Lost Type
Skønne skrifttyper mod betaling.

(tilbage til toppen)

Farver

Har du brug for hjælp til at vælge de bedste farver til dit design? Disse farveværktøjer er til din tjeneste.

39. Material UI
Et galleri med farver i Material Design og flat design, som du kan bruge i dine designs.

40. Paletton
Start med en hvilken som helst farve, og få en palet (med 5 nuancer pr. farve) baseret på et par forskellige farveskema-mønstre: monokromatisk, tilstødende, triade, tetrad eller brugerdefineret.

41. Design Seeds
Tonsvis af fantastiske farvepaletter taget ud fra fotografier. Du kan søge efter nøgleord eller efter lignende farver.

42. Adobe Color Wheel
Vælg mellem forskellige typer farveparringer, og gem dine farvepaletter.

43. Materialepalet
Generer en farvepalet baseret på 2 farver.

44. Flat UI Color Picker
Navnet siger det hele.

45. Flat UI Colors
Ditto.

46. Bootflat
Flat farvevælger.

47. Coolors
Farvepaletgenerator.

48. Skala Color
Gratis farvevælger til download.

49. BrandColors
Se de nøjagtige farver, som de store mærker bruger.

50. 0 til 255
Find den perfekte farvevariation, du leder efter.

51. Farvelskere
Se brugernes farvepaletter, og tilføj dine egne til fællesskabet.

52. Palette for Chrome
Genererer farvepaletter baseret på billeder.

(tilbage til toppen)

Baggrunde + teksturer

Fotos, skrifttyper og farver er ikke enden på et design – du har også brug for baggrunde og teksturer for at holde det hele sammen. Find dine med disse værktøjer.

53. Mønster8
Tonsvis af funky, dristige og lyse gentagende mønstre at vælge imellem.

54. Repeat-X Repeat-Y
Fantastiske gentagende mønstre fra hele verden.

55. Texture King
Alle de teksturer, du nogensinde kunne ønske dig: grunge, rust, gips, beton, snavs og mange flere.

56. Patternico
Skab dine egne mønstre ved hjælp af Font Awesome-ikoner. Tilpas baggrundsfarven, lærredets størrelse og formens gennemsigtighed.

57. Subtle Patterns
Mønstre, der kan downloades gratis.

58. Lost and Taken
Gratis teksturer i et væld af kategorier, herunder karton, sten, metal, bobler, sømløse og meget mere.

59. BG Patterns
Opret sømløse mønstre med farver, former og meget mere, der kan tilpasses.

(tilbage til toppen)

UI (User Interface) Kits/Guides

Webdesign er mere end blot visuel appel. Den måde, som et websteds brugergrænseflade “føles” på for brugeren, er også en afgørende faktor. Disse værktøjer vil hjælpe dig med at sikre, at dit eget UI-design er i top.

60. 55+ Elements Free UI Kit
Et rent, moderne UI-kit. Sørg for at søge rundt på Behance-webstedet for at finde tonsvis af gode ressourcer fra andre designere!

61. Åh nej, ikke endnu et UI Kit
Et simpelt, fladt, open source UI-kit til mobil og web, der leveres som en PSD-fil.

62. PSD Booster Freebies
Tonsvis af fantastiske Photoshop-freebies, herunder UI-kits, temaer og meget mere.

63. Material Design Guidelines
Den officielle vejledning til Googles Material Design-standarder.

(tilbage til toppen)

Webudviklingsressourcer

Når et websted er designet, skal det udvikles! Uanset om du arbejder på begge sider af processen (design OG opbygning af et websted) eller opbygger et websted baseret på andres designs, hjælper disse udviklingsværktøjer dig med at gøre designet til virtuel virkelighed.

(tilbage til toppen)

Domænenavnssøgemaskiner

Domænenavne er kernen i et websted – de er den direkte adresse, hvor brugerne kan finde dit websted online. Men internettet er et overfyldt sted, og det kan være svært at finde præcis det domænenavn, du ønsker. Disse værktøjer hjælper dig med at finde ud af, om et navn, du ønsker, er tilgængeligt, og med at oprette et, der ER, hvis dit første valg ikke er det.

64. Namemesh
En effektiv søgemaskine til domænenavne, der hjælper dig med at finde domæner, der er korte, sjove, almindelige, lignende og forskellige andre kvalifikatorer.

65. Nameboy
Indtast et nøgleord eller to, og få en liste over tilgængelige domæner, der inkorporerer dem.

66. Panabee
Beskriv, hvad du ønsker med to ord, og Panabee genererer en liste over potentielle domænenavne.

67. Impossibility
Generer tilfældige domænenavne baseret på ét ord.

68. LeanDomainSearch
Søg efter et domænenavn ud fra et nøgleord.

(tilbage til toppen)

Frameworks, skabeloner, kodepakker + temaer

I nogle tilfælde skal du kode alle dele af et websted fra bunden – men nogle gange skal du ikke. Her er en liste over frameworks, skabeloner, kodepakker og temaer, som du kan bruge til at skære ned på det tunge arbejde.

69. WP-Flex
En tom, responsiv WordPress-tema boilerplate, der følger den officielle WordPress Codex bedste praksis og krav.

70. Foundation
En avanceret responsiv ramme, der er en af de mest populære derude.

71. Ionic
Opret mobilapps ved hjælp af de webteknologier, du kender og elsker.

72. Initializr
Generer hurtigt en skabelon baseret på HTML5 Boilerplate.

73. Materialize
En moderne, responsiv ramme baseret på Googles Material Design-specifikationer.

74. WordPress Plugin Boilerplate
Hvis du ønsker at oprette WordPress-plugins, er Plugin Boilerplate et standardiseret, objektorienteret udgangspunkt.

75. Front-end Boilerplate
Et grundlæggende udgangspunkt for oprettelse af dine websteder, så du ikke behøver at genskabe alt fra bunden hver gang.

76. HTML5 Boilerplate
Den første og den bedste. Gratis HTML5 boilerplate-kode.

77. HTML5 UP
Gratis, fuldt responsiv HTML5-skabelon.

78. 1 Line CSS Grid Framework
En ramme for CSS, der kun er 1 linje lang!

79. 960 Grid System
En Skillcrush-favorit.

80. Starkers for WordPress
En grundlæggende skabelon til udvikling af dit første WordPress-tema.

81. Barebones til WordPress
Gratis WordPress-skabelon til udviklere.

82. Underscores
WordPress-skabelon til opbygning af et helt nyt tema.

83. Sage for WordPress
Et WordPress-starttema baseret på HTML5 boilerplate og Bootstrap.

84. Whiteboard til WordPress
Et rent, grundlæggende WordPress-tema til udviklere.

85. Bootstrap
En responsiv HTML-, CSS- og JS-ramme.

86. Bootswatch
Gratis temaer til Bootstrap.

(tilbage til toppen)

Code Style Guides

Du kan ikke begynde at kode uden at lære grundlæggende færdigheder, men når du har disse færdigheder på plads, er det tid til at lære at kode kunstfærdigt. Disse vejledninger vil lære dig de bedste kodningspraksis, der vil løfte dit arbejde ud over det grundlæggende niveau.

87. Web Field Manual
En samling af ressourcer, bedste praksis, inspiration og referencematerialer til moderne kodning. Der er også afsnit fyldt med værktøjer og yderligere ressourcer og sprogspecifikke oplysninger.

88. Google Developers Web Fundamentals
En omfattende ressource til bedste praksis inden for webudvikling, direkte fra Google. Perfekt til både nye udviklere og dem, der ønsker at gøre deres projekter bedre.

89. Best Practices for implementeringer
Hvis du implementerer et websted eller en app, skal du huske at tjekke disse best practices for at sikre, at alt går glat.

90. GitHub
GitHubs helt egen kode-stilguide.

91. Google
Google’s code style guide.

92. Mozilla
En kode-stilguide fra de professionelle hos Mozilla.

(tilbage til toppen)

Kodevalidering

Er du færdig med det websted? Ikke så hurtigt. Før du markerer projektet som “færdigt”, skal du bruge disse værktøjer til at få styr på de løse ender i din kode og kontrollere, om du overholder standarderne for tilgængelighed, stil og bedste praksis i branchen.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(tilbage til toppen)

Er du klar til at kombinere disse værktøjer med de færdigheder, du har brug for for at tjene penge inden for teknologi? Tjek vores programside for at finde det Skillcrush Blueprint-kursus, der passer til dig. På kun tre måneder kan du blive kvalificeret til at begynde at arbejde på nettet.