My Daily Jornal - fatimahilali/i-love-web GitHub Wiki

Hallo, dit is mijn dagelijks journal. Hierin deel ik wat ik die dag in de klas of thuis heb geleerd, en wat ik eventueel nog verder wil leren.

dinsdag 3/9

Selectors

Selectors worden gebruikt in CSS om elementen op een webpagina te selecteren en te stijlen. Ze helpen je om specifieke HTML-elementen te stylen op basis van hun naam zoasl:

  • Element Selector: Selecteert alle elementen van een bepaald type. Bijvoorbeeld: p selecteert alle paragrafen.
  • Class Selector: Selecteert alle elementen met een bepaalde klasse. Bijvoorbeeld: .button selecteert alle elementen met de klasse button.
  • ID Selector: Selecteert een enkel element met een specifieke ID. Bijvoorbeeld: #header selecteert het element met de ID header.
  • Attribute Selector: Selecteert elementen op basis van hun attributen. Bijvoorbeeld: [type="text"] selecteert alle input-elementen met het type text.

Properties

Properties zijn instellingen die je met CSS kunt gebruiken om de stijl van elementen te veranderen. Elke property heeft een waarde die bepaalt hoe de stijl eruitziet:

  • Color: Bepaalt de tekstkleur, bijvoorbeeld: color: red;
  • Font-size: Bepaalt de grootte van de tekst, bijvoorbeeld: font-size: 16px;
  • Background-color: Bepaalt de achtergrondkleur van een element, bijvoorbeeld: background-color: blue;
  • Margin: Bepaalt de ruimte rond een element, bijvoorbeeld: margin: 10px;
  • Padding: Bepaalt de ruimte binnen de rand van een element, bijvoorbeeld: padding: 5px;

DevTools

DevTools zijn hulpmiddelen in webbrowsers zoals Chrome, Firefox die je helpen om webpagina's te inspecteren, testen en verbeteren.

  • Element Inspector: Hiermee kun je de HTML- en CSS-structuur van een pagina direct bekijken en aanpassen terwijl je de pagina in je browser opent.
  • Console: Hiermee kun je JavaScript-code uitvoeren en direct foutmeldingen en logberichten zien.

woensdag 04/09

Wireframes en waarom is het handig?

  • Wireframes zijn schetsen die je handmatig kunt maken om de lay-out en structuur van een website te tonen. Ze hoeven niet perfect te zijn. Wireframes helpen je om te plannen waar elementen zoals knoppen, menu's en content op de pagina moeten komen, zonder je zorgen te maken over de grafische stijl.

donderdag 5/9

JavaScript

  • JavaScript is een programmeertaal die je kunt gebruiken om je website interactief en dynamisch te maken. Het werkt samen met HTML en CSS om een webpagina niet alleen visueel aantrekkelijk, maar ook functioneel te maken.

  • DOM Manipulatie: Dit is het proces waarbij JavaScript de Document Object Model (DOM) gebruikt om toegang te krijgen tot HTML-elementen en deze te wijzigen. De DOM fungeert als een tussenlaag tussen HTML en JavaScript, waardoor je met JavaScript de structuur en inhoud van de webpagina dynamisch kunt aanpassen zonder de pagina opnieuw te hoeven laden.

Maandag 09/09

Team indeling

  • Het team is gekozen voor een mini-project waarbij je op een creatieve manier de visitekaartjes van de hele klas op jouw eigen manier moet integreren in de website. Daarnaast moet je informatie over de Amstcampus verzamelen en ook op de website plaatsen.

  • We hebben de taken op Miro verdeeld, en ik ben meteen aan de slag gegaan. Ik ben al een beetje bekend met Miro-borden

Donderdag 12/09

Media query

  • Doel: Het zorgt ervoor dat je website er goed uitziet en functioneert op verschillende apparaten, zoals smartphones, tablets en desktops.

Maandag 16/09

Visuele Hiërarchie

Visuele hiërarchie helpt om te bepalen wat belangrijk is in je ontwerp en hoe de informatie wordt gepresenteerd. Het zorgt ervoor dat de gebruiker snel begrijpt welke elementen belangrijk zijn en in welke volgorde ze moeten worden bekeken.

  1. Grootte: Grotere elementen trekken meer aandacht.
  2. Kleur: Felgekleurde of contrasterende elementen vallen meer op.
  3. Typografie: Verschillende lettergroottes en stijlen maken informatie duidelijker.
  4. Ruimte: Witruimte helpt om elementen van elkaar te scheiden.
  5. Uitlijning: Zorgt voor een georganiseerde uitstraling.

