first project for code institute

FANTASY FANS LIGHTHOUSE This is a new website for lovers of fantasy films and games, with general leaning towards technology. I has links to activities they can get involved in such as discounted Game Thrones tours (with more fantasy related tours to be expected), watching and reviewing fantasy films on zoom as well as online chatrooms for like-minded people and the all the goss on the latest and greatest computer games. UX User stories

First Time Visitor Goals My intention is to ensure that they find it easy to navigate the site and that the contect is useful and user friendly It has to be visually appealing so that they will want to return. They have to view it a society that they would like to be a part of, where they will be understood and appreciated by like minded people. They should view it as a gateway to entertainment and information about one of their favourite subjects

Returning Visitor Goals My intention is to provide access to further information and queries as they have had time to think and discuss with others about the site. They would likely want to readily have access to contact information where their question can be answered and have a frequently asked questions link. I won’t be providing that but I will provide a link for their questions

Frequent User Goals I would like to provide them with access to the latest reviews on new and upcoming movies or games. They will likely want to know if we have added any new discounted tours and be advised of availability of the Game of Thrones tours. They may want to book a one of our activities so I will ensure that access is easy to navigate

Design Colour Scheme I will stick to autumn colors as much as possible to match the first page, but add some reds and greens to breathe life into the pages. Typography The Montserrat font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Montserrat is a clean font used frequently in programming, so it is both attractive and appropriate. Imagery Imagery is important. The large, background hero image is designed to be add an air of mystery that will attract fantasy lovers to this mystical place. I will try to balance it out by infusing energy and fun into other pages images.

Wireframes Home Page Wireframe – needs to be amended but to late. Mobile Wireframe - View Contact Us Page Wireframe - View I used an excel file for the wire frames due to time constraints, I am comfortable and familiar with it and I wanted a vivid clear structure. I have purchased a drawing tablet but I have not had the time to get familiar with it. I have saved it as a web link below. Y:\ADHOC YOL\Personal\Full Stack\Wire Frame Web Document.mht (The above link only opens in explorer).

Features I followed the structure from Code Institute Mini Project with Bootstrap so I could have a set up guide. I borrowed code from the Love Running project such as the font. Page one This is the home page, designed to be intriguing and mystical that should draw the users into the site. Page two This is full of the four main activities and s intended to provide activities for like minded people. It also has links to the latest updates and reviews for gamers. Both gamers and movie buffs can arrange socialise vial online chat rooms. Page three Page to sign up for membership and news letter, ran out of time to add newsletter. Existing Features The idea is that this is a growing site with more activities to be added, open to suggestions to make it interactive and inclusive and more discounted tours are to be sort. Would have loved to improve my images, add proper radio buttons etc.. Features Left to Implement • Another feature idea Technologies Used Font Awesome for icons https://fontawesome.com/ Bootstrap https://getbootstrap.com/docs/4.5/components/buttons/#toggle-states Bootsstrap Font Awesome HTML & CSS coding format Images from Google www.google.ie Background Image http://notthetate.co.uk/stuartart/guidinglight.jpg (by Stuart Hart found on google) Copied most of the styling from Code Institute Love running, noteably the animation styling.

Code Institute For the coding, most if not all was borrowed or advised from the modules. Much of the structure and coding was from the love running lessons and the resume project https://love-running--blackkite.repl.co/ Git Git was used via the Gitpod terminal to commit to Git and Push to GitHub. GitHub: GitHub is used to store the projects code after being pushed from Git.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project. • W3C Markup Validator - Results • W3C CSS Validator - Results

Deployment I started out by setting creating a Git pod project on Git hub. Set up a new README.md file and renamed the Code Institute one to distinguish them. Set up a draft README.md as a word document so I could color code the Code Institute notes from my own as I copied and passed the Code Institute template to use as my guide. The color coded Code Institute notes would then easily identified and be deleted, so as to copy and paste my notes into my Gitpod README.md file. I copied the BootstrapCDN link into my style.css file and set the 3 pages, [Home (index.html), Activities (activities.html) & Sign Up (sign-up.html)] I started with my background image to set the tone for myself to work in. I created a Wireframe in word, I emailed ideas to myself from my mobile and pasted them into the word doc so I could take note of ideas while on the go It is nothing like what I wanted but I am confident with more time I can bring up the standar. The last page was especially diassapointing as I ran out of time to make the image more UX

Credits Content • Much of the coding was copied from Code Institute Projects Media • The photos used in this site were obtained from Google Images Acknowledgements • I received inspiration for this project from my love of Fantasy movies • My Mentor for continuous helpful feedback. • Tutor support at Code Institute for their support.