diff --git a/docs/INSTRUCTIONS.md b/docs/INSTRUCTIONS.md index 810909ba..25f630b0 100644 --- a/docs/INSTRUCTIONS.md +++ b/docs/INSTRUCTIONS.md @@ -16,7 +16,7 @@ Deze leertaak wordt behandeld in sprint 2. Er worden verschillende workshops aan - [Briefing/debriefing](briefing-debriefing.md) - Maandag week 1 - [Prototyping](prototyping.md) - [Code/Design review Prototype en HTML](code-design-review-prototype-en-html.md) -- [Layout in CSS](https://github.com/fdnd-task/layout-in-css) +- [Layout in CSS](layout-in-css.md) - [Typografie en leesbaarheid](typografie-en-leesbaarheid.md) - [Code conventies](code-conventies.md) - [Sprint review](sprint-review.md) diff --git a/docs/flow-layout.md b/docs/flow-layout.md deleted file mode 100644 index b787645f..00000000 --- a/docs/flow-layout.md +++ /dev/null @@ -1,60 +0,0 @@ -# Flow Layout - -_In de workshop S02W2-03-flow-layout wordt behandeld wat Flow layout -is, waarom het belangrijk is en hoe je met een de verschillende flows een -layout kan maken._ - -Normal flow of flow layout is de manier waarop block- en inline-elementen op een -pagina worden weergegeven voordat er wijzigingen met CSS worden aangebracht. - -## Normal flow - -In normal flow zullen inline elementen naast elkaar komen te staan op 1 regel en -block level elementen achter elkaar op nieuwe regels. - -![block-inline-vertical](https://github.com/user-attachments/assets/4c3550ef-a0ea-408e-a704-53984faa47e9) - - - - - - - - - - - - - - - - - - - -Voorbeelden van inline elementen: -1. `` -2. `` -3. `` - -Voorbeelden van block elementen: - -1. `

` -2. `

` -3. `
    ` -4. `
    ` - -normal-flow-md - -## Aanpak - -Inspiratie opdoen in: [https://www.joshwcomeau.com/css/understanding-layout-algorithms](https://www.joshwcomeau.com/css/understanding-layout-algorithms) - - -#### Bronnen - -- [MDN Flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout) -- [Complete guide to CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/) -- [Complete guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -- [Flex froggy](https://flexboxfroggy.com/) -- [Grid garden](https://cssgridgarden.com/) diff --git a/docs/layout-in-css.md b/docs/layout-in-css.md new file mode 100644 index 00000000..1000baaa --- /dev/null +++ b/docs/layout-in-css.md @@ -0,0 +1,18 @@ +# Layout in CSS + +_In de workshop S02W2-03-layout-modes wordt behandeld wat Layout Modes zijn, +waarom het belangrijk is om hier meer van te weten, en hoe je met de +verschillende modes een layout kan maken._ + +Normal flow of _Flow Layout_ is de manier waarop _block_- en _inline_-elementen +op een pagina worden weergegeven voordat er wijzigingen met CSS worden +aangebracht. + +Dat is dus wat je ziet als je “kale” HTML in de browser bekijkt. + +Om te oefenen met verschillende Layout Modes, hebben we de deeltaak “Layout in CSS” +voor je klaargemaakt. Alles wat je hierin leert, kun je daarna toepassen in deze +leertaak, voor je opdrachtgever. + +Voer de [Layout in CSS deeltaak](https://github.com/fdnd-task/layout-in-css) uit, +en ga door met de leertaak. \ No newline at end of file