Skip to content

please check it #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: flexbox
Choose a base branch
from
Open

please check it #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 68 additions & 1 deletion deel-1-flexbox-positioneren/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,68 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
.opdracht-1 .flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik zou deze spatie weghalen. Zodat code netjes is.

}
/*Opdracht-2*/

.opdracht-2 .flex-container {
display: flex;
flex-direction: row;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik zou deze spatie weghalen. Zodat code netjes is.

}
.opdracht-2 .flex-item {
flex-basis: 240px;
}
/*Opdracht-3*/

.opdracht-3 .flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.opdracht-3 .left {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fijn dat hier de code per element correct is, dus geen spatie voor het laatste }. Alleen nu mis ik een spatie tussen de elementen. Zodat het meteen duideljk is dat dit nieuw element is.
Geldt voor heel opdracht 3. Ze staan allemaal meteen opeenvolgend.

align-self: flex-start;
}
.opdracht-3 .center {
align-self: center;
}
.opdracht-3 .right {
align-self: flex-end;
}

/*Opdracht-4*/

.opdracht-4 .flex-container {
display: flex;
flex-direction:row;
flex-wrap: wrap;
gap: 11px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small detail. In uitwerking opdracht kozen ze voor 10px ;-)

}
/*Opdracht-5*/

.opdracht-5 .flex-container {
display: flex;
flex-direction: row;
justify-content:space-between;

}
.opdracht-5 .flex-column {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

}
.opdracht-5 .item-1 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jouw oplossing vind ik logisch om de items een class te geven. Heb ik zelf ook gedaan. De gevorderde codeerder kan ook denken aan deze oplossing die NOVI meegeeft :
" /Met de selector nth-of-type(getal) kun je het "zoveelste" element van dat type aanspreken/
.opdracht-5 .flex-column:nth-of-type(1) {
align-items: flex-start;
} "

align-self: flex-start;
}
.opdracht-5 .item-2 {
align-self: center;

}
.opdracht-5 .item-3 {
align-self: flex-end;

}
44 changes: 43 additions & 1 deletion deel-2-flexbox-layout/opdracht-1/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,43 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deze comment mag je negeren hoor. Kan ook aan mij liggen. Echter is zag in je pull request dat je ze allemaal had verwijderd. Hierboven staat ook dat je dit resolved hebt. Echter ik zie toch nog deze comment telkens bij alle opdracht. Don´t ask me hoezo.


body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

zou even spatie hiertussen zetten

display: flex;
flex-direction: row;
flex-basis: auto;
flex-shrink: 0;
flex-grow: 1;
}

header {
flex-basis: 150px;
flex-shrink: 0;
flex-grow: 0;
}
article {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hier ook spatie ertussen zetten

flex-basis: 60vw;
order: 1;
flex-shrink: 1;
flex-grow: 1;
}

nav {
flex-basis: 20vw;
order: 3;
flex-shrink: 0;
flex-grow: 1;
}
aside {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mis een spatie

flex-basis: 20vw;
order: 2;
flex-shrink: 0;
flex-grow: 1;
}

footer {
flex-basis: 150px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ik mis de properties flex shrink en grow. De footer mocht niet groeien, dus beide 0.

}
47 changes: 46 additions & 1 deletion deel-2-flexbox-layout/opdracht-2/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,46 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
body {
display: flex;
flex-direction: row;
flex-wrap: wrap;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in de uitwerkingen van NOVI wordt er niet voor gekozen om de body flex-wrap te maken. Zou ik ook niet zo slim vinden. Want niet alles op de site wil je dat wrapt. Bijv een menu wil je gewoon zo houden of anders regelen via media queries. Dat het dan verspringt. en niet met wrap lijkt mij.

min-height: 100vh;
}

div {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ik moest even zoeken wat deze div was. Misschien handiger om de class name te gebruiken (col-2). Rest prima gekozen.

display: flex;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}

main {
display: flex;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NOVI uitwerking kiest ervoor om hier flex-basis : auto; nog te declareren.

flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
}

header {
flex-basis: 20vh;
flex-grow: 0;
flex-shrink: 0;
}

footer {
flex-basis: 15vh;
flex-grow: 0;
flex-shrink: 0;
}

article {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}

nav {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hier was het geen probleem dat je niet de class name gebruikte. Want nav is al een element dat meteen aangeeft wat het was. Ter vergelijk: bij die div was het dus onduidelijk, moest naar html gaan (ik had structuur col 1-/col -2 omdat dit in de html stond. Rest functioneel goed en ook code style helemaal 100% in orde

flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
}
50 changes: 49 additions & 1 deletion deel-2-flexbox-layout/opdracht-3/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,49 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
body {
display: flex;
flex-direction: row;
min-height: 100vh;
}

nav {
flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
}
div {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code style: hier spatie weer fijner om te lezen

display: flex;
flex-direction: column;
flex-basis: auto;
flex-shrink: 1;
flex-grow: 1;
}
main {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code style: hier spatie weer fijner om te lezen

display: flex;
flex-direction: row;
flex-shrink: 1;
flex-grow: 1;
flex-basis: auto;
}

article {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}

aside {
flex-basis: 20vw;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Complimentje, want valt me op dat je consequent werkt met vh en vw.

flex-grow: 0;
flex-shrink: 0;
}
header {
flex-basis: 20vh;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bij NOVI uitwerking doen ze de header en footer wel in px weergeven. (Jij hebt beide in vh). In hun uitwerkingen doen ze wel de rest vd elementen in vw en vh. Mogelijk heeft dat een reden dat ze header en footer voor px kiezen. Alleen mij niet duidelijk waarom.

flex-grow: 0;
flex-shrink: 0;
}

footer {
flex-basis: 15vh;
flex-grow:0;
flex-shrink: 0;
}
58 changes: 57 additions & 1 deletion deel-2-flexbox-layout/opdracht-4/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,57 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code-style: weer vaker is er geen spatie tussen de elementen die je styled. Leest niet fijn.
Functionaliteit: uiteindelijk klopt alles, echter ik vond het wat "onleesbaar". Wat ik ermee bedoel: je wil volgen wat je doet. Je begint met body, logisch. De nav, ook nog logisch want dat is outer-col-1. Daarna verwacht je outer-col 2, de volgende flex-box, dan de inner-row en inner-col, dan zijn de boxen gestyled en duidelijk wat ze doen. Dan pas zou ik de styling verwachten van de flex-items als header, aside, article etc.

body {
display: flex;
flex-direction: row;
min-height: 100vh;
}

nav {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deze nav had een class gekregen en daarop styled NOVI. Dit kan ook, er is tenslotte maar 1 nav. En het is duidelijk.

flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
}
header {
flex-basis: 20vh;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bij NOVI uitwerking doen ze weer in px net als de footer.

flex-grow: 0;
flex-shrink: 0;
}
article {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
footer {
flex-basis: 15vh;
flex-grow: 0;
flex-shrink: 0;
}
aside {
flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;
}

.outer-col-2 {
display: flex;
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
flex-basis: auto;

}

.inner-row {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

}
.inner-col {
display: flex;
flex-direction: column;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
45 changes: 44 additions & 1 deletion deel-2-flexbox-layout/opdracht-5/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,44 @@
/*Schrijf hier jouw CSS*/
/*Schrijf hier jouw CSS*/
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code style: weer vaak geen spatie /ruimte tussen de elementen die je styled.

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
display: flex;
flex-direction: row;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Denk dat je bent vergeten deze } aan te schuiven naar e.a.a. te verwijderen?


}
nav {
order: 1;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

order: -1 en hij gaat naar links en komt op juiste plek. Want article is 0. Jouw oplossing om ze 1-2 en 3 te noemen, werkt ook hoor. Alleen is meer code.

flex-basis: 20vw;

}
article {
order: 2;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dit kan je weglaten. Want order : -1; bestaat ook. Als je die aan het nav element geeft, dan staat alles al meteen goed.

flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
aside {
order: 3;
flex-basis: 20vw;
flex-grow: 0;
flex-shrink: 0;

}
header {
flex-basis: 20vh;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

je zal het al vermoeden. Dit is prima, NOVI uitwerking dus met px werken, rest van de elementen hebben wel vh en vw

flex-grow: 0;
flex-shrink: 0;
}
footer {
flex-basis: 15vh;
flex-grow: 0;
flex-shrink: 0;
}

31 changes: 30 additions & 1 deletion deel-3-webpagina/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,39 @@
<title>Flexbox opdracht 3</title>
</head>
<body>
<div>
<nav class="navigation">
<h2>Analytica</h2>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dit is prima, weet bij NOVI uitwerkingen geven ze deze h2 een class name company-brand-name. Om ervoor te zorgen dat evt andere h2 niet gestyled worden.

<ul>
<li>About us</li>
<li>Strategy</li>
<li>Prices</li>
<li>Contact</li>
</ul>

</nav>
<section class="section-content">
<div class="header-content">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dit kan prima, weet bij NOVI uitwerking kiezen ze niet voor een nieuwe div. In de section heb je een:
h1
h3
inner-container (met die articles)

<h1>All Your Business Data in One Place</h1>
<h3>Sync and store all your business data. Explore your data with SQL or visualize it with your favorite BI or
analytics tools.</h3>
</div>
<div class="content">
<article>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In NOVI uitwerking krijgen de 3 articles allemaal nog dezelfde class.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut autem consequatur dolore ducimus eius
fugit inventore laudantium, magni mollitia, nemo perspiciatis rem reprehenderit temporibus, tenetur ullam
veritatis vero vitae?</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquam architecto
asperiores deleniti incidunt ipsam laborum magni molestias nihil non optio, pariatur quibusdam, quod
reiciendis reprehenderit sapiente sint ullam.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam beatae dolore expedita
ipsum, necessitatibus non pariatur perspiciatis praesentium quaerat quasi voluptas. Deleniti labore
laudantium nam odit quae voluptates voluptatum!</p>
</article>
</div>
</section>
</body>
</html>
Loading