This is my website which will be used to display Christmas activites for people of all ages. It should feature a home page with some general information on Christmas markets in Ireland, and a write to Santa section. The primary goal is to enable people to discover interesting and fun ways to enter the festive season.
To do this the website will feature general information on various Christmas markets located in Ireland, and a form which can be submitted that generates a personalised email from Santa in return. I will use festive imagery and coloring to compliment this theme. They're will be some snapshots included with the snippets on the Christmas markets along with a link to each ones website. The background images should be relevant to the purpose of the page they're on.
- As a new user, I would like to find out about Christmas events which I can attend happening in Ireland.
- As a new user, I would like to find out where these events are happening.
- As a new user, I would like to be able to redirect to these event's official webpage for more information if I choose to.
- As a new user, I would like to use this website as a way to get me and my family in a festive mood in the lead up to Christmas.
- As a new user, I would like to be able to send a letter to Santa for my children, and get a personalised response in return.
- As the owner, I want my site to be easily navigable for users.
- As the owner, I wish to provide a festive setting for people to build excitement in the run up to Christmas.
- As the owner, I want to inform visitors of Christmas events happening in Ireland.
- As the owner, I want my website to be friendly to users of all ages.
The main goal of this website is to be an avenue for users of all ages to enable themselves to enjoy the festivities at Christmas time. This will be done by allowing users to discover where Christmas events happening around Ireland. The users will also be able to discover more about these events from using external links navigating them to more specific content about these events. Users with children will be able to send a message to Santa, and receive an email directed to their children. This website should be easy to navigate and be clear in it's purpose to any user.
I want to use a clear and warm design to fit in with the Christmas theme of this website. It is important to use a clear, intuitive interface to avoid delivering a poor user experience.
In each section I want to keep a common navbar and a common footer. In the header there will be a navbar with site links and a logo. In the footer section there will be copyright mark and social media icons which will act as buttons linking to their respective sites.
For the navbar and footer, I decided to use the Bootstrap bg-danger color class (#DC3545). I used this as red is a color highly associated with Christmas, and I found this particular shade suitable because it has a soft and warm tone. For the text I used a shade an off white color called whitesmoke (#F5F5F5). The slightly greyer shading lends to a softer contrast and less strain while reading. It has a very similar color as snow, which adds to the theme of the website. Finally, I used darkgoldenrod (#B8860B) color as the border for the images, and underlining the subheadings. Gold is another color associated with Christmas, particularly in decoration, so I thought it suitable for decorating text, and provided a nice contrast with the shaded background.
For headings, I have used the "Mountains of Christmas" font. I think it suits a Christmas themed website and is a very festive themed font. For any other blocks of text, I have used the "Lora" font, which I also think carries a festive spirit, but is more practical for blocks of more descriptive text.
I used the hamburger icon for my menu because it is widely recognised and used. I used the external link icon to indicate the presence of a clickable link in the information section of each market as it is an easily recognisable icon. In the footer I used standard icons for copyright, Facebook, Youtube and Instagram. All icons used in this project were sourced from Font Awesome.
- Navbar - allows the user to navigate the site using the listed buttons. The company name/logo also acts as a home button.
- Home - There is a short summary with preview images of Christmas Markets located around Ireland. Included will also be links to the official web pages of these events.
- Embedded Map - On the bottom of the home page, the embedded map contains clickable markers which zoom in and tell you which market it represents when clicked.
- Write to Santa - On this page you can fill out your child's details and receive a personalised reply via email.
- Footer - The footer contains social media links which should open in a new browser window.
- Quiz - I would like to add a short, and simple Christmas themed quiz in the future.
- I would also like to add a page which includes Christmas activities, such as some arts and crafts with explanations on how to make your own.
- I would like to improve the fuctionality of the website by joining the information cards to the Google Maps API to create a more seamless and convenient transition between sections.
- Balsamiq Wireframes
- The project uses Balsamiq Wireframes for desktop to generate wireframes for the website.
- Gitpod
- I used Gitpod to write my code for this project.
- Git
- The project uses Git to update records to any changes to files.
- GitHub
- The project uses Github as a hosting service for version control.
- GitHub Pages
- The project uses GitHub Pages to host the website.
- Bootstrap
- The project uses Bootstrap heavily to help build the site.
- Google Fonts
- The project uses Google Fonts to style the fonts on the website.
- Font Awesome
- The project uses Font Awesome to add to my navigation buttons.
- Pexels
- All of the photos used in this project came from this website.
- Canva
- I used Canva to design the logo for this website.
- CompressJPEG
- The project uses CompressJPEG to resize the images used on the site.
- Chrome DevTools
- The project uses Chrome DevTools to analyse performance, accessibility, and best practices.
- EmailJS
- The project uses EmailJS API to create an automatic response email which is updated based on your responses.
- Google Maps Platform
- The project uses Google Maps Platform API to embed a map with markers to indicate the geographic position of Christmas markets.
- CSS Lint
- The project uses CSS Lint as an extra testing step after initially manual checks.
- W3C CSS Validator
- The project uses this to test CSS by direct input.
- W3C Markup Validation Service
- The project uses this to pinpoint errors in HTML markup.
- JSHint
- The project uses JSHint to detect errors and potential problems in the JavaScript code.
Testing documentation can be found at TESTING.md
This project was developed in Gitpod, controlled using Git, and hosted using GitHub. The live webpage is hosted by GitHub Pages. To deploy MS2-Nollaig using GitHub pages the following steps were taken:
- Open GitHub in the browser.
- Sign in using my username and password.
- Click on my repositories.
- Select MS2-Nollaig.
- Click on settings.
- Scroll down to GitHub Pages.
- Select Master Branch from the Source dropdown menu.
- Save my selection.
- MS2-Nollaig is now live on GitHub Pages.
To run MS2-Nollaig locally the following steps must be taken:
- Navigate back to M-E-C-20/MS2-Nollaig.
- Click on the Code button.
- Make sure HTTPS is selected.
- Copy the URL supplied.
- Open up the terminal in your IDE.
- Input git clone followed by the URL you copied into the terminal.
$ git clone https://github.com/M-E-C-20/MS2-Nollaig.git
- The photos used in this site were obtained from Pexels. In particular the content creators:
- Johnathan Meyer - Image was used in the home page.
- Maria Orlova - Image was used on the Write to Santa page.
- Brigitte Tohm - Image was used to create logo.
- Cottonbro - Image was used in the home page.
- Elly Fairytale - Image was used in the home page.
- Energepic - Image was used in the home page.
- Humphrey Muleba - Image was used in the home page.
- Lisa Fotios - Image was used for the background on the home page.
- Mark Neal - Image was used in the home page.
- KoolShooters - Image was used as background on contact.html
- I used the Code Institute README template as a base for my own.
- I took great inspiration from these particular websites, I used a lot of information and design choices from them and adapted them to suit my own needs:
- I would also like to thank my mentor Rohit Sharma for their valuable insight. His advice was invaluable both in a technical sense and a practical sense. He advised me on what to focus on in my project, which was invaluable when I was short on time, and stopped me from biting off more than I could handle.
- I would like to thank the Slack community as a general source of information and for people willing to lend a hand.
- I received inspiration for this project from my partner and children, when I was struggling to come up with an idea, they gave me one. I would like to thank them especially for tolerating me during this stressful time.