Inleiding
Er werd ontzettend van ons verlangt dat we building blocks gingen in plannen. Met goede moed heb ik daardoor ook front-end ingepland. Dit is mijn 2 keer dat ik een website maak. Ook de 2 keer dat ik met HTML en CSS werk. Het gesprek is puur voor een feedback om mij de goede richting op te sturen. In mijn CLE project hebben we gewerkt met Laravel omdat dit ook makkelijk te leren/begrijpen is. De dingen die ik gemaakt heb zitten wel in Laravel maar heb ik alleen gelinkt door middel van laravel/blade. Halverwege dat ik dit aan het schrijven was kon ik geen foto’s meer toevoegen door een foutmelding? Dit heb ik op een andere manier proberen op te lossen.
HTML
Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kan een heldere structuur opzetten middels moderne semantische tags zoals NAV en SECTION. Je HTML bevat geen inline styles en javascript.
Zoals in de les werd aangeraden ben ik de online lessen gaan bekijken van Barry Luibregts en Jon Friskics op Pluralsight. Daarnaast heb ik ook een hoop Youtube flimpjes bekeken van onder andere CSS.
CSS Syntax
Je kan werken met css selectors: tags, id’s en classes. Je gebruikt flexbox of css grid om structuur in je layout aan te brengen. Je website is responsive door te werken met relatieve eenheden en media queries. Je site werkt goed op verschillende maten schermen en apparaten, én in verschillende browsers.
Tags: tags{}. id: #id{}. classes: .classes{}
Ik had het liefst een foto willen invoegen maar dat werkte niet dus vandaar dat ik het even zo heb opgelost.
De site werkt nog maar op 1 maat scherm omdat ik er nog niet aan toegekomen was om hem responsive te maken. Wel werkt hij in meerdere browsers omdat ik gekeken heb of mijn code de meeste browsers ondersteunt en dat doet het gelukkig.
Header
@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
.header{
box-sizing: border-box;
margin: 0;
background-color: #03befc;
}
ul{
padding-inline-start: 0;
}
li, a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: white;
text-decoration: none;
}
header{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 20px
}
.nav_links{
list-style: none;
}
.nav_links li{
display: inline-block;
padding: 0 10px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover{
color: lightgray;
}
.name{
margin-right: 750px;
}Body
html, body {
Margin:0;
Padding:0;
background-color:gray;
}
img {
width: 40%;
border: 5px solid black;
display: block;
margin: -15px auto 15px;
}
#innerHTML{
color: gray;
}Footer
.footer {
background-color: #03befc;
padding-bottom: 40px;
color: white;
margin-top: auto;
}
.p {
text-align: center;
padding-bottom: 5px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 25px;
margin-top: 5px;
}
label{
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
}
input, label {
float:left;
margin-right: 10px;
margin-left: 10px;
}
form{
}
button {
background-color: green;
color: white;
padding: 2px;
}
CSS Ontwerp
Je bent in staat om een bestaand visueel ontwerp/wireframes, zowel desktop als mobile, om te zetten naar CSS code. Hiervoor kan je een ontwerp gebruiken uit de interactie ontwerp lessen, of een ontwerp uit CLE. Het ontwerp hoeft niet van jezelf te zijn.
Voor ons CLE project heeft Gertjan een wireframe gemaakt. Deze heb ik als voorbeeld genomen en heb ik zo goed mogelijk proberen na te maken.
Javascript
Je begrijpt hoe je met modern ES6 javascript bij de website passende functionaliteit en interactie toe kunt voegen aan je website. Je website kan input van de gebruiker verwerken met javascript, en je kan de website updaten met javascript.
De event listener die kijkt of je op de img hebt geklikt. Als dat is gebeurt dan gaat hij de functie change uitvoeren. Dan voert hij in de input vakjes de gegevens in. Eerst kijkt de eventlistener of er op de button is geklikt als dat zo is krijg je een popup met wat er in de innerHTML staat. In mijn geval is dat “Je product is verzonden naar het hologram!”.
Je gebruikt een eventlistener omdat je anders in je HTML een onclick krijgt en dan is het on overzichtelijk wat HTML of JS is.
