5 spel för att träna programmering och CSS

Posted on October 01, 2016

Öva på dina kunskaper med kodspel på www

Övning ger färdighet, heter det ju. Men hur övar man på sina kunskaper när man har kommit tillbaka från ett kodläger eller är klar med en programmeringskurs? Ett bra sätt är genom att spela spel. Här är mina bästa kodspel för den som vill bli vassare på css, javascript eller python. Samtliga är GRATIS, hur bra som helst!

1. CSS Diner - CSS

CSS Diner är ett minispel där du ska markera ut tallrikar, äpplen och andra grejer på ett bord genom att välja rätt CSS-selektorer. Ett superbra och gulligt spel för den som har lite grundkunskaper i CSS men vill repetera dem och bli vassare på :nth-child, :only-of-type och andra snåriga selektorer.

2. Elevator Saga - Javascript

Elevator Saga är ett spel för att träna Javascript. Här går utmaningarna ut på att programmera en hiss, så att den transporterar x antal personer på x antal sekunder. Spelet är, åtminstone de första nivåerna, snällt mot nybörjare. Det är däremot inte snällt mot nerverna, när det bara är 20 sekunder kvar och 15 personer fortfarande väntar på att hinna till sina våningar. Typiskt hissar!

3. Python Challenge - Python

Python Challenge är en serie utmaningar som är tänkt att lösas med Python. Men för de flesta utmaningar går det lika bra med andra programmeringsspråk (ej märkspråk!).Till skillnad från spelen ovan så sker kodningen inte i browsern. Du får istället olika gåtor som du ska lösa med hjälp av programmering (i din vanliga texteditor + med en kommandopromter/terminal för att köra programmen). Jag tyckte detta var skitsvårt när jag testade det första gången, nyligen hemkommen från Tjejer Kodars läger i Palma förra året. Men desto nöjdare blev jag när jag lyckades lösa några gåtor! Guldstjärna för retrodesignen på sidan.

4. CheckiO - Python och/eller Javascript


Hos CheckIO löser du kodproblem med antingen Python eller Javascript, för att ta dig runt i en värld av märkliga öar. Det finns en mängd utmaningar att lösa, såväl för nybörjaren som för den avlönade utvecklaren. Dessutom läggs det hela tiden till nya problem. När du har löst en utmaning så kan du se (och lära dig av) andras lösningar på samma uppgift. Det finns också ett helt community byggt kring spelet - du kan följa dina favoritkodare, få hjälp i forumen eller hitta Open Source-projekt att delta i när du övat upp dina skills tillräckligt.

(På samma sida finns det dessutom ett ”space game” med ”a mix of strategy and coding”, kallat Empire of Code. Jag har inte spelat det själv, men hört goda ord om det i podcasten ”Talk Python to me”.)

5. Flexbox froggy


Flexbox froggy påminner om CSS Diner, men här ska du med hjälp av flexbox-properties flytta runt grodor i en damm. Flexbox är ett sätt att arbeta med layout i css, ett sätt som för mig var helt nytt innan jag testade detta spel. Ändå lyckades jag putta runt grodorna! Det är alltså utmärkt för nybörjare och troligen ett snällare sätt att lära sig CSS-layout än att slita sitt hår framför en hemsida som vill lägga alla element på OCH inom varandra samtidigt :|


Sandra Svensson

Sandra är exiljämten från Östersund som numera jazzar runt i Stockholm i copywriterkostym. När hon inte skriver spelar hon skivor i DJ-duon Popteau Twins och lär sig koda. Fokus ligger just nu på Python och Django, för att det är kul och för att kunna skapa fler viktiga webbappar i stil med Djurspanaren.
Github: newsocialsandra