msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ee99c69bc7'
${ noResults }
Web-Dev-For-Beginners/translations/sv/3-terrarium/1-intro-to-html/assignment.md

4.0 KiB
Raw Blame History Escape

HTML Övningsuppgift: Skapa en Bloggmockup

Syfte

Designa och handkoda HTML-strukturen för en personlig bloggs startsida. Denna övning hjälper dig att öva på semantisk HTML, layoutplanering och kodorganisering.

Instruktioner

  1. Designa Din Bloggmockup

    • Skissa en visuell mockup av din bloggs startsida. Inkludera viktiga sektioner som header, navigering, huvudinnehåll, sidopanel och footer.
    • Du kan använda papper och skanna din skiss, eller använda digitala verktyg (t.ex. Figma, Adobe XD, Canva eller till och med PowerPoint).

  2. Identifiera HTML-element

    • Lista de HTML-element du planerar att använda för varje sektion (t.ex. <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> osv.).

  3. Skriv HTML-koden

    • Handkoda HTML för din mockup. Fokusera på semantisk struktur och bästa praxis.
    • Inkludera minst 10 olika HTML-element.
    • Lägg till kommentarer för att förklara dina val och din struktur.

  4. Lämna in Ditt Arbete

    • Ladda upp din skiss/mockup och din HTML-fil.
    • Valfritt: Skriv en kort reflektion (2–3 meningar) om dina designval.

Bedömningskriterier

Kriterier Exemplariskt Tillräckligt Behöver Förbättras
Visuell Mockup Tydlig, detaljerad mockup med märkta sektioner och genomtänkt layout Grundläggande mockup med några märkta sektioner Minimal eller otydlig mockup; saknar sektionens etiketter
HTML-element Använder 10+ semantiska HTML-element; visar förståelse för struktur och bästa praxis Använder 5–9 HTML-element; viss semantisk struktur Använder färre än 5 element; saknar semantisk struktur
Kodkvalitet Välorganiserad, läsbar kod med kommentarer; följer HTML-standarder Mest organiserad kod; få kommentarer Oorganiserad kod; saknar kommentarer
Reflektion Insiktsfull reflektion om designval och utmaningar Grundläggande reflektion Ingen reflektion eller saknar relevans

Tips

  • Använd semantiska HTML-taggar för bättre tillgänglighet och SEO.
  • Organisera din kod med indrag och kommentarer.
  • Referera till MDN HTML Elements Reference för vägledning.
  • Fundera på hur din layout kan utökas eller stylas i framtida uppgifter.

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.