Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shaifarfan/30days30submits
This is a challenge that I took to boost my HTML, CSS & JS skills. I made 30 submits and they are basically some little components or js apps.
https://github.com/shaifarfan/30days30submits
css html javascript shaifarfan webcifar website
Last synced: 4 days ago
JSON representation
This is a challenge that I took to boost my HTML, CSS & JS skills. I made 30 submits and they are basically some little components or js apps.
- Host: GitHub
- URL: https://github.com/shaifarfan/30days30submits
- Owner: ShaifArfan
- License: mit
- Created: 2020-07-20T20:44:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-22T07:29:51.000Z (over 1 year ago)
- Last Synced: 2025-01-12T03:48:21.259Z (11 days ago)
- Topics: css, html, javascript, shaifarfan, webcifar, website
- Language: CSS
- Homepage:
- Size: 45.4 MB
- Stars: 475
- Watchers: 15
- Forks: 128
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 30days30submits
## This challenge is started on July 21, 2020 📅
### In this challenge, I submitted 30 little to medium size projects. Sometimes I did a little website component or sometimes some javaScript app as a submit. I did it to boost my HTML, CSS & JS skills. Down here you will find all the live previews and youTube videos (how I made it). Also here is the full playlist for this #30days30submits challenge => [playlist](https://www.youtube.com/playlist?list=PLRv_Gd5w9e7m7wokXmB9fGtGYw100UKc0).
| day | Project Name | source Code/preview | YouTube Video |
| :----- | :----------------------------: | --------------------------------------------------------------: | ---------------------------: |
| day-1 | Custom Cursor | https://codepen.io/Web_Cifar/pen/OJMrzaB | https://youtu.be/de4W0EHMuUs |
| day-2 | Theme Switcher | https://codepen.io/Web_Cifar/pen/OJMrdbq | https://youtu.be/D1yg4T37qYo |
| day-3 | Random Dad Jokes Generator | https://codepen.io/Web_Cifar/pen/XWXOZWX | https://youtu.be/UDIfuvLEkjU |
| day-4 | Numbers API | https://codepen.io/Web_Cifar/pen/PoZLpoG | https://youtu.be/s3LFCErzmHI |
| day-5 | Countdown Timer | https://codepen.io/Web_Cifar/pen/OJMGPbb | https://youtu.be/_a4XCarxwr8 |
| day-6 | Featured Section | https://codepen.io/Web_Cifar/pen/WNrWxYG | https://youtu.be/L4k3_elYm2U |
| day-7 | Photo gallery p-1 | https://codepen.io/Web_Cifar/pen/wvMbwdj | https://youtu.be/URymtcPO11A |
| day-8 | Photo gallery p-2 [Pexels API] | https://github.com/ShaifArfan/30days30submits/tree/master/day-8 | https://youtu.be/gGBpmzLN1Hw |
| day-9 | Read More Button | https://codepen.io/Web_Cifar/pen/OJMeVxx | https://youtu.be/TvVY8c1uvG8 |
| day-10 | key Code Generator App | https://codepen.io/Web_Cifar/pen/eYJwvKV | https://youtu.be/jOLwRV6xSwA |
| day-11 | CSS animated Menu | https://codepen.io/Web_Cifar/pen/eYJqdxy | https://youtu.be/q8vmz-R_3Ck |
| day-12 | CSS Flex Gallery | https://codepen.io/Web_Cifar/pen/wvMVmZN | https://youtu.be/Z6IZ2NOEzmw |
| day-13 | Analog Clock | https://codepen.io/Web_Cifar/pen/LYNYmpb | https://youtu.be/6xEQ_jA5V2Y |
| day-14 | Digital Clock | https://codepen.io/Web_Cifar/pen/MWyYaBP | https://youtu.be/gmNhRyxAPpw |
| day-14 | Password Generator App | https://codepen.io/Web_Cifar/pen/wvMVYVP | https://youtu.be/zmLxhLOVB1M |
| day-15 | BG Color Changer | https://codepen.io/Web_Cifar/pen/dyMPmwY | https://youtu.be/Yem8T8azZko |
| day-16 | Basic Tooltips | https://codepen.io/Web_Cifar/pen/PoNqwNJ | https://youtu.be/MXRxahbJX3A |
| day-17 | Scroll Down Button | https://codepen.io/Web_Cifar/pen/WNwvOaE | https://youtu.be/LY1jeQGUiAI |
| day-18 | Advance Tooltips | https://codepen.io/Web_Cifar/pen/yLOYoPR | https://youtu.be/e_jEquJo7y8 |
| day-19 | Full Functional Html Form | https://codepen.io/Web_Cifar/pen/gOrrPpO | https://youtu.be/vc9rgFHr098 |
| day-20 | Multi Step Form | https://codepen.io/Web_Cifar/pen/PoNNEYY | https://youtu.be/cKTgIDkRsGc |
| day-21 | CSS Loading animation | https://codepen.io/Web_Cifar/pen/jOqqRPM | https://youtu.be/E_jOrp4t0N4 |
| day-21 | OTP UI | https://codepen.io/Web_Cifar/pen/BarOKgO | https://youtu.be/ZVV2UM4hzIE |
| day-22 | Food Recipe App | https://codepen.io/Web_Cifar/pen/oNxLYRY | https://youtu.be/x8EY0BlhPGk |
| day-23 | Neon Light Effect | https://codepen.io/Web_Cifar/pen/MWyJENV | https://youtu.be/NLtUycloTnc |
| day-24 | Speech Recognition App | https://codepen.io/Web_Cifar/pen/jOqBEjE | https://youtu.be/-k-PgvbktX4 |
| day-25 | Custom Slider | https://codepen.io/Web_Cifar/pen/bGpRwEr | https://youtu.be/V9TCxMMpGhI |
| day-26 | Bouncing DVD logo | https://codepen.io/Web_Cifar/pen/JjXrLRJ | https://youtu.be/wMIARRCox9k |
| day-27 | Quiz APP | https://codepen.io/Web_Cifar/pen/dyMZxNg | https://youtu.be/qXXM9nVxLWk |
| day-28 | Simple Calculator | https://codepen.io/Web_Cifar/pen/XWdVgXr | https://youtu.be/0Vg4EiYPCUc |
| day-29 | Weather APP | https://codepen.io/Web_Cifar/pen/gOrvMpR | https://youtu.be/y0iCeKUsYMk |
| day-30 | CSS Dot Loaders | https://codepen.io/Web_Cifar/pen/rNevXPx | https://youtu.be/ENa4y_-fJAs |
---
### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/)
Like my works and want to support me?
---
## Other projects
📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials)