/website-productie

HTML & CSS - Syntra AB 2023

Primary LanguageHTML

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

Datum Price
29/09/2022 Recept Pagina Opmaken
06/10/2022 CSS Dinner
13/10/2022 Tesla Roadster v1
20/10/2022 FigJam (link naar bronmateriaal / design)
27/10/2022 Happy clients (link naar bronmateriaal / design)
27/10/2022 Portfolio (optionele oefening) (link naar bronmateriaal / design)
27/10/2022 Mountain (link naar bronmateriaal / design)
17/11/2022 One Pager (link naar bronmateriaal / design)
17/11/2022 Combining media query, dropdown & Adobe Color
01/12/2022 Examen - Link

Thuisopdrachten

Deadline Price
13/10/2022 Zelf Studie - Intro HTML and CSS - Lesson 1
20/10/2022 Voorbereiding Design

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

Overzicht Tooling

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
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