Den ultimate listen over beste gratis verktøy og ressurser for front-end webutviklere

av Bradley Nice, Content Manager på ClickHelp.com - dokumentasjonsverktøy for programvare

Front-end utvikling er utviklingen av de elementene på et nettsted som kunden ser og samhandler direkte. Det er en kombinasjon av programmeringsferdigheter og estetikk.

Utfordringene knyttet til frontend-utviklere er at verktøyene og teknikkene som brukes for å lage frontend på et nettsted endrer seg kontinuerlig, og slik at utvikleren hele tiden må være klar over hvordan feltet utvikler seg.

Så jeg har samlet en liste over verktøy og ressurser for front-end utviklere som faller inn i flere kategorier: farger, CSS-generatorer, kalkulatorer og omformere, typografi og skrifttyper, ikoner, analyser nettstedstil, redaktører, utviklerverktøy, testing, ytelse, Optimalisering, tilbakemelding, inspirasjon, MOOC, Wireframes, Mockups & Prototypes, Design News & Community, Portfolio, Resources.

Farger

Color Hex: Et gratis fargeverktøy som gir informasjon om hvilken som helst farge

Materiale fargevelger

Enkel flat fargevelger: Velg formatet du ønsker å kopiere til utklippstavlen med velgeren øverst. Klikk på fargen du vil kopiere, så blir den lagt til utklippstavlen i det valgte formatet.

ColorDrop: Et fargematchende verktøy som lar deg redde favorittfargekombinasjoner.

Palettbar: Generer vakre fargepaletter uten forutgående designkunnskap.

ColorFavs: Det er et flott verktøy der du enkelt kan lage en fargepalett ved å dra og slippe bildet, sette inn en URL eller velge tilfeldige verdier.

Fargesikker: Vakre og tilgjengelige fargepaletter basert på WCAG Retningslinjer for tekst- og bakgrunnskontrastforhold.

FARGE: En enkel fargepalett for nettet.

SwatchMatic: En fargevelger for gjenstander fra ekte verden. Det lar deg raskt bygge paletter på farten ved å bruke frøfarger levert av Mother Nature selv. Pek mobilens kamera mot en farge du liker, og SwatchMatic forteller deg fargens navn (på flere språk) og alle verdiene du trenger for å gjenskape den, pluss at den gir deg fem andre farger som passer perfekt til den.

uiGradients: Vakre fargede graderinger.

Nettfargedata: Dette prosjektet tar sikte på å svare på spørsmål som: Hva er den vanligste fargen / fargene eller fargetonen på nettet? Foretrekker visse bransjer visse farger fremfor andre? Hvilke farger finnes vanligvis sammen?

Materialdesignfarger: Denne lille webappen hjelper deg å visualisere fargene på materialdesignet og også enkelt kopiere fargene i forskjellige formater.

Materiale UI-farger: Googles materielle UI-fargepalett består av primær- og aksentfarger som kan brukes til illustrasjon eller for å utvikle merkevarefargene dine. De er designet for å jobbe harmonisk med hverandre.

BADA55.io: BADA55.io handler om å finne de mest dårlige ordene for CSS-hexfargene.

Color Hexa: Det er et gratis fargeverktøy som gir informasjon om hvilken som helst farge. Bare skriv inn eventuelle fargeverdier i søkefeltet, og den vil tilby en detaljert beskrivelse og automatisk konvertere den til den tilsvarende verdien i heksadesimal, binær, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE -LCH, XYZ og xyY.

Kontrastforhold: Beregn enkelt fargekontrastforhold

Fifty Shades of Grey For Nettdesignere:

COLOURlovers: Brukeropprettet og delt fargepalettinspirasjon

Colllor: Fargepalettgenerator

Paletton: Verktøy for å lage fargekombinasjoner

Chrome Daltonize !: Daltonization er en teknikk for å eksponere detaljer for fargeblinde brukere, slik at de kan se hva de ellers ville ha gått glipp av

CSS Generatorer

CSS3.me: Denne er veldig minimal og stilig, men også veldig funksjonell. Det gir deg muligheten til å endre og stille inn kantradius, fallskygge, gradient og uklarhet.

