edge-ledger
🖥️

Edge Ledger

Built with

html5
css

Overview

I took Modern HTML & CSS From The Beginning (Including Sass) on Udemy from Brad Traversy. I wanted to refresh my front-end skills and evaluate my performance. As well as breaking the reliance on using CSS framework like Bootstrap to design the user interface. With react.js using framework is not as common.One of the projects was building Edge Ledger with flexbox. After the lessons, I took the screenshot of his website and made it my own.

Goals

I wanted to assimilate the design without looking at the source code and to make a website similar to quickbook. I decided to test my knowledge of HTML and CSS. I wanted a rapid prototype so I used fontawesome icons and unsplash for images. I created CSS variables to save the default styling of some items.I built some utility classes to speed up designing the webpage.I styled my own navbar so that the layout changes based on devices. For mobile and tablet devices I was inspired by quickbooks nav. On Desktop I wanted the navbar to stick to the top which was achieved by using js and jquery. When clicking on a navbar item the web page scrolls to that section. A little bonus I added was when clicking on the images a lightbox appears with text.

Lessons Learned

In this project I started to test my understanding of: Building with an HTML5 Semantic Layout, Using CSS Fundamentals and CSS Variables, Testing my Knowledge of Flexbox Layout, Building Responsive Design With Media Queries, and Using CSS Units - rem, em, vh, vw

edge-ledger-mobile
Fig.1 - Mobile View of App

Process

I followed the design made by Brad Traversy:

Then decided on the best layout of the content and made a design in figma. Finally I scaffolded the HTML and started to style it, then finished with adding SEO

edge-ledger-tablet
Fig.2 - Tablet View of App