HTML/CSS website

Alle info staat op aartjan.nl/lessen. Lees een paar keer deze pagina over HTML door. We gaan oefenen met HTML en CSS. Aan het eind heb je een complete website. Lees ook een paar keer deze pagina over CSS. En lees later in de lessen ook de geavanceerde tips.

We gebruiken Dreamweaver als code editor en ook als FTP-programma. Je mag ook andere code editors gebruiken, zoals Notepad++, SublimeText of online editors zoals CodeAnywhere.

Minimale eisen website

De site moet minstens 3 verschillende pagina’s hebben, met een werkend menu, en gevuld met eigen inhoud, en met een galerie met minstens 9 verschillende eigen plaatjes. De plaatjes moeten klikbaar zijn, met een pop-up (lightbox).

De eerste pagina moet index.html heten, en alles moet in de map code staan, die in je map websites staat.

Deze 16 HTML-elementen moet je kennen en moeten gebruikt zijn:
h1, h3, p, br, title, head, body, img, a, b (of strong), i (of em), ul, li, link, div, span.

Deze 9 attributen moeten in de HTML gebruikt zijn:
alt, src, href, id, class, title, width, height, target.

En verder:

  1. Een werkende video
  2. Speciale tekens
  3. Commentaar in de code:     <!-- blabla -->
  4. Externe css voor de vormgeving
  5. De site moet online staan op gameschool.nl/jenaam/code
  6. Op de contactpagina een werkend contactformulier met PHP met aangepaste styling. Kijk voor meer styling hier.
  7. Social media buttons, bijvoorbeeld Sharing buttons met behulp van Addthis (wijzig het via tools). Follow buttons mogen ook bij Contact.
  8. Google Maps. Doe daar wat leuks met css-filters zoals filter:grayscale(1) opacity(0.5);

Minimale eisen CSS

  1. Kleur, achtergrondkleur en typografie moeten aangepast zijn
  2. Er moet marginpaddingborder en background-image gebruikt zijn
  3. De links in het menu hebben eigen styling
  4. hover moet gebruikt worden
  5. Er moeten id en class gebruikt worden, dus met “#” en “.”
  6. Er moet ergens position: worden gebruikt
  7. Commentaar in de CSS-code /* blabla */
  8. Een footer div met eigen css

Extra eisen tweede periode

  1. Een favicon is het mini-plaatje in de url-balk, en het icoon dat je ziet als je er een Favoriet/Bladwijzer van maakt, en het is ook je App-icon op je mobiel.Maak een favicon.png van 250 x 250 pixels in Photoshop (Save for Web: ⌘-Alt-Shift-S en dan Preset PNG-24).
    Upload dat naar de hoofdmap van je website. Zet deze code in de <head> van al je pagina’s, en verander “Naam”:

    <link rel="shortcut icon" href="favicon.png" type="image/png">
    <link rel="apple-touch-icon" href="favicon.png">
    <meta name="apple-mobile-web-app-title" content="Naam">
  2. Gebruik twee Google fonts: 1 voor de body en 1 voor de koppen
  3. Gebruik CSS animaties in de menu-knoppen en bij de thumbnails in de galerie.
  4. Bij de Google map een effect zoals filter:grayscale(1) opacity(0.5);
  5. Een Hero-image
  6. Gebruik Float ergens, met 2 of 3  kolommen, of in het menu:
    <div class="kolom"> Inhoud van Kolom 1 </div>
    <div class="kolom"> Inhoud van Kolom 2 </div>
    
    En in de CSS plak je dit:
    .kolom {float:left; width:45%; margin-right:5%;}

    Na de kolommen tik je eventueel dit om de float weer op te heffen:

    <br style="clear:both">

    Een horizontaal menu met float:

     nav li {float:left; width:20%; margin-left:5%;}
     De nav (of #menu) zet je dan op width:100%
  7. Maak je website Responsive, dus op mobiel een aangepast design. De kolommen ook, met op kleine schermen de kolommen onder elkaar:
    @media only screen and (max-width: 680px) {
       .kolom {float:none; width:95%}   
    }
  8. Als je een ontwerp hebt uit de lessen Webdesign: pas dat nu toe op je website
  9. Chatbox: tegenwoordig wordt chatten vaak gebruikt voor Help en Klantondersteuning, en is dan superhandig. Zie tawk.to

BONUS-punt als je ikonen gebruikt zoals die van fontawesome.

BONUS-punt voor je Instagram op je website met Lightwidget. Kies evt. met hashtags (#portfolio) welke foto’s je wil laten zien. Of bekijk alternatieven zoals instawidget.net.

Je eigen Twitter op je website kan met Twitter Widgets en je Facebook kan met een Facebook Activity feed.

Bekijk en verwerk eventueel Flexbox voor een superbonus.

BONUS-punt voor een slider (zoals Bootstrap Carousel, of Flexslider, of JSSOR Slider of deze responsive slider)