CSS3 Generator: Det er både funksjonell og pent designet generator. Jeg tror dette er en av favorittene mine, fordi designen og brukergrensesnittet er så rent.

CSS3-Tricks Button Maker: Denne er nesten helt kontrollerbar av en dra-og-slipp-skyvekontroll.

CSS3 Button.net: Utformingen av denne mangler kanskje, men den gir mye mer valg enn den forrige. Det gir muligheten til å legge til flere tekstskygger, indre skygger, kantlinjer og skriftfarger. Det kan være vanskelig å finne ut med det første, men du får det til hvis du bare spiller med det i noen minutter.

Ultimate CSS Gradient Generator: CSS gradient generator

CSS3 knappegenerator: Denne gir deg en stor knapp for å manipulere skygge, kant, farge, og på toppen av det gir den muligheten til å redigere svevet over.

Border-Radius: Dette er et lite lite verktøy, som er veldig praktisk og enkelt. Alt du gjør er å stille inn hvor mye av en avrundet kant du vil ha på hvert hjørne. Og så sjekker du bare hva slags nettleserprefiks du vil ha, og det er det.

Fargerik CSS-gradient bakgrunnsgenerator: Generer CSS-bakgrunn

EnjoyCSS: Alt i en CSS-generator

CSS MenuMaker: Lag responsiv nettstednavigasjon

På / av vippebryter: Generer CSS3 av / på vippebrytere

CSSmatic: Gradient, grensradius, kasseskygge & støy tekstur generator

Ui Parade Live Tool: Knapp, skjema, ikon, båndbygger

CSS Arrow Please: CSS pilgenerator

CSS3 Patterns Gallery: CSS3 Pattern gallery

Layout Generator: Lag CSS-layout

Tridiv: Nettbasert redaktør for å lage 3D-former i CSS

Kalkulatorer og omformere

DPI Love: Finn DPI / PPI på hvilken som helst skjerm

CSS Inliner: Inline automatisk e-postens CSS

Code Beautify: Beautify, Validate, Minify, Analyse and Convert your JSON, XML, JavaScript, CSS, HTML, Excel

PXtoEM: Konverter piksler til EM

Density Buckets: Skjermtetthetsomformer for Android og iOS

Density Converter: Pixel Density Converter

Er dette netthinnen ?: DPI / PPI Display-kalkulator

NTH-test: nth-barn og nth-of-type tester

Typografi og skrifttyper

Google-skrifter: Åpen kildekode på nett

Fontspiration: Et bygningsverktøy for å lage morsomme, animerte typografiske mesterverk.

Gridlover: Verktøyet for å etablere et typografisk system med modulær skala og vertikal rytme.

Skriv Genius: Finn den perfekte fontkombinasjonen for ditt neste prosjekt.

Type Nugget: Type Nugget er et online typemiddelverktøy som gir deg fin kontroll over en robust base for hella fine webtype - alt via et behagelig brukergrensesnitt.

TypeWonder: Test nettfonter på et hvilket som helst live nettsted

Fit Text: En jQuery-plugin for oppblåsing av webtype

TypographyEditor: Typography Editor er et gratis og online verktøy for å lage typografiske plakater og bilder.

Bare min type:

Typecast: En nettleserbasert app for å lage vakre, realistiske og konsistente design basert på typografi.

Font ekorn: håndplukkede gratis nettfonter

Dafont: Arkiv med fritt nedlastbare skrifter

Font Space: Last ned gratis skrifter

Type Genius: Finn den perfekte fontkombinasjonen

Hva skrift er: Identifiser font fra et bilde

FontStruct: FontStruct er et gratis font-building verktøy sponset av verdens ledende forhandler av digital type, FontShop. FontStruct lar deg raskt og enkelt lage skrifter konstruert av geometriske former, som er ordnet i et rutemønster, som fliser eller murstein.

Vende typisk: Et typografiverktøy, skriv inn ordet du vil se, og se det satt umiddelbart i skrifttypene på datamaskinen din.

