1. Project-Introduction

2. UX

3. Wireframes

4. Features

5. Technologies used

6. Testing

   • links
   • Forms
   • Responsivness
   • Performance
   • Validation

7. Deployment

8. Cloning

9. Credits

10. Acknowledgements

To enable new investors to clear what are often the two most daunting hurdles.

1. Up-front capital
2. Readily available, reliable and custom, information.

What separates ‘Help To Grow’ from the other websites is our immediate dealing with the aforementioned hurdles.

• Our model employs a subscription base as opposed to a lengthy commission based contract.
• We offer users immediate access to qualified advisors once signed up to our community.

We hope to scale the model out beyond the republic of Ireland to the wider European catchment market which will require a broadening of our in-house professionals.

Professionals are compensated via the subscription charge. As part of their re-numeration they are expected to create helpful content in their relevant field, engage with the community at periodic q&a’s, and ensure their own qualifications remain valid throughout their involvement.

Professionals are advised to advertise private mentoring sessions with the community for a fixed, pre-agreed-upon, fee in order to expand their own client base and ultimately the return value of remaining apart of Help to Grow site.

A live version can be found here.

1. Static front end Project- Using HTML and CSS to create a website of three pages.
   • Achieved- The site has five pages.
2. Information Architecture: Incorporate a main navigation menu and structured layout.
   • Achieved- the site's header, footer and colour scheme are consistent throughout.
3. Documentation- Write a README.md that explains what the project does and the value it provides.
   • Achieved- The below outlines the site's merits and usability.
4. Version Control - Use Git & GitHub for version control.
   • Achieved- A list of commits can be found here.
5. Deployment- Deploy final version to GitHub pages.
   • Achieved- See deployed site here.
6. Attribution- Maintain clear separation between code written by you and code from external sources.
   • Achieved- See example from 'index' html.

The website is targeted at new users, and initially splits them into two categories for easy, example representation.

• Over Forty
• Under Forty

We then offer simple examples of available options to both categories, with a push toward the greater rewards that accompany membership.

New investors come with a myriad of varying questions, so we aim to keep the initial experience concise while also demonstrating our knowledge and how we can help.

While most sites operate a costly commission based fee, Help to Grow offers a minimum fee subscription offer with easy entry and penalty-free exit.

In terms of scope the current site was kept conscise so as not to overwhelm beginner investors.

• Upon my initial visit:

I want to see the natural navigation links.

• Site response: : Users are greeted by standard header and footer navigation links.

I want to find a clear site goal to ensure this is the site for me.

• Site response: : Our goal is prominetly displayed on the landing page.

I do not want to be overloaded with financial data or immediate calls to action.

• Site response: The site uses cards with images to exhibit the offer without bombarding the user.

• Upon my initial visit:

I only have €100 to invest each month and I want to buy Bit-Coin.

• Site response 1 : Our landing page contains two links. Both port to Cryptocurrency options.
• Site response 2 : We also offer addition information on our 'Things we like' page.

• Upon my inital visit:

I have a pension, isn’t that enough?

• Site response : Our landing page contains two links. Both port to pension options as part of an overall portfolio.

• Upon my return visit:

I want to sign up.

• Site response : The 'Sign Me Up' page is quickly accessible via the header navigation bar. A reminder of membership benefits is also prominent.

In keeping with the uncomplicated approach agreed upon in our Scope plane, the initial wireframes were created with consistency in mind so each advancing page's style follows the previous.

Note: First draft wireframe pdf’s are included in this project. The main variation from which was the addition of mirroring cards to both the 'index' and 'things we like' pages in keeping with our Structure & Skeleton planes ideals.

• index
• over-forty
• under-forty
• sign-me-up
• things-we-like

Overall the site is responsive and scales with user screen size.

