#DoHODL

Purpose of the Project

#DoHODL this is an explanational and educational modern community that tries to explain Who? Why? How? I created a site to give more information for people of all ages to shift their undestanding of this technology (or at least will try to). Look of the website should be open, friendly, intuitive, responsive at all devices as cryptoassets. Ecourage people to contribute for this relatively small but powerfull instrument.

Website should be able to provide all information that user might expect to see at such specific theme and leave good aftertaste in terms of design and user experience Link to live site

Contents

• Objective
• UX (User Experience)
  • User Stories
  • Owner Goals
• Design Choices
  • Fonts
  • Colors
  • Design Prototype
• Features
  • Future Features
• Technologies
  • Tools
  • Languages
  • Content
• Testing
  • Code Validation
  • Responsive
  • User Story Testing
  • Bugs Fixed
  • Deployment

Objective

This is my first project where I developed website showing competence in HTML and CSS with best practise of coding, user experience together with testing and attention to details.

Back to menu

UX (User Experience)

User Stories

• Visiting site would like to find:

  • I want to understand what is Bitcoin(#BTC) and where it comes from.
  • I want to understand how it become so expensive.
  • I want to know if BTC is secure.
  • I want to understand why young people love it so much.
  • I want to know if I can earn buying a Bitcoin

• Returning to the site:

  • Is Bitcoin the only crypto?
  • How can I get a Bitcoin?
  • Is it possible to get in touch woth the community?

Owner Goals

• As owner I want user join the community.
• As owner I want user be able to contact our community through contact form.
• As owner I want to show that crypto is interestin, fun and lifechanging.

Back to menu

Design Choices

Fonts

I picked up Space Mono as the one for entire project. It is easy to read and look reminds some technology as well great for contrast.

Colors

Site mostly targeted for younger generations as practice shows for them it is easier get used to new technologies. So coors were choosen bright and colorfull all over the site, they are:

Design Prototype

Honestly I didn't Use any programm or online redactor for this purposse as I got an idea from tthe begining how I want my site to look like.

Back to menu

Features

• Header
  • Navigation menu fixed to the right top corner and easy accessible at all times
  • Clickable navigation menu that direct user to area he would expect.
  • Once hovered links highlighted with neon light for better user experience.
  • Clickable logo that send you to home page.
  • Hashtag (#) with flickering effect same as logo on right side of menu to give feedback.
  • In mobile view navigation links loose smooth corner and become all width long for better user experience.
  • Contrast colors designed for easier reading.
    

Back to menu

• Hero Image
  • Image placed in the center of the screen on top of gradient background in order not to overload user attention.
  • Image related to content

Back to menu

• Content
  • Contains general and easy to understand information about community and technology.
  • Introduced user to Bitcoin

Back to menu

• Footer
  • Located at the bottom of the page.
  • Contains social media links and link to DoHODL chat in Telegram so user can easly get started.

Back to menu

• BeHodler
  • Contact Us form for user to get totem NFT of the community. Showed error message if fields not filled correc or missed.
  • Tutorial aside of the form that explains how receive the totem NFT.
  • Submit button "HODL" where user would expect it.

Back to menu

Future Features

• I want to add live price of three favourite community coins.
• I want to create quiz about crypto and community for newcommers.
• I want add clothes, accessories and NFT that user can buy for Crypto only.
• I want to add Log In option for users and have profiles.

Back to menu

Technologies

Tools

• Gitpod - IDE and just comfortable enviroment of coding, and sharing.
• GitHub- deploying the project.
• Goodle Fonts - choosing and matching fonts.
• Favicons - generating icon for something
• Lighthouse - checking responsivity of the site.
• Unsplash - source of image.
• Coolors - source of colors for design

Back to menu

Languages

• HTML5
  • HTML is the standard markup language for Web pages.
• CSS3
  • Cascading Style Sheets (CSS) is a simple mechanism for adding style.

Back to menu

Content

• DoHodlChat community with deep knowledge about cryptocurrency.
• Cointelegraph as one of the most reliable source about crypto world.
• 2 quadrillion satoshi simple words about complex technology.

Back to menu

Testing

Code Validation

• HTML validation

• CSS validation

• Lighthouse testing

Back to menu

Responsive

Site is responsive. Tested with all browsers and screens. Live address was given to friends and tested as well.

Back to menu

User Story Testing

• First time user

  • Clicking on button Learn More. Result: scrolling down to Content.
  • Want to go back to home page. Result: sticky navigation link in easy access.
  • Easy navigate during using the website. Result: layout and colors helps user to do that
  • Want to see what community is doing. Result: social media links available.

• User that returning back

  • Want to contact the owners. Result: Contac Us form working well if user will miss some input area or would type wrong input system wouldn't allow him to submit
  • Want to reread some part of the site. Result: mavigation links always available.
  • Fully responsive from any device

  Back to menu

Bugs Fixed

Console Error

• Error that appeared while was checking website with the help of Google Chrome Devtools. Seeing the red notification about favicon. Looks like site can't find an favicon.
• Once favicon been in place bugs dissapear

Back to menu

Deployment

Website was developed with Gitpod and pushed to Github with this steps:

• Log In to Github
• Choose user
• Looking for setings and going down and left to Pages
• Searching for Source and choose Branch Main
• click Save and site will reload automatically with link where our site publiched

Back to menu

Credits

Content

• Neon light came from CSS-tricks
• Icons came from Font Awesome
• Colour palette displayed by Coolors
• Font came from Google Fonts

Media

-Image arrived from Pexels

Acknowledgements

• My Mentor for confidence and advices with feedbacks
• Friends that were supporting me all the way

Back to menu