š» #109: Build an Animated Landing Page with React.js and GSAP šØ
Plus a $5 message website, a retro GameBoy with CSS, and a time zone app
Happy Friday everyone! What have you been building lately? Iād love to see what youāre working on. It could be your personal website, side project, or an app youāve built. Send it to me and Iāll share it with the rest of the readers!
Iām working on a small app for my friends and Iāll eventually need a landing page for it, Iām going to follow this tutorial when Iām ready to launch!!
Tutorial of the week:
Length: 2.5 hours
This weekendās tutorial is by JavaScriptMastery, they consistently put our great tutorials on web development.
What youāll learn this weekend:
React.js āļø
Tailwind CSS šØ
GSAP annimation šØ
3 frontend projects of the week:
Use these projects to inspire future projects of your own.
1. Five Dollar Message
This project was created this week by Florin Pop. He made a website where you can get your message featured at the top of the page for 10 minutes. Thatās it! Very straightforward but simple idea that could be built very quickly. If you have a large enough audience, like Florin, you could probably make some decent money!
2. Nintendo GameBoy with CSS & JS
HTML, CSS, JavaScriptI love a CSS version of real-life items. I think itās the mark of a strong developer to be able to recreate something accurately with CSS and HTML. This project is by Manz.dev. Great job!
3. Meridian App
This simple app compares time across multiple time zones. Great for when youāre working with teams spread across the globe!
Thatās all folks!
I hope you enjoyed this weekendās edition of Weekend Web Dev!
To keep the tutorials flowing and support my newsletter, consider fueling my creativity with a coffee āļø - every cup makes a difference!
Your fellow weekend developer,
š«¶š Are you looking for personalized feedback?
Do you have a portfolio, website, CV, or code snippet you would like some feedback on? Iād be happy to review and provide my input. Itās free for feedback, but if youād like to support me and the newsletter you can buy me a coffee. Then just reply to this email with whatever youād like to review.
Useful (free) resources
Here are some excellent beginner resources for learning JavaScript
Mozilla Developer Network - the leading resource on JS
FreeCodeCamp - free course
CodeAcademy - intro to javascript - free course
Odin Project - full stack javascript - free course
Eloquent Javascript - book (many people struggle with this book)
javascript.info - reference resource
Traversy Crash Course in Javascript - video series
Intermediate/advanced material
JavaScript Design Patterns - free book
Professor Frisby's Mostly Adequate Guide to Functional Programming - free book
What the heck is the event loop anyway? - JSConf talk about the event loop
Understanding the Weird Parts - paid course covering more advanced topics
Deep JavaScript: Theory & Techniques - free book
Software
Code Sandboxes
Other handy sites