Webside med HTML/CSS (responsive)
Informatik C · STX · C-niveau · Eksperimentelt og projekt-arbejde
💻 Webside med HTML/CSS (responsive)
Webside-projekt på Informatik C — klassisk projekt-type.
Hovedformål: bygge en FUNKTIONEL, ÆSTETISK + RESPONSIV (= virker på alle skærm-størrelser) webside.
HTML-struktur (semantisk): ``html\n<!DOCTYPE html>\n<html lang="da">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Min portfolio</title>\n <link rel="stylesheet" href="styles.css">\n</head>\n<body>\n <header>\n <nav>\n <ul>\n <li><a href="#hjem">Hjem</a></li>\n <li><a href="#projekter">Projekter</a></li>\n <li><a href="#kontakt">Kontakt</a></li>\n </ul>\n </nav>\n </header>\n <main>\n <section id="hjem">\n <h1>Velkommen</h1>\n <p>Jeg hedder Alice + er gymnasieelev.</p>\n </section>\n <section id="projekter">\n <h2>Mine projekter</h2>\n <article>\n <h3>Klima-app</h3>\n <p>Beskrivelse + billede.</p>\n </article>\n </section>\n </main>\n <footer>\n <p>© 2024 Alice</p>\n </footer>\n</body>\n</html>\n``
Vigtige meta-tags:
- (a)
<meta charset="UTF-8">— sikrer korrekt vis af æ ø å. - (b)
<meta name="viewport" content="width=device-width, initial-scale=1.0">— KRITISK for mobile! Uden denne ser side-en mærkelig ud på mobil.
CSS-styling: ```css\n/ styles.css /\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n font-family: 'Helvetica', sans-serif;\n line-height: 1.6;\n color: #333;\n background: #f5f5f5;\n}\n\nheade
Læringsmål
- Opbygge semantisk korrekt HTML5-struktur med meningsfulde tags
- Style webside med CSS (flexbox, grid) og gøre den responsiv (media queries)
- Anvende browserens developer-tools til debugging og performanceoptimering
- Validere tilgængelighed (WCAG) og responsivitet på tværs af enheder
Sådan kan du arbejde med emnet
- Byg en simpel responsiv hjemmeside med HTML5 og CSS3 med mindst tre sektioner
- Tilføj en mediaquery, der ændrer layoutet fra et-kolonne til to-kolonne ved 768px
- Diskutér, hvad der er de vigtigste designbeslutninger i en responsiv webside
Arbejd iterativt med prototyper og dokumentation. Test, evaluér og dokumentér.
Øv dette emne med AI — quizzer, forklaringer og feedback tilpasset dit niveau.
Prøv Fagportalen gratis