Munchkin Megan Presents is the first of three milestone projects I will undertake as Full Stack Developer with the Code Institute. The aim of this project is to design and build a static web page, showcasing the skills I have learnt, utilising HTML, CSS, and Bootstrap. The aim of my project is to encourage more children to read and to aid parents and teachers in choosing the most engaging and beneficial reading material for their children or class.
This site is based on my daughter’s own reading experience and her journey through books, showing how incredible the literary world is.
The site offers an honest look at literacy, book reviews and gives the user potential to investigate other book related avenues. Moving forwards, the project will have the ability (by signing up to Megan’s book club) to involve the user in more interactive ways.

The purpose of this project is to present information about books. Offering the right information to both new and returning users visiting the site, improves the user experience. By thinking about why the user would want to visit the site, I asked myself the following questions:

• As a user, I'm looking for a place that will get my child interested in books.
• As a user, I want updates and information on what to read or what is coming out soon.
• As a user, can I navigate the site in a way that is familiar to me?
• As a user, I want information on how Megan knows so much about books.
• As a user, I want to know if her information is reliable.
• As a user, I'm looking for something to read, what do you recommend?
• As a user, I want to find out what other children think about this book.
• As a user, I want something to read to my class, what would keep them invested?
• As a user, I need to buy a gift, what would you recommend for their age group?
• As a user, I want to know where can I buy the book?
• As a user, I want to find out more about Megan, where can I do this?
• As a user, I want to ask Megan a question, can I get in touch?

These user stories were the buildng blocks for my project and helped me to create the site from the ground up. I wanted the site to be easy to navigate across all formats, inviting the user to return again and again for new information. It also needed to reflect Megan's personality, showing how books have had such an impact on her life, and in return have a positive effect on the user by encouaging them to read.

Since its inception, the project changed in appearance. The wireframes below show the original mobile and desktop design. I had oroiginally intended to create a resume style page for Megan, based on her reading and writing achievements. It became apparent quite early on, that the initial design did not fit into the brief as well as I had hoped.

Changes were required to better fit the brief and so new wireframes were created using the content from the originals. These changes (below), better suited my user stories and the project became more of a magazine article than a resume. The new wireframes allowed me to be more creative and build each page more organically. Allowing me to use them as a template, I could create each page using the a theme, but respond to how the content sat and adjust it accordingly. Choosing a light, muted colour scheme helped to keep things subtle. Just like a good book, the content is the star. The colours in the project help identify breaks in content, and highlight interactive elements of the project such as modals, buttons and menus. This makes for a good user experience and keeps things uniform.

• ‘Munchkin Megan Presents’ informs the user that they have arrived at the site.

• Allows the user to navigate through the content of the site: Home, Reviews, Gallery, Contact.
• Menu collapses on smaller devices for a better user experience.

• Encourages the user to sign up to Megan’s book club

• An ‘About Me’ section introduces Megan and begins building a rapport with the user.
• An ‘I am NOT a Bookworm’ section highlights Megan’s enthusiasm for books, the video builds credibility with the user as they can see her passion for books.
• The ‘365 Book Challenge’ section reinforces Megan’s passion for books again utilising video to highlight how books can be so important in a child’s development.

• The ‘Toppsta’ section shows Megan’s active involvement in book reviewing, backed up with a quote from the founder of the organisation – this again builds credibility with the user.
• A ‘Favourites’ section highlights some of Megan’s favourite books with a review available and a link to buy should the user feel that want to read this particular book.
• A ‘Coming Soon’ section gives the user information on what Megan is currently reading. A quote from the author enhances the section and build expectation.

• A gallery offers a collection of images that again showcase Megan’s adventure through books and literature. It helps build up a timeline of Megan’s achievements and accomplishments through reading and offers the user the ability to see what a great community the book world has.

• The contact page offers the user the ability to get in touch with Megan and ask her book related questions. This feature helps back up the information on the reviews page, as well as allowing the user to dive a little deeper if they feel they need further information before deciding on what to read next.

• The footer enables the user to see more of Megan through external links:
  • The blog enables users to see more of Megan’s book related travels.
  • Toppsta - allows the user to see all of Megan’s reviews and access to the Toppsta website.
  • Social feeds - allows access to Megans social accounts.

