Coinbase is a company that allows users to buy, sell and trade cryptocurrency through its app.
As a user who came to this website might not know what coinbase is about, what cryptocurrency is. Therefore, in my design, I have decided to include pages, which would tell audience what coinbase is and the products it offer, and what are cryptocurrency. Some users might also have queries, so I have added a contact form on a page too.
From Coinbase point of view, Coinbase would like to attract more users to download and use their app, so that they can have more income.
#### Wireframe https://github.com/Shan-Lun-1/IDAssignment1/blob/main/ID_S10222855_Goh%20Shan%20Lun_Assg1_wireframe.xd
- Reponsive navigation bar - This allow user to navigate around the website easily.
- Welcome Text Animation - To attract users to continue to read the website.
- Contact form - To allow users to ask questions regarding coinbase.
### Features left to implement Possible features that could be implemented in the future could be:
- a working contact form, such that users would be able to receive a reply from someone in charge of replying.
- a page to show price of each cyptocurrency, so that those who visit the website including existing users would be able to check the price easily.
*HTML *To create my website
*CSS *To style the contents of the website
*JavaScript *To make dropdown navigation bar for phone * Change color of link when hover
* Contact form
* Display text box for users to input if they were to choose 'Others' as an option on one of the option
* To validate inputs of required fields
* To display a message when form is submitted successfully
* To clear value of input fields after submission
* To change colour and text of submit button upon successful submission
*
*Adobe XD *To make wireframe for my website
-
Products page:
- Go to the "Products" page
- Try to click the link below the navigation bar, and verify that you are being redirected to the correct section of the page.
- Try to click on the image of either the App Store or Google Play in the section with the title "Get the App Now", and see if you will be redirected to the respective location to downlaod the app.
-
Contact form:
- Go to the "Contact Us" page
- Try to submit the form without any inputs, and verify that there are error message for the required fields.
- Try to submit the form with an invalid email address, and ensure that the form is still unable to be submitted
- Try to submit the form with valid inputs and check if there is an alert message, and the submit button is now green with the text "Message Sent".
-Content on Home page were from: -https://www.coinbase.com/about
- Content on "Learn Page" were from:
-Content on Products page were from:
- https://www.coinbase.com/mobile
- https://blog.coinbase.com/now-use-your-coinbase-card-with-apple-pay-and-google-pay-df951ad52c89
-Media on Home page were from:
-https://stock.adobe.com/sg/search?k=crypto&search_type=usertyped&asset_id=447168216
-https://stock.adobe.com/sg/search?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=1&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=marble+background&order=relevance&safe_search=1&search_page=1&search_type=autosuggest&acp=0&aco=marble+back&get_facets=0&asset_id=215064273
-https://www.youtube.com/watch?v=WAzXihefDIE
-Media on Learn page were from:
-https://stock.adobe.com/184344043?as_campaign=TinEye&as_content=tineye_match&epi1=184344043&tduid=149e2ac57d3a014626d06a4652932b85&as_channel=affiliate&as_campclass=redirect&as_source=arvato
-https://stock.adobe.com/images/bitcoin-cryptocurrency-digital-money-business-with-gold-coin-icons-and-team-peop/246356589?as_campaign=TinEye&as_content=tineye_match&epi1=246356589&tduid=149e2ac57d3a014626d06a4652932b85&as_channel=affiliate&as_campclass=redirect&as_source=arvato
-https://stock.adobe.com/images/Business%2C-technology-and-finance-trends/317687390?as_campaign=TinEye&as_content=tineye_match&epi1=317687390&tduid=149e2ac57d3a014626d06a4652932b85&as_channel=affiliate&as_campclass=redirect&as_source=arvato
-Media on Products page were from:
-https://www.uisources.com/explainer/coinbase-toplevel-tabs
-https://stock.adobe.com/sg/search?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=1&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=coin&order=relevance&safe_search=1&limit=100&search_page=1&search_type=usertyped&acp=&aco=coin&get_facets=0&asset_id=194672016
-https://stock.adobe.com/sg/search?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=1&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=rewards+&order=relevance&safe_search=1&limit=100&search_page=1&search_type=usertyped&acp=&aco=rewards+&get_facets=0&asset_id=294460420
-https://stock.adobe.com/sg/search?k=tick&search_type=usertyped&asset_id=345702792
-https://stock.adobe.com/sg/search?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aillustration%5D=1&filters%5Bcontent_type%3Azip_vector%5D=1&filters%5Bcontent_type%3Avideo%5D=1&filters%5Bcontent_type%3Atemplate%5D=1&filters%5Bcontent_type%3A3d%5D=1&filters%5Bcontent_type%3Aimage%5D=1&k=secure+payment&order=relevance&safe_search=1&limit=100&search_page=1&search_type=autosuggest&acp=4&aco=secure+&get_facets=0&asset_id=298606952
-https://www.vhv.rs/viewpic/hxmmmoT_coinbase-card-visa-hd-png-download/
I recieved inspiration from: -https://www.coinhako.com