Embedded Files
I dessa filmer förklarat jag denna ganska omfattande uppgift. Se och gör alla delarna. Denna förbereder dig inför uppgift 6 och 7 om du satsar på C och A
Du kan se ut design och layout ska se ut till höger. Färgerna väljer ni själv. Men texten ska synas tydligt
Du får en mapp som heter "img" och en som heter "layout" . De fyra bilderna i "layout" visar hur sidorna ska se ut. Använd inte dessa i er webbplats. För varje sida (index och contact) finns en desktop och en mobilversion. Gör alltid för mobildesignen först och ändra med media query för desktop layout. Tips iställer för min-width och max-width, använd <, >, <=, >=. Se denna codepen
Båda sidorna ska klara valideringen av HTML och CSS
Både index och kontaktsidan ska ha centrerat innehåll.
Du ska välja färger från denna sida: https://coolors.co/generate OBS du får inte använda mitt färgschema. Slumpa fram ett eget färgschema.
Välj en san-serif font från Google fonts: https://fonts.google.com/?category=Sans+Serif. Använd @import i CSS filen för att länka in fonten
Vill du vara extra elegant får du gärna använda https://modernfontstacks.com/ för att minska laddningstiden och undvika bryta mot GDPR i Tyskland
De två länkarna i menyn ska designas så användaren förstår det är länkar men de får INTE ha standardutseende. Du ska ha ett knapplinknade utseende
Webbplatsen ska klara alla krav när man testar med Lighthouse UTOM bildtesten och Google fonts. (Överkurs Om du vill veta hur man skulle klara kraven och få bilderna ladda bättre se denna film från WDS)
Glöm inte dessa
Background and foreground colors have a sufficient contrast ratio
Din webbplats ska klara: Color Contrast Accessibility Validator https://color.a11y.com/?wc3
Serve images in next-gen formats
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
Alla bilder ska vara webp format. Använd tex https://squoosh.app/ eller https://cloudconvert.com/webp-converter för att convertera alla bilder till webp-format
Lägg upp koden på GitHub och dela Pages och koden. Här en film hur man gör det
Exempel på länk till koden på GitHub https://github.com/paubel/web1-02-first-web-page
Exempel på länk till Github Pages
I denna uppgift visar jag en sk CSS reset. Man tar bla bort alla margin som en webbläsare sätter automatiskt. Detta är för att en webbutvecklare ska starta med en webbplats från början utan behöva tänka på hur Chrome eller Firefox gör Mer om denna hittar ni här https://piccalil.li/blog/a-modern-css-reset/
Här är externa länkar till CSS resten som du kan kopiera och klistra in direkt
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
En bra lathund om grid: https://grid.malven.co/
Bilden visar ungefär var gränserna gör för oilka skärmar. Kan användas när man sätter media queries
Viewport Width (vw) – A percentage of the full viewport width. 10vwwill resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. The difference between % and vw is most similar to the difference between em and rem. A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window.
I Grid när du använder align-items och justify-items kan du använda place-items som förkortning. Läs mer här: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
När du använder Grid och align-content och justify-content kan du använda place-content som förkortning. Läs mer här: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
Google Sites
Report abuse