30Days_CSSChallenge

KO | EN

gitlite — search

#javascript #python #go #golang #android #deep-learning #nodejs #java #windows #kubernetes #awesome-list #pytorch #security #mcp

30Days_CSSChallenge

(★ 25)

⚙️ | The challenge aims to help improve my coding skills by making mini-projects using HTML and CSS3.

30Days_CSSChallenge 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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
---
<img src="https://media.giphy.com/media/vDMBWCYCcMcQngkDmu/giphy.gif" width="60%"/>

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2001)

- Day 02 - Loading Page
---
<img src="https://media.giphy.com/media/fhvV0tKLdBqj6uTIa4/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2002)

- Day 03 - Image Manipulation
---
<img src="https://media.giphy.com/media/JAFEPaKwZUdwt8BWw4/giphy-downsized-large.gif" width="60%"/>

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2003)

- Day 04 - Text Glitch Effect
---
<img src="https://media.giphy.com/media/IvCiMBJkduD2DoQ5jF/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2004)

- Day 05 - Animated Progress Bar
---
<img src="https://media.giphy.com/media/Yme06sBNrQT7cFITuq/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2005)

- Day 06 - Toggle Day/Night Mode
---
<img src="https://media.giphy.com/media/ulMPTGcUx0rD4Ap6NX/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2006)

- Day 07 - Contact Info Effect
---
<img src="https://media.giphy.com/media/UEB2qDszMJVT4wSGWY/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2007)

- Day 08 - Color change when entering another .div 
---
<img src="https://media.giphy.com/media/5iyFWwXuVsh1ba5UUK/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2008)

- Day 09 - Changing background-color
---
<img src="https://media.giphy.com/media/RiC7TZejSVqYw79qSc/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2009)

- Day 10 - Password Effect 
---
<img src="https://media.giphy.com/media/qbuoneamRhw5rlXOsI/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2010)

- Day 11 - Button Hover
---
<img src="https://media.giphy.com/media/RTfuhvOFA3z6ByEujI/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2011)

- Day 12 - Video Overlay 
---
<img src="https://media.giphy.com/media/k0hwDdzC86DPDw2iY1/giphy.gif" width="60%" />

[View code](https://github.com/mewmewdevart/30Days_CSSChallenge/tree/master/30DaysCSS/Day%2012)

- Day 13 - Image Hover 
---

![imageday13](https://user-images.githubusercontent.com/50052600/110960314-5fdcb980-832d-11eb-888e-7dbf1df860f3.gif)

[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).

30Days_CSSChallenge

30Days_CSSChallenge 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

30Days_CSSChallenge

30Days_CSSChallenge 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README