Giter VIP home page Giter VIP logo

code-institute-submissions / ms2-nollaig Goto Github PK

View Code? Open in Web Editor NEW

This project forked from m-e-c-20/ms2-nollaig

0.0 1.0 0.0 33.55 MB

My MS2 project which will be a Christmas themed website which is targeted at people of all ages. It will be built using HTML, CSS, and JavaScript.

Home Page: https://m-e-c-20.github.io/MS2-Nollaig/

Dockerfile 4.17% Shell 4.36% HTML 75.95% CSS 5.09% JavaScript 10.43%

ms2-nollaig's Introduction

MS2-Nollaig

Responsive

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.

Live Website

UX

User Stories

  • 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.

Strategy

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.

Scope

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.

Structure

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.

Skeleton

Surface

Colours

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.

#DC3545 #F5F5F5 #B8860B

Fonts

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.

Icons

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.

Features

Existing Features

  • 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.

Features to be Implemented

  • 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.

Technologies Used

  • 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

Testing documentation can be found at TESTING.md

Deployment

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:

  1. Open GitHub in the browser.
  2. Sign in using my username and password.
  3. Click on my repositories.
  4. Select MS2-Nollaig.
  5. Click on settings.
  6. Scroll down to GitHub Pages.
  7. Select Master Branch from the Source dropdown menu.
  8. Save my selection.
  9. MS2-Nollaig is now live on GitHub Pages.

To run MS2-Nollaig locally the following steps must be taken:

  1. Navigate back to M-E-C-20/MS2-Nollaig.
  2. Click on the Code button.
  3. Make sure HTTPS is selected.
  4. Copy the URL supplied.
  5. Open up the terminal in your IDE.
  6. Input git clone followed by the URL you copied into the terminal.

$ git clone https://github.com/M-E-C-20/MS2-Nollaig.git

Credits

Media

Acknowledgements

  • 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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.