Dinsdag 17/9

CSS Animatie en Pseudo-elementen

@keyframes:

  • Hiermee definieer je een animatie in CSS. Het specificeert de stappen van de animatie en de veranderingen die plaatsvinden op verschillende momenten tijdens de animatie.

  • CSS-animatie is mijn favoriete techniek om toe te passen. Ik heb veel animaties geïmplementeerd op de Squad-teampagina. Ik heb een 3D-slider gemaakt die draait met de namen van elke klasgenoot

Pseudo-elementen ::before en ::after:

Pseudo-elementen zijn speciale elementen die je kunt gebruiken om extra inhoud toe te voegen aan een element zonder extra HTML toe te voegen. Ze worden gedefinieerd met dubbele dubbele punten ::, en je kunt ze gebruiken om stijlen toe te passen vóór of na de inhoud van een element.

  • ::before: Plaatst inhoud vóór de inhoud van het geselecteerde element.

  • ::after: Plaatst inhoud na de inhoud van het geselecteerde element.

  • Voorbeelden van Gebruik: In de team Squadpage heb ik met pseudo-elementen de kleur van de container langzaam van geel naar paars laten veranderen.

Woensdag 18/09

Vandaag heb ik verder gewerkt aan de squadpage en de puntjes op de i gezet. Ik heb telefonisch afspraken gemaakt met Halima, omdat zij ziek is. Zij gaat de README en issues toevoegen en eventueel nog wat wijzigingen aanbrengen in de code en op het Miro-bord indien nodig. Wat ik heb geleerd, is hoe belangrijk het is om taken duidelijk te verdelen en te communiceren met teamleden. Daarnaast heb ik geleerd hoe ik moet omgaan met situaties waarin teamleden afwezig zijn. Een teamlid is ziek, dus daar kan zij niets aan doen. Een ander teamlid heeft echter niets van zich laten horen, wat de situatie lastiger maakt. In plaats van extra werk te doen, moet ik meer ervaring opdoen zodat ik kan leren hoe ik met zulke situatie kan omgaan.

Donderdag 19/09

Vandaag heb ik informatie opgezocht over media queries die ik moet toepassen in het mini-project. Ik heb geleerd wat media queries inhouden, hoe je ze kunt gebruiken en waarom ze belangrijk zijn.

  • min-width en max-width: Voor het controleren van de breedte van het viewport.
  • min-height en max-height: Voor het controleren van de hoogte van het viewport.
  • orientation: Om te controleren of een apparaat in liggende (landscape) of staande (portrait) modus is. /* Media Queries voor responsief ontwerp */

/* Voor schermen kleiner dan 960px / @media (max-width: 960px) { .button { padding: 12px 24px; / Kleinere padding voor kleinere schermen / font-size: 12px; / Kleinere lettergrootte */ }

.intro-section {
    padding: 40px 10px; /* Kleinere padding voor de introductie sectie */
}

.intro-section h1 {
    font-size: 2.2rem; /* Kleinere lettergrootte voor de titel */
}

.intro-section p {
    font-size: 1rem; /* Kleinere lettergrootte voor de paragraaf tekst */
}

.grid-container {
    grid-template-columns: 1fr; /* Eén kolom layout voor kleinere schermen */
    padding: 20px; /* Kleinere padding */
}

.grid-item {
    margin-bottom: 20px; /* Marges onder de grid-items */
}

.grid-item img {
    height: auto; /* Automatische hoogte voor afbeeldingen */
}

.button {
    padding: 12px 24px; /* Kleinere padding voor knoppen */
    font-size: 12px; /* Kleinere lettergrootte */
}

h2 {
    font-size: 4em; /* Kleinere lettergrootte voor h2 */
    letter-spacing: 8px; /* Kleinere letterafstand */
    margin-left: 50px; /* Kleinere marge aan de linkerkant */
    top: -150px; /* Kleinere verticale verplaatsing */
}

}

