sagekyle / backtick-finance

Backtick Finance

A clone of this broker site initially designed by Samuel Jarvis

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued Learning
• Screenshots
• Author
• Useful Resources

Overview

The challenge

My initial goal for this project was to test my knowledge of CSS styling and grid layout. I've spent a relatively long time learning CSS, so my goal is to see what I can actually build with CSS by cloning a well-designed website that uses a somewhat complex grid system without watching tutorials.

Although I can't call myself a designer or even a CSS professional, I can now say that I know CSS effectively.

Links

• Live Site URL: Here
• Source code URL: Here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow
• Javascript

What I learned

Through this project I learned how to use and also style the html data- attribute.

Screenshots

• Desktop Layout

• Tablet Layout

• Mobile Layout

• Active States

• Navigation

Continued Learning

After this, my goal is to move on to the next step in my learning process which is to learn React JS.

Author

• Github - Paul Ominyi
• Twitter - @Ominyi_Sage

Useful Resources

halo broker - I got all the designs and images for this project from this website created by Samuel Jarvis

backtick-finance's Issues

Media Queries

Make the site responsive by designing the mobile and tablet layout

Navbar

Create the mobile layout of the navbar

README Screenshots: some parts are misrendered

Most of the screenshots in the README file are misrendered (especially the position of the header on the page), perhaps because of the low quality of the processor in my PC which I used to take the screenshot, (Chrome dev tools).

Use another device to take a screenshot or crop out those sections