- Code Tone
- Posts
- CODE TONE - ISSUE #002
CODE TONE - ISSUE #002
30 Days, 30 Projects: What I Learned & Where I’m Headed
Thounny Keo
November 04, 2024 • Estimated Reading Time: 13 minutes
Yurrr!
Welcome back to Code Tone! After 30 days of daily coding, I’m thrilled to share that I’ve officially completed my Daily Code Challenge. This journey has been transformative, teaching me the value of consistency, creativity, and pushing boundaries. Coding every day has given me the confidence to tackle new projects and go deeper with every line of code.
🎉 Daily Code Challenge Wrap-Up
All 30 projects are now live on my GitHub. This collection captures everything I’ve learned over the past month. I’ve already created a dedicated directory page for easy viewing, so don’t forget to check that out if you haven’t already! Each project showcases a different skill or technology, from animations to UI components and beyond. It’s been an incredible learning experience, and I’m excited to keep building from here.
🔍 Reflections from the Challenge: Lessons from 30 Days of Coding
Finishing the 30-Day Code Challenge was more than just checking off a goal—it was a journey of growth, creativity, and daily learning. Each project had its unique lessons, but here are some standouts from the challenge:
Consistency Builds Confidence: Coding daily, whether I felt ready or not, boosted my confidence. I could see my skills improve day by day, especially with JavaScript and interactive elements.
Overcoming Roadblocks: There were definitely days when I hit a wall—bugs that seemed unsolvable or design elements that didn’t quite fit. Pushing through those moments showed me the power of persistence. By the end, I found myself approaching problems with a completely new mindset.
Creativity in Code: Projects like my Markdown Editor with 98.css and Windows 98 VSCode theme allowed me to combine my love for design with development. It was so fulfilling to see ideas come to life, reinforcing that coding is a creative outlet, not just a technical skill.
Awwwards Rebuilds: Some of my favorite projects were inspired by Awwwards-winning websites. Rebuilding these sites from scratch taught me how to implement modern animations, effects, and layouts that make a website stand out. It was a challenging process, but the payoff in understanding these advanced techniques was worth every moment.
The daily practice has shown me that each day brings an opportunity to learn, create, and explore. I’m excited to carry these lessons forward and keep pushing the boundaries of what I can build. Here’s to continuing the journey!
🛠️ Cool Finds of the Week
Here are some amazing resources I’ve been exploring to enhance my projects, discover new designs, and level up my skills. Whether you’re looking for interactive components, design inspiration, or development tools, there’s something here for everyone!😊
Hover.dev offers beautifully crafted React components built with Tailwind CSS, Framer Motion, and JavaScript animations. Each component is designed for smooth, engaging interactions, making them ideal for creating modern web experiences. If you’re working with React and looking for ready-to-use, interactive components, this is an excellent resource.
Think of Are.na as a more thoughtful, curated version of Pinterest. It’s perfect for gathering and organizing inspiration. I love how this platform brings together creatives with a focus on visual and conceptual content—ideal for developers, designers, or anyone wanting fresh ideas without the noise of typical social media.
see anything familiar???
This inspiring portfolio belongs to Yihui, a former Apple designer. Minimal, impactful, and visually compelling, Yihui’s site is a masterclass in clean design. It’s a fantastic example of how to present a personal brand with simplicity and style. Highly recommended for anyone working on their own portfolio!
13g Studio is a creative studio that showcases what’s possible with bold design choices and creative layouts. Their site feels like an art piece itself, pushing the boundaries of web design. It’s an excellent resource for inspiration, especially if you’re interested in branding and interactive design.
Need a quick way to share beautifully formatted images of your code? Carbon makes it easy. Whether you’re looking to create clean screenshots for social media, tutorials, or presentations, Carbon ensures your code looks polished and professional. Just paste your code, choose your style, and share.
This site brings a touch of magic to design inspiration. Design Spells curates unique, visually stunning designs that are both modern and creative. It’s my go-to resource when I’m looking for fresh, out-of-the-box design ideas. If you’re looking for something with a bit of flair, you’ll love it!
Git is an essential tool for any developer, and even seasoned coders benefit from having a cheat sheet. This resource from GitHub Education is a quick reference for common Git commands, perfect for anyone needing a quick refresher. Whether you’re new to Git or looking to brush up, it’s always handy to have on standby.
An intuitive, user-friendly editor for creating README files with live Markdown preview. This tool is great for anyone working on project documentation and makes it easy to create structured, clean readme files. And of course, if you’re a fan of Markdown, check out my Windows 98 Markdown preview for a retro-inspired alternative 😎
This JavaScript roadmap provides a comprehensive guide to mastering JS. It’s a resource I keep returning to, especially when exploring new JavaScript frameworks or tools. It also includes roadmaps for other languages and technologies, making it a versatile resource for devs at all levels.
Accessibility is more than just a feature; it’s a necessity in tech. This guide provides insights into creating accessible digital experiences, from simple tips to in-depth strategies. Back in college, I took ASL1101, where I was introduced to the world of resources for the hard of hearing. Learning about this community was eye-opening, and it reminded me of how crucial accessibility is, both in life and in technology.
❓ Question of the Week: What’s Your Biggest Coding Challenge Right Now?
I’d love to hear from you! What’s the biggest coding challenge you’re facing at the moment? Whether it’s learning a new language, tackling JavaScript animations, or mastering CSS layouts, I want to know what you’re working on and how I can support you.
Reply to this email or share your thoughts on LinkedIn and tag me! Your feedback helps me tailor future content to topics that matter most to you.
🔗 Missed This Last Week: Webflow & GSAP Integration
I can’t believe I forgot to mention Webflow’s integration with GSAP in last week’s issue! If you’re a fan of animations, GSAP’s integration with Webflow is an amazing tool. It allows you to create custom animations without delving deep into code. The possibilities with GSAP are practically limitless when it comes to dynamic, engaging websites. Whether you’re building your portfolio or a client’s project, this combination is a powerhouse for interactive design.
📚 Learning Spotlight
GitHub Spark Hype
There’s a lot of hype surrounding GitHub Spark lately. It’s exciting to see how new tools are pushing the boundaries of collaboration and development. Spark might even shake up some of the smaller startups focused on Git-based solutions. Watching this unfold is a reminder of how fast tech moves!Builder.io’s Visual Copilot 2.0
Builder.io is back with an upgraded Visual Copilot, now in version 2.0. This new update introduces a range of features that streamline design-to-code workflows, making it easier than ever to create visually rich sites with minimal coding. Check out Builder.io’s Visual Copilot 2.0 to see what’s new!New Open-Source Emotional Text-to-Speech Model
Meet F5-TTS, an open-source model that brings an emotional touch to text-to-speech. It’s designed for expressive, lifelike storytelling. You can check out F5-TTS on GitHub if you’re interested in building interactive media with a human element. It’s perfect for projects that require a more engaging auditory experience.
🌐 Monthly Coding Challenge: Create a Landing Page!
This month’s challenge is to design a simple landing page for a portfolio, company, or product launch. 🖥️
Challenge Features:
Eye-Catching Hero Section: Include a headline, description, and call-to-action button.
Responsive Design: Make it look great on all devices.
Highlight Key Info: Showcase the essentials about the portfolio or product.
Submit your landing page by the end of the month to be featured in Code Tone! You can send it via email or share it on LinkedIn with the hashtag #CodeToneChallenge. I’m excited to see what you come up with!
🫂 Shoutout to My Support Network
A huge thank you to my peers, teacher, coach, and program managers at Year Up United. Your support, encouragement, and guidance have been instrumental in getting me here. Each of you has played a vital role in my journey, and I couldn’t be more grateful. Here’s to more learning, growth, and coding!
I’d love to hear what you think about this week’s issue of Code Tone! If you enjoyed it or found a resource that helped you, let me know! Feel free to connect with me on LinkedIn and GitHub to follow my journey more closely.
If you’re feeling inspired, share your favorite part of this newsletter on social media and tag me—I’d love to see your thoughts and connect with others who share a passion for creative coding!
Let’s build a community where we can learn, create, and grow together.
📅 Looking Ahead
With the Daily Code Challenge complete, I’m diving into new projects and revamping my portfolio. Expanding on projects like my Markdown editor and VSCode theme is high on my list, and I can’t wait to share more with you all.
Sneak Peak for my 2nd Capstone Project at Year Up United 👀
ignore the folder structure…
Thanks for reading, and catch you next Monday for more updates, resources, and inspiration!
Catch you next Monday!
Reply