Note: This is a generic template for all of our challenges, specific challenge names and dedicated screenshots can be found in our application.
This is a quick, engaging 24-hour coding challenge template designed to hone your HTML/CSS skills, with room for creativity and interactivity with JavaScript. Your task is to create a web page based on the provided screenshot from BigDevSoon.
Hello to BigDevSoon 👋
Dive into this short but exciting challenge to sharpen your coding skills. Build something amazing in just 24 hours!
Your goal is to recreate the design seen in the provided screenshot. This challenge focuses on HTML/CSS but feel free to add animations and JavaScript interactivity to elevate your solution.
-
HTML/CSS Skills: Practice converting designs into functional web layouts. Perfect your understanding of positioning, layout, and styling.
-
Creative Problem-Solving: Put your creativity to the test. Experiment with animations or interactive elements to make your page stand out.
-
Rapid Development: Experience the thrill of a time-bound challenge. Learn to manage your time effectively to deliver a polished project.
Embrace the freedom of choice in your implementation. Whether you're using familiar tools or experimenting with new ones, make this challenge uniquely yours.
You have several options for your coding environment:
-
Built-in Editor: Start coding immediately using our built-in code editor with HTML, CSS, and JS tabs, plus a live preview feature.
-
Glitch: Opt for Glitch if you prefer a cloud-based editor for quick starts and live previews.
-
GitHub: Use GitHub to manage your code if you're comfortable with Git and wish to showcase your work on your GitHub profile.
Feel free to choose the environment that suits your workflow best.
-
ChatGPT Integration: Our integrated ChatGPT tool is available to assist you with coding questions and challenges.
-
Community: Connect your Discord account to participate in our community and share your progress.
Take a moment to review your work before submission:
-
Self-Review: Check that your solution closely matches the design and functions as expected.
-
Community review: If you're looking for external opinions, our community is a great place to turn. Fellow developers can offer fresh perspectives, pointing out areas for refinement.
-
ChatGPT Review: Use the integrated ChatGPT for a final check and suggestions for improvement.
-
Design Fidelity: Strive for a close match with the design. However, creative variations are welcome, especially if they enhance UX/UI. Tools like PixelParallel can assist in ensuring design accuracy.
-
Code Quality: Ensure your code is clean and efficient. Extensions like Prettier and ESLint, for VSCode users, are invaluable. For beginners, platforms like Glitch simplify the coding journey.
-
Testing: Ensure your page is responsive and works well across different devices and browsers.
Ultimately, the beauty of this challenge lies in the journey and the learning. Use tools that make your workflow efficient and add your unique touch to the design. 💡
Submit your solution at any stage via the "Submit" button on the challenge page. Remember, the focus is on learning and growing through practice.
Tag Check: Ensure the <bds /> tag is present in your index.html. This is a crucial step as we'll verify its presence during submission.
Celebrating and sharing your accomplishments is a great way to both reinforce your learning and inspire others. Here's how you can do it:
-
Your Solution: Once you've submitted your solution, it becomes a part of your portfolio. Share your unique solution link directly from your solution page or use our "Share solution" widget. There, you'll find various social platform buttons to help spread the word effortlessly.
-
Challenges Page: Loved the challenge? Share the Challenges with your network. We'd love to receive a little bit of recognition! ❤️
-
Invite Friends: Excited about our platform? Spread the joy! Every time you invite a friend using your unique link found in the Profile or Settings section of our app, and they register, you earn 1 BigToken. Sharing truly is rewarding!
-
Technical write-up: Documenting your journey and the technical decisions you made can be an enriching experience. Platforms like dev.to, HackerNoon, and Medium are excellent places to pen down your thoughts. Not only does it help build your online presence, but it also solidifies your understanding.
-
Create Free Content: Making tutorials or content around how you tackled the challenge can be both fun and educational.
Remember, every challenge has a story. Sharing yours might inspire someone else to begin their own. Keep coding, and keep sharing! 🌟
Happy coding! 🚀