Cursus HTML & CSS
FSD Syntra AB - 2023
Link overzicht gehoste oefeningen
Link Github IO page
FAQ - Frequently Asked Questions
Basis les materiaal
Overzicht Lessen
| Datum |
Les inhoud |
| 29/09/2022 |
Basis HTML / CSS selectors / semantic / absolute/relative / VS Code / surge |
| 06/10/2022 |
CSS Dinner / Flexbox (Froggy) / box model part 1 / reset.css |
| 13/10/2022 |
Herhaling Basis HTML / CSS herhaling / intro CSS Grid / herhaling flexbox / afmaken eerste design |
| 20/10/2022 |
Theorie tot nu toe toepassen in praktijk - designs omzetten / Media Queries / Unit (px/em/rm/%/(ch)) |
| 27/10/2022 |
Theorie tot nu toe toepassen in praktijk - designs omzetten |
29/09/2022
klik hier voor overzicht
- basis HTML
- anatomie van een HTML element
- basis elementen
- semantische elementen
- semantic css framework: simple.css
- attributen
- basis CSS
- selectors
- hummus recept opmaken
- absolute / relative links / hyperlinks
- eerste website opmaken
- npm script schrijven
- npm package configuratie initiëren
- website hosten via Surge
- tooling: VS Code
- tooling: terminal commands
06/10/2022
klik hier voor overzicht
- padding / margin / border / content
- Eric Meyer's reset.css
- aligneren
- afmeten van een ontwerp
- CSS dinner, oefening op CSS selectors
- flexbox froggy, oefening op Flexbox Froggy
- wrapper
- accessbility intro
- Tesla design omzetten in HTML - part 1
13/10/2022
klik hier voor overzicht
- herhaling basis HTML:
- anatomie HTML element
- HTML document structure
- HTML hierarchy, parent-child, nesting
- CSS selectors
- linking relative/absolute / navigatie
- link external scripts
- layout in CSS:
- box model:
- box-sizing: border-content
- margin, border, padding, content
- position: absolute / position: relative
- flexbox (herhaling) met Flexbox Zombies
- CSS Grid (intro) met CSS Grid Garden
- Kahoot test op herhaling basis HTML & layout in CSS
- tooling: VS code
- Tesla design omzetten in HTML - part 2
- list style images
- view width / view height
- modulair leren werken
20/10/2022
klik hier voor overzicht
- klassikaal design opbouwen FigJam
- individueel design opbouwen van "Happy Clients"
27/10/2022
klik hier voor overzicht
- pseudo elements; after / before
- position: relative / absolute
- klassikaal design opbouwen van "Happy Clients"
- individueel start van "Mountain"
- extra oefening: "Portfolio"
17/11/2022
klik hier voor overzicht
- herhaling: media queries
- Mountain oefening maken
- Klassikaal Portfolio nabouwen pt1
- Adobe Color intro + extract theme link
- herhaling: responsiveness link
- basic grid link
- optioneel, automatisch website deployen met surge wanneer je commit link (not done)
24/11/2022
klik hier voor overzicht
- herhaling: media queries
- herhaling absolute/relative linking & id linking
- Mountain oefening maken
- Klassikaal Portfolio nabouwen pt2
- Simple Dropdown Oef. link
- forms link
- herhaling: responsiveness link
- responsive grid (vb link + see FAQ)
- standaard site namaken met grid
- bootstrap intro
- bootstrap oefening
- simple transition (see FAQ)
- One Pager nabouwen - voor link bron materiaal scroll down
Overzicht oefeningen
Oefeningen in klas
Thuisopdrachten
Praktisch
HTML - CSS links
HTML Starting template
download here
contains:
- html structure
- link to Eric Meyer’s reset.css
- box-sizing: border-box
Huisregels
click me for more info
- no inline styles
- W3C valid code
- format your code regularly
Visual Studio Code
We gaan in onze lessen voornamelijk gebruik maken van Visual Studio Code als IDE.
Je kan hier meer informatie vinden:
-
Surge
Met surge kunnen we relatief eenvoudig onze website online hosten. https://www.surge.sh
Meer info
##### Installing surge
can be installed with npm
command:
npm install --global surge
##### Some Code
```js
function logSomething(something) {
console.log("Something", something);
}
```
##### run surge first time
surge
it will prompt for project folder confirmation & make a new host name for you
##### host the same version of your site gain
Ideally, you want to decide yourself everytime
To host a new version of the same website, without surge proposing to host it in a new place
you should do:
surge [project folder] [host name]
example:
surge . karim-html-css-syntra_2023.surge.sh
NPM
Met Node & npm (node package manager) kunnen we
CodePen
Een site waar je dingen makkelijk kan uitproberen en dan delen. Je kan ook veel inspirerende code / html snippets vinden van andere mensen.
https://codepen.io/
Resources
Flexbox
Flexbox Examples
- putting 4 boxes, 2 on each line, for max width 1600px example
Grid
Position Relative / Absolute
Semantic HTML elements