koeenm/the-startup-responsive-interactieve-website

Responsive website voor BNR

the-startup-responsive-interactieve-website's Issues

Probeer eens duidelijkere class naming! :)

Als kleine tip voor je class naming, zou ik proberen om BEM benaming (of iets soortgelijks) uit te proberen. Je kunt dan in de CSS heel snel zien waar iets bij hoort. Zo kun je je classes duidelijk toedelen aan header, main, footer of een ander groot element.

Voorbeelden hiervan zijn:

.programs --> .main__programs {}
.live-radio --> .main__live--radio {}
etc.

Hier kun je er meer over lezen:
https://getbem.com/naming/

vertical scroll

hallo koen, met sammy

Ik heb naar de mobiele versie van jou website gekeken. De vertical-scroll die jij gebruikt lijkt misschien niet zo duidelijk voor andere gebruikers, ik zou hiervoor een pijl plaatsen en anders naar andere voorbeelden te kijken om dit te verduidelijken

User test

Door middel van je scenario was het al erg vanzelfsprekend dat je mensen wilt activeren om de header te gebruiken. Wanneer ik die actie had uitgevoerd, viel me al snel op dat ik meteen ga klikken op volgorde. Dus ik drukte meteen op "live radio". Ik dacht ineens dat het misschien leuk is om een icoon in te voegen om aan te duiden dat de radio nu actief live is, sommige radios doen dat volgens mij. Maar dan geef je deze specifieke knop meer aandacht en activeer je mensen om te gaan kijken

Tops over de css

Css ziet er netjes uit en je geeft ook duidelijke class namen

Nette code

Je code ziet er allemaal heel netjes uit! De html is goed semantisch, CSS heeft duidelijke structuur, goed gebruik gemaakt van nesting. De javascript is ook goed overzichtelijk. Nice :)

`img: src` heeft spaties in de source

BNR App campagne - email handtekening - 72 dpi.jpg mag geen spaties hebben.

Je kan beter dit doen: 1-BNR-app-campange-email-handtekening_72dpi.jpg

the-startup-responsive-interactieve-website/index.html

Line 41 in d719756

<img src="fotos/BNR App campagne - email handtekening - 72 dpi.jpg" alt="mobiele app campagne">

Geef burger menu button text

regel 19 tot 21 geef text onder de burger menu

                <li class="burger-menu">
                    <p><img src="fotos/icons8-hamburger-100.png" alt="menu icon"></p>
                </li>

Code design review

Html: het ziet er netjes uit en overzichtelijk.
CSS: Overzichtelijke code doordat je gebruik maakt van CSS-nesting en custom properties.

weinig `h1` elementen in `section`

Niet elke section heeft een h1 of h2 element kan je daarvoor een div gebruiken wanneer je geen header nodig hebt

`img: src` heeft geen goede source

the-daily-move-(live radio).avif" alt="the daily move heeft geen goede naam, omdat er spaties in zitten.

the-startup-responsive-interactieve-website/index.html

Line 84 in d719756

<img src="podcasts-en-programmas/the-daily-move-(live radio).avif" alt="the daily move">

Je kan beter vervangen door: the-daily-move-(live-radio).avif

live icon invoegen

Ik zie op je website dat je nu een play icon hebt voor het afspelen van de radio. Het is leuk om mensen te laten zien dat je wellicht ook echt live bent op dat moment. Daarbij kan je de kleur rood ook leuk gebruike.

Het is leuk dat je i.p.v een play knopje een live knop gebruikt

Missende headings.

Tijdens het bekijken van je HTML zag ik dat je veel gebruik maakt van sections. Ik vind dit een goede, en vooral overzichtelijke manier van werken, alleen zag ik wel 1 probleempje. Als je alles semantisch perfect wilt maken, hoort elke section zijn eigen heading te hebben. Denk hierbij aan een h2 of een h3 bijvoorbeeld. Nu zag ik dat er een section is waarbij die mist.

Verder ziet alles er netjes en consistent uit, qua nesting etc.

the-startup-responsive-interactieve-website/index.html

Lines 26 to 33 in 170692a

	<section class="listening">
	<h1> Luisteren </h1>
	<p> Hier is een overzicht van verschillende luistermogelijkheden. Van podcasts en programma's naar live naar de radio luisteren of deze terug luisteren. </p>
	</section>
	<section class="app-promo">
	<img src="fotos/BNR App campagne - email handtekening - 72 dpi.jpg" alt="mobiele app campagne">
	</section>

onnodige picture element

regel 113 tot 115. Picture kan je weg halen en je kan het volgende doen. footer img:nth-child(3){}

        <picture>
            <img src="fotos/BNR App campagne - email handtekening - 72 dpi.jpg" alt="BNR app campagne">
        </picture>  

Gebruik favi icon

in de head kan je een link element voor een favi icon aanmaken

voorbeeld

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

source: w3schools

<p> om een img element

regel 12 tot 22 heb je bij de img een <p> erom heen gezet. dat hoort daar niet

<ul>
                <li>
                    <img src="fotos/BNR-mic.png" alt="BNR Logo mic">
                </li>
                <li>
                    <p><img src="fotos/icons8-search-100.png" alt="search icon"></p>
                </li>
                <li class="burger-menu">
                    <p><img src="fotos/icons8-hamburger-100.png" alt="menu icon"></p>
                </li>
            </ul>

Mooi design

Erg leuk gedaan met de carousels