/* Voor schermen kleiner dan 600px / @media (max-width: 600px) { .button { padding: 10px 20px; / Nog kleinere padding voor zeer kleine schermen / font-size: 10px; / Nog kleinere lettergrootte */ }

.intro-section {
    padding: 20px 10px; /* Nog kleinere padding voor de introductie sectie */
}

.intro-section h1 {
    font-size: 1.8rem; /* Nog kleinere lettergrootte voor de titel */
}

.intro-section p {
    font-size: 0.9rem; /* Nog kleinere lettergrootte voor de paragraaf tekst */
}

.grid-container {
    padding: 10px; /* Nog kleinere padding */
}

.grid-item {
    margin-bottom: 15px; /* Nog kleinere marges onder de grid-items */
}

.grid-item img {
    height: 250px; 
}

.button {
    padding: 10px 20px; /* Nog kleinere padding voor knoppen */
    font-size: 10px; /* Nog kleinere lettergrootte */
}

h2 {
    font-size: 3em; /* Nog kleinere lettergrootte voor h2 */
    letter-spacing: 6px; /* Nog kleinere letterafstand */
    margin-left: 20px; /* Nog kleinere marge aan de linkerkant */
    top: -100px; /* Nog kleinere verticale verplaatsing */
    
}

}

Maandag 23/9

Vandaag moest ik een bedrijf kiezen waar ik mijn project voor de aankomende sprint aan wil werken. Het was lastig om een keuze te maken, omdat dit de eerste keer is dat ik zoiets doe. De product owner wil dat we de website aantrekkelijker en responsiever maken voor de gebruikers.

Wat me direct opviel, is dat de huidige website van het bedrijf veel werk nodig heeft. De site ziet er saai uit en de informatie is overal verspreid, waardoor het een rommelige indruk maakt.

Mijn plan is om inspiratie op te doen bij bedrijven die ze zelf hebben aanbevolen, zoals:

