webbutveckling1

Webbutveckling 1 av Paul Belfrage

Jag rekommenderar att du laddar ner alla exemplen och övningsfilerna istället för att ladda ner dem en och en. Du kan ladda ner alla filer som en ZIP här Läs sedan README.md filen.

Om du vill kunna se md-filen lokalat som en webbsida med klick bara länkar laddar du ner Markdown Viewer. Titta på denna film för att få igång Markdown Viewer. Detta behöver du inte göra om du tittar direkt på md-filen på github. För Firefox finns Markdown Viewer Webext. Dra och släpp .md-filen i webbläsaren.

Till läraren: Förslag på hur uppgifter kan se ut hittar du på paulbelfrage.se. Jag rekommenderar att du hittar på egna exempel på uppgifter, men använd gärna mina som inspiration.

1. Om läromedlets uppbyggnad

Quiz 1

En bra uppsättning filmer där jag gå igenom grunderna i hur man gör moderna webbsidor. Filmerna tar upp liknade saker som i boken men är inte övningar i boken. Länk till spellistan

Spellistans innehåll

Installera VS Code del 1 - nerladdning av VS Code - installation
Installera VS Code del 2 - skapa en fil
Installera VS Code del 3 - Emmet - W3C validation
Installera VS Code del 4 - Live Server - byta färg i CSS
Installera VS Code del 5 - color theme - icon theme - color highlight - image preview
Installera VS Code del 6 - autokommentering
upp1 - del1 - doctype meta h1 img p
upp1 - del2 - img css color font-family em rem px
Github pages 2020
upp2 - Webbens historia
upp3 - Lagar
upp4 - del1 - rep github rgb hsl hex
upp4 - del2 a hover flex grid
upp5 - del1 start semantiska element
upp5 - del2 link to css
upp5 - del3 link to reset upp5
upp5 - del4 header cointainer
upp5 - del5 flex color scheme
upp5 - del6 flex just align
upp5 - del7 desktop for index
upp5 - del8 html contact desktop label input
upp5 - del9 html contact desktop CSS
upp5 - del10 html contact CSS grid
uppg6 - del1 - Figma ECA- index desktop
uppg6 - del2 - Figma ECA - hitta desktop
uppg6 - del3 - Figma ECA - dela
uppg6 - del4 - Figma AC form mobil

1.1 Om hur engelska är ett måste för att behärska webben

1.2 Kompanionsida

Länk till denna sida

2. Installation av Visual studio Code och Hello world med HTML och CSS

Quiz 2

Länk till film som visar installation av VS Code - del 1-6. Tänk på att du inte behöver lägga till alla extentions som visas i filmerna. Det jag rekomenderar är

Live Server av Ritwick Dey
W3C Web Validator av Celian Riboulet

Länk till Visual Studio Code

webbplats kap2 - grunder (ZIP-fil)

3. En kort historik om webben

Uppkoppling till internet 1969 - 2003

4. Tekniken bakom webben

Quiz 4

4.1 Bit, byte, kilobyte, megabyte, gigabyte, terabyte, megabit/sekund, gigabit/sekund

4.2 Webbens betydelse och funktion - Webben som plattform och dess samhällspåverkan.

Tom Scotts genomgång om varför val på webben är en dålig idé på YouTube.

Estland var tidigt ute med digitala val och 2023 lades över häften av rösterna digitalt

4.3 Protokoll

4.3.1 HTTP och HTTPS

4.3.2 HTTP-statuskoder

Det finns flera olika statuskoder för olika situationer på developer.mozilla.org kan du läsa om alla

ÖVNING 4.2 https://www.google.com/test

HTTP response status codes

4.4 IP-adress

ÖVNING 4.3 www.nslookup.io

ÖVNING 4.4 QUIZ - Para ihop GET, POST, PUT, DELETE med rätt svar

4.5 Klient server

5. Lagar

Quiz 5

vad en personuppgift är

sju punkter

Fyra bolag måste sluta använda Google Analytics

