AO1A lessen en huiswerk         AO1B lessen en huiswerk

Frontend development The Basics

De cursus “ Frontend development The Basics”  bestaat globaal uit de volgende onderdelen:

  1. CSS advanced
  1. selectors
  2. nesting van selectors of stapeling ervan
  3. zoek op w3schools naar selectors
  1. CSS3 (ondersteunende browsers)
  1. Niet alles wordt door alle browsers ondersteund IE.....x
  2. Zoek "rounded corners" en kijk welke browsers dit ondersteunen
  3. Zoek standaard reference voor CSS ondersteuning
  1. HTML5
  2. De site
  1. Web-ruimte, domein, FTP
  2. Structuur website
  3. Eigen menu (horizontaal met submenu's)
  1. Responsive design
  2. Web-apps
  3. JavaScript (i.c.m. HTML5 & CSS3)
  4. jQuery
  5. Ontwerp, b.v. Photoshop => slicing => HTML


Uitleg mappenstructuur website

Een overzichtelichtelijk mappenstructuur is een belangrijke basis voor elke website.

Als we van een HTML structuur uitgaan waar alle bestanden in de public_html liggen, dan kan deze er zo uitzien: (mappen zijn vetgedrukt, bestanden cursief)

In de common  map staan de algemene scripts en stylesheets.

Hieronder een mogelijke opbouw van meerdere applicaties, met dezelfde common style.

public_html (root)

index.php

common

        style.css

        script.js

web_app_A

        img

              afbeelding.gif

              joepie.jpg

        pag

              home.htm

              pagA.htm

              pagB.htm

              pagC.htm

              menu.php

        index.html

        style.css

        script.js

web_app_B

        img

         index.php

        style.css

        script.js

Styles in de common  map worden “overruled” door het stylesheet van de web_app zelf als het goed is!

Uitleg CSS basics

Waarom cascading stylesheets?

Zoeken op Internet, b.v. w3schools (geen toetsing parate kennis, maar gebruik!)

CSS declaratie

  1. In apart stylesheet
  2. In <style> ( in de <head> )
  3. In-line

Selectors  

  1. Class:   .
  2. Id:         #
  3. Nesten: met spatie
  4. Meerdere declareren: komma-gescheiden

Positioning

  1. Absolute (weinig cascading meer...)
  2. T.o.v. linksboven, left, top, right, bottom
  3. Kan handig zijn, alles staat vast, v.b. Photoshop slices

Relative

  1. Op en top cascading
  2. Float: left, right