[The New Yorker - Fiction and Poetry] (https://www.newyorker.com/fiction-and-poetry) [De Correspondent - Kiosk] (https://kiosk.decorrespondent.nl/) Ik wil ideeën opdoen voor het beste kleurenpalet dat past bij een journalistiek bedrijf en op zoek gaan naar de beste elementen om toe te passen in het project.

Woensdag 25/9

Vandaag heb ik een Figma-design gemaakt om te kunnen beoordelen of mijn ontwerp een verbetering is ten opzichte van de huidige website. Hiermee wil ik visualiseren hoe de nieuwe lay-out en elementen eruit zouden kunnen zien en of ze daadwerkelijk bijdragen aan een betere gebruikservaring.

Dit is de eerste keer dat ik eerst een design moet maken voordat ik begin met coderen. In het verleden had ik hier moeite mee; ik begon altijd met coderen en maakte daarna pas het design. Nu begrijp ik echter waarom het belangrijk is om eerst een design te maken: het geeft je veel meer inzicht en maakt het hele proces logischer en gestructureerder. Hierdoor kun je beter plannen en voorkom je dat je tijdens het coderen steeds aanpassingen moet doen. Scherm­afbeelding

Ik had vandaag oefeningen over het recht trekken van lijnen, waar ik nog moeite mee heb. Dit is iets waar ik verder aan moet werken. Daarnaast heb ik ook een sitemap gemaakt, wat helpt om een overzicht te krijgen van alle pagina's die de hele website moet hebben. Een sitemap is een visuele weergave van de structuur van een website en kan heel handig zijn bij het plannen en ontwerpen van een website. Het geeft duidelijk weer hoe de verschillende pagina's met elkaar verbonden zijn en helpt om het project overzichtelijk te houden tijdens de ontwikkeling.

vrijdag 27/9

Vandaag heb ik feedback ontvangen van Robin over mijn HTML-code en moet ik enkele aanpassingen doorvoeren. Dit was zijn feedback:

Font Awesome is wel handig, maar kan juist problematisch zijn voor gebruikers, vooral voor mensen die een screen reader gebruiken. Font Awesome zet namelijk bepaalde letters om naar icoontjes, zoals een letter A in een specifiek font om een icoon te krijgen. Dit is echter een probleem voor screen readers, omdat ze dan alleen de letter voorlezen, zonder dat duidelijk wordt dat het om een icoon gaat. Daarnaast moet een gebruiker alle iconen van Font Awesome downloaden, ook als er maar een paar icoontjes op de pagina worden gebruikt. Dit kan nadelig zijn voor mensen met langzamere internetverbindingen.

Robin raadde me daarom aan om SVG-iconen te gebruiken in plaats van Font Awesome. SVG's zijn schaalbare vectorafbeeldingen, die je direct kunt integreren in je HTML. Ze bieden meerdere voordelen, zoals betere toegankelijkheid en snellere laadtijden.

Zijn suggestie was om iconen te downloaden als SVG-bestanden via een site zoals SVGRepo, deze in de assets-map van mijn website te plaatsen, en ze dan aan te roepen met een -element in de HTML.

Ik heb nog niet veel ervaring met SVG-elementen, dus dit is iets wat ik de komende periode verder moet onderzoeken om zijn feedback goed te kunnen verwerken.

Maandag/31/9 Vandaag heb ik uitleg gekregen over flow layout, inline en block elementen, en verschillende layoutmodellen in CSS. De focus lag voornamelijk op CSS Grid, een layout-systeem dat ik eigenlijk pas recentelijk probeer toe te passen in mijn opdrachten. Hoewel ik nog niet helemaal bekend ben met Grid, zie ik het potentieel en ben ik bezig om het beter onder de knie te krijgen.

Ik heb opdrachten gekregen die specifiek gericht zijn op het werken met Grid. Deze moet ik nog afronden voordat ik de wijzigingen kan pushen naar de main branch. Daarnaast moet ik ook nog 9 user stories maken om mijn werk verder te structureren en duidelijkheid te creëren in wat er precies moet gebeuren.

Het zal wat tijd en oefening kosten om alles goed toe te passen, maar ik merk al dat het werken met Grid een krachtige manier is om layouts flexibel en responsief te maken.

IMG_6EEECF4D7B4E-1

Dinsdag 1/10

Vandaag heb ik onderzoek gedaan naar Flexbox, wat ik het meeste gebruik in mijn code. Ik merk echter dat ik vaak informatie moet opzoeken over de juiste Flexbox-elementen en hoe ze werken. Daarom heb ik besloten een soort notitieboek bij te houden waarin ik mijn kennis over verschillende elementen kan opschrijven. Dit biedt me een handig overzicht dat ik steeds kan raadplegen wanneer ik weer met Flexbox werk, waardoor het duidelijker en eenvoudiger wordt.

De volgende stap die ik wil gaan documenteren, is CSS Grid, zodat ik dit layout-systeem beter kan begrijpen en toepassen in mijn toekomstige projecten.

IMG_6315 IMG_6316

IMG_6317

Woensdag 2/10

Vandaag had ik een workshop over schrijf- en coderingsregels. Ik leerde dat het belangrijk is om code te schrijven in regels van maximaal 10 woorden. Dit helpt om de leesbaarheid en focus te verbeteren. Hoofdletters moeten vermeden worden, en 'justify' mag niet gebruikt worden in de lay-out. Centraal uitlijnen mag alleen voor korte teksten van 1 tot 3 regels. Sanne gaf uitleg over de eenheden 'vh' en de functie 'clamp', die nuttig zijn voor het optimaliseren van lay-outs en het beter structureren van de code. De functie 'clamp' is nog nieuw voor mij, dus ik moet hier meer onderzoek naar doen. Kaan D ging me ook helpen door uit te leggen hoe GitHub Desktop werkt en waarom het beter is om via de desktop te clonen en pushen, in plaats van via de terminal die ik altijd gebruik.

.article-content { max-width: 800px; margin: 0 auto; padding: clamp(0.875rem, 2vw, 1rem); background-color: #ffffff; border: 1px solid #ddd; border-radius: 8px; min-height: 80vh; }

Minimale padding: 0.875rem (14px) – Dit is de kleinste waarde die de padding kan aannemen. Maximale padding: 1rem (16px) – Dit is de grootste waarde die de padding kan aannemen. Dynamische padding: 2vw – De padding varieert afhankelijk van de breedte van het scherm, maar blijft altijd tussen 14px en 16px.

af2e2d54-4fd7-4ff0-84d3-418921edeaa9

⚠️ **GitHub.com Fallback** ⚠️