För att spara tid under kursen kommer ni inför kursstart få ett inlärningsprojekt. Syftet med projektet är att ni ska lära er grunderna i HTML och CSS på egen hand så att vi kan lägga fokus på JavaScript och Ramverk.
För att kunna genomföra detta projekt kommer du behöva genomföra självstudier. Under följande rubrik kommer ni se en lista på koncept och tekniker som ni behöver lära er. Använd länkarna under rubriken Resurser som start.
- Grundläggande HTML-syntax (start/slut-taggar, attribut, nesting, vanliga element)
- HTML-dokumentets olika delar
<head>och<body> - Vanliga HTML-taggar
- Semantisk HTML
- Grundläggande CSS-syntax (selektorer, psuedo-klasser, vanliga egenskaper)
- Box-modellen i CSS
- Typografi och färger
- Layouting med Flexbox och Grid
- Responsivitet med @media-queries
- https://www.codecademy.com/learn/learn-html
- https://www.codecademy.com/learn/learn-css
- https://css-tricks.com/guides/
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Om ni får tid över kan ni fördjupa er i SASS
Ni ska bygga en enkel responsiv webbplats. Mockups och assets finns i det här repot.
Forka det här repositoryt och utveckla mot er fork, på det här sättet ger ni mig och de andra i klassen tillgång till koden för att lära er av varandra.
Ni kan också använda Githubs senaste feature Discussions att diskutera projektet eller kursen här inför kursstart.
Börja med mobil-versionen av sidan, denna praxis kallas Mobile First och är vedertagen för frontendare.
Försök få designen att likna Mocken så nära det går.
- Ni ska använda er av
flexochgridför att bygga layouten. - Man ska kunna navigera mellan Home- och Contact-sidorna.
- När mobilversionen är klar, lägg till
@media-queries för att anpassa sidan till Desktop - Level Up: Lägg till lite fancy hover-effekter och transitions på sidan.