Project-1

First Coding Project: User-Centric Frontend Development - Code Institute

This is my first coding project. In this project I have created a new website for a start-up consultancy firm which provides advisory and consultancy for 2 investment products : Gold ETFS and Gold Futures.

Investors/Non-Investors can visit the website to find out more about who we are, our offerings and what's trending in the Gold ETFs and Gold Futures Market. We hope to attract members of the public who who are curious about Gold ETFs and Gold Futures and looking for assistance with these 2 investment products.

In this project I have utilised mobile first design principles to create a responsive webpage that is intended to look good and perform well on any size of device. I kept the content and design simple for easy navigation and at the same time delivering our value proposition to our users.

Strategy

The main reason for creating this project is to introduce and share about 2 alternative investment products , Gold ETFs and Gold Futures . In this current state of economic volatility and market uncertaintly, people are searching for an alternative investment option. People want to invest or buy gold to protect themselves from volatility and uncertainty. Gold is regarded as a safe haven, an asset to buy when other assets are losing value.

This platforms serves as an introduction to Gold ETFs and Gold Futures and users can read latest trending articles regarding Gold investments. Interested parties can reach out to us if they require advisory with these products.

User Stories

I Identified three users for this site. Members of the Public who are currently holding investment portfolios and searching for alternative investments.

Investors who are currently investing in Gold ETFs and Gold Futures but lacking the knowledge hence they wish to receive consultancy and advice from a professional and expert.

Non investors who are curious about Gold ETFs and Gold Futures and wants to read more about these 2 products.

Scope

Using the user the above user stories and the project brief I identified the following requirements:

i)Functional Requirements

The Project must be a series of static webpages with multiple sections The webpages must work in a range of browsers Across a range of different devices, mobiles, phablets, tablets, laptops, desktops Each of the pages of the site should be accessible from the others. The project will need to be able to play a range of different media. Non-Functional Requirements The site should be intuitive to use The site should be eye-catching and easy to read/use

ii)Content Requirements

The project will need to include text content The project will need to contain images. The project will need a navigation carousels to help people NAVIGATE my website, not primarily to showcase content. The project will need a form for users to send questions.

iii)Structure

After considering the scope of my project I decided that it would be better to approach the project as a series of webpages as opposed to a single long pages in multiple sections. It is easier for users to view my content via navigation tabs hence I decided to structure my website as multiple pages.

The pages I included are:

Home - The landing page : We use a navigation carousel to provide links to all the other subsequent pages.
Products - A page with different navigation tabs for users to learn more about Gold ETFs and Gold Futures.
News -This page is wehre users can read more about the latest trending news regarding Gold investments. We use a 3 column grid layout to segment each article and provided hyperlinks for each article.
About Us - For users to find out more about our company and what we do.
Questions - For users to send us an email if they have any questions regarding our services and products.

The project uses a flat structure and every page is only 1 click away from every other page.

iv)Skeleton

The main wireframe for my site is navigation bar , nav tabs, content, footer in every html. Index Html will include a carousel slider.

v)Surface

Colors:

The main colors used is black , white and gold.

vi)Background Images

Performing an Image search for gold exchange led me to use the images for the background in my websites.

vii)Typeface

Throughout the site I used Arial and Courier New for a more formal read.

viii)Iteractions

The social links will scale up on mouse over or when tapped, once again to provide visual feedback to the user to indicate that an action has been taken.

The hyperlinks under 'News' keeps users up-to date with current trending news.

For users to connect with us, i have created a form requesting for user information and questions.

4.Features

All Page Features:

Semantic HTML: All pages have been written with semantic HTML in mind.

Fixed Scroll to Top: Each page has a fixed scroll to top icon, for ease of navigation.

Responsive Design: Site pages are designed to work on all sizes of device.

Form submission will check if the user inputs are in accordance with the form.

If you try to submit the contact form with an invalid email address, there will be an error noting the invalid email address, the 'required' attribute is added to all necessary fields.

All external links will open in a new tab using "target=_blank"

Features Left to Implement

The submit button in the quesiton form is not activated to send actual users input.

Due to the scope of the course, and the stage at which I am at in my development career there are a couple of things that I did not implement. I did not create actual social media accounts for my company, hence the social media links are fictitious.

5.Technologies Used

In this project the following technologies have been used:

The Bootstrap 4 framework was used to help layout the webpage.

JQuery was used as a part of the Bootstrap 4.

HTML

CSS

6.Testing

Throughout this project I have done regular testing. And have reloaded the pages a number of times after each addition and modification.

My first round of testing was functionality testing in which I performed the following actions.

Testing the Links

Checking the External Links Checking the External Links all Open in the new Tab Testing Internal Links Testing the Forms

Testing to see if the required fields are required Validating the HTML on each page

The Results of this testing can be found here

To test the usability of the site I sent it to my colleague. She peer review and have feedback that the website was too plain and there's missing hyperlinks and they were not linked properly.

I tested the compatibility of my site by viewing the website on my phone to check responsive settings.

I checked if the images all scaled and maintained aspect ratio instead of streching

7.Deployment I did not host my site on github pages, as i was using repl.it to create my website and it's non-compatible.

8.Credits

Content

All text content from Bloomberg, Investopedia, Yahoo Finance, Google, below websites:

https://www.mutualfundssahihai.com/en/Why-invest-in-gold-funds-when-we-can-invest-in-gold#

https://economictimes.indiatimes.com/articleshow/71521100.cms?utm_source=contentofinterest&utm_medium=text&utm_campaign=cppst

https://www.fxempire.com/forecasts/article/gold-price-futures-gc-technical-analysis-may-be-forming-potentially-bullish-secondary-higher-bottom-604905"target="_blank

https://www.fxstreet.com/analysis/gold-price-forecast-october-2019-why-the-next-few-weeks-could-be-explosive-for-gold-video-201910081740

Media

-Company Logo