FLWR

Accumulating our newly acquired skills in our first group project:

• Working together and communicating about a common project
• Contributing personal input on concept, styling and content on the whole project and personally made page
• Version control, pushing and pulling with github and deploying the website

Personal learnings:

• Applying previously learned skills and putting it all together
  • Building a responsive page with Bootstrap
  • Structuring the page with HTML sections
  • Adding the CSS style that need to be consistent throughout the website
  • Providing content for the personally assigned part of the project
  • All communication done online via Discord
  • Communicating and evaluating the project as a whole and personal input

Checkout the result over here: https://mickdellaert.github.io/FLWR/index.html

---

Welcome to the README of FLWR; a group project as part of the final HTML & CSS assignement for 'BeCode Antwerp'.

This project is on GitHub due to the need to cooperate on a single project, with different people. Also because it's part of the curriculum.

This project was made by the following people:

• Mick (Details page)
• Prince (About page)
• Yarrut (Shop page)
• Yuntian (Tips/Tricks page)
• Lawrence (Homepage and editor of this readme file...hi there :))

Here are some useful clicks:

• (https://imgur.com/a/da9Gmbt "Screenshot of the homepage")
• (https://elduderinow.github.io/07c_FLWR/index.html "View our page online")

We also made use of the following in the creation of our project:

• Google analytics
• Bootstrap
• Fontawesome

---

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)
• 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 a good comment
• A github description has been filled in
• A github website has been filled in

Readme but also writeme

• 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 a preview (screenshot)
• 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

• Implements (Google) analytics

Perform all the tests

• Lighthouse
• W3C validator

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

Team McNuggets

• Add descriptive comments to your code

Team BeLicense

• Use a clear folder structure in your project

Team AdastrA

• Call to Action : add a form of email marketing via a newsletter signup

FLWR

• Whenever you hover over an image, some text appears on top of it

Hilltop B&B

• Add at least one on hover animation ======= https://mickdellaert.github.io/FLWR/index.html

0e8d0355d3ad20103ba235611e76a0e0f5dd5786