Font Swapper: Forhåndsvis hvordan nettsteder vil se ut med skrifter fra Webtype.

tinytype: En kompatibilitetstabel som viser de tilgjengelige standardsystemfontene på forskjellige mobilplattformer.

Typetester: Sammenlign nettfonter fra Adobe Edge, Google og Typekit

Tiff: Finn ut forskjellen mellom Google-skrifter

Beste gratis skrifttyper 2016: Min samling av gratis fonter i år

ikoner

Materialdesignikoner: 750 glyph Materialikon systemikoner pakke av Google Design

Iconogen: Generer favoritter, Windows 8-fliser, Apple Touch-ikoner, Android- og iOS-ikoner

Marka: Vakre transformerbare ikoner

Font Awesome: Skalerbare vektorikoner som umiddelbart kan tilpasses

Maki: Ikonsett for nettkartografi

Batch: 300+ ikoner for design av web og brukergrensesnitt

Fontello: Ikon fontgenerator

Fontastic: Lag din egen ikonfont

Iconmonstr: En stor samling glyfikoner fra en tysk kunstner

Octicons: Ikonfont lansert av GitHub

GlyphSearch: Søk etter ikoner fra Font Awesome, Glyphicons, IcoMoon, Ionicons og Octicons

Ikon Melon: SVG ikoner bibliotek for nett

Entypo: En pakke med 411 nøye laget premium piktogrammer av Daniel Bruce

Gemicon: 600+ gratis ikonsett, kommer i 3 forskjellige størrelser (16px, 32px, 64px)

Typikoner: Gratis-å-bruke vektorikoner innebygd i et nettverk for enkel bruk i brukergrensesnittene

Analyser nettstedstil

Stylify Me: Oversikt over stilguiden til et nettsted, inkludert farger, skrifter, størrelse og avstand

StyleStats: Enkelt verktøy for å samle CSS-statistikk på et nettsted

Farger: Finn ut den vanligste fargen eller fargen på et nettsted

Type-o-matic: En nettleserutvidelse som finner alle skriftene på en side

SnappySnippet: Trekk enkelt ut CSS og HTML fra valgt element

redaktører

CodePen: Et utstillingsvindu med avanserte teknikker med redigerbar kildekode

JS Bin: En live pastin for HTML, CSS & JavaScript og en rekke prosessorer

CSSDeck: Samling av fantastiske CSS og JS Creations for å hjelpe frontend-utviklere og designere

Dabblet: En interaktiv CSS lekeplass og delingsverktøy

Liveweave: Liveweave er en lekeplass for HTML5, CSS3 og JavaScript for webdesignere og utviklere

Adobe Edge Reflow: Designverktøy som supplerer designarbeidsflyten din for å hjelpe deg med å lage vakre responsive design for alle skjermstørrelser

webflyt: Dra-og-slipp nettstedsbygger for å lage profesjonelle responsive nettsteder

Macaw: Gir samme fleksibilitet som favorittbildeditoren din, men skriver også semantisk HTML og bemerkelsesverdig kortfattet CSS

Utviklerverktøy

Chrome DevTools: Sett med nettverksverktøy og feilsøkingsverktøy innebygd i Google Chrome

Grunt: JavaScript Task Runner for automatisering av oppgaver

LiveReload: CSS-redigeringer og bildeendringer gjelder live uten å måtte trykke på oppdaterings-knappen

Bower: Løsning på problemet med front-end-pakkehåndtering

Yeoman: Et økosystem fra generatoren, i utgangspunktet en plugin som kan kjøres med `yo`-kommandoen for å stillasere komplette prosjekter eller nyttige deler

Kan jeg bruke: Oppdaterte tabeller for nettleserstøtte for støtte for nettbaserte teknologier

HTML5 Vennligst: Slå opp HTML5, CSS3 og finn ut om de er klare til bruk

CSS-verdier: CSS-referanse, egenskaper og verdier

CSS Triggers: En uvurderlig referanse til hvordan CSS påvirker ytelsen

testing

W3C Markup Validation: Kontrollerer markeringsgyldigheten til webdokumenter i HTML, XHTML, SMIL, MathML

