Bitcoin Basics is an informative website, devised for those who want to learn about this new (and often overwhelming) technology.
Features include: a beginners guide demystifying Bitcoin, current market rates and a clean, minimalist design that enables a newcomer to easily navigate the pages.
The main goal of Bitcoin Basic is to provide information about Bitcoin that is easy to understand, so that a newcomer will leave the site with a solid foundational knowledge of what Bitcoin is, it's current rate and where they can find more in depth information if they want to learn more. It will be a fully responsive website, with a minimalist design and a logical easy to follow structure.
The target audience for this website is a user that is not necessarily technical, who has recently heard about Bitcoin and wants:
- To know more about what it is and how to start using it.
- To know the initial steps to take when first buying bitcoin.
- Clear visuals that don't confuse or overwhelm the visitor.
- Intuitive page layout and navigation.
- To know where they can find further reading and more in-depth information.
- To see the current market rates of Bitcoin against various currencies.
- To see current news on Bitcoin.
As a developer the aim is to create a web application that will:
- Enable a visitor to find the answers to most of the questions a newcomer to Bitcoin will have.
- Be responsive, interactive and dynamic using HTML, CSS, JavaScript and where necessary jQuery and/or API's in design, development and implementation.
- Be a great addition to the portfolio.
As a newcomer to Bitcoin, with little to no technical knowledge, I want:
- A clear guide with the key information I need to understand what Bitcoin is.
- Clear navigation to easily maneuver through the site.
- The ability to compare the value of Bitcoin to various fiat currencies.
- To see the current price of Bitcoin.
- To be able to see the latest news to give context about Bitcoin.
- To have the ability to send the questions I have about Bitcoin.
As someone who has more knowledge about Bitcoin, I want:
- The ability to go directly to the information that I require about the current price of Bitcoin.
- Information on further/ more advanced information on Bitcoin.
- A resource that I can direct new enquirers about Bitcoin to.
- To see the latest developments in Bitcoin.
- The ability to provide feedback about further improvements that can be made on the site to meet needs as an invested Bitcoin follower.
Bitcoin can easily become overwhelming to a newcomer who may not have looked at the financial market before, let alone cryptocurrency! Keeping that in mind the design choices have been made to interfere as little as possible with the main subject matter.
The main colours used in this project for the logo, buttons and font was the main colour of the Bitcoin Logo: rgb(255, 153, 0);
This contrasted well against black and white and added enough interest to the design without making it too distracting.
The font chosen was Roboto because it has a clean, modern type that would go well with the minimalist theme.
The icons used on the landing page were chosen to emphasise meaning and make it obvious, at a glance, where that navigation button leads to.
As there are only a few elements on each page, the hover effect on the buttons directed the visitor to it's function but also added dynamism.
The following wireframes were created on the skeleton plane as part of the planning process of the project using Balsamiq
-
- On arrival at the site, the visitor will see a group of 6 navigation buttons, which are in place of the navbar. The width of the buttons are responsive, and will adapt to the screen size you are using.
- From the home page you can choose to go to the beginners guide or directly check the market price, monthly Bitcoin chart, the latest news or go to an exchange to buy Bitcoin if you are not a beginner.
-
-
The accordion component allows the information in the guide to be displayed whilst keeping the layout clutter free.
-
This feature also allows the visitor to go straight to a particular part of the guide rather than being forced to read it all.
-
The background colour of the open section makes it clear that section is open.
-
-
- Using CoinDesk API visitors can select checkboxes next to their required currencies and display those current rates in a table.
- They can also click the 'Select All' button to display all currency rates in the table
- This feature gives the visitor complete control over the range of information they want to view
-
-
Using CoinDesk API visitors can see an updating chart of the last 31 days of the price of Bitcoin.
-
This allows them to easily see how Bitcoin is trending and its current price as it relates to the price on a particular day in the last month.
-
As this chart is updating daily, it remains a useful resource that visitors can come back to.
-
-
-
Using Messari.io API visitors can click the title links to see the current news articles for Bitcoin.
-
The articles are updating regularly, which gives visitors a reason to return to the site.
-
-
-
The visitor has the ability to send an email message in the contact form, which needs to meet validation requirements before it can be sent.
-
If the form is filled out incorrectly, feedback is given in an error modal so that the visitor can amend the details.
- When the email has been sent successfully, feedback is given in a success modal so that the visitor knows that the message was sent.
-
-
- Currently the Market Rates page shows the current price of 1 Bitcoin in a particular currency. In future a calculator feature that would allow visitors to see the price of any amount of Bitcoin in their chosen currency would be a useful tool. For example, a visitor could find out how much $50 is worth in Bitcoin and what the price of 3 Bitcoin is in Dollars.
-
- It would be useful for visitors to be able to instantly see the current price of Bitcoin on every page, rather than having to go to the Market Rates page.
-
- Having the ability to see how the price of Bitcoin has changed over a range of time spans i.e. 24 hours, 7 days, 1 year would give the visitor a more informed view of Bitcoin overall.
-
- Buying Bitcoin can be intimidating for a beginner so having step by step instructions on buying bitcoin would be a very useful tool to implement in future, that a person can refer back to if they are unsure at any point during the buying process.
This project utilises HTML, CSS and JavaScript programming languages.
- JQuery
- This project used JQuery for DOM manipulation and Event Handling.
- Gitpod
- The project was created and developed using the open sourced platform Gitpod.
- GitHub
- This project used GitHub allow access to the project code and store the project remotely.
- Google Fonts
- Google Fonts was used to style the fonts for the project.
- Bootstrap
- Bootstrap was used for its CSS Framework to easily develop a responsive project using its simplified structure.
- Font Awesome
- The icons used for this project are provided by Font Awesome.
- AutoPrefixer
- This project used AutoPrefixer to ensure that all the CSS prefixes were the most current version.
Details on Testing can be found in the separate testing.md file
This project was developed using Gitpod and pushed to GitHub
To deploy Bitcoin Basics to GitHub Pages. The procedure is outlined below:
- Go to Github and log in.
- From the repositories listed on the left-hand side, click on shoreenb/bitcoin-basics.
- Underneath the repository name are some headings: Code, Issues, Pull requests, Actions, Projects, Wiki, Security, Insights and Settings. Click on Settings.
- Scroll down until you see the heading 'GitHub Pages'
- Under Source is a dropdown menu called 'Branch:', click on it and select 'master'.
- The page will then automatically reload and when you scroll back down to the GitHub Pages section you will see the link of your published page displayed above the Source title.
- It may take a few minutes for the background of the link to turn green, but once it does, your site is published and you will be able to open it.
Forking the GitHub Repository makes a copy of the original repository so that you can view and/or make changes without affecting the original repository. To do this:
- Go to Github and log in.
- Locate a repository - follow this link for the Bitcoin Basics Repository)
- Above the Settings Button on the menu, on the right-hand side locate the Fork Button. It is next to the star button.
- You should now have a copy of the original repository in your GitHub account.
To clone Bitcoin Basics from GitHub:
- Go to Github and log in.
- Locate the repository - follow this link for the Bitcoin Basics Repository
- Under the repository name, click the green Clone or download button.
- To clone the repository using HTTPS, copy the link under Clone with HTTPS.
- Open a terminal and if you need to, change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3 on GitHub.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- When you press Enter your local clone will be created.
Further information and troubleshooting on cloning a repository from Github can be found on GitHub Docs
All of the text written in this project has been written by the developer.
Information for the Get Started guide on Bitcoin obtained from:
- The Bitcoin Basics logo was created using Canva
- The Bitcoin image used throughout the project was from Logos-Marcas and WikimediaImages
- The image used in the 'What is Bitcoin' in the Get Started guide was sourced from Andreas M. Antonopoulos
- The images for 'The Internet of Money' books were also sourced from Andreas M. Antonopoulos
- The Bitcoin Standard book image was obtained from Saifedean Ammous
- The image of the old man yelling at bitcoin was sourced from Money Morning
The API's used in this project were:
- CoinDesk used for the current market rates and the data in the chart of the price of Bitcoin over the last 31 days.
- Messari used for the current news articles on Bitcoin.
The following YouTube Tutorials assisted me in writing code:
-
5 Ways to Center with CSS! by Marc Hinton
-
A Landing Page Tutorial by Innovation Teach
-
Easy sticky Footer by Kevin Powell
-
JavaScript Fetch API: Interacting With The News API by Conor Bailey
-
How to create an accordion by Easy Tutorials
-
Code for pushing the API data to the checkboxes was based on the information from this StackOverflow post.
-
Code converting the API object into a string from W3Schools
Sincere thanks to:
- Mentor Gerard Mcbride who's experienced advice and explainations enabled this developer to overcome the many hurdles that arose during the course of this project.
- The many Code Institute Tutors who gave their time to help this developer move forward in this project with expert source knowledge.
- Mr B, who offered his knowledge of Bitcoin, being the person many go to asking the questions that formed the foundation of this project.
No releases published
No packages published