The CHALLENGE #1: Recreate this GIF in HTML & CSS
A few months ago there was a fun little problem posted to Reddit. I gave it a shot, but I thought it might be fun to throw it to the SitePoint readers and CSS conjurers to see what you can come up with.
There are at least 4 approaches that I can think of, but there may be more.
The only prize is the glory of showing everyone the majesty of your CSS skills.
The Challenge
Your task — should you accept it — is to reproduce this animated spinner GIF in HTML and CSS.
As you can see, it’s a looping animation — probably a loading spinner — that transitions from a red circle to a green square to a blue triangle. You’ll also notice the shape rotates clockwise each time it changes.
I’ve set it up as a basic CodePen that you are welcome to fork as your starting point. I’ve embedded the original GIF so you can see what you’re working on.
See the Pen bKmie by SitePoint (@SitePoint) on CodePen.
The Rules
- There are no hard and fast rules. If you want to use JavaScript-powered VRML, go for it! Border-radius, SVG, canvas, whatever.
- HOWEVER: Be aware that simplicity and elegance is king. An efficient, close approximation of the GIF done in 10 lines of code will probably be judged as a better solution than a ‘pixel-perfect’ solution that uses 100 lines. A pixel-perfect 10 line solution trumps all.
- The HTML is one DIV. You’d need to convince us that you had a very good reason to change that.
- Feel free to use any of the functionality provided by Codepen including Sass, Prefixfree.
- Backward browser compatibility will be appreciated but is not central to our criteria
Present your solutions as CodePen links posted to the comments below. You’ve got a week to submit your best ideas.
Your time begins…
Now.
P.S. Keep an eye out for future challenges — I have a few others in mind.
UPDATE:
We looked at what we thought were the best answers and picked our favourite here.
Frequently Asked Questions (FAQs) about CSS Challenges
What is the purpose of CSS challenges?
CSS challenges are designed to test and improve your coding skills. They provide a practical way to apply the theoretical knowledge you’ve gained from studying CSS. By working on these challenges, you can learn how to solve real-world problems, improve your problem-solving skills, and gain a deeper understanding of CSS. They also provide a great way to showcase your skills to potential employers.
How can I recreate a GIF using CSS?
Recreating a GIF using CSS involves using keyframes and animation properties. Keyframes are used to define the styles an element will have at various times. The animation property is then used to apply these keyframes to the element. This can be a complex task, especially for beginners, but with practice, you can create impressive animations using just CSS.
What resources can I use to improve my CSS skills?
There are numerous resources available online to help you improve your CSS skills. Websites like Codecademy, Frontend Mentor, and Codewell offer interactive lessons and challenges that can help you learn and practice CSS. Additionally, you can find many tutorials and guides on websites like SitePoint, MDN Web Docs, and W3Schools.
How can I participate in CSS challenges?
Participating in CSS challenges is usually straightforward. Most websites that offer these challenges will have a ‘Start Challenge’ or ‘Participate’ button. Clicking this button will usually take you to a page where you can view the challenge details and start coding. Some websites may require you to sign up or log in before you can participate.
What are some common CSS challenges for beginners?
Some common CSS challenges for beginners include creating a basic webpage layout, styling a form, creating a navigation bar, and recreating simple animations. These challenges are designed to help beginners understand the basics of CSS and get comfortable with using it.
Can I use CSS challenges to prepare for job interviews?
Yes, CSS challenges can be a great way to prepare for job interviews. They can help you improve your problem-solving skills, learn how to work under pressure, and get comfortable with coding on the spot. Additionally, they can provide you with practical examples of your work that you can showcase to potential employers.
How can I get feedback on my CSS challenges?
Many websites that offer CSS challenges also provide a platform for users to share their solutions and get feedback from others. You can also ask for feedback from your peers or mentors, or post your work on coding forums or social media groups.
Can I use CSS challenges to build my portfolio?
Absolutely! CSS challenges are a great way to build your portfolio. They provide you with practical examples of your work that you can showcase to potential employers. Additionally, they can help you demonstrate your problem-solving skills and your ability to work on real-world projects.
How long does it take to complete a CSS challenge?
The time it takes to complete a CSS challenge can vary greatly depending on the complexity of the challenge and your level of experience with CSS. Some challenges can be completed in a few hours, while others may take several days.
Are CSS challenges suitable for beginners?
Yes, CSS challenges are suitable for coders of all levels, including beginners. Many websites offer challenges that are specifically designed for beginners. These challenges usually focus on the basics of CSS and provide a great way to practice and improve your skills.
Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.
