A Modern Design Chart, showing expenses and summary of other financial details, fetching data from a JSON file
This is a solution to the Expenses chart component challenge on Frontend Mentor.
- Solution URL: https://github.com/LiyanNguyen/Expenses-Chart
- Live Site URL: https://liyannguyen.github.io/Expenses-Chart
- Design the Desktop Viewport WHILE desinging the Mobile viewport at the same time using LESS CSS Preprocessor
- Design the flex/grid system, making sure to have both Desktop and Mobile Viewport layout correct
- Add in all the other HTML content
- Finished up all the CSS designs
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Grid
- Desktop-first workflow
- LESS CSS Preprocessor
- More Flexbox, Flex-wrap
- More LESS CSS Preprocessor
- More fetch API on local JSON file on the same folder
- Different technique of just using big paddings on sections rather than %height or vh
- Always use padding FIRST inside big sections before the putting in the flexboxes
- DO NOT manually position elements inside big sections
- Add padding FIRST! before flexing the items
- Website - Liyan Anajao
- Frontend Mentor - @LiyanNguyen
- Twitter - @LiyanAnajao