CODE TONE - ISSUE #001

Kickstarting My Journey: Creative Developer Insights – Issue #1

Yurrr!

Welcome to the very first issue of my newsletter! I'm Thounny Keo, a creative developer and designer, and currently a student in the Front-End Development track at Year Up United. Every Monday, I’ll be sharing my experiences, projects, and lessons learned as I navigate my path toward becoming a front-end developer. Whether you're a fellow coder, a designer, a classmate, or just curious, I hope my journey inspires and informs you.

🎯 This Week’s Focus: Combining Creativity and Code

Being both a developer and a designer, I’m constantly finding ways to blend creativity with coding. This week, I worked on the Vacation Resort Room Cost Estimator, a project that helps users calculate room costs based on several factors like room type, nights, and discounts. I added some cool Bootstrap features to enhance the user interface—design always matters!

Here’s a quick breakdown of what I learned:

  • User Interface First: Good design makes any functionality easier to understand. Bootstrap helped me style the cost estimator beautifully and responsively.

  • Validation Matters: Ensuring that the user input is always accurate is key, so I included some JS validation logic to make sure the results were correct.

    • Here’s the GitHub Repo

    • Also, I wrote a blog post on how it works and how to code it here!

🎥 I Made a YouTube Video!


I’m excited to share my latest tutorial on building an Interactive Activities Page using HTML, CSS, and JavaScript! This is part of my Code with Tone series, designed to make coding fun and accessible for everyone, especially my classmates at Year Up United. 😊

What You’ll Learn:

  • Setting up a basic page layout with HTML

  • Adding JavaScript for interactivity, including dropdown menus and a purchase form

What You’ll Get:

By the end of this tutorial, you’ll have a fully functional Activities Page that lets users explore local activities and purchase tickets.

If you enjoy this video, please like, subscribe, and comment! I’d love to hear your questions or suggestions for future videos. Thank you for watching—let’s learn together! 😊

💡 Project Spotlight: Markdown Note Taker with 98.css

💻 Daily Code Challenge: DAY_009 – Markdown Note Taker


As of 10/27/2024, I’m on DAY_027 of my daily coding challenge series! This week, I want to highlight DAY_009, where I developed a Markdown Note Taker styled with the retro 98.css library to emulate a classic Windows 98 aesthetic.

Project Overview

This application allows users to write, save, and preview Markdown notes in a nostalgic interface.

Inspiration

Inspired by the charm of older desktop applications, I aimed to recreate the simplicity and functionality of Windows 98 while providing a useful tool for note-taking.

Features

  • Markdown Editor: Write notes using Markdown syntax.

  • Live Preview: See your notes rendered in real-time.

  • Save and Edit Notes: Save to local storage, edit, and rename notes.

  • User-Friendly Interface: Built with a retro Windows 98 look.

How to Run

  1. Clone the repository:
    git clone https://github.com/thounny/DAY_009.git

  2. Navigate to the project directory:
    cd DAY_009

  3. Open the index.html file in your browser or use a local server.

Technologies Used

  • HTML5, CSS3, JavaScript (ES6), and the 98.css library for a retro look.

Check out the project on GitHub and see it in action!

🔗 Cool Finds of the Week: GSAP and Smooth Animations

I’ve been exploring GSAP (GreenSock Animation Platform) to create smooth, engaging animations on websites. If you're interested in elevating your web projects with unique animations, check out these cool resources and websites:

  • A fantastic guide on how to integrate scroll-triggered animations using GSAP. It covers key concepts with great examples for anyone looking to add interactive scrolling elements to their websites.

  • As a junior developer, your portfolio is one of your strongest assets. Josh Comeau’s 70-page e-book, "Build a Portfolio that Appeals to Employers," guides you through the process of showcasing your projects effectively to make an impression.

📥 Free Copy Available: Enter your email, and Josh will send you a free copy to get you started!

  • Learn how to use the AnimXYZ toolkit to create unique, interactive, and visually engaging animations in Vue.js and plain HTML.