• Allows users to sign up to a monthly newsletter where content will include:
  • Prizes and book givaways
  • Inside information, such as upcoming titles and releases.
  • Interviews with authors, illustrators, publishers etc.
  • Details on upcoming book events.

• The Coming soon feature is enhanced by a latest review section, and a book of the month feature allowing the user more information when deciding what to read next.
  These can be changed frequently to enhance the user expeirence and encourage users to return to see what is on offer in the upcoming months.

• A selection of video interviews that Megan has conducted, speaking to authors and illustrators about their work.

• Hypertext Mark-up Language (HTML) is the standard mark-up language for documents designed to be displayed in a web browser It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. - Wikipedia

• Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a mark-up language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. - Wikipedia

• Bootstrap is a free and open source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. - Wikipedia

• GitHub, is a United States-based global company that provides hosting for software development version control using Git. - Wikipedia

• Gitpod, is open-source IDE (Integrated Development Environment) based on Eclipse Theia. It is used to create, modify, and save code.

• Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows. - Wikipedia

• Web development tools (often called dev-tools) allow web developers to test and debug their code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application. - Wikipedia

• Mark-up Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML and XHTML documents for well-formed mark-up. Mark-up validation is an important step towards ensuring the technical quality of web pages. – Wikipedia

• GIMP is a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks. - Wikipedia

I used the W3C validator to check that both my HTML and CSS files contained valid code with no errors. I had issues with only one file, where in my reviews.html file I had used an anchor tag inside a button element on each of my six review items to take the user to an external purchasing site. To ensure the code was valid, I removed the button element and relocated the anchor tag so it was more aesthetically pleasing. When tested again, the code was valid with no errors. Another issue appeared for the iPhone5/SE, which has difficulty displying full screen width without overflow of the jumbotron and callout. This has been resolved as best as possible, by altering the displayed text within the callout, to reduce the obsured text.

Through Chrome developer tools, each file was tested on multipe viewing platforms. I took advantage of the ability to swap devices and see how each layout would look on different platforms.
The project was responsive, with all links and functions responding in an accepatble time frame. IE and Edge were the only exception, where loading times were slower than Chrome and Safari, resulting in a negative experience for the user. Due to issues with installtion on my machine, this project has not been tested on Opera, and will require testing to ensure full cross browser functionallity.

From feedback through family members and a small select group of willing testers, the site looks most appealing on mobile devices and iPad, with the iPad display being particularly attractive.

During my final consultation, I was advised by my mentor to 'fix' the navigation bar to the top of the screen, reducing the scroll time of the user.
While I respect his opinion, I felt that this effected the aesthetics of the page and decided to leave the menu 'unfixed'.

My mentor also advised to check for 'white space' in my gallery at the responsive breakpoints. I have spent some considerable time trying to remove as much of the 'white space' as possible. While some still remains, it is not enought to disrupt the user experience.

I was advised to extend the contact form width for mobile devices. In doing this, the form also extended at larger breakpoints. In using media queries to set each individual breakpoint, I found that the media query was not working correctly for my form. My mentor was happy with my decision to leave the width of the contact form to 85% at all breakpoints.

There was an issue with the indentation of my code that my mentor wanted to see corrected. I re-arranged the code and my mentor noted it was still untidy. We discovered that the appearance of the code differed from the Gitpod IDE to the static version on my Github repository. After seeking advise on slack, there was no solution to why my code appeared different in the respective viewers. It was decided thatas long as the code was good in the IDE, a note should be placed within the README.md file to acknowledge the poor appearance on Github.

• Links to other .html files respond as expected with minimal loading on transfer.
• Responsive menu works as expected on smaller devices.

• Jumbotron Modals open when requested. At present, the information requested is not collected and clicking the sign-up(submit) button returns the user to the index.html/reviews.html respectively.
• Review modals open for all six books when requested to do so and display the appropriate review and images. Clicking on the ‘x’ or ‘close’ button, returns the user to the reviews section.

• The contact form collects the user’s information. At present, the form is not connected to any external server and the information requested is not collected. Completing the form and submitting returns the user to the top of the contact page.

• Written content responds to screen width and is well proportioned.
• Videos display responsively, play when requested and audio is functional.
• On mobile and tablet devices, the videos respond to the gyroscope function of the device.
• All clickable images respond as expected and links to external sources open in a new tab for a good user experience.