HTML_CodeSniffer: Kontrollerer HTML-kildekode og oppdager brudd på en definert kodingsstandard

W3C CSS Validation: Kontroller (CSS) og (X) HTML-dokumenter med stilark

CSS Lint: Påpeker problemer med CSS-koden

JS Lint: JavaScript-program som ser etter problemer i JavaScript-programmer

Plantevernmidler: Feilsøking av CSS-layout

PhantomCSS: Visual / CSS-regresjonstesting med PhantomJS

QUnit: Et testramme for JavaScript-enhet

Nettlesershots: Nettlesertest på tvers av plattformer

Responsinator: Sjekk hvordan nettstedet ditt vil se ut på de mest populære enhetene

Opera Mobile Classic Emulator: Bruk profilvelgeren til å gyte flere Opera Mobile Classic-forekomster med en definert oppløsning, pikseltetthet, brukergrensesnitt

Opptreden

Pingdom-hastighetstest på nettstedet: Test og analyser lastetiden på en direkteside

WebPagetest: Hastighetstest på nettstedet fra flere steder over hele verden

PageSpeed ​​Insights: Analyserer nettstedet og foreslår måter å få det til å laste raskere

GTmetrix: Resultatene til nettstedet og gir anbefalinger for å løse disse problemene

YSlow: Analyserer og tilbyr forslag for å forbedre sidens ytelse

Perfmap: Et ytelsesvarmekart over ressurser lastet i nettleseren

optimalisering

CSSCSS: Fortell deg hvilke regelsett som har dupliserte erklæringer

Helium: javascript-verktøy for å skanne nettstedet ditt og vise ubrukt CSS

CSS Tidy: opensource CSS-parser og optimiser

CSS Compressor: Komprimere CSS for å øke lastehastigheten

CSS Dig: Ta en titt på alle CSS-egenskapene deres, deres frekvens og variasjoner

JavaScript Minifier: Minifiser JavaScript

FF Subsetter: Reduser fontfilstørrelsen for å optimalisere bruken av båndbredden

Compressor.io: Reduser størrelsen på bildene mens du holder høy kvalitet

Prefiks gratis: legg til den gjeldende nettleserens prefiks til enhver CSS-kode bare når den er nødvendig

Sprite Cow: Generer CSS for sprite ark

TinyPNG: Avansert tapkomprimering for PNG-bilder

Adaptive bilder: Oppdager skjermstørrelsen til den besøkende og oppretter, buffer automatisk og leverer enhetlige riktig skalerte versjoner av bilder

Tilbakemelding

Bounce: Legg til tilbakemeldinger på et design og del det med andre mennesker

Design Drop: Et verktøy for å samle feedback på design

Peek: Se og hør en 5-minutters video av en ekte person som bruker nettstedet ditt

Inspirasjon

CoDrops: CoDrops har et ekstremt populært ukentlig (eller så) kollektiv, som egentlig er en samling av gode ressurser og inspirerende ting for webdesignere og andre reklamer. Veldig populær og ekstremt nyttig.

Designrfix - Grafisk designinspirasjon - Tutorials & Web Design Resources: En annen viktig grafikk- og webdesignblogg.

OneXtraPixel - Nettdesign og utvikling online magasin

Et online magasin for designere og utviklere, OXP deler tips, veiledninger, verktøy, ressurser og andre artikler om design og utvikling.

MonsterPost: TemplateMonster er stort sett et malfirma, men de har også en flott blogg på gang. Det handler ikke bare om deres egne ting også - de sørger for at de gir mange gode nettdesign ting.

FromUpNorth - Design av høy kvalitet

DesignShack: Nok en gang deles et vell av ressurser med designmiljøet.

Vandelay Design: Mange gode ressurser, freebies, artikler, tilbud, WordPress-ting og mye mer.

DesignM.ag: DesignM.ag er et fellesskap for designere, webdesignere og utviklere.

Reddit Web_design

Egentlig ikke en blogg, det er en subreddit.

