Excellent

• Website name in the header is created with a local or external font or with Scalable Vector Graphics (.svg).
• Only “em” or “%” is used after the body initialisation.
• All images are using different resolution sizes on PC, Tablet & Mobile. Depending on the screen resolution (PC = high, Tablet = middle and mobile = low resolution).
• Has a “Fav icon” that supporting different sizes for Windows, Mac and iOS.

Sufficient

• Using attribute alt in the right way on all pictures.
• Using attribute title in the right way on all pictures.
• All images on the webpage are Portable Network Graphics (.png) format or Scalable Vector Graphics (.svg).
• Has 7 different defined colours in hexadecimal.
• Has at least 3 “fallback” fonts.
• Has at least 3 font sizes.
• Has a background video (cover).
• The background video controls are hidden.
• The background video starts automatically.
• The background video is muted.
• The background video is centred.

Insufficient

• All font styles are defined in the stylesheet.
• All transformations are defined in the stylesheet.
• All media styles are defined in the stylesheet.
• All colours are defined in the stylesheet.

Excellent

• Website is fully responsive and acts differently on PC, mobile and tablet.
• Is using Flex or Grid or both technics.
• Has a hamburger menu for mobile layout. The mobile hamburger menu has an
  overlay with a link to the other pages.
• Has a horizontal menu with unordered list tag for PC and tablet layout.
• Uses media queries technique for delivering a tailored style sheet to different
  devices.
• Uses position property; with value, absolute or relative or fixed or a combination.
• Uses property float.

Sufficient

• Uses classes and id’s.
• Uses z-index on the landings page for a cookie statement.
• Uses tag section.
• Uses tag header.
• Uses tag footer.
• Uses tag paragraph.
• Uses tag nav.
• Uses tag h1.
• Uses tag h2.
• Uses tag aside.
• Uses tag article.
• Uses tag form.
• Uses tag input.
• Uses tag button.
• Uses tag fieldset.
• Uses tag legend.
• Uses tag img.
• Uses tag a.
• Uses tag ul or ol.
• Uses tag li.
• Uses tag link.

Insufficient

• Is not using JavaScript.
• Is not using frameworks like bootstrap.
• Is not using tag iframes.
• Is not using tag br.
• Is not using tag hr.
• Is not using inline style.
• Is not using embedded style.
• Is not using tag div.
• Is not declaring !important in the CSS

3 sportclub founders (Paulien van Bruggen, Maxim Leijdekker and Sebastiaan Munter) like to
generate more traffic for their websites. The best way to generate more traffic is, to create
landing pages about the city and the neighbourhood they are active. They are non-profit
organisations (clubs or foundations) and do not have money to hire a professional
company. They requested students from InHolland to assist them with their next step.
Every URL has its own subject and every student can choose from at least 35 subjects:
The staging pages will look like http://url/studentnumber (f.e. taekwon.eu/123456).
If you like to do some field research and take photos at the locations, please visit the referral
website and contact the dojo owner to make an appointment. If you use content from the
owners please ask the owners for permission.

Excellent

• Is using elements supported by HTML5.
• Is using at least 2 different pseudo classes https://developer.mozilla.org/enUS/docs/Web/CSS/Pseudo-classes.
• Is using CSS combinators “selecting by”. Graded selectors are; comma, >, + or ~ (for example; “class > p” or “class + p” or “class ~ p”).
• Has a folder "/forbidden" containing a secret.txt with your student number in it.
• Has User-agent: * in the robots.txt
• Has Disallow: /forbidden in the robots.txt
• Has a sitemap with a monthly refresh

Sufficient

• Has added comment(s) in Cascade Style Sheet.
• Has added comment(s) in HyperText Markup Language file.
• Has image(s) in the “/img” folder (folder naming must be exact "/img" in lowercase)
• Has Cascade Style Sheet(s) in the “/css” folder. (folder naming must be exact "/css" in lowercase)
• Has external font files in the “/fonts” folder. (folder naming must be exact "/fonts" in lowercase)
• Has HTML validated by w3c https://validator.w3.org without any errors.
• Has CSS validated by w3c http://www.css-validator.org without any errors.
• Has “id’s” only used once on a single HTML page
• Has HTML character entity like © in the footer.
• Has UTF-8 attribute charset defined.
• Has between 7 - 12 attribute keywords with subject from your webpage
• Has attribute description with a subject from your webpage
• Has a robots.txt file in the root
• Has a reference to the sitemap.xml
• Has a DOM with 5 level elements.
• Has a header 1 and header 2 to distinguish importance between the headers on your landings page.

Insufficient

• Tabs are used to level the source code.
• Landings page is named index.html (naming must be in lowercase).
• Has the right HTML extension (.html), (naming must be in lowercase).
• Has the right CSS extension (.css),(naming must be in lowercase).
• HTML document is declared as a HTML5 document with html in lowercase.
• Element head is used on the right way.
• Element body is used on the right way.
• Attribute value UTF-8 is declared as charset in the meta data tag.
• Has attribute keywords defined in the meta tag.
• Has author defined as metadata.
• Has description defined as metadata.
• Has language support for audio listeners.

The landing pages is called index.html.

1. Website header
   a. Use

   tag, for the title
   b. Use

   tag for the payoff

2. Navigation
   a. Use a tag
   b. Use
   ,
   • tags to create the menu
     c.
   • tag referring to index with an id attribute structure 3, 4, 5 and 7
   • Main content
     a. Link to this content is made with an bookmark from the navigation on the index.html page with an id attribute ()
     b. The content is about “Main” from the chapter “URL TO CHOOSE”. F.e. tell something where “Main” is famous about and what they do to promote it. Total: 150 words.
     c. Use at least section, article, header, footer and p tags
     d. Use 2 images. The images are royalty free images.
   • Secondary content
     a. Link to this content is made with an bookmark from the navigation on the index.html page with an id attribute ()
     b. The content is about “Secondary” from the chapter “URL TO CHOOSE”. F.e. tell something about the neighbourhood what shops, companies or touristic attractions you can find. Total: 350 words.
     c. Use at least section, article, header, footer and p tags
     d. Use 2 images. The images are royalty free images.
   • Sport content
     a. Link to this content is made with an bookmark from the navigation on the index.html page with an id attribute ()
     b. The content is about “Sport” from the chapter “URL TO CHOOSE”.
     c. Use at least section, article, header and a footer.
     d. Make a list with 10 sport clubs in this area with links to their websites. Tell in two lines what they do.
     e. Every club has one image that represents the sport. The images are royalty free images.
     f. Every club picture has a link to the club website.
     g. At least one of the links, is also a link to the referral.
   • About the referral
     a. Link to this content is made with an bookmark from the navigation on the index.html page with an id attribute ()
     b. The content is about “Referral” from the chapter “URL TO CHOOSE”.
     c. Use at least aside, header and footer tag.
     d. The student is free to fill it with own made content.
     e. The aside content has a link to the “Referral” URL from the chapter “URL TO CHOOSE”.
   • Contact
     a. Link to this content is made with an bookmark from the navigation on the index.html page with an id attribute ()