CSS hjälpmedel för nybörjare

Som tur är man inte först ut med att försöka förstå hur alla deklarationer samspelar med varandra för att nå en bra slut produkt. Internet svämmar över av guider och verktyg för att hjälpa nybörjare med koncept man inte riktigt greppat än och även mer erfarna utvecklare som behöver friska upp minnet.

I detta inlägg så har vi samlat ihop några css guider/verktyg som vi själva använt och en del som vi fortfarande använder för att bygga komponenter och sidor.

Färger

Coolors - färg-generator

Denna färggenerator från Coolors hjälper dig både att generera egna färgteman men man kan även scrolla igenom deras samling av populära teman. Den är perfekt för att hitta inspiration för din sida och se till att du har färger som kompletterar varandra.

Länk: https://coolors.co/generate 

CSS Gradient - gradient-generator

CSS Gradient är en färggradient generator som är perfekt att använda om man vill leka runt och börja förstå hur man använder linear-gradient och radial-gradient. Gradienter kan användas för hela bakgrunder eller mindre komponenter som text och knappar för att ge liv i en statisk sida.

Länk: https://cssgradient.io/

CSS3 Studio Drop Shadow - skugg-generator

Den här CSS3 Studio generatorn hjälper dig göra skuggor som är ytterligare ett element som hjälper din sida att bli mer levande. Ett exempel är neumorphism designade gränssnitt, där man med hjälp av skuggor visar användaren hur man kan interagera med olika element på sidan.

Länk: http://css3studio.com/page-css3/css-box-shadow.php

WebAIM Contrast Checker - tillgänglighets verktyg

WebAIMs kontrast verktyg hjälper dig att ha koll på om du har tillräckligt med kontrast mellan din text och dess bakgrundsfärg för att vara läsligt för personer med nedsatt syn. Kontrast skalan är bestämd av webbtillgänglighets-riktlinjerna, WCAG, från The World Wide Web Consortium, W3C.

Länk: https://webaim.org/resources/contrastchecker/

Layout - flex/grid

Att ha en bra grund för hur du bygger upp din sida är oerhört hjälpsamt, det underlättar alla ens galna idéer att bli verklighet. Grid och flexbox är något du kommer vilja använda när du bygger din sida, det kan vara lite klurigt i början men väl värt det!

Grid Garden & Flexbox Froggy - spel

Grid garden och Flexbox Froggy är enkla men roliga problemlösar spel där de förklarar hur grid respektive flex funkar och sen får du använda dina nyvunna kunskaper för att lösa spelens nivåer.

Länk till Grid Garden: https://cssgridgarden.com/

Länk till Flexbox Froggy: https://flexboxfroggy.com/

Grid generator

Ett bra visuellt verktyg för grids är den här CSS Grid Generator som enkelt låter dig bestämma hur du vill att komponenten eller hemsidan ska vara strukturerad.

Länk: https://cssgrid-generator.netlify.app/

Flexbox guide

Den här guiden har man många gånger besökt bara för att påminna sig om hur flexbox fungerar och vad som gör vad. Bilderna som gör det så enkelt att scrolla igenom och snabbt hitta det man vill ha.

Länk: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hoppas dessa verktyg och guider bidrar till en smidigare resa genom CSS världen. Tveka inte att dela med dig om du stöter på någon riktigt bra guide eller verktyg, hjälpte den dig så kommer den hjälpa någon annan! 🌟