Uppgiftsbanken
Uppgifter, övningar och laborationer i HTML, CSS, JavaScript, PHP, SQL för att du skall få öva dig i webbprogrammering och webbutveckling.
Utvärdera webbplatsers färgval och känslan de signalerar
Du skall välja ut ett antal olika webbplatser och dokumentera deras färgpalett och typografi samt argumentera kring valet av färg kontra den känsla du tror webbplatsen eventuellt vill signalera med sitt färgval.
Du skriver rapporten i ett format som kan benämnas “akademiskt format”. Det är för att träna på strukturen inför kommande större skrivuppgifter såsom examensjobb.
Du kan jobba enskilt eller i grupp (2-4 personer) för att lösa denna uppiften.
Utvärdera webbplatsers laddningstid och användbarhet
Du skall välja ut ett antal olika webbplatser och testa dem för att mäta hur snabbt de laddas och om de innehåller några saker som kan förbättras med tanke på laddningstid och användbarhet.
Integrera din modul med externa byggtjänster
Du skall använda dig av din modul som du publicerat på GitHub (och Packagist) och du skall integrera den med byggtjänster för automatiserad testning och kodkvalitet.
Du skall skapa ett flöde för automatiserade tester och början av det som kallas continuous integration och en CI-kedja.
Bryt ut din kod till en modul och publicera på Packagist
Du skall lyfta ut din egna kod som du skrivit för att lösa uppgifterna så här långt i kursen och samla all kod i en egen modul som ligger i ett eget repo som du publicerar till GitHub.
Därefter lägger du ut modulen på Packagist så att den blir enkel att instalelra med composer.
Slutligen integrerar du återigen modulen i din redovisa-sida, men nu installerar du den som en modul med composer.
Teman med färger och typografi
Du skall nu skapa en knapp handfull teman och varje tema skall anpassas med ett par “variabler” utifrån ett grundtema. Börja med att tänka det minimalistiska temat för dbwebb.se som ett exempel. Du skall göra ett minimalistiskt tema, ett enkelt tema. Tänk sedan att du (kraftigt) färglägger samma tema och slutligen inverterar du färgerna och gör ett tema med svart/mörk bakgrund och ljust typsnitt.
Innan du börjar uppgiften som kan du behöva fundera igenom vilken typ av grundtema som du kan göra så att alla de andra, de “riktiga” temana (minimalistic, colorful, dark) kan återanvända bastemat och anpassa det via variabler.
Förutom färgerna så jobbar du med typografin och gör medvetna val om typografin som kan matcha dina teman.
Bygg ett tema med vertikalt och horisontellt grid
Du skall bygga ett tema och implementera stöd för ett vertikalt grid och för ett horisontellt grid.
Du bygger temat så att det är responsivt baserat på ditt vertikala grid.
Bygg en redovisa-sida till kursen design
Du skall sätta samman en redovisa-sida, en me-sida, till kursen design. För att göra det skall du använda en förberedd kopia av ramverket Anax (Anax Flat) med innehåll som är anpassat till kursen design.
De behöver installera din redovisa-sida, fylla den med innehåll och sedan lägga till style med CSS.
Du skall skapa ett Git-repo av din redovisa-sida och ladda upp den på GitHub.
En webbtjänst för att geotagga ip-adresser
Du skall bygga en webbtjänst som letar fram den geografiska positionen för en ip-adress, inklusive ortsnamn. Du använder dig av ett externt API för att göra uppslagningen av ip-adressen.
Innan du gör uppslaget så validerar du ip-adressen så att den är korrekt.
Du skall bygga dels en traditionell webbtjänst där användaren kan mata in ip-adressen i ett formulär som postas och en resultatsida visar upp resultatet. Du skall också bygga ett REST API med samma funktionalitet där frågor och svar sker via JSON.
Du lägger extra kraft på att organisera din kod i kontroller och modell-klasser och du skapar enhetstester som som når hög kodtäckning, kanske 100%?
Bygg en me-sida till ramverk1 (v2)
Du skall sätta samman en me/redovisa-sida för kursen.
Du lägger allt i ett repo och när du är klar så publicerar du och taggar ditt repo på GitHub.
Bygg ett LESS-tema till kursen design
Du skall bygga ett tema till din redovisa-sida och du bygger temats stylesheet med hjälp av LESS.
Du börjar strukturera din tema-kod i separata filer som vi kallar less-moduler.
Du lägger till externa moduler och du bygger in responsivitet i ditt tema.