Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmad-maartmesrini/social-media-dashboard
this project is a frontend mentor challenge
https://github.com/ahmad-maartmesrini/social-media-dashboard
accessibility bem css3 flexbox grid gulp js sass semantic-html
Last synced: about 2 months ago
JSON representation
this project is a frontend mentor challenge
- Host: GitHub
- URL: https://github.com/ahmad-maartmesrini/social-media-dashboard
- Owner: Ahmad-Maartmesrini
- License: mit
- Created: 2024-01-22T08:35:37.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-02T14:05:08.000Z (11 months ago)
- Last Synced: 2024-03-04T10:59:55.978Z (11 months ago)
- Topics: accessibility, bem, css3, flexbox, grid, gulp, js, sass, semantic-html
- Language: HTML
- Homepage: https://social-media-dashboard-swart.vercel.app
- Size: 680 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Social media dashboard with theme switcher Project
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Next Steps](#Next-Steps)
- [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
- See hover states for all interactive elements on the page
- Toggle color theme to their preference
### Screenshots
### Links
- Live Site URL - [Social Media Dashboard](https://the-social-media-dashboard.pages.dev/)
- Frontend Mentor - [@Ahmad-Maartmesrini](https://www.frontendmentor.io/profile/Ahmad-Maartmesrini)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Sass
- gulp-sass
- Flexbox
- CSS Grid
- JavaScript
### What I learned
_Skill Enhancement_
As I embarked on this journey of web development, my foundational skills in HTML and CSS blossomed, solidifying my understanding of these essential elements. Simultaneously, I delved into the world of SASS, mastering its capabilities to seamlessly compile it into CSS. My appreciation for accessibility principles deepened, and I embraced semantic HTML coding practices to enhance the inclusivity of my web creations. Additionally, my introduction to Gulp opened up a new realm of automation, streamlining my development workflow. These newfound skills, coupled with my knowledge of Markdown, acquired while crafting this README file, have equipped me with a well-rounded skillset, enabling me to craft accessible, efficient, and visually appealing web applications.
### Next Steps
With a solid foundation in HTML, CSS, and JavaScript, I am ready to embark on the next stage of my frontend development journey by delving into React and Redux Toolkit. These powerful frameworks will elevate my skills and enable me to create interactive and data-driven web applications. I am eager to explore the possibilities that React and Redux Toolkit offer, further expanding my knowledge and proficiency in frontend development.
### Useful resources
- [CSS Tricks](https://css-tricks.com/)
- [Flavio Copes](https://flaviocopes.com/) will help you to code.
- [Sara Soueidan](https://www.sarasoueidan.com/) Sara's articals helped me with Accessibility.
- [Andy Bell](https://www.piccalil.li/) Andy’ll help you to level up your front-end development skills.
## Author
- X - [@Ahmad_mrtm](https://www.twitter.com/ahmad_mrtm)
- Website - [Ahmad Maartmesrini](https://www.linktr.ee/ahmad.mrtm)
- Frontend Mentor - [@Ahmad-Maartmesrini](https://www.frontendmentor.io/profile/Ahmad-Maartmesrini)
## Acknowledgments
- Huge cridit goes to Jessica - [@thecodercoder](https://twitter.com/thecodercoder) I learned a lot following her codealong course on YouTube.