Welcome to my personal journey through 100 days of CSS! This repository documents my challenge to enhance my CSS skills by completing 100 unique projects in 100 days.
- Sharpen my CSS skills through consistent practice.
- Build a diverse portfolio showcasing a range of CSS techniques.
- Learn and implement modern CSS best practices.
- Share my journey and learning experiences with the developer community.
- HTML5
- CSS3
- Basic JavaScript for interactivity
These days showcase a variety of CSS projects, from a visual representation of the number 100 to an interactive notification panel. They stand out for their creativity and use of animations, transitions, and interactive graphics.
- Visual representation of the number 100
- Interactive animated menu
- Animated scene with day and night cycle
- Animated nesting spheres
- Interactive weekly report chart
- Interactive user profile card
- Interactive notification panel
- Cosmic orbits visualization
- Moonlit rainy night scene
- Wellness dashboard
This series continues with a diverse range of CSS projects, including creative animations and interactive elements like profile panels and image carousels.
- Walking legs animation
- Interactive quote display
- Interactive profile cards
- Animated transportation card
- File upload interface
- Geometric shape animation
- Interactive polygonal art
- Elastic ellipse animation
- Interactive image carousel
- Interactive email send animation
These days offer a variety of projects, from playful animations like Pacman to advanced user interfaces like interactive maps and inspiration cards.
- Pacman eating animation
- Daily progress tracker
- Inspirational quote visualization
- Interactive button with check animation
- Interactive map card interface
- Interactive inspirational cards
- Interactive to-do list
- Bell and lines animation
- Search autocomplete interface
- Circular animation with path drawing
In this section, projects focus on more complex animations and user interface elements like interactive counters, animated weather scenes, and image galleries.
- Dot movement animation
- Interactive counter UI
- Animated weather scene
- Animated text and lines
- Circular loader animation
- Tabbed interface with Material Icons
- Animated card carousel
- Interactive logo switch
- Animated menu icon with dropdown
- Interactive image gallery
IN PROGRESS
Feel free to explore the code for each project. Clone the repo, play around with the CSS, and see how changes affect the design. Great for learning and experimentation!
Suggestions, feedback, and contributions are welcome! Feel free to open an issue or submit a pull request.
- GitHub: Fredy002
- LinkedIn: Fredy Antonio Almeyda Alania
Feel free to explore the code to understand how the styling is achieved and maybe tweak some values to see how the design changes. Happy coding!
All the project ideas are sourced from 100 Days CSS Challenge. I am using these prompts as an inspiration to build and document my own versions of the daily challenges, thereby improving my understanding and skills in CSS. I highly recommend checking out the 100 Days CSS Challenge website if you're looking to enhance your CSS skills through practical projects.