This static website was made to accommodate the needs of a fictional society in the municipality of Nacka in Sweden. The Nacka Tomato Society are aiming to attract more members and promoting their events. The language and layout of the site is aimed to be friendly and inviting.

The site contains three larger sections and a contact and registration section. Registration is conducted thru a form.

The target audience are adult individuals living in the municipality of Nacka.

This website is the first of five projects that needs to be completed in order to receive a diploma in Software Development from The Code Institute.

Requirements for the project is that the website has to be static and responsive using HTML5 and CSS3.

A live version of the project can be found here - https://pelikantapeten.github.io/p1-nacka-tomato-society/

• UX
  • User Demographic
  • User Stories
    • Existing Members
    • New Users
  • User Goals
  • Requirements
  • Design
    • Colours
    • Typography
    • Images
• Features
  • Existing Features
    • Header and Navigation Section
    • Hero Header Section
    • About us Section
    • 2022 Events Section
    • Contact and Registration Section
    • Footer Section
    • Form-dump page
  • Features Left to Implement
• Technologies used
• Testing
  • Validator Testing
  • Unfixed Bugs
• Development and Deployment
• Content
• Media
• Credits

This website is ment for:

• Residents in Nacka that want to know more about local communities
• Residents in Nacka that want to become a member of NTS or attend their events.
• Residents in Nacka that are members of NTS and want to register for events.

• As a Member: I want to be able to see when the yearly events occur.
• As a Member: I want to sign up for events.
• As a Member: I want to be able to contact the Society.

• As a new User: I want to know more of my local community.
• As a new User: I want to join NTS to learn more about Tomatoes.
• As a new User: I want to register for open Events.

• Find information regarding on local society
• Sign up to local events
• Join local organisation (Society)
• Contact local society

A static responsive website that incorporates the technologies I have learned so far that contains some advanced functionality. The development process needs to be well documented through a version controls system such as GitHub.

Required technologies: HTML, CSS

As this is my first project the design has been influenced by the ”Love Running” - project. The code from the footer has been borrowed from that project (commented in the code). My design of the header and hero-header has also been influenced by that project.

My aim has been to create a clean looking website where there is a balance between colors, images and functionality.

The Nacka Tomato Society website is a single page website divided in to sections. Menu is fixed on top in order to ensure easy navigation between the sections.

The colour palette was created using Coolors.

The Google Font Montserrat was chosen as the main font with a fallback of Sans-Serif. Font weights of 300, 500 and 700 has been used on the website.

Images has been chosen in accordance to colour and content. The purpose of the website is to give a friendly look and express quality. Images has been sized in order to match design.

Back to top

The Nacka Tomato Society website is a single page website that consists of these sections:

• Header (Logo/Menu)
• Hero Header
• About Us
• 2022 Events
• Contact and Registration
• Footer

In order to make navigation easier between the sections the navigation bar is fixed on top when the user scrolls thru the page.

• The Header consists of a Logo section, text-based, that is aligned to the right and a Menu that is aligned to the left.
• The Header is at a fixed position on top and follows the user as the user scrolls down the page. Menu items are anchored to sections on the website.

• The Hero Header section contains a Hero Image, header and a paragraph.
• The section will give user a sense of home grown tomatoes and comfort. The section also contains a header and a paragraph that gives the user a clear message on what this website is about.

• The about us sections is divided in two parts. One informative part with a longer paragraph next to an image with the founder. The second part consists of three images each with a short paragraph on the bottom.
• The purpose of the About Us section is to give Users a feel of what NTS is and why it was founded. It also gives the User an idea on what happens on events and gatherings. The images gives a comforting feel.

About Us - Image 1

About Us - Image 2

• This section contains a header and three information boxes. The information boxes contains an image and a paragraph.
• The purpose of this section is to give the User an understanding on what type of events NTS is providing to its members. Each event has a picture that shows something related to the event type so that it increases the Users curiosity.

• The section contains a registration form and contact details to NTS. It also has a map that displays the location to NTS.
• The purpose of this section is to make contact and registration as easy as possible. The User uses the form to sign up as a member or to register interest. In order to establish direct contact as easy as possible the section also provides the User with a telephone number and an email. If the form is used in this version it sends the User to a form-dump page with a message.

• The Footer contains four social media links (Facebook, Twitter, YouTube and Instagram) The code for the Footer is borrowed from the Love Running - Project.
• The purpose of the Footer is to provide easy access for the User to the different social media platforms were Nacka Tomato Society has a presence.

