WV-H1
Harjoitus: Semanttinen HTML
Päivitetty & korjattu: 9.2.2021
Hyödylliset linkit:
W3Schools: HTML Semantic
Elements
MDN: Semantics
WV-H2
Harjoitus: Responsiivinen Design
Päivitetty & korjattu: 9.2.2021
Hyödylliset linkit:
Responsiivinen
suunnittelu ja toteutus
MDN: Using media
queries
MDN: Using the viewport meta tag
to
control layout on mobile browsers
MDN:
The building blocks of responsive design
MDN:
Mobile first
Google Web
Fundamentals: Responsive Web Design Patterns
WV-H3
Harjoitus: Flexbox Froggy ja CSS Grid Garden
Päivitetty & korjattu: 9.2.2021
Flexbox
Froggy -tulos
Grid
Garden -tulos
Hyödylliset linkit:
A Complete Guide to Flexbox
A Complete Guide to Grid
Can I use...
WV-H4
Harjoitus: Responsiivinen grafiikka
Päivitetty & korjattu: 9.2.2021
Hyödylliset linkit:
Google Web
Fundamentals: Images
MDN:
Graphic design for responsive sites
MDN:
Responsive images
WV-H5
Harjoitus: Web Typografia
Päivitetty & korjattu: 10.2.2021
Hyödylliset linkit:
Designing for Readability – A
Guide to Web Typography (with Infographic)
Google Fonts: Getting Started with the Google
Fonts API
WV-H6
Harjoitus: Web-lomakkeet
Päivitetty & korjattu: 10.2.2021
speaker-submission.html
lähdekoodi
Hyödylliset linkit:
MDN: How to structure
a
web form
MDN: <form>
WV-H7
Harjoitus: CSS-kirjaston käyttöönotto (Bootstrap)
Päivitetty & korjattu: 10.2.2021
Hyödylliset linkit:
Bulma
Bootstrap -dokumentaatio
Bulma -dokumentaatio
Bootstrap 4 Cheat Sheet
Bootstrap TLDR
Start Bootstrap - Bootstrap Templates & Themes
Bootstrapmade - Bootstrap Templates
Bulmaswatch - free themes for Bulma
WV-H8
Harjoitus: CSS-esiprosessorit (Sass)
Käytetty tehtävässä Visual Studio Coden Live Sass Compileria Sass:in kääntämiseen.
index.html
lähdekoodi
Hyödylliset linkit:
W3Schools: Sass Tutorial
Sass Crash Course (Traversy Media)
Learn Sass In 20 Minutes | Sass Crash Course
Koala
Gulp
WV-H9
Harjoitus: CSS-animointi
Nappula
ja transition
SVG-elementtien
animointi keyframeilla
lähdekoodit
Hyödylliset linkit:
CSS Transition (CSS Animations Series Part 1)
CSS Animation & Keyframes (CSS Animations Series Part
2)
Material Design
MDN: SVG Attribute reference
WV-H10
Harjoitus: Mockup, Inkscape
Figma-prototyyppi
screenshot
prototyypistä
Inkscape-tutoriaalin
pohjalta tehty SVG-naama
lähdekoodi
Kuvatiedostot:
naama
| naama
(optimoitu SVG)
Hyödylliset linkit:
Prototypes
& Mockups
W3Schools: SVG Tutorial
MDN: SVG: Scalable Vector Graphics
Front End Center — Why Inline SVG is Best SVG
Inkscape: Guide to a Vector Drawing
Program
Wikipedia: Scalable Vector Graphics
2dgameartguru
2D
Game Art For Programmers - Part 1
WV-H11
Harjoitus: Kurssin lopputyö
Portfolio-websivu:
Portfolio-websivu
Harjoitustyön
dokumentaatio
Portfolio-sivu Githubissa ja vanhan portfolio-version lähdekoodi.