Imidlertid sikrer den oppmuntrende reddit-mekanikken at alt som stiger til toppen er viktig lesning for webdesignere. Det er veldig populært, en av de største subreddits.

Abduzeedo - Designinspirasjon og opplæring: Abduzeedo er en annen av dem, hvor du finner designinspirasjonsoppsummeringer som er et must å se for designeren som ønsker å holde seg oppdatert på trender og vite hva som er de siste og beste tingene rundt.

tutorialZine - Det ene stedet for tutorials for høy utvikling av webutvikling: Det er et opplæringsblad for det meste for tutorials for webutvikling. Opplæringen er godt skrevet og lett å følge.

eWebDesign: eWebDesign er en annen kilde til de nyeste og beste artiklene fra webdesigneksperter. Har historier om webdesign, webutvikling og tutorials. Det er faktisk et nyhetsbrev, så du får ting direkte i innboksen!

WebAppers: Mange open source og gratis nettressurser.

WebNeel - Designinspirasjon, kunst, fotografi og animasjon

CSS Mania - CSS Galleries: Dette er det mest populære CSS-utstillingsstedet. Igjen, et veldig bra nettsted å passe på for innovative nettdesign.

De 9 viktigste bloggene du trenger å følge

Mooc

Introduksjon til design av hverdagslige ting: Informativt for alle som er nysgjerrige på design: hverdagsmennesker, tekniske mennesker, designere og ikke-designere

Prototyping Interaction: Lær de forskjellige metodene for prototyping ved å tegne, bygge og teste

Introduksjon til grafisk design: Lær grunnleggende grafiske designprinsipper (skrifter, farger, bilder, bakgrunner og oppsett) og hvordan du bruker dem.

Introduksjon til HTML og CSS: Lær hvordan du konverterer mockups for digital design til statiske websider

Nettutvikling: Lær kjernekonsept for webutvikling fra Reddit & Hipmunk medgründer Steve Huffman.

Responsive Web Design Fundamentals: Lær grunnleggende om responsiv webdesign med Googles Pete LePage

Responsive bilder: Lær hvordan du jobber med bilder på det moderne nettet, slik at bildene dine ser bra ut og lastes raskt på hvilken som helst enhet

HTML5 lerret: Lær hvordan du bruker lerretet; hvordan lage komposisjoner ved hjelp av former, bilder og tekst; hvordan lage effekter og filtre på bilder og hvordan lage animasjoner.

Utvikle Android-apper: Lær hvordan du bygger en Android-app

Grunnleggende om JavaScript: Lær grunnleggende JavaScript-programmering

Objektorientert JavaScript: Lær hvordan du kan bruke de forskjellige objektorienterte programmeringsfunksjonene i JavaScript, og enda viktigere, hvordan skrive gjenbrukbare og vedlikeholdbare biblioteker.

JavaScript-designmønstre: Lær viktigheten av å skille bekymringer når du skriver JavaScript, og få praktisk erfaring underveis

JavaScript-testing: Lær hvordan du skriver JavaScript-applikasjoner med tillit, bruk arbeidsflyten rød-grønn-refaktor

Bygge mobile nettopplevelser: Lær hvordan du kan lage gode mobile nettopplevelser på tvers av enheter.

UX Design for mobilutviklere: Dykk inn i teknikkene som flotte designere bruker for å planlegge og prototype fantastiske apper før det skrives noen kode

UIKit-grunnleggende: Bygg en serie enkle apper for å bli mer komfortable med UIKit-rammeverket og mestre de mest brukte komponentene

Introduksjon til jQuery: Lær hvordan du leser og gir deg mening om jQuerys dokumentasjon.

Introduksjon til AJAX: Lær hvordan du lager asynkrone forespørsler med JavaScript (ved å bruke jQuerys AJAX-funksjonalitet), og få en bedre forståelse av hva som faktisk skjer når du gjør det

Optimalisering av nettstedsytelse: Lær hvordan du kan optimalisere ethvert nettsted for hastighet ved å dykke ned i detaljene om hvordan mobile og stasjonære nettlesere gjengir sider.

Gamification Design: Lær det grunnleggende om Gamification med en meget praktisk tilnærming

