Castleisland Christmas Markets is a Project Portfolio 1 creation for the Code Institiute course. The website is designed to be fully reponsive, allowing visitors to interact and view its content on a range of devices and screen sizes. The objective of the website is to spread awareness of the markets and provide clear and consise information to the public in relation to the resources that are on offer.

View Castleisland Chritmas Markets live website on Github pages here

• User Experience (UX)
  • Key information for the site
  • User Stories

• Design
  • Colour Scheme
  • Typography
  • Imagery
  • Wireframes
  • Features
  • Accessibility

• Technologies Used
  • Languages Used
  • Frameworks, Libraries & Programs Used

• Testing
  • HTML Validator
  • CSS Validator
  • Lighthouse
  • Solved Bugs
  • Known Bugs
  • Full Testing
  • Testing User Stories

• Deployment & Local Deployment
  • Deployment
  • Local Deployment
    • How to Clone

• Credits
  • Layout
  • Content
  • Code
  • Media
  • Acknowledgements

• Details of what the stalls in the markets offer.
• Dates on when the market will be taking place.
• How to get in contact.
• How to enter the competition to Lapland.

• I want the site to provide information on the activities and availability of services from the markets.
• I want to be able to be easily navigate through this site.
• I want to be able to access their social media links.
• I want to be able to enter the competition.

• I want to be able to get in contact with the markets for any queries that I have.
• I want to know where the markets are taking place.

• I want to be able to come back every year with updated dates and times available.

• To provide clear information for potential visitors.
• To provide a way for visitors to get in contact.
• To provide a website that is intuitive.
• To promote the Castleisland Christmas Markets.

The colours used in the website were based off the colours used in the logo. The colour palette was then created by using the Coolors website.

The following two fonts were picked as they complimented each other.

• Lora is used for the headers on the site. This is a serif font.
• Montserrat is used for the remainder of the text areas. This is sans-serif font.

All images are taken from image sharing websites such as pxhere, pexels and unsplash. These are correctly credited in the credits section.

Wireframes were created for mobile and desktop.

Home Page

Festivities Page

Competition Page

The website is made up of three pages. All of which are accessible from the navigation menu.

• All pages have:

  • A responsive navigation bar at the top of the page. This allows users to access every aspect of the site. The left of the navigation bar contains a logo which has the text 'Castleisland Christmas Markets'. This logo also acts as a link to the home page once clicked. To the right of the navigation bar there are links to the websites pages (Home, Festivities & Competition). Once the screen size is 600px or under the links to the right of the navigation bar are changed to a hamburger style menu. This is done to prmote a good user experience in providing an uncluttered look to the navigation bar on smaller screens.

  

  
  
  • A footer which contains contact information, a copyright text which also states the creator of the page and also social media links. These links are shown as icons to give a cleaner more modern look.

  

• The Home Page has:

  • A Hero image section. This image is of shimmering crystals and candles. Image used to implement a festive tone.

  

  
  
  • An Information and Pathway Section. This section comprises of three subsections (div containers). The first div includes dates, times and a brief introduction. The second div contains what activties are available. The third div informs you of the competition.

  

  
  
  • A map section. The map section provides a google maps iframe which will show exactly where the markets take place.

  

• The Festivities Page has:

  • A festivities grid section. This section is broken down into ten subsections. There are five div containers with text, each describing what different activities and experiences are available at the markets. There are equally five other div containers that are images in relation the text div adjacent (in desktop version) or above it (mobile version).

  

• The Competition Page:

  • A background image. This image is of a reindeer in Lapland. It is used as a decorative image to convey a message of what to expect if won.
  • A form. This is used to allow the visitors to enter their details and enter the competition. It is made up of name, email address, phone number, radio buttons for the possible answers, a checkbox to agree to the terms and conditions and an enter competition submit button. All input area must be filled in order to enter if not a message appears on screen to instruct users to complete areas that have been left blank.

  

• Future Implementations:
  • To create a gallery page. This would include images of some of the products that are available in the markets, people partaking in activities available in the markets and just of the market in gerneral. These would help first time visitors have a greater knowledge of what to expect if coming to see the markets.
  • A terms and conditions link to a seperate page. This would have the full details of the terms and conditions involved in the competition involved with entering the competition.
  • A thank you for entering page. Once the submit button is clicked the user is brought to a thank you for entering page and informs them of when the winner will be notified.
  • Use javascript to return to top function on mobile devices.

I have achieved a high level of accessibility by using the following:

• Using aria-labels.
• Ensuring there is a clear colour contrast throught the site.
• Using semantic HTML.

• HTML
• CSS
• JavaScript

• Balsamiq - This was used to create the wireframes.
• Git - This was used for version control.
• Github - This was used to save and store all the files for the website.
• Font Awesome - This was used for the icons in the website.
• Google fonts - This was used to import the fonts used for the website.
• Google Dev Tools - This was used to test different code and features.
• Google Map Generator - This was used to generate the map on the index page.
• TinyPNG - This was used to compress images.
• Convertio - This was used to transfer images to webp format.
• Am I Responsive - This was used to show the website on a variety of different screens.

The HTML Validator was used on all three pages of the website.

The CSS Validator was used on all three pages of the website.

I used the Lighthouse feature in the Chrome Developer Tools to test the performance, accessibility, best practices and SEO of the website.

