The Plan-₿ is a website that contains fundamental information about Bitcoin and Block Chain technology, it is intended for any user who is starting with cryptocurrency.

User Stories

• As a page visitor I want to be able to navigate the website intuitively and learn more about the bitcoin and other technologies being offered.
• As a page visitor, I want to easily find the contact information.
• As a customer, I want to find relevant social media links on the website.

Project Goal

• Website goal is to reach any person who is interested in cryptocurrency.
• Important task of this website is to help in making Bitcoin more mainstream.

Color Scheme

• Colors were sourced from Coolors
• To achieve good contrast only 3 colours were used: #ECA506, #000000, #4CFACC.

Typography

• The main font used in the site is "Roboto", with Sans Serif as the backup font in case Roboto is not being imported correctly. "Share Tech" is used for headings, logo, nav menu, second font was suggested by Google Fonts.

Wireframes

• Balsamiq has been used to showcase the concept of the website.

Desktop version

Mobile and Tablet version

Navigation

• Featured at the center of header, the navigation shows: Home, About, How it Works and Contact.
• Navigation font is in a font named "Share Tech", black color has been used that contrasts with background.
• Navigation has been simplify so the user can easly find different page sections.

Header

• Logo has been placed on upper right corner of header, same black color has been used and text size has been increased.
• Logo contains special Bitcoin unicode.

Footer

• The footer has been simplify and the same background color has been used as on header.
• Footer contains 4 clickable social media icons.
• Icons are opening in new tab.

Landing page

• Hero image represents separation beetween world of fiat currency and new digital era of cryptocurrency.
• Black color is dominating in image and gives a user great contrast experience.

Section "Home"

• Shows to user hero image and partial text from section "About Bitcoin"

Section "About Bitcoin"

• Contains a text that explains what is Bitcoin, and includes a small image on right side so user can have a better visual experience.

Section "How it Works"

• Shows user a section that contains 3 separated text sections with fundamental information about Bitcoin basics for a new user, balances-block chain and transactions-private keys.
• Each section contains eye catching image so user can have better visual experience and connection to text.

Section "Contact me"

• Directs user at the bottom of the page.
• Contains a contact form where user can submit their details and add additional message.
• Submit button contains eye catching bright green color.

Languages used

• HTML5
• CSS3

Programs used

• GitHub Github was used to store the project.
• GitPod GitPod was used for writing code.
• GoogleFonts Google Fonts was used to import the fonts "Roboto" and "Share Tech" into the style.css.
• TinyPNG TinyPng was used to reduce image size for website.
• FontAwesome Font Awesome was used to add icons to footer of website.
• ChromeDeVTools Chrome Dev Tools used during development of website and to test responsiveness.
• W3C HTML Validator W3C HTML Validator was used to validate HTML Code.
• W3C CSS Validator W3C CSS Validator was used to validate CSS Code.

• I completed testing of the website page in multiple browsers: Brawe, Chrome, Firefox and also used DevTools to confirm that the project is responsive and functional.
• I tested the website on different devices and operating systems Laptop (Windows), Tablet Samsung Galaxy Tab A (Android), and Galaxy Note 20 Ultra 5G (Android). The website worked perfectly on all devices.
• I confirmed that navigation, about section, and contact are all readable, and easy to understand.
• I can confirm that the contact form works correctly, and that the email field will only accept an email and also that the submit button works.
• The Website was successfuly tested on ResponsiveDesign

Validator Testing

No errors were returned when passing through the W3C HTML Validator

No errors were returned when passing through theW3C CSS Validator

Lighthouse Report

Google chrome dev tools shows 2 errors in console

• Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
• GET https://sirjarvis.github.io/favic favicon.ico:1 on.ico 404

GitHub Pages

The live deployed site can be viewed on GitHub Pages Plan-₿

The site was deployed to Github pages

These are the steps to deploy this project:

• Login to Github and go into repository SirJarvis/plan-b
• Click on settings and scroll down to Pages section on the page
• Under the source heading select the master branch option and click save
• The project has now been deployed and wait for approximate 10 minutes for the link to become active
• Refresh the page and click on the link to view the live site.

Forking The Github Repository

By forking the GitHub repository, we create a clone of the original repository in our Github account. This allows us to make modifications to the files without affecting the original repository. These are the steps:

• Please sign in to your GitHub account.
• Locate the repository to be duplicated, in this case SirJarvis/plan-b.
• Locate and click the “Fork” button at the top of the SirJarvis/plan-b repository page.
• This creates a copy of the repository in our account, allowing us to make modifications.

Making A Local Clone

• Please sign in to your GitHub account.
• Locate the desired repository in this case SirJarvis/plan-b.
• Locate the “Code” button at the top of the SirJarvis/plan-b repository page. Click it and copy the HTTPS link that appears.
• Activate your local IDE terminal.
• Change the current working directory to the location where you wish the cloned file to be saved.
• In the terminal, type “git clone” and then paste the link copied from HTTPS.
• e.g "git clone SirJarvis/plan-b
• Clone has been made once you press enter.

Media

Pixabay

• Hero-Image: https://pixabay.com/photos/digitization-currency-bitcoin-3614384/
• Balances Block-Chain: https://pixabay.com/illustrations/blockchain-data-records-concept-4744367/
• Transactions-Private Keys: https://pixabay.com/illustrations/euro-transformation-digital-5094279/

Pexels

• About Bitcoin: https://www.pexels.com/photo/gold-round-coin-on-black-surface-5980743/

• How it Works: https://www.pexels.com/photo/laptop-internet-connection-technology-6770775/

• The site fonts were taken from GoogleFonts

• Icons were sourced from FontAwesome

• Website colors were sourced from Coolors

Content

The text for website was taken from 2 sources:

• Bitcoin.com

• Bitcoin.org

• Bitcoin unicode was taken from Unicode-table

Code

• MDN, W3SCHOOLS, STACKOVERFLOW were used on daily basis, to better understand the code.

• This readme document was based on research on several readme documents such as the Code Institute's readme Sample.

• I used the lessons learned during the Code Institute "Love Running" project to help with the structure of contact form.

Acknowledgements

• My partner, for her time, patience and effort and huge support.
• My mentor, Chris Quinn, for all valuable sessions, all advices and guidance.
• Code Institute and Slack community for their help and support at any time.