Allt material till kursen HTML & CSS för FEND16 finns och kommer att finnas i detta repo.
- Presentationer och genomgångar ligger under mappen slides.
- Vissa genomgångar kan även hittas på denna länk fend16.github.io/slides
- Kod från olika kodgenomgångar under kursens gång ligger under mappen code.
- Övningar som vi gör under lektionstid ligger under mappen exercises
- Eventuella lösningsförslag kommer att ligga under mappen solutions.
- w3schools.com: HTML5 Tutorial
- Grundläggande genomgång av det mesta inom HTML.
- w3schools.com: CSS3 Tutorial
- Grundläggande genomgång av det mesta inom CSS.
- htmldoctor.com
- Har fördjupande artiklar som behandlar struktur och semantik inom HTML5
- CSS-Tricks
- Har fördjupande artiklar om specifika CSS-egenskaper som vi ska gå igenom under kursen gång
Detta är de huvudsakliga sidorna vi kommer att använda oss utav men det kan även vara vissa specifika länkar till varje undervisningstillfälle. Under kursens gång kommer rubriken Links att fyllas på med alla länkar som används till kursen.
Handledning i kursen ges på plats i klassrummet. Är du av någon anledning inte närvarande under undervisningstillfället bär du ett eget ansvar att ta reda på vad du har missat och vad du behöver göra.
- Ha grundläggande kunskaper om HTML och CSS, samt i hur HTML sammankopplas till CSS och andra resurser som t.ex. bild.
- Kunna konvertera en designskiss, uppbyggd på sådant sätt som förväntas av branschen, till HTML och CSS.
- Kunna skapa multikolumnlayout, navigation, formulär och felsöka HTML och CSS.
- Kunna tydliggöra funktioner av vissa HTML-taggar, såsom table-tagg samt kunna
- använda denna med tabulär data.
- Grundläggande kunskaper om boxmodellen och floatmodellen.
- Ha grundläggande kännedom om arbetsmetodiken Progressive Enhancement.
- Kunna använda hjälpverktyg såsom SASS och LESS, samt kunna utöka CSS-språ̊ket med ytterligare funktionalitet.
IG Icke Godkänt: om den studerande ej uppnått samtliga kriterier för Godkänt.
- För Godkänd (G) krävs att den studerande nå̊r följande må̊l:
- Ha grundläggande kunskaper om HTML och CSS, samt i hur HTML sammankopplas till CSS och andra resurser som t.ex. bild.
- Kunna konvertera en designskiss, uppbyggd på sådant sätt som förväntas av branschen, till HTML och CSS.
- Kunna skapa multikolumnlayout, navigation, formulär och felsöka HTML och CSS.
- Kunna tydliggöra funktioner av vissa HTML-taggar, såsom table-tagg samt kunna använda denna med tabulär data.
- Grundläggande kunskaper om boxmodellen och floatmodellen.
- Ha grundläggande kännedom om arbetsmetodiken Progressive Enhancement.
- Kunna använda hjälpverktyg såsom SASS och LESS, samt kunna utöka CSS-språ̊ket med ytterligare funktionalitet.
För Väl Godkänd (VG) krävs att den studerande får godkänt på̊ samtliga G – respektive VG- kriterier:
- På egen hand kunskap i att implementera Progressive Enhancement.
- God förståelse att anpassa en HTML- och CSS-mall att fungera väl i olika enheter (Responsive web).
v.45
- Kursintroduktion
- Grundlig sidstruktur i HTML
- Formattering av HTML
- Grundläggande CSS
- HTML DOM
- Förklaring av vad HTML DOM är
- HTML Reference | MDN
- Referens till alla element som går att använda i HTML5
- CSS Reference | MDN
- Referens till alla properties som går att använda i CSS.
v.46
- CSS:
- Selektorer
- Mått och enheter
- Positionering
- HTML:
- Semantisk HTML
- Validering
- Learn CSS Positioning in Ten Steps
- Interaktiv tutorial som visar de olika positioneringsteknikerna
- A List Apart | CSS Positioning 101
- Varning! Mycket text men nyttig!
- CSS-Tricks | Absolute Positioning Inside Relative Positioning
- Hur man positionerar element på varandra.
- CSS-Tricks | All About Floats
- En guide till hur man använder float.
- w3schools.com | Semantic html
- Semantiska element i html
v.47
- Layouttekniker
display-egenskapen- Positioneringstekniker
- Boxmodellen
- Flexbox
- CSS-selektorer
- CSS-Tricks | Flexbox
- [Flexbox | MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
- CSS Selectors | Cheat Sheet
- Tabeller
- Formulär
- Styla tabeller och formulär med CSS
- Pseudo-selektorer
- html5doctor | HTML5 Forms
- CSS-tricks | Complete Guide To Tables
- w3schools.com | Styling Tables
- CSS Selectors | Cheat Sheet
- Smashing Magazine | Ultimate Guide to Psuedo-CSS
v.48
-
Upplägg av kod / Best Practice.
-
Webtypografi & färg
-
Arbete med obligatorisk inlämningsuppgift inom HTML & CSS. (Mindre individuell uppgift)
- Inlämning av obligatorisk inlämningsuppgift inom HTML & CSS. (Mindre individuell uppgift)
v.49
- Responsivitet
- Media Queries
- Mobile first / Desktop First
- Progressive enhancement / Graceful Degradation
- Responsivitet
- Hantering av bilder
- Vektorgrafik i webbläsaren
- Pixelgrafik i webbläsaren
- Slides: Responsive Images
- Månresan
- Smashing Magazine - srcset
- Dev Opera | Responsive Images
- CSS-tricks | Using SVG
v.50
- SASS - Sassy CSS
- Installation
- Variabler
- Nesting
- Partials
- Arbete med gruppuppgift
Inställt p.g.a sjukdom
v. 51
- Ramverk
- Vilka ramverk finns tillgängliga
- Vad gör de olika ramverken
- Bygga en enklare sida med ramverk
- Uppsamlingstillfälle för diverse uppgifter
v.1
-
Animering
- Animering med transitions
- Animering med keyframes
-
Transform property
v.2
- Eget arbete med gruppuppgiften
- Eget arbete med gruppuppgiften
v.3
-
Webbläsarkompabilitet
- Cross Browser Compatibility
- Prefix
- Cross Browser testing
v.4
- Handledning med projektuppgiften
- Eget arbete med projektuppgiften, lärare på plats för handledning
- Redovisning av projektuppgiften, helklass
- w3schools.com: HTML5 Tutorial
- w3schools.com: CSS3 Tutorial
- HTML DOM
- Förklaring av vad HTML DOM är och hur vi kan använda oss utav det.
- HTML Reference | MDN
- Referens till alla element som går att använda i HTML5
- CSS Reference | MDN
- Referens till alla properties som går att använda i CSS.
- CSS Reference.io
- CSS Selectors | Cheat Sheet
- Smashing Magazine | Ultimate Guide to Psuedo-CSS
- Learn CSS Positioning in Ten Steps
- Interaktiv tutorial som visar de olika positioneringsteknikerna
- A List Apart | CSS Positioning 101
- Varning! Mycket text men nyttig!
- CSS-Tricks | Absolute Positioning Inside Relative Positioning
- Hur man positionerar element på varandra.
- CSS-Tricks | All About Floats
- En guide till hur man använder float.
- CSS-Tricks | Flexbox
- [Flexbox | MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
- Styleguides and Design Patterns
- Good and Bad CSS Practices for Beginners
- Keep your css-selectors short
- Why Vertical Rythm?