Veta vad man ska lämna över och informera en medarbetare om kring en design och dess innehåll för att det ska kunna bli en riktigt kodad fronten-applikation (webbsida i detta fallet).

Om saker ska ha specifika färger och funktionalitet behöver utvecklaren / frontendaren veta detta.

CSS (Cascading Style Sheets)

Utseende & styling

Kunskapsmål:

Veta vad CSS är och varför det används.

Veta hur man kan få in CSS på en hemsida.

Antingen via ett separat CSS-dokument, inuti HTML-dokumentet

med <style> </style> eller direkt inuti HTML-elementet

via Style=” ”

Skilja på %, vw och vh

Färdighetsmål:

Kunna påverka ett eller flera element med hjälp av dessa CSS-selectors:

#ID .klass element ( div, p)

Kunna påverka minst 1 inom vardera:

färg, storlek, margin / padding, text (font)

:state ( :hover & :active) & visibility/display

Kunna använda FLEX

För att få saker att ta jämnt fördelat utrymme i antingen “row” eller column”.

Kunskap kring hur Grid listar upp en vy

Förstå hur “grid” listar upp en vy med Kolumn och Rader.

HTML5 (HyperText Markup Language)

Struktur och “markup”

Känna igen / ha kunskap om:

3 stycken vanliga HTML5 element-typer (section, header etc) & 5 Grund-element (div, h1 etc)

veta skillnaden mellan <head> , <h1> , <header> och <body>

Js-fil & CSS-fil -Script importering

2 stycken Element-Attribut utöver id & klass.

Leta hur man öppnar och stänger de olika elementens delar ( =“ “ < > < /> ) och ha koll på ordningen man öppnat och stängt dem i inuti ett dokument.

Känna igen:

1st Meta-taggar (längst ner i

HTML-fliken⁠

)

Egen färdighet att skapa & ändra:

Rubrik <h1> Min titel</h1>, <h2> osv

Paragraf <p> Min paragraf</p>

Bild <img src=””>

Länk <a href=””>

Knapp <button>min knapp</button>

Lista <ul> <li> Min </li> </ul>

Sätta ut ID, KLASS , SOURCE och länk

JAVASCRIPT

Kunskap:

Känna igen / förstå hur de används:

Variabel, Funktion, Event-händelse, If / else och 1 variant av loop (for-loop)

Veta vad en variabeln och funktion är.

Se hur variablerna defineras i ( ) av funktionen.

Veta att en funktion kan definera sina egna variabel-namn inuti sina ( ) .

Kunna veta hur man importerar in Javscripten i HTML-dokumentet.

Känna till grunderna i Javascript-syntax ((GRAMMATIKEN I javascript)).

Tex Öppning och stängning med ( ) { } ;

I vilken ordning koden blir läst. Att man ej använder “ - “ i namn på variabler och funktioner.

Skilja mellan att anävnda en/flera variabel eller ren text i javascripten ihop. Tex:

console.log(minVariabel + “en annan text”);

Egen färdighet att skapa & ändra:

Kunna fylla i befintlig kod:

En in-kopierad if ( ) / else-regel , eventlistener (”click”) samt en inkopierad loop.

På egen hand:

Skapa en funktion med ett specifikt namn.

Faktiskt se till att koden använder/kör just den funktionen.

Skapa en variabel med ett specifikt namn och ett satt värde.

Faktiskt se till att koden använder just den variabeln.

Kunna ändra värdet på den variabeln.

Nå ett element på sidan och ändra värdet i det.

Kunna printa ut i console.log().

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.