https://github.com/mewmewdevart/30days_csschallenge
⚙️ | The challenge aims to help improve my coding skills by making mini-projects using HTML and CSS3.
https://github.com/mewmewdevart/30days_csschallenge
30days css html projects
Last synced: over 1 year ago
JSON representation
⚙️ | The challenge aims to help improve my coding skills by making mini-projects using HTML and CSS3.
- Host: GitHub
- URL: https://github.com/mewmewdevart/30days_csschallenge
- Owner: mewmewdevart
- License: mit
- Created: 2021-02-28T04:23:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-28T13:59:32.000Z (over 3 years ago)
- Last Synced: 2025-02-26T21:18:04.799Z (over 1 year ago)
- Topics: 30days, css, html, projects
- Language: CSS
- Homepage:
- Size: 25.9 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
30 Days of CSS
30Days of CSS is a challenge aims to help improve your coding skills by making mini-projects using HTML and CSS3.
#### 💡 About the project
> _ Exercising my knowledge (and learning more) of HTML5 and CSS3, creating daily mini-projects for 30 days.
#### Rules:
- Perform one project per day;
- Share your progress on social media (Twitter, Facebook, Linkedin etc.) using a hashtag # 30diasDeCSS and others;
- The project must be completed by 11:59 pm;
- Personal rule for good conduct: If the project is not carried out sometime, the next day should be added one more;
#### 👥Tutorial/References
- [Online Tutoriais](https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog) -
- [Free Front End](https://freefrontend.com/css-animation-examples) -
- [Dark Code](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw) -
- [Creative Creations](https://www.youtube.com/channel/UCOKmVksbzoKJKmtu7rlEM1A) -
- [Amazing Techno Tutorials](https://www.youtube.com/channel/UCX6g7OirMyfEBn5Oxqu-wGA)
#### 🏆Projects:
- Day 01 - Hover Effect Social Media Buttons
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2001)
- Day 02 - Loading Page
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2002)
- Day 03 - Image Manipulation
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2003)
- Day 04 - Text Glitch Effect
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2004)
- Day 05 - Animated Progress Bar
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2005)
- Day 06 - Toggle Day/Night Mode
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2006)
- Day 07 - Contact Info Effect
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2007)
- Day 08 - Color change when entering another .div
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2008)
- Day 09 - Changing background-color
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2009)
- Day 10 - Password Effect
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2010)
- Day 11 - Button Hover
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2011)
- Day 12 - Video Overlay
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2012)
- Day 13 - Image Hover
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2013)
- Day 14 - I Love
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2014)
- Day 15 - Text Animation
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2015)
- Day 16 - Animated Cards
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2016)
- Day 17 - Flip 3D Card
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2017)
- Day 18 - Creative Div Box
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2018)
- Day 19 - Solar Eclipse
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2019)
- Day 20 - Circular Progress Bar
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2020)
- Day 21 - Ghost Floating
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2021)
- Day 22 - 3D Rotation Animation
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2022)
- Day 23 - Animated Hot Cup of Tea
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2023)
- Day 24 - Animated Hamburger Menu
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2024)
- Day 25 - Square Loading Animation
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2025)
- Day 26 - 3D Cubes
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2026)
- Day 27 - Product Card
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2027)
- Day 28 - Water Text Effect
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2028)
- Day Day 29 - Loading
---
[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2029)
Developed with love 💜 by Larissa Cristina Benedito (Mewmew).