Resurser
En samling länkar till verktyg, referensmaterial och läsning som är bra att ha nära till hands under kursen. Länkarna öppnas i en ny flik.
Verktyg
- VS Code (öppnas i ny flik) Gratis kodeditor för Windows, macOS och Linux.
- Git (öppnas i ny flik) Versionshantering för att spara och följa ändringar i kod.
- GitHub (öppnas i ny flik) Molntjänst för att lagra och dela kod med Git.
- Emmet fusklapp (öppnas i ny flik) Snabbreferens för Emmet förkortningar som skapar HTML och CSS snabbt.
Kortkommandon
Validering och tillgänglighet
- Validator.nu (öppnas i ny flik) Kontrollera att din HTML är korrekt och följer standarden.
- W3C Markup Validation Service (öppnas i ny flik) W3C:s validerare som hittar fel i din HTML.
- WAVE (öppnas i ny flik) Testa tillgänglighet direkt i webbläsaren. Finns även som webbläsartillägg.
- Lighthouse (öppnas i ny flik) Mät prestanda, tillgänglighet och SEO i Chrome DevTools.
- axe DevTools (öppnas i ny flik) Webbläsartillägg som hittar tillgänglighetsproblem på en sida.
- NVDA (öppnas i ny flik) Gratis skärmläsare för Windows som läser upp sidans innehåll.
- Can I use (öppnas i ny flik) Se vilka webbläsare som stöder en viss HTML, CSS eller JavaScript funktion.
- WebAIM Contrast Checker (öppnas i ny flik) Kontrollera att färgkontrasten mellan text och bakgrund räcker till.
- W3C WAI om tillgänglighet (öppnas i ny flik) W3C:s guider och riktlinjer (WCAG) för en tillgänglig webb.
- Diggs webbriktlinjer (öppnas i ny flik) Sveriges officiella riktlinjer för webbplatser, från Myndigheten för digital förvaltning.
CSS och layout
- Interaktiv guide till flexbox (öppnas i ny flik) Josh W. Comeaus visuella och interaktiva förklaring av flexbox.
- A Complete Guide to Flexbox (öppnas i ny flik) CSS-Tricks kompletta referens för alla egenskaper i flexbox.
- Every Layout: The Sidebar (öppnas i ny flik) Ett robust layoutmönster för en sidopanel bredvid innehållet.
- Reset CSS (Eric Meyer) (öppnas i ny flik) Den klassiska CSS-reseten från 2007 som nollställer allt.
- A (more) modern CSS reset (Andy Bell) (öppnas i ny flik) Den moderna reseten: nollställ det som stör, behåll det som är vettigt.
- MDN: CSS (öppnas i ny flik) Referensdokumentation för alla CSS egenskaper och selektorer.
- A Complete Guide to Grid (öppnas i ny flik) CSS-Tricks kompletta referens för CSS Grid.
- Interaktiv guide till CSS Grid (öppnas i ny flik) Visuell och interaktiv förklaring av CSS Grid.
Typografi och fonter
- Google Fonts (öppnas i ny flik) Bibliotek med gratis webbtypsnitt att använda i dina projekt.
- Modern Font Stacks (öppnas i ny flik) Systemtypsnitt som laddar snabbt utan att hämta externa fonter.
- Type Scale (öppnas i ny flik) Verktyg för att bygga en harmonisk typografisk skala.
- Utopia (öppnas i ny flik) Skapa flytande typografi och mellanrum som skalar med skärmen.
Bilder och media
- Unsplash (öppnas i ny flik) Fria högupplösta foton som är gratis att använda.
- Openverse (öppnas i ny flik) Sök bland bilder med öppna licenser från många källor.
- Wikimedia Commons (öppnas i ny flik) Stort arkiv med fria bilder, ljud och video.
- Pixabay (öppnas i ny flik) Fria bilder och illustrationer utan krav på attribution.
- Creative Commons-licenser (öppnas i ny flik) Genomgång av CC-licenserna, från fria CC0 till den mest begränsade BY-NC-ND.
- Squoosh (öppnas i ny flik) Komprimera och konvertera bilder direkt i webbläsaren.
- TinyPNG (öppnas i ny flik) Minska filstorleken på PNG och JPG utan synlig kvalitetsförlust.
- SVGOMG (öppnas i ny flik) Optimera och rensa SVG filer för mindre filstorlek.
- Pexels (öppnas i ny flik) Fria foton och videoklipp som är gratis att använda.
Öva och lek
- Flexbox Froggy (öppnas i ny flik) Lär dig flexbox genom att hjälpa grodor hem, på svenska.
- Flexbox Defense (öppnas i ny flik) Öva flexbox i ett tower defense spel.
- Flexbox Zombies (öppnas i ny flik) Lär dig flexbox genom en berättelse om att överleva zombies.
- Grid Garden (öppnas i ny flik) Lär dig CSS Grid genom att vattna en morotsträdgård.
- CSS Diner (öppnas i ny flik) Öva CSS selektorer i ett litet spel.
Referens och läsning
- MDN Web Docs (öppnas i ny flik) Den mest kompletta referensen för HTML, CSS och JavaScript.
- web.dev (öppnas i ny flik) Googles guider om modern och snabb webbutveckling.
- HTML Reference (öppnas i ny flik) Visuell referens över alla HTML element.
- CSS Reference (öppnas i ny flik) Visuell referens över de vanligaste CSS egenskaperna.
- A List Apart (öppnas i ny flik) Klassisk publikation om webbdesign och webbstandarder.
- Responsive Web Design (Ethan Marcotte) (öppnas i ny flik) Artikeln från 2010 som gav den responsiva webben sitt namn.
- Smashing Magazine (öppnas i ny flik) Artiklar och handledningar om webbdesign och utveckling.
- Resilient Web Design (öppnas i ny flik) Jeremy Keiths gratis bok om webbens principer och historia.
- Project Gutenberg (öppnas i ny flik) Fria böcker vars texter du kan använda i övningar.
- Färgers symbolik (öppnas i ny flik) Om hur olika färger tolkas i olika kulturer och sammanhang.
- Jakob's Law (Laws of UX) (öppnas i ny flik) Principen att användare förväntar sig att din sajt fungerar som andra sajter.
Profiler och röster
- Kevin Powell (öppnas i ny flik) Utbildare inom CSS med tydliga videor, perfekt för nybörjare.
- Modern CSS (Steph Eckles) (öppnas i ny flik) Moderna lösningar i CSS förklarade steg för steg.
- Learn UI Design (Erik Kennedy) (öppnas i ny flik) Design för utvecklare. Samma person som i videon om designstilar.
- Piccalilli (Andy Bell) (öppnas i ny flik) Skriver om robust CSS och tillgänglighet. Ligger bakom Every Layout.
- Eric Meyer (meyerweb) (öppnas i ny flik) CSS-pionjär och en av världens mest inflytelserika röster inom CSS. Skapare av den klassiska reseten.
- LukeW (Luke Wroblewski) (öppnas i ny flik) Designern som myntade mobile first. Skriver om produktdesign och mobila gränssnitt.
- HTMHell (Manuel Matuzović) (öppnas i ny flik) Lär dig skriva bra HTML genom dåliga exempel.
- Sara Soueidan (öppnas i ny flik) Fördjupning i tillgänglighet och SVG.
- Nielsen Norman Group (öppnas i ny flik) Forskningsbaserade artiklar om användbarhet och UX.