• This site contains a message when the form has been used.
• The purpose of this page is to give the user an indication on that the form is working and that the message has been recived.

• Later versions of this project will contain a member section were members can upload inspirational images.

Back to top

• HTML
• CSS

Test of functionality and appearance of the website has have been dealt with thru out all stages of the development phase.

Test has been conducted using Google Chrome, Mozilla Firefox and Safari. Testing different devices and screen resolutions has been conducted using Google DevTools.

Listed is the main issues discovered.

1. Top menu disappears even though its fixed.

• Solution: Had to use z-index to keep the menu on top of all sections and elements, value set to 20

2. Data sent from contact form was not correct when tested towards a form-dump site (https://jkorpela.fi/cgi-bin/echo.cgi).

• Solution: The name attribute in the input tags were not correct.

3. Text alignment in input fields were not correct and it differed between Safari and Chrome.

• Solution: Corrected by adding text-alignment in style.css.

4. Hero-Header image fades out in different resolutions and looks bad.

• Solution: Created three versions of the Hero-Header image that changes depending on resolution.

5. When tested in Lighthouse the website received a low score on performance, 72. The reason for this was that some images did not contain proper attributes for width and height.

• Solution: Added values for height and width to images and score increased to 98

6. Poor performance on smaller screens. About Us and 2022 Events sections did not place them selfs properly.

• Solution: Solved this by using media queries and now the elements are displayed as they should.

7. Menu not properly aligned with header on small screens and it gets cropped and divided.

• Solution: Added new values in the existing media queries.

8. Menu still gets cropped on screens with resolutions below 320px. It looks good using Google DevTools but not on a physical device

• Solution: Solved 20220325 - Removed from Unfixed bugs. Changed View Port Width on fonts in menu.

9. Images in the 2022 Events section are slightly out of alignment on low resolution screens.

• Solution: Solved 20220325 - Removed from Unfixed bugs. Changed View Port Width on fonts in menu. Changes to CSS under correct Media Query corrected this.

Apart from these issues there have been several minor issues. The majority of these has been due to miss spelled tags, attributes and other misstakes. The first test in the W3C Validator pointed on 8 different things. 6 of them were connected to the Iframe used to display the Map from Google in the Contact section. The errors were easily corrected.

• HTML
  • No errors were returned when passing through the official W3C Validator

• CSS
  • No errors were returned when passing through the official (Jigsaw validator)

• Lighthouse testing

All known bugs in this section has been moved to the section Testing with solution when they have been solved. Last known bug solved 2022-03-25. No more testing will be conducted now and the project will be submitted.

Back to top

The development environment used for this project was GitPod. To track the development stage and handle version control regular commits and pushes to GitHub has been conducted. The GitPod environment was created using a template provided by Code Institute.

The live version of the project is deployed at GitHub pages.

The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.

1. Log into GitHub.
2. Locate the GitHub Repository that shall be deployed live.
3. At the top of the repository, select Settings from the menu items.
4. Scroll down the Settings page to the ”GitHub Pages" section and click on the ”Check it out here!”
5. At the ”Source” section choose ”main” as Branch and root as folder and click ”Save”
6. The website will deploy and the pages refreshes to provide the live link to the project.

The live link can be found here - https://pelikantapeten.github.io/p1-nacka-tomato-society/

• All text content on this site has been produced by the author of the project and is fictional. Individuals mentioned do not exist in real life and there is no Nacka Tomato Society.
• The design of the project is inspired by Code Institutes ”Love Running” project. Code has been borrowed from that project, the Footer. It is commented in index.html and styles.css were the the borrowed code is applied.
• The icons in the header, contact and registration and footer were taken from Font Awesome

• All images are downloaded from Envato Elements. They are licensed under a broad commercial license that allows them to be used in this project (Named ”P1”). The license allows usage for public purposes.

• Link to license agreement

Martina Terlevic

• My fantastic mentor at Code Institute

Lauren-Nicole

• Fellow student: Thank you for all discussions and inspiration!

Mikaela Källberg

• Fellow student: Thank you for all spelling checks!

Anders Edelsgren

• Friend and Mentor: Thank you for all your knowledge and insight.

Sites that has provided me with knowledge and information that has been vital to this project:

https://www.w3schools.com/ https://stackoverflow.com

And all the content in HTML-Essentials, CSS-Essentials and the Walkthrough project ”Love Running” that has provided inspiration and knowledge.

Top screenshot in this ReadMe was made using:

http://ami.responsivedesign.is/

Best regards

Back to top