Community-Science-Museum-SP1-CA

Noroff SP1 Semester project website

The website is called Community Science Museum and the target audience is children from 7 to 15 years old interested in art, technology and music.

The website is hosted at the following url: https://shimmering-peony-58cb28.netlify.app

Assignment:

• Task
• Brief

Description

The main goal of this repository is to implement the Figma design and a live website I made for the Community Science Museum.

The website design and implementation has been made with Figma and HTML & CSS:

• Trello: website site plan,
• Figma: Personas target audience, a flow with website structure, Moonboard,
• Figma prototypes for mobile and desktop version (color, contrast, font, fontype - UX/UI),
• wireframes: hand-drawn low-fidelity for mobile and desktop version,
• semantic html 5,
• responsive design (concepts, media queries, etc),
• DRY (css variables, structured code, etc),
• image optimization,
• accessibily concepts (WCAG),
• developer tools (VS Code, Prettier, DevTools, Github, Netlify, etc)
• code validation tools

Implemented structure flows:

• users can access the site by desktop and mobile devices (breakpoint at 800px).
• users will be able to navigate through all pages.
• the site has a private GitHub repository and is deployed using Netlify.

The website code has been validated using the following tools:

• check html validity: https://validator.w3.org/

• check css validity: https://jigsaw.w3.org/css-validator/

• check redirect links: https://validator.w3.org/checklink

• check accessibility: https://www.accessibilitychecker.org/

Dependencies

To develop the website I have used Visual Studio Code with Prettier formatter extension.

No other tools are required to compile or run the website.

Links:

• Figma Mobile prototype
• Figma Desktop prototype
• Netlify website

NB. The implemented website version is slightly different, because few improvements to the Figma/design files were made based on the Design course and HTML & CSS course.