Clientside Programmering

Section outline

• Select section General

  Collapse Expand

  General

  Collapse all Expand all

  • Select activity HTML Tutorial

    

    HTML Tutorial URL

    Completion

    Students must

    

    Mark as done
  • Select activity CSS Tutorial

    

    CSS Tutorial URL

    Completion

    Students must

    

    Mark as done
  • Select activity JS Tutorial

    

    JS Tutorial URL

    Completion

    Students must

    

    Mark as done
• Select section Introduktion til HTML

  Collapse Expand

  Introduktion til HTML

  Vi starter med at gennemgå HTML sprogets grundlæggende principper som tags, elementer, headers, etc.

  • Select activity Introduction to HTML

    

    Introduction to HTML URL

    Completion

    Students must

    

    Mark as done
  • Select activity Elements

    

    Elements URL

    Completion

    Students must

    

    Mark as done
  • Select activity Attributes

    

    Attributes URL

    Completion

    Students must

    

    Mark as done
  • Select activity Links

    

    Links URL

    Completion

    Students must

    

    Mark as done
  • Select activity Images

    

    Images URL

    Completion

    Students must

    

    Mark as done
  • Select activity Introduktion til HTML

    

    Introduktion til HTML Assignment

    Completion

    Students must

    

    Mark as done

    Lav en forside til din egen personlige hjemmeside. Siden skal have et billede af dig, mindst 3 niveauer af overskrifter og relevant tekst om dig. Derudover skal der være en afdeling der virker som portfolio, og der skal være en del med links til relevante andre sider (dit praktiksted, din skole, din fodboldkulb og lign.). Vi kommer til at arbejde videre på siden fremadrettet i kurset. Aflever en enkelt .html fil.

• Select section Introduktion til CSS

  Collapse Expand

  Introduktion til CSS

  Vi kigger på det grundlæggende i CSS. Dvs. selectors, rules, classes etc. 

  
  

  • Select activity Introduction to CSS

    

    Introduction to CSS URL

    Completion

    Students must

    

    Mark as done
  • Select activity Syntax

    

    Syntax URL

    Completion

    Students must

    

    Mark as done
  • Select activity Margins

    

    Margins URL

    Completion

    Students must

    

    Mark as done
  • Select activity Box Model

    

    Box Model URL

    Completion

    Students must

    

    Mark as done
  • Select activity Padding

    

    Padding URL

    Completion

    Students must

    

    Mark as done
  • Select activity Height/Width

    

    Height/Width URL

    Completion

    Students must

    

    Mark as done
  • Select activity CSS Opgave

    

    CSS Opgave Assignment

    Completion

    Students must

    

    Mark as done

    Arbejd videre på siden. Få tilføjet et stylesheet hvor der er lavet regler for de forskellige elementer på jeres side. Sørg for at jeres side har en fornuftig baggrundsfarve, teksten har en fornuftig font, og at billederne ikke er overdimensioneret. Kig på fornuftige måder at få indbygget følgende rules:
    width/height

    margin

    padding

    background color

    font-family

• Select section Javascript Introduktion

  Collapse Expand

  Javascript Introduktion

  Vi kigger på hvordan man kan bruge javascript til at ændre hvad der står i forskellige HTML elementer, blandt andet igennem events. Derudover tager vi et kig på forms og form validation igennem Javascript. 

  • Select activity Javascript Introduction

    

    Javascript Introduction URL

    Completion

    Students must

    

    Mark as done
  • Select activity Events

    

    Events URL

    Completion

    Students must

    

    Mark as done
  • Select activity HTML Forms

    

    HTML Forms URL

    Completion

    Students must

    

    Mark as done
  • Select activity Form Validation

    

    Form Validation URL

    Completion

    Students must

    

    Mark as done
  • Select activity JS Introduction

    

    JS Introduction Assignment

    Completion

    Students must

    

    Mark as done

    Demonstrer at i kan bruge js til at:

    
    

     - Ændre teksten i en knap når der klikkes på den.

     - Tilføje nye elementer til document.

     - Fjerne elementer fra document.

     - Oprette og tilføje en række elementer på baggrund af et array.

     - Tilføj elementer på baggrund af et tekst-felt (ligesom en gæstebog).

    
    

    Sørg for at finde steder på jeres side hvor det kunne give mening at tilføje disse funktioner. 

    Er det helt umuligt må i lave det som en seperat side og linke til den fra index.

    
    

    Brug kommentarer til at markere hvor i jeres kode at denne i løser disse dele.

    
    

    Afleveres inden slutningen af dagen. 

• Select section CSS Grid

  Collapse Expand

  CSS Grid

  CSS Grid kan gøre det at lave layout på en side meget nemmere. 

  • Select activity Grid Opgave

    

    Grid Opgave Assignment

    Completion

    Students must

    

    Mark as done

    Forsøg at bruge CSS Grid til at lave en side der har en topbar med titel osv., en sidebar med links til de forskellige dele af siden, samt et område med content hvor der er 3 kolonner. Topbaren skal fylde hele sidens bredde. Sidebaren skal udfylde det af venstre side af skærmen som topbaren ikke gør. Tilføj noget content til at teste at din side virker (evt. Lorem Ipsum)

  • Select activity CSS Grid

    

    CSS Grid URL

    Completion

    Students must

    

    Mark as done
• Select section jQuery (selvlæring)

  Collapse Expand

  jQuery (selvlæring)

  I dag skal i arbejde mestendels selv. I skal lære jQuery som er et library til javascript. Hvis i mangler noget at lave, så læs om AJAX under jQuery.

  • Select activity jQuery Tutorial

    

    jQuery Tutorial URL

    Completion

    Students must

    

    Mark as done

    Læs op på jQuery. Lav eksemplerne og prøv at forstå hvordan man bruger jQuery til at lave forskellige effekter.

  • Select activity jQuery Opgave

    

    jQuery Opgave Assignment

    Completion

    Students must

    

    Mark as done

    Opdater jeres hjemmeside med nogle jQuery effekter. Brug jeres fantasi til hvad der kunne være fedt. Mindst 5 effekter. 

  • Select activity Adding Elements

    

    Adding Elements URL

    Completion

    Students must

    

    Mark as done

    Læs linket og tilhørende sublinks. Lær om hvordan man tilføjer og fjerner objekter med jQuery.
  • Select activity jQuery Opgave 2

    

    jQuery Opgave 2 Assignment

    Completion

    Students must

    

    Mark as done

    Lav en side med et grid layout med 4 columns. Når man klikker på en knap, skal der indsættes en ny celle i Grid'et hvorpå der står det nuværende klokkeslet.
  • Select activity jQuery AJAX (Kun hvis man er færdig)

    

    jQuery AJAX (Kun hvis man er færdig) URL

    Completion

    Students must

    

    Mark as done