3. Bouwen

Mobile first

Mijn aanpak van mobile first design was als volgt: aan het begin van mijn css had ik al een media query neergezet met een min-width vanaf een mobiel scherm en alle code voor mobiel daar al ingevuld. Dit was later niet nodig, gezien je ook met de inspector een scherm responsive kan zetten zonder de browser te verkleinen.

Bouwen met hulp van de inspector

Nadat ik alle elementen in de css had gemaakt, testte ik dit met behulp van de responsive modus met de inspector. Hier kon ik al zien hoe de mobiele versie er uit zou komen te zien zonder een breakpoint toe te voegen. Ik heb deze techniek gebruikt om zo te bepalen wanneer er een breakpoint zou komen. Het enige minpunt is dat de inspector content soms niet centreerd, ook al staat dat in de css.

image slider

Ook heb ik een automatische image slider in het project weten te verwerken. Deze bestond uit html, css en Javascript.

HTML

<div class="slideshow-container">


          <figure class="mySlides fade">
            <p class="numbertext">1 / 3</p>
            <img src="assets/Rectangle_104.jpg" style="width:100%" alt="slide 1">
          </figure>


          <figure class="mySlides fade">
            <p class="numbertext">2 / 3</p>
            <img src="assets/Rectangle_105.jpg" style="width:100%" alt="slide 2">
          </figure>


          <figure class="mySlides fade">
            <p class="numbertext">3 / 3</p>
            <img src="assets/Rectangle_105-1.jpg" style="width:100%" alt="slide 3">
          </figure>


        </div>





        <div style="text-align:center">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </div>

CSS

    .mySlides {
        display: none;
    }


    img {
        vertical-align: middle;
    }


    /* Slideshow container */
    .slideshow-container {
        max-width: 1000px;
        position: relative;
        margin: auto;
    }


    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }


    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }


    .active {
        background-color: #717171;
    }




    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }


    @keyframes fade {
        from {
            opacity: .4
        }


        to {
            opacity: 1
        }
    }

Javascript

let slideIndex = 0;
showSlides();


function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3500);