1. The images were slowing down the load time of the website. I resolved this by compressing the images and converting them to webp format.
2. The Font Awesome link at the bottom of the page was also delaying load time. Chrome Dev Tools suggested to use 'rel=preconnect' to speed this up. This did increase performance.
3. When trying to create the hamburger menu, the toggle button using javascript was not working. However once I put the link to the JavaScript under the footer like the Font Awesome link it resolved the issue.
4. After running through the project with my mentor he noted that the images on the CSS grid are too streched on the full screen desktop. The solution to this was to give the grid container a max-width of 90%.
5. The hero image on the index page was looking very stretched and cut off in different screen sies. Once the background-size: cover was used this was resolved.
6. While creating the form for the competition page I had put the label before the input for the radio buttons and the checkbox to match the name, email and number inputs above. This reulted in the buttons and checkboxes to be placed after the text. This was resolved by changing the order and putting the input then the label.
7. A 'Find out more' button was created with a Button element with a link inside it. However HTML validator issued a warning informing me that an a element can not be nested inside as button element. I resolved this by replacing the button with a div and fashioned to be like a button.
8. The Chrome Dev Tools also showed a 404 error in relation to the favicon. I had not created a favicon so searched the internet for an answer. The site Stack Overflow had a thread that led me to including the following to the top of the page under the stylesheet - 'link rel="shortcut icon" href="#"'. This resolved the error.

I have no unresolved bugs.

• The site was fully tested using a range of browsers (Google Chrome, Safari, Firefox).
• The site was fully tested using a range of devices (DELL Large Screen Monitor, ASUS Laptop, iPhone 13, iPhone 7, Huawei P40 and Samsung S8)
• The site was fully tested using Chrom Dev Tools to test the responsiveness on different screen sizes.
• Every link in the website was fully tested on all three pages. Each link worked as expected. All internal links leading to the relevant page and all external links leading to a new tab.
• The hamburger menu was tested ensuring that once activated it displayed the correct way and provided access to the correct links.
• The competition form was fully tested. All input fields need to be filled out in order to successfully enter the competition. If any information is left out the user is directed to complete any missing data. One radio button must be selected to provide an answer and the terms and conditions must be accepted to proceed.

• I want the site to provide information on the activities and availability of services from the markets.
  • The Festivities Page will provide the answers to all the questions in terms of what activities we provide and what stalls to expect venturing to the markets. The Information section in the index page also gives the dates and times the markets are open.
• I want to be able to be easily navigate through this site.
  • The navigation bar is extermely accessible and appears on all pages across the website. The logo is also there to provide quick access back to the home page. There are also 'Find out more' pathways to the two other pages on the index page.
• I want to be able to access their social media links.
  • The social media icons in the footer provide direct access to the social media accounts.
• I want to be able to enter the competition.
  • The form on the competition page allows the user to enter the competition as long as all the inputs are filled out. There are pathways both in the navigation bar to the competition page and also and link in the competition pathway in the index page.

• I want to be able to get in contact with the markets for any queries that I have.
  • The 'GET IN TOUCH' section in the footer provides the contact information with various options to get in contact.
• I want to know where the markets are taking place.
  • The map using the iframe pin points exactly where the markets are taking place which relieves the user of stress trying to locate the markets.

• I want to be able to come back every year with updated dates and times available.

  • The page will be updated with new times and dates annually. The information will always be present on the index page providing the user with the relevant data instantly.
  
  

  ---

  Deployment & Local Deployment

Github Pages was used to deploy the live website. The instructions to achieve this are below:

1. Log in/Sign Up to Github.
2. Find the Castleisland-Christmas-Markets repository.
3. Go to Settings > Pages.
4. In the Source section, choose Main from the drop down select branch menu. Select Root from the drop down select folder menu.
5. Click Save. Your live Github Pages site is now deployed at the URL shown.

1. Log in/Sign Up to Github.
2. Find the Castleisland-Christmas-Markets repository.
3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
5. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

• The layout of the website was established by Jay O'Donoghue.
• The layout of this readme file is based off a previous students readme file - Kera Cudmore - Bully Book Club

• The vast majority of the content was written by Jay O'Donoghue. Little snippets of text have been used from the Killarney Christmas Market page as referenced in the index.html file.

• I followed a tutorial by Web Dev Simplified to implement a responsive navbar for smaller screens in my project.
• I followed a tutorial by Web Dev Simplified to implement a CSS Grid in my project.
• I was influenced by the Love Running project by Code Institiute for the form section on the Competition Page. I used and altered the radio button section for my project.
• I added code from a thread in Stack Overflow to resolve the favicon warning that was showing on Chrome Dev Tools.

• The hero image on the index page is downloaded from the pxhere website with full permission.
• The northern lights image and the christmas tree with lights image on the index page are from the pexels website with full permission.
• The santa image, the decorations image and the cookie decorating image on the festivities page are all from the pxhere website with full permission.
• The games image and the food image on the festivities page are from the pexels website with full permission.
• The Lapland image on the competition page is downloaded from the unsplash website with full permission.

• I would like to thank my mentor Mitko in guiding me in the right direction and helping whenever I had a query.
• I would like to thank the people who reviewed my code in perr-code-review on Slack.
• I would like to thank the cohort lead and the cohort Facilitator on checking up and keeping everyone on schedule.