Sajter som använder Google Fonts riskerar GDPR-böter

How GDPR Will Change The Way You Develop

ÖVNING 5.2 QUIZ - Personuppgifter

5.2 Upphovsrätt

5.2.1 Creative Commons

Creative Commons

Här kan du läsa om de olika nivåerna

Public Domain Mark

https://openverse.org/

http://google.com

www.flickr.com/creativecommons/

6. HTML

Quiz 6

Stack Overflow Survey 2023

En bra uppsättning filmer där jag gå igenom grunderna i hur man gör moderna webbsidor. Filmerna tar upp liknade saker som i boken men är inte övningar i boken. Länk till filmerna

Extentions som du bör använda i VS Code Live Server av Ritwick Dey W3C Web Validator av Celian Riboulet

Installera VS Code del 1 - nerladdning av VS Code - installation
Installera VS Code del 2 - skapa en fil
Installera VS Code del 3 - Emmet - W3C validation
Installera VS Code del 4 - Live Server - byta färg i CSS
Installera VS Code del 5 - color theme - icon theme - color highlight - image preview
Installera VS Code del 6 - autokommentering

Andra saker som jag visar i filmerna ovan är

Wraping
Konfigurera VS Code så ha får automatisk formatering av HTML och CSS koden
Kugghjul -> Settings (cmd,) -> sök “format” -> klicka i “Editor: Format On Save”
Cmd/Ctrl + shift + P

6.2 Lorem ipsum

Lorem ipsum

6.4 HTML element

MDN Mozillas webbplats

recension utan CSS (ZIP-fil)

6.6 Genomgång av en komplett HTML-kod

recension med CSS (ZIP-fil)

6.6.12

strong elementet på MDN Mozilla

6.6.14

6.6.17 Validera kod

intellisensen

validator.w3.org - Validering av HTML-kod

jigsaw.w3.org/css-validator/ - Validering av CSS-kod

ÖVNING 6.5 Hitta fel i HTML och CSS /ÖVNINGAR/fel-i-koden.zip.

I filen fel-i-koden-facit.zip finns facit i form av kommentrarer. /ÖVNINGAR/fel-i-koden-facit.zip

ÖVNING 6.7 - Astronomiska föreningen Orionalliansen

webbplats kap6 - html startfiler (ZIP-fil)

webbplats kap6 - html lösningsförslag (ZIP-fil)

6.7.17 Listor

listor.html Högerklicka välj “ladda ner länk”

ÖVNING 6.9 Astronomiska föreningen Orionalliansen - formulär

webbplats kap6 - html lösningsförslag (ZIP-fil)

7 Formulär i HTML

Quiz 7

7.1 `<form>`, action och method

formular.html Högerklicka välj “ladda ner länk”

HTTP request methods

7.3 `<label for=”...”> och <input id=”...”>`

formular.html Högerklicka välj “ladda ner länk”

7.4 Alternativ till for och id: lägga `<input>` nästlad i `<label>`

formular.html Högerklicka välj “ladda ner länk”

WEBAIM Creating Accessible Forms

7.5 `<input placeholder=”...”>`

formular.html Högerklicka välj “ladda ner länk”

CSS tricks rekommenderar

7.7 Att testa formuläret med httpbin

httpbin

Formulär med och utan id och for

codepen.io

7.8 `<input type="number"> och <button type="submit">`

formular-number.html Högerklicka välj “ladda ner länk”

CodePen: Skicka data från formulär med JS till klienten

7.9 `<input type=”email”>`

formular-email.html Högerklicka välj “ladda ner länk”

7.10 `<input type=”password”>`

formular-password.html Högerklicka välj “ladda ner länk”

7.11 `<input type=”date”>`

formular-date.html Högerklicka välj “ladda ner länk”

7.12 `<textarea>`

formular-textarea.html Högerklicka välj “ladda ner länk”

7.13 Valelement i formulär

7.13.1 Rullgardinsmeny

fomular-dropdown.html Högerklicka välj “ladda ner länk”

