Skip to content

Huiswerk #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 3 commits into
base: main
Choose a base branch
from
Open

Huiswerk #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f362c67
Uitwerkingen opdracht 1
NoxLupis Sep 24, 2025
ef518cf
Finished assignment 2
NoxLupis Sep 25, 2025
eb66d77
refactored css, removed some redundancies
NoxLupis Sep 25, 2025
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
8 changes: 4 additions & 4 deletions opdracht-1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<!-- Navigatiebalk 3 -->
<nav class="navbar-three">
<div>
<div class="image-wrapper">
<img src="../assets/logo-acme.svg" alt="Company logo"/>
<p>NOVI Futuristic Inc</p>
</div>
Expand All @@ -44,11 +44,11 @@

<!-- Navigatiebalk 4 -->
<nav class="navbar-four">
<div>
<div class="image-wrapper">
<img src="../assets/logo-acme.svg" alt="Company logo"/>
<p>NOVI Futuristic Inc</p>
</div>
<ul>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/">About Us</a></li>
<li><a href="/">Our Products</a></li>
Expand All @@ -62,7 +62,7 @@

<!-- Navigatiebalk 5 -->
<nav class="navbar-five">
<div>
<div class="image-wrapper">
<img src="../assets/logo-acme.svg" alt="Company logo"/>
<p>NOVI Futuristic Inc</p>
</div>
Expand Down
65 changes: 65 additions & 0 deletions opdracht-1/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/*Opdracht 1a*/

.navbar-one ul {
display: flex;
justify-content: space-between;
list-style: none;
}

/*Opdracht 1b*/

.navbar-two ul {
display: flex;
justify-content: flex-end;
list-style: none;
}

/*Opdracht 1c*/

.navbar-three {
display: flex;
justify-content: space-between;
}

.navbar-three ul {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}

.image-wrapper {
display: flex;
align-items: center;
gap: 10px;
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

In de uitwerkingen wordt hier een relatieve maat (1rem) gebruikt, maar volgens mij hadden we die destijds nog niet behandeld (had het zelf ook niet).

}

/*Opdracht 1d*/
.navbar-four {
display: flex;
justify-content: space-between;
}
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

Er is in deze 4e subopdracht misschien wat weinig ruimte tussen 'Novi Futuristic Inc' en 'Home', omdat ze allebei bij een andere 'groep' horen had je hier nog een gap kunnen aanmaken voor meer ruimte (2rem in de uitwerkingen).


.navbar-four ul {
display: flex;
gap: 10px;
align-items: center;
list-style: none;
}
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

Ook hier kan een relatieve gap-maat dus ook, en list-style is in de uitwerkingen in een aparte class selector gezet die globaal wordt toegepast. Maar dit is simpelweg een andere manier om het goed te doen lijkt me.


.navbar-four .nav-links {
flex: 1;
}

/*Opdracht 1e*/
.navbar-five {
display: flex;
justify-content: space-between;
}

.navbar-five ul {
display: flex;
gap: 10px;
align-items: center;
list-style: none;
}
82 changes: 81 additions & 1 deletion opdracht-2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,86 @@
<title>NOVI Flexbox opdracht 2</title>
</head>
<body>
<p>It's Flexbox time!</p>
<nav>
<div class="image-wrapper">
<img src="../assets/logo-acme.svg" alt="Company logo"/>
<p>NOVI Futuristic Inc</p>
</div>
<div class="menu">
<div>
<ul>
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

In vergelijking met de uitwerkingen ben je hier 2 div's dieper gegaan, in plaats van het gebruik van een class voor de

    (en een class voor de meld je aan/login knoppen, die ook als
      hadden kunnen worden samengepakt). Visueel gezien bereik je dus hetzelfde resultaat met iets meer code.

<li><a href="/"><img src="../assets/home.svg" alt="home-icon"/>Dashboard</a></li>
<li><a href="/"><img src="../assets/apps.svg" alt="apps-icon"/>Projecten</a></li>
<li><a href="/"><img src="../assets/calendar.svg" alt="calendar-icon"/>Opleidingen en trainingen</a>
</li>
<li><a href="/"><img src="../assets/graduation-cap.svg" alt="graduation-cap-icon"/>Cursusmateriaal</a>
</li>
</ul>
</div>
<div class="login">
<button type="button" class="button-primary">
Meld je aan
</button>
<button type="button" class="button-secondary">
Login
</button>
</div>
</div>
</nav>
<div class="main-content">
<header>
<h1>Opleidingsaanbod</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br/> Animi at aut, consectetur fuga fugit magni
minus quo quos repudiandae veniam.</p>
</header>
<main>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
<article>
<img src="../assets/placeholder-image.svg" alt="placeholder-image" />
<h2>Some amazing title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<span>€1390,-<img src="../assets/users-alt.svg" alt="users-icon" class="icon"/></span>
<button type="button" class="button-secondary">Inschrijven</button>
</article>
</main>
<footer>
<p>&copy; NOVI Hogeschool</p>
</footer>
</div>

</body>
</html>
100 changes: 100 additions & 0 deletions opdracht-2/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
body {
display: flex;
height: 100vh;
}

/*------------------------------- NAVIGATION BAR -------------------------------*/

nav {
display: flex;
flex: 1 0 250px;
flex-direction: column;
gap: 20px;
}
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

Zelfde als bij eerste deel opdracht, absolute px-waarden ipv relatieve rem-waarden.


ul {
list-style: none;
}

li a {
display: flex;
align-items: center;
gap: 12px;
}

.image-wrapper {
display: flex;
align-items: center;
gap: 12px;
}

.menu {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: auto;
}

.login {
display: flex;
flex-direction: column;
gap: 12px;
}
/*------------------------------- MAIN CONTENT -------------------------------*/

.main-content {
display: flex;
flex-direction: column;
flex: 9;
}

header,
main,
footer,
article {
display: flex;
}

header {
flex-direction: column;
flex: 0 0 40vh;
justify-content: center;
background: url("../assets/placeholder-image.svg") center no-repeat;
background-size: cover;
text-align: center;
}

main {
flex: 1 0 0;
overflow: scroll;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
padding: 24px;
}
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

De uitwerkingen kiezen hier voor alleen een overflow-waarde op de y-as (overflow-y: scroll;).


article {
display: flex;
max-width: 260px;
max-height: 500px;
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

In plaats van absolute afmetingen geeft de uitwerkingen een 'aspect-ratio' attribuut terug, die ik zelf ook nog niet kende (aspect-ratio: 1 / 1.4;). Zodat het meeschaalt afhankelijk van de content maar wel in dezelfde proporties blijft.

flex-direction: column;
justify-content: space-between;
gap: 12px;
}

span {
display: flex;
justify-content: space-between;
}

.icon {
max-width: 16px;
Copy link

@ltjansen ltjansen Oct 6, 2025

Choose a reason for hiding this comment

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

Width of max-width lijkt hier tot hetzelfde resultaat te leiden.

}

footer {
background-color: #383838;
color: #fff;
justify-content: center;
font-size: 12px;
padding: 12px;
}