Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/botirk38/fylo-data-storage-component-master
This is a solution to the Fylo Data Storage Component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
https://github.com/botirk38/fylo-data-storage-component-master
Last synced: about 2 months ago
JSON representation
This is a solution to the Fylo Data Storage Component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Host: GitHub
- URL: https://github.com/botirk38/fylo-data-storage-component-master
- Owner: botirk38
- Created: 2023-06-16T07:17:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-21T17:47:44.000Z (over 1 year ago)
- Last Synced: 2024-11-06T12:57:39.246Z (3 months ago)
- Language: CSS
- Homepage: https://botirk38.github.io/fylo-data-storage-component-master/
- Size: 442 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Fylo Data Storage Component Solution
This is a solution to the [Fylo Data Storage Component challenge](challenge-link) on [Frontend Mentor](https://www.frontendmentor.io). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My Process](#my-process)
- [Built With](#built-with)
- [What I Learned](#what-i-learned)
- [Continued Development](#continued-development)
- [Useful Resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The Challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
### Screenshot
#### Desktop View
#### Mobile View
### Links
- Solution URL: [https://github.com/botirk38/fylo-data-storage-component-master](solution-url)
- Live Site URL: [https://botirk38.github.io/fylo-data-storage-component-master/](live-site-url)
## My Process
### Built With
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
### What I Learned
In this project, I learned how to utilize CSS Flexbox and Grid for layouts, ensuring that the webpage is responsive and user-friendly on all devices. Working on the Fylo data storage component allowed me to understand how to manage the layout on different screen sizes and to use CSS properties effectively.
Some of the code I'm proud of includes:
```css
.storage-left{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top:-4.5rem;
margin-bottom: 2rem;
margin-left:1rem;
background-color: white;
width:100%;
height:auto;
min-height:100px;
max-width:250px;
border-radius: 15px;
}
.storage-left span{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
margin-top: 1rem;
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.5rem;
}
```
### Continued Development
In the future, I would like to continue focusing on making my projects more interactive with JavaScript. Moreover, I'm planning to explore more about React and Next.js to make my projects more dynamic.
### Useful Resources
The CSS Flexbox Guide - This helped me to understand the flexbox layout and how to use it effectively.
Author
Frontend Mentor - @botirk38
Twitter - @yourusername
### Acknowledgments
I would like to thank Frontend Mentor for providing such a real-world-like challenge. It helped me to learn and implement a variety of tools and techniques.