Wireframes, Mockups & Prototypes

Origami: Gratis verktøy for å designe moderne brukergrensesnitt opprettet av Facebook

Cacoo: Lag diagrammer, områdekart, flytskjema, tankekart, ledningsramme, UML-diagram og nettverksdiagram

Forundring: Gjør Dropbox- eller stasjonære bilder til prototyper på nett og mobilapper for alle enheter og få tilbakemeldinger

Sted: Lag iPhone mockups og iPad mockups

MockFlow: Online-tjenester for å planlegge, bygge og dele arbeid for designere

Justinmind: Interaktive wireframes for web og mobil

Wireframe.cc: Gratis minimalt wireframing-verktøy

Design News & Community

/ r / web_design: Web design subreddit

/ r / design: Design subreddit

/ r / brukervennlighet: Brukeropplevelse, grensesnittdesign eller Human Factors subreddit

/ r / userexperience: Brukeropplevelse design subreddit

Stack Exchange: Grafisk design: Spørsmål og svar for fagpersoner, studenter og entusiaster innen grafisk design

Stack Exchange: Brukeropplevelse: Spørsmål og svar for brukeropplevelsesforskere og eksperter

Front-end Front: Et sted hvor front-end utviklere kan stille spørsmål, dele interessante lenker og vise sitt arbeid for resten av samfunnet

Pineapple: Hub of Tutorials, Tools and Assets for utviklere og designere

Lockerdome: Et interessebasert sosialt nettverk

Designer News: Et fellesskap av mennesker innen design og teknologi

DesignFloat: Nyheter og tips om nettdesign

Web Blend: Et fellesskap for designere, utviklere og tech-junkier

Design News: Et nettsted som inneholder nyhetsartikler, ressurser og opplæringer skrevet av designere og utviklere

Portfolio

Behance: Den ledende online plattformen for å vise frem og oppdage kreativt arbeid

Dribbble: Et sted å vise og fortelle, promotere, oppdage og utforske design

Cargo: Personlig publiseringsplattform som tar sikte på å lage tilgjengelige verktøy og en nettverkskontekst for å forbedre eksponeringen av talentfulle individer på Internett

DeviantArt: Et online fellesskap som viser frem forskjellige former for brukerstillte kunstverk

ressurser

Vector Open Stock: Gratis vektorgrafikk

Knapper: Et CSS-knappebibliotek bygget med Sass & Compass

Bootflat: Open source Flat UI KIT basert på Bootstrap 3.3.0 CSS framework

Animate.css: Et bibliotek på tvers av nettlesere med CSS-animasjoner

CSS Shake: CSS riste grafikk og ikoner for siden eller appen din

Subtile mønstre: gratis flisbare strukturerte mønstre

Placehold.it: plassholdere for bilder

Holder.js: Plassholdere for bildeside på klienten

Hammer.js: Legg til flere berøringsbevegelser på hjemmesiden din

Textillate: En enkel plugin for CSS3 tekstanimasjoner

Tidslinje JS: Vakkert utformede tidslinjer som er enkle og intuitive å bruke

Modernizr: JavaScript-bibliotek som oppdager HTML5 og CSS3-funksjoner i brukerens nettleser

Isotop: Lag en filtrerbar portefølje for nettstedet ditt

Polymer: Gjør det enklere og raskere å lage alt fra en knapp til en komplett applikasjon på tvers av desktop, mobil og utover

CodyHouse: Et gratis bibliotek med HTML, CSS, JS nuggets

Cheetyr: Samling av jukseark og snarveier for designere og utviklere

Brosjyre: Et open source JavaScript-bibliotek for mobilvennlige interaktive kart

Modest Maps: Gratis bibliotek for interaktive kart

Templated: En samling av 846 gratis CSS- og HTML5-nettstedsmaler, designet og bygget av Cherry + AJ

GraphicBurger: Designressurser som tilbys gratis til samfunnet

Ha en fin dag!

Bradley Nice,
Content Manager hos ClickHelp.com - beste online dokumentasjonsverktøy for SaaS-leverandører