• Clickable links to external sites respond as expected.
• All links open in a new tab for a good user experience.

• Links and clickable icons to external sites such as social media links respond well and have good load times.
• All links open in a new tab for a good user experience.

1. I created an account on GitHub - https://github.com/bicks79
2. I used the my-full-template - https://github.com/Code-Institute-Org/gitpod-full-template from Code Institute as the base for my project.
3. I created the repository - https://github.com/bicks79/Munchkin-Megan for my Milestone project.
4. To publish the project and make it available for public viewing, I used the following steps:
   • Opened my repositories.
   • Selected - https://github.com/bicks79/Munchkin-Megan from the list of repositories.
   • Chose the settings option on the right of the taskbar.
   • Scrolled down the page until ‘GitHub Pages’ was visible.
   • Clicked on the ‘source settings’ drop-down menu and selected ‘master branch’ for publishing.
   • You are returned to the top of the page.
   • After scrolling back down to ‘GitHub Pages’, a link to my repository was available.
   • My project is now available to view publicly - https://bicks79.github.io/Munchkin-Megan/
5. You can also select to clone or download my repository.
   • Follow the link for more information on how to do this: https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository

• HTML
• CSS
• Bootstrap, including JS functions to activate modals.
• GitHub, including GitPod.
• CDN.JS
• Font Awesome
• Google Fonts
• Imgur, for all image hosting, excluding jumbotron images and videos.
• CSS Tricks, for Jumbotron display and fluid width video .
• Whiskey Drop, Code Institute mini project.
  • Navbar, Modals, Quotes.
• Resume, Code Institute mini project.
  • Contact, Footer.
• Love Running, Code Institute mini project.
  • Gallery

• All images of Megan were taken by myself or my wife, Donna Nicholson, and therefore we give consent for them to be used in this project.
• I am NOT a bookworm video was recorded at Central library Coventry by myself and therefore give consent to use it in this project.
• 365 Book Challenge video is property of CBBC. This copy was given to us by then producer Ben Franklin.
• Wrike.com, index.html hero image.
• The New Arab, review.html hero image
• Guy Diehl, gallery hero image.
• Scott Kyle Graphic Design, contact hero image.
• Georgina Atwell; Toppsta, quote image including written content.
• BB Taylor; BB Taylor Books, quote image including written content.
• Matthew James Publishing, Vigilante Tooth Fairy image.
• Waterstones, for the following book images:
  • Scavengers
  • Jinxed
  • Gaslight
  • In The Key of Code
  • The Boy Who Flew
  • Happy Girl Lucky

• Thank you to Georgina Atwell and BB Taylor for taking the time to provide me with content for this project. They have both been incredibly supportive of Megan through the years and this has not gone un-noticed.

• Thank you to my family for their constant support and motivation during this project. The purpose of this course is to provide a better future for them and I will not let them down.

• Thank you to Stuart Crang at the Learning People for starting me on this journey, providing support, guidance and unlimited tangents to all things 80’s. You have been the Doc Brown to my Marty McFly.

• Thank you to my fellow January coders who have provided support and acted as a sounding board for this project, we are all in this together.

  • Betty Murphy
  • Jamie Gibson
  • Joseph Roberts
  • Kevin Rogerson
  • Lewis Hamilton

• Thank you to my Mentor Precious Ijege, for his guidance and support through this project.
  He has been a great help in getting me through this project, especially at the 11th hour when I was incredibly stressed and short tempered, he remaind calm, collected and offered his full support. I hope you are ready for milestone 2!

• Thank you to Tom Garrett, for his advice and support during my confidence crisis in the early days. You helped steady the ship and get me bck on track.

• Code Institute: In creating this project, I have re-used code from previous mini projects during my studies. In the first few days, I had a confidence crisis in my ability, that stopped me from getting the project off the ground.
  I relied on previous mini projects to help build the bones of my site as I was unsure of where to start. Although this code is not my own, the site would not be the same without it. Allowing myself time to re-visit previous instructional videos gave me the ability to fully understand the code I was utilising and altering. I am now more confident in my abilities, and feel that I can create good, clean code of my own moving forwards.