The site follows a succinct colour theme of Orange (#ff4800c5) paired with Black throughout, these colours are inchanged periodically to avoid visual fatigue.

The lead colurs are accompanied by headers and footers splashed Pale Green (#c6e0c1) to naturally border the pages, and a single font is used globally to maintain cohesiveness.

• Index : Features a background image repeated throughout. Cards with images from Bootstrap. Quotes which follow a fixed style but vary in text. Info on all here. There are links at page end to promt users deeper into the site.
• Forty + : Contains a compact list of suggestions based on users selected age group. Page end contains a link to sign up.
• Forty - : Mirroring the 'Forty +' here we display an altered list of suggestions based on users selected age group. Page end contains a link to sign up.
• Sign Me Up : we offer a quick and easy sign up, requiring only an email address and confirmation the user has read our disclaimer which is linked in the form. We also provide an optional space to share addition information. Page end contains a link to further information on the 'Things We Like' page.
• Things We Like : The information is organised into cards with images. Info on all here. There is also a minor push to sign up via a link at page top-right.
• Footer : Links provided to fictional social medias.

• Sign Me Up: We would like to allow users sign up in full on this page by implementing some back-end structure and incorporating a secure direct payment method.

• HTML-For basic structure.
• CSS-For styling and required Media Query outside of Bootstrap.
• W3C validator-Used in testing HTML and CSS.
• GitHub -For deployment.
• GitPod -IDE.
• Bootstrap (including JQuery) -Utilized for responsiveness via columns, forms and buttons.
• Font Awesome -Used for all icons.
• Google Fonts -Used for primary font employed throughout. PlayFair Display.
• Visual Studio -For offline work.
• Google Chrome's Responsive Viewer found here
• ImageMagick -Used for resizing images after initial Lighthouse test on mobile.
• Google Chrome's lighthouse function.

• Index links

  • At 'Index' page end two links are presented in buttom-form.
    • I'm over 40
    • I'm under 40
  • Both links when selected lead to the assigned pages.

• Over 40 links

  • At 'Over Forty' page end one link is presented in button-form.
    • I'm Ready to Start
  • The link when selected navigates the user to the 'Sign Me Up' page.

• Under 40 links

  • At 'Under Forty' page end one link is presented in button-form.
    • I'm Ready to Start
  • The link when selected navigates the user to the 'Sign Me Up' page.

• Sign Me Up links

  • At 'Sign Me Up' page bottom two links are presented in text-form.
    • 'disclaimer' housed within the form
    • 'Things We Like'
  • 'disclaimer' link when selected navigates the user to sample pdf on a new tab.
  • 'Things We Like' link when selected navigates the user to the 'Things We Like' page.

• Things we links

  • At 'Things We Like' page top one link is presented in text-form.
    • 'signed up!'
  • The link when selected navigates to the 'Sign Me Up Page' page.
  • At 'Things We Like' page body there are twelve cards each with external links divided evenly among three sections. (1)Asset-types we like. (2)Exchanges&Providers we like. (3)People we like.
    • Asset-types we like 'Show me more!'
      • ETF's
      • Bonds
      • Dividend Aristocrats
      • Crypto Currencies
    • Each link when selected diverts the user to an external wikipedia address in a new tab.
    • Exchanges&Providers we like 'Take me there!'
      • Kraken
      • Mintos
      • Degiro
      • MoneyCube
    • Each link when selected diverts the user to the intended provider's homepage an external in a new tab.
    • People we like 'Tell me more!'
      • J.L. Collins
      • The Joseph Carlson Show
      • Dave Ramsey
      • Paddy Delaney's Informed Decisions
    • Each link when selected diverts the user to the intended person's homepage an external in a new tab.

• Sign Me Up form
  • At 'Sign Me Up' page bottom one form is presented with four components.

Upon accepted submission wherein the following criteria are met.

• Email has '@'
• Checkbox is ticked

The form clears it's contents.

Upon failed submission wherein one of the two requirements are not met.

1. Where the email is blank or doe not contain '@' the user is prompted.
2. Where the email is correct but the checkbox remains un-checked the user is prompted.

I used Google Chrome's Responsive Viewer found here. The following are exerts from three tests.

• Oversized cards.
• Duplicate Bootstrap links.
• Missing labels in footer icons

Note: Lighthouse proposed other fixes but most were beyond my capability.

Using W3C validator both HTML and CSS were checked by direct input. Issues arising were promptly corrected.

The project was developed using GitPod workspace, committed to git and pushed to GitHub using the built in function within Gitpod. To deploy this page from the GitHub respository, the following steps were taken.

1. Log in to GitHub.
2. From the list of repositories on screen select 'MS1-HELP-TO-GROW'
3. Select Settings from the menu.
4. Scroll down to GitHub Pages
5. Under Source click the dropdown menu labelled none and select the Master Branch.
6. On selecting Master Branch the is automatically refreshed, the website is now deployed.
7. A link can be found in the GitHub pages section, and also in the about section within MS1-HELP-TO-GROW.
8. Link to site

1. Go to GitHub Repository: Help To Grow

2. Select 'Code' dropdown button (next to green 'gitpod' button).

3. These are your three options

   • Copy the URL to your local IDE such as Visual Studio.
   • Intsall GitHub desktop.
   • Download the Zip file and use with local IDE such as Visual Studio.

Header quotes taken from google search results of ‘Financial Quotes’

Structure taken from Code Intsitute webinar

• Background image Sapling in jar of coins
• Card images- 'Index' page.
  • People-Whiteboard
  • Pen-Paper-Chart
  • People-Talking
  • Money
  • Yes
  • Meeting
• Card images - 'Things we like' page.
  • ETF image
  • Bond image
  • Dividend Aristocrat image
  • Cryptocurrency image
  • Kraken image
  • Mintos image
  • Degiro image
  • MoneyCube image
  • J.L. Collins image
  • Joseph Carlson image
  • Dave Ramsey image
  • Paddy Delaney image

I received inspiration for this project from Code Institute -Love Running- tutorial, which is why I opted for background images behind the header quotes, and a neat footer.