Project Eden

Brain-storming:

We decided that we would erect a new company, specialized in constructing new cities. But not just any city! They are the CITIES OF TOMORROW.
Our website explains how we see those cities.

Tasks:

We each made our own section on this webpage:

Developer	Web section
Kin	Front-page
Jasmine	Eco city
Aaron	Robotics
Kris	Energy

Why:

Basically because Filip said we had to this! But also because we like doing this. This project is our "Final" project, at least for HTML and (S)CSS. And thus making us a "not-so-junior junior-web-developer".
You can find our project here. We've put this project on Github, so we can publish it and show it to ours parents so they can be proud of us that we finally do something productively with our lives.

License:

The license can be found in this repo under the name "license.txt"

---

Requirements:

Perfection is not a detail

• All buttons and links work
• All elements work and are complete (menu, lists, images, ...)
• Everything on the page has a function, a reason to be there
• No dead links
• English and dutch are not mixed
• No spelling errors
• No grammar errors
• The website is deployed somewhere
• Everything is relevant (no image of a barber on the website of a baker)

Content

• Openinghours (if needed)
• Address (if needed)
• Google maps
• Clickable email
• A working form (you can use https://formspree.io)

Text life matters aka typography is real

• Some words are bolded
• Some words are italic
• Some words have a different color
• We aren't using a default font, cause it's not 2004
• Contrast is not too low
• Typographic hierachy is correct
• Text has a clear intro, middle, conclusion
• Intro, middle, conclusion is style correctly
• Headline font is a headline font
• Body text font is a body text font
• The text on the page has a good flow

Style

• Black is almost black but not #000
• White is almost white but not #fff
• The website is not an ugly color mess
• The styling is consistent
• It is not four totally different pages thrown together
• Everything works even if you are colorblind

Not everyone has free 4G aka speed matters

• Pictures are not too heavy
• Pictures are not pixelated

A company wants to be found/SEO

• All the keywords this company wants to be found on are on the page
• Page has an H1 tag
• Page has keyword meta tags
• Page has a title with the keywords in
• Page loads fast

Keep your workspace clean

• No unused files in the repo
• All files have a good, clear name
• Good folder structure
• The CSS folder does not have an image folder
• Not too many files in the root folder

Git(hub) is what you make it

• All commits use the correct format (if applied this commit will...)
• A github description has been filled in
• A github website has been filled in
• Github topics have been filled in

Readme but also writeme

• No license text in the readme, put it in a seperate file
• But a license is defined
• And it is included in the readme by name or a quick summary
• The readme says who made it
• The readme says why they made it
• The readme explains what this repo/project is
• The readme explains why it is on github
• The readme links to the preview
• The readme contains a nice image
• The readme does not contain the readme/license of dependencies, libraries, templates
• If needed they are included in the repo and are mentioned in the readme
• The readme has a markdown title
• The readme is divided in sections
• The readme is fun to read
• The readme looks good
• The readme is clear, even for someone that has no idea what is going on

I'm So Meta, Even This Acronym

• Social media sharing meta tags are correct
• Keywords meta tag
• Description meta tag
• Title of the page is included
• Favicon is included
• Responsive meta tag is included
• Charset is defined
• Author is defined

Data is the new oil

• (Google) analytics

Perform all the tests

• Lighthouse
• W3C validator
• Monkey test

Putting the antics back in semantics (but only for the html)

• The html is semanticly correct
• Navigation is in a nav
• Lists use list tags
• H tags are used to signal importance
• No div is used where another element is available
• No span is used where another element is available
• No inline styling is put on any element
• Id's are only used once
• The same 'type' of elements have the same classes
• All images have an alt attribute and a title

Just kidding CSS deserves some love too

• CSS follows the DRY principle
• The CSS does not contain conflicting selectors (multiple definition for the same class/id)
• There is no use of !important where it can be avoided
• The page is responsive

Thermometer goes WHERE???

• Your own style is included after the style of frameworks
• Script tags are put at the end of the body or in the head with async/defer if possible

Errors are to be avoided

• No http resources are used on an https website
• The console shows no errors