🔗 Cool Finds of the Week: New Tools and Resources

I’ve been exploring various resources to enhance my web projects. Check these out:

  1. shadcn/ui

    • The shadcn/ui library offers beautifully designed components to accelerate your UI development. Check out the newly added Sidebar component for a responsive navigation system.

  2. Svelte 5 Release

    • Exciting news: Svelte 5 has just launched! This update improves reactivity and streamlines the development process. If you haven’t explored Svelte yet, now’s a great time!

  3. Portfolio Design Inspiration

    • Need ideas for your portfolio? Minimal Gallery showcases various designs to inspire creativity and help you stand out.

  4. Create a Custom Website with Notion

    • Want to build a unique website? Super.so allows you to turn your Notion pages into a custom website effortlessly, perfect for showcasing your work without technical barriers.

🌐 Websites That Inspire

Here are some websites that push the boundaries of creative web development.

  • Quentin Hocdé's portfolio showcases a stunning blend of creative web design and fluid animations, powered by GSAP. His site exemplifies how seamless transitions and interactive elements can elevate user experience, with captivating hover effects and scroll-triggered animations that guide users effortlessly through his work. It's a masterclass in using GSAP to create a highly engaging and visually striking portfolio, perfect for developers looking to push the boundaries of web animations and storytelling.

  • The official GSAP showcase highlights websites that use GSAP for creative, high-performance animations. It’s a great resource if you want to see how others have used GSAP in real-world projects.

3. Lusion

  • Lusion is an award-winning studio known for their use of GSAP in combination with 3D animations. Their work is an incredible example of how powerful and smooth GSAP animations can be, especially when paired with storytelling elements.

  • Victor Ribeiro’s portfolio takes a nostalgic approach by mimicking the look of a Windows 98 desktop. Each section is designed to look like a functional program window, creating an interactive and playful user experience. It’s a creative way to showcase work, blending 3D art, software engineering, and game development into a unique, retro-inspired digital space. A great source of inspiration for those who love mixing design and interactivity with nostalgic aesthetics.

5. Resn

  • Resn’s experimental websites are visually stunning and creatively push the envelope with GSAP. Their use of animations and interactivity has earned them multiple awards in the creative industry.

💻 Creating a Windows 98 Inspired VSCode Theme


I recently launched a VSCode theme inspired by the classic Windows 98 aesthetic! 🎨 This project allowed me to merge nostalgia with modern coding environments. You can check it out on GitHub and explore it on the VSCode Marketplace. Also you can just search in your VSCode extensions “windows98” and you’ll see my theme!

I’ll be adding a dark mode soon (because who enjoys light mode, right? 💀) and plan to include custom icons to enhance the retro experience. Stay tuned for updates!

🚀 Upcoming Projects

Next week, I’m going to kickstart my Gamified Learning Platform. My goal is to make learning JavaScript beginner-friendly with a fun, gamified approach. I’ll be using React for the front-end and D3.js for visualizations. It’s going to be a great experiment in combining education with user engagement.

🌐 Monthly Coding Challenge: Create a Landing Page!

This month, your mission is to design a simple Landing Page for a portfolio, company (real or fictional), or a product launch. 🖥️

Challenge Features:

  • Eye-Catching Hero Section: Include a headline, brief description, and a call-to-action button.

  • Responsive Design: Ensure the page looks great on both desktop and mobile.

  • Highlight Key Information: Showcase important details about the portfolio or product.

Submit your landing pages by the end of the month, and the top three will be featured in next month’s Code Tone! You can either email your landing page directly back to this email, OR you can also submit and showcase your development and design on your LinkedIn and include #CodeToneChallenge for me to find. Let’s see your creativity shine!

📣 Get Involved!

What’s on your mind in the world of coding and design? Have questions or want to collaborate? Hit reply—I’d love to chat! And if you’re enjoying this newsletter, feel free to share it with a friend who might be interested.

Catch you next Monday!

See ya!

Thounny Keo

Creative Developer | Designer

Reply

or to participate.