Slutuppgiften webutveckling

 

Du ska nu skapa en helt egen webplats. Webplatsen ska vara till något av följande företag. (om du har en väldigt bra idé så funkar den också)

Learn Faster.

Ett företag som sysslar med utbildning inom IT.

Grafisk Front

Ett företag som sysslar med att skapa grafiska profiler som logotypes åt företag.

Hundhotellet

Du ska skapa en webplats åt ett hunddagis.

 

 

Inlämning: 1 maj

Redovisning för klassen: Slutet av april.

Lab: Jag kollar att ni VET vad ni har skrivit: Första och andra veckan Maj.

Slutuppgiften

Du ska utforma en komplett websida där du utnyttjar allt det vi har lärt oss i kursen. Här är specifikationerna.

För godkänt, dvs E krävs att det här ska vara med;

$1·         Index-sida och länkar till minst 3 undersidor. Tex Om Oss, Kontakta och galleri.

$1·         En av sidorna ska innehålla din processbeskrivning, där du skriver hur och varför du gjort som du gjort.

$1·         En wireframe skiss hur du tänkt där du ritar in searchbar och annat.

$1·         jQuery eller javaScript i någon form.

$1·         Validerad kod eller någon annan form av testning

Siorna ska rendera hyfsat snyggt på de vanligaste webläsarana, dvs Explorer, Chrome, Firefox.

För C à

$1·         Responsiv layout där sidan också fungerar på en smartphone eller tablet.

 

 

E

$1·         Du visar att du kan jQuery, jQuery behöver inte vara implementerad i själva sidan det räcker att du kan visa något beteende med jQuery. Byta stylesheet eller något annat.

$1·         Din kod är validerad men innehåller ändå fel.

$1·         Koden är kommenterad men inte så mycket.

$1·         Du kan länka in en extern stylesheet.

$1·         Du har med forms som ser ut som hej kom och hjälp mig.

$1·         Sidan är stylad med css, och ganska enkelt. Tex visar du att du kan styla rubriker.

 

 

C

$1·         Din sida är optimerad vad gäller grafik. Dvs du har inte tunga bilder som tar år att ladda ner.

$1·         Du har en variant för responsivlayout som fungerar men inte är helt optimerad.

$1·         Din kod validerar korrekt som CSS3 och HTML 5.

$1·         Din kod är ordentligt kommenterad.

$1·         Du har med forms, och de forms är hyfsat korrekt stylade.

$1·         Din sida följer hyfsat noga konventioner var olika element på sidan bör vara placerade.

$1·         Din css är korrekt utförd, därmed kan du använda funktioner som float och :hover. Du kan tex utföra en vertikal navbar.

$1·         Du kan använda importerade fonts.

 

 

A

$1·         En optimerad responsiv layout för mobiltelefoner.

$1·         jQuery som är lite krångligare. Det kan vara att du bygger en lightbox UTAN att behöva intelligens i den Lightboxen.

$1·         Koden är intenderad korrekt.

$1·         Du skriver effektiv kod, med det betyder att du kan använda HTML5 och typselektorer blandat med ID och klass-selektorer.

$1·         Du behärskar också lite krångligare css-funktioner som position och suckerfish-menyer.

$1·         När jag frågar saker under labben ska du kunna svara på tex vad utf-8 är förnågot.

$1·         Din sida är genomtänkt, speciellt har du en tanke bakom placeringen av menyer och annat.

 

Hjälp till uppgiften

Här har jag samlat sammanfattningar av allt vi har gått igenom. Kolla här eller gå tillbaka till de tidigare lektionerna.

 

jQuery

Här hittade jag en enkel tutorial på svenska om jQuery. Fast det går ju lika bra att googla tutorials för lightbox eller annat.

 

Best practice

Här har en duktig frilansare skrivit en artikel om hur man kan tänka om layout för att användare ska förstå. (engelska)

 

CSS-selectorer

Här har W3Schools samlat alla css-selektorer.

 

HTML5 tag

Här har W3Schools samlat HTML 5 tags.

 

Forms, en tutorial från MDN

Det var den här tutorial ni gjorde när ni gjorde era forms

 

Responsive design

Här är en länk hur du lägger in media queries direkt i css-koden

Här är en länk hur du skapar ett nytt stylesheet för din responisva layout