7.13.2 Radioknappar

fomular-radio.html Högerklicka välj “ladda ner länk”

7.13.3 Kryssrutor

fomular-kryssrutor.html Högerklicka välj “ladda ner länk”

7.13.4 Knappar

fomular-kryssrutor.html Högerklicka välj “ladda ner länk”

7.14 Organisera formelement

fomular-fieldset.html Högerklicka välj “ladda ner länk”

MDN - Web forms — Working with user data

7.15 Validera formulär

fomular-validering.html Högerklicka välj “ladda ner länk”

ÖVNING 7.4 /ÖVNINGAR/ovn-formlar.html Högerklicka välj “ladda ner länk”

ÖVNING 7.5 Astronomiska föreningen Orionalliansen webbplats kap7 - formulär (ZIP-fil)

8 Semantisk HTML

Quiz 8

w3cschools - HTML Semantic Elements

ÖVNING 8.1 /ÖVNINGAR/ovn-layout-icke-semantiska-element.html Högerklicka välj “ladda ner länk”

ÖVNING 8.2 Astronomiska föreningen Orionalliansen webbplats kap7 - formulär (ZIP-fil)

webbplats kap8 - semantiska element (ZIP-fil)

9 Hjälp med med kodningen

Quiz 9

9.1 HTML referenser

developer.mozilla.org/en-US/docs/Web/HTML

www.w3schools.com/html/default.asp

html.spec.whatwg.org/multipage

https://www.w3.org/Style/CSS/Overview.en.html

https://caniuse.com/

9.2 HTML forum

stackoverflow.com/

9.3 AI och LLM

https://chatgpt.com/

https://claude.ai/new

https://gemini.google.com/app

10 CSS

Quiz 10

Amelia Wittenberger

recension utan CSS (ZIP-fil)

10.1 Tre sätt att lägga till CSS-deklarationer.

10.1.1 Extern fil

ÖVNING 10.1 recension utan CSS (ZIP-fil) recension med CSS (ZIP-fil)

10.1.3 Direkt i ett HTML-element

ÖVNING 10.2 /ÖVNINGAR/ovn-tre-satt-att-ange-css.html Högerklicka välj “ladda ner länk”

10.2 Egenskaper du kommer använda ofta i CSS

css-tricks.com/almanac

developer.mozilla.org/en-US/docs/Web/CSS/Reference

10.2.1 Color och background-color

textfarg-bakgrundsfarg.html Högerklicka välj “ladda ner länk”

namngivna färger

CSS Legal Color Values

Color Formats in CSS

ÖVNING 10.3 /ÖVNINGAR/ovn-color-och-background-color.html Högerklicka välj “ladda ner länk”

10.2.2 Typografi och fonter

mer om fonter här

10.2.3 Google fonts

Google Fonts

några exempel som på hur GDPR har påverkat

typografi.html Högerklicka välj “ladda ner länk”

10.2.4 Modern Font Stacks

modernfontstacks.com

modern-font-stacks.html Högerklicka välj “ladda ner länk”

10.2.5 text-align

text-align.html Högerklicka välj “ladda ner länk”

10.2.6 Justerad text

ÖVNING 10.5 /ÖVNINGAR/ovn-justerad-text.html Högerklicka välj “ladda ner länk”

10.2.7 Bildbredd och bildhöjd

bild-bredd-hojd.html. Högerklicka välj “ladda ner länk” Se till att bilden ligger i samma mapp som html filen annars syns inte filen.

10.2.8 object-fit

ÖVNING 10.6 /ÖVNINGAR/ovn-bildbredd-bildhojd.html Högerklicka välj “ladda ner länk”. Se till att bilden ligger i samma mapp som html filen annars syns inte filen.

10.3 Boxmodellen

boxmodellen.html Högerklicka välj “ladda ner länk”

ÖVNING 10.7 /ÖVNINGAR/ovn-boxmodellen.html Högerklicka välj “ladda ner länk”. Se till att bilden ligger i samma mapp som html filen annars syns inte filen.