Programmeren Week 1 & 2
Week 1 & 2
Voordat we bezig zouden gaan met het project vond het team het een goed idee om eerst
de beginnende programmeurs op gang te laten komen. Hiervoor hebben we verschillende oefeningen gedaan.
Mijn bedoeling was aan het begin om javascript te gaan leren omdat ik hoorde dat dit een goede programmeer taal is om in te beginnen. Al snel kwam ik er achter dat je niet alleen javascript kan leren als je dingen gaat maken want je krijgt eigenlijk altijd wel te maken met HTML of CSS.
- JavaScript basic - Exercises, Practice, Solution
De website hyperlink:
https://www.w3resource.com/javascript-exercises/javascript-basic-exercises.php
Werd door Richard voor mij en Justin aangeraden om javascript eerst wat beter te begrijpen. Hier hebben we ongeveer 3/4 oefeningen van gedaan en zijn daarna toch maar over gestapt naar een ander leermiddel.
- Jshero
Na de Javascript basics exercises zijn we over gegaan op Jshero wat voor mijn gevoel wel wat beter werkte dan de basic exercises. Jshero geeft je interactive exercises waarbij je op elke pagina een uitleg krijgt over een line of code en daarna een vraag, deze vraag gaat
Na de Javascript basics exercises zijn we over gegaan op Jshero wat voor mijn gevoel wel wat beter werkte dan de basic exercises. Jshero geeft je interactive exercises waarbij je op elke pagina een uitleg krijgt over een line of code en daarna een vraag, deze vraag gaat
dan ook over de uitleg die boven aan de pagina is weergeven. Na de vraag met uitleg krijg je vaak een soort toets van 1 van de vragen die je daarvoor hebt gehad, hierbij krijg je geen uitleg en staat er geen hint of view solution. Deze manier van werken vond ik erg prettig, omdat je het op deze manier snel leert.
- FizzBuzz challange week 1
Mijn solution voor de challange.
HTML:
<button type="button" id="test" >Next Web Teller</button>
JS:
document.getElementById("test").addEventListener("click", Optellen);
function Optellen() {
for (let x = 1; x < 101; x++) {
if (x % 3 === 0 && x % 5 === 0) {
console.log("Next Web");
} else if (x % 3 === 0) {
console.log("Next");
} else if (x % 5 === 0) {
console.log("Web");
} else {
console.log(x);
}
}
}
De docent zijn oplossing.
JS:
for (let index = 1; index < 101; index++) {
console.log(index)
let msg = "";
if (index % 3 == 0) {
msg = "Next"
}
if (index % 5 == 0) {
msg = "Web"
}
if (index % 3 == 0 && index % 5 == 0) {
msg = "Next Web"
}
}
HTML
HTML had ik veel over gehoord maar begreep nooit waar het nou voor was en wat je er mee kunt. Doordat ik mijn javascript wou testen in visual code studio ben ik in aanraking gekomen met HTML. Ik wou graag kijken als de code die ik had getypt ook echt werkte. Om te beginnen moest ik een javascript, HTML en een CSS file hebben met duidelijke name confention, dit is belangrijk omdat je via de naam van je files, files met elkaar kan linken. als eerste moest je in je HTML bestand het volgende typen: <html en dan krijg je het gene wat hieronder te zien is.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
</body>
</html>
Op line 8 en 9 waar <Link rel staat kun je je CSS file linken en bij <script src kun je je javascript linken. Door de 'main.css' en 'main.js' te veranderen naar de namen van je eigen files kun je ze linken.
Ik ben er dus achter gekomen dat HTML voor je website zorgt en dat dat de plek is waar je het skelet opzet.
CSS
Ik had al wel eerder van CSS gehoord maar wist niet precies wat je er mee kon, nu weet ik dat CSS er voor zorgt hoe alles er uit komt te zien. Het verschil dus met HTML en CSS is dat je met HTML de begin laag maakt waar je op kan bouwen en met CSS kun je die dingen mooi maken.
CSS heb ik tot nu toe gebruikt in een test van mij om te kijken hoe ik de stijl van een button kan aanpassen. Later heb ik CSS gebruik tijdens het project om de loading page te laten lijken zoals het design in figma.
CSS
Ik had al wel eerder van CSS gehoord maar wist niet precies wat je er mee kon, nu weet ik dat CSS er voor zorgt hoe alles er uit komt te zien. Het verschil dus met HTML en CSS is dat je met HTML de begin laag maakt waar je op kan bouwen en met CSS kun je die dingen mooi maken.
Typescript
Typescript hebben we 1 dag gebruikt omdat we dachten dat het makkelijker was en dat klopte ook. Het was heel prettig om mee te werken want je krijgt namelijk goede feedback van Typescript, het zegt heel mooi als er iets mis is met je line of code. Helaas hebben we dit moeten laten vallen want toen we aan het project begonnen konden we Typescript niet gebruiken vanwege de routing in React.
React
Typescript hebben we 1 dag gebruikt omdat we dachten dat het makkelijker was en dat klopte ook. Het was heel prettig om mee te werken want je krijgt namelijk goede feedback van Typescript, het zegt heel mooi als er iets mis is met je line of code. Helaas hebben we dit moeten laten vallen want toen we aan het project begonnen konden we Typescript niet gebruiken vanwege de routing in React.
React
Uiteindelijk zijn we uitgekomen bij React wat we gaan gebruiken voor de opdracht. Na het leren van alles wat hiervoor is gekomen vond ik het best lastig om er gewent aan te raken. Zo onderhand begin ik er wel meer van te begrijpen en heb ik al bijna mijn eerste web pagina af. Tot nu toe bestaat mijn leer proces uit kijken wat ik moet maken, op internet opzoeken, uitproberen, dingen veranderen en opnieuw kijken als het werkt.
Reacties
Een reactie posten