Published on

Launching 100 Websites

Authors
  • avatar
    Name
    Ronald Luo, MSc
    Twitter

Check out my progress (53/100):

  1. Rainy | For the rainy moments in life.
  2. Not-Google | Definitely not Google.
  3. Fix-it | Solves any problem.
  4. Hammer-time | Wait a minute...
  5. WeatherApp | What's the weather in Tokyo?
  6. Snake | Be snek, eat squares.
  7. AnimatedNav | Slide meeeee.
  8. Testimonials | Joe approved.
  9. Lucky-Cat | Improve your luck today!
  10. Etch-a-Sketch | Draw something cool!
  11. Rock Paper Scissors | First to five, good luck!
  12. Education Bot | A landing page for a robot?
  13. Find-a-gif | Express how you really feel!
  14. Tic-Tac-Joe | Get over your X, chill with Joe!
  15. Calculator-App | Shoot, what's 9 + 10 again?
  16. Library-App | Smash your reading goals.
  17. The Button | An inconspicuous button appears.
  18. Nodes.js | Calculate the shortest distance between two nodes.
  19. TypeRacer | How fast can you type?
  20. Pathfinder | Visualize a pathfinding algorithm.
  21. Buy-Something-Strange | What could it be?
  22. Game-of-Life-Sim | A simple simulated world.
  23. Whats-my-IP | 127.0.0.1, whatever that means.
  24. Froggit | Reddit but for frogs?
  25. NoNameChat | On the internet, no one knows you're a cat.
  26. NothingHere | You don't need to see this one, there is nothing here.
  27. Is-it-February-29 | Better check to be safe.
  28. Password-Generator | Because you deserve something secure.
  29. Karasuno-Blog | Make an announcement for the Karasuno Volleyball team!
  30. Hello-World | Relax and dream as you drift through space.
  31. Noodle-Docs | A place for uploading noodles to the cloud.
  32. Search-Visualizer | Bread first search? Baguette?
  33. Spacetagram | Sit back and watch the galaxy unfold.
  34. FoodGuesser | What country is that food from?
  35. AccessTest | Check for accessibility issues on your website!
  36. CaesarCipher | Hide secrets from your enemies.
  37. PoseTracker | Oh no, machines have learned to estimate human poses! D:
  38. Tasker | There needs to be at least one checklist!
  39. Animal Cards | Assess your animal crossing memory?
  40. Draw Together | Draw with your friends!
  41. Let's Listen | Download Youtube videos to your device.
  42. Tuxedo-Cat | 24/7 rain stream for study and sleep.
  43. Battleship | Play battleship with friends.
  44. Perceptron | Don't be mean, it's trying it's hardest to learn y = -x.
  45. Media-server | Stream movies to devices over your network.
  46. Chess | When is the next update coming out?
  47. Code-Together | To enable coding with friends!
  48. LockBox | Stop sending yourself password123, for good.
  49. SVGPreview | Convert between svg functions and files.
  50. KanjiGraph | Check out how kanji are related to one another.
  51. MusicTime | I think I've seen this site before...
  52. FlockingSimulator | A boid is a (bird + droid).
  53. MetaPets | A low poly companion that grows when you grow.

~ More to come... ~

Why do something so crazy?

In his novel Atomic Habits, James Clear introduces Jerry Uelsmann, an an American photographer and professor at the University of Florida. "On the first day of class," Clear writes, "[Uulsmann] divided his film photography students into two groups. Everyone on the left side of the classroom, he explained, would be in the “quantity” group. They would be graded solely on the amount of work they produced... Meanwhile, everyone on the right side of the room would be in the “quality” group. They would be graded only on the excellence of their work." So while the quantity group was graded on the number of photos submitted at the end of the semester, "[the quality group] would only need to produce one [perfect] photo during the semester." The results surprised him. At the end of the semester, all the best photos had all been taken by the quantity group. Clear uses this juxtaposition to demonstrate the dangers of aiming for perfection. Instead, to be great at anything, he suggests, one must, "put in [the] reps." Although some readers may recognize this parable through the lens of a ceramics class, the idea is essentially the same. I have always wanted to learn React, master JavaScript, and create beautiful web pages. In 2021/2022, I challenged myself to create 100 websites with the goal of mastering web development.

What technologies did you use?

  • JavaScript
  • HTML
  • CSS / Sass
  • GitHub / Git
  • Node.js
  • Express
  • Webpack
  • React.js
  • Three.js
  • Jest
  • Bootstrap
  • Raspberry Pi

What resources did you use?

  • The Odin Project
  • The Coding Train
  • DesignCourse
  • Three.js Journey

👋  Thanks for making it to the end!

  1. Click here to read more about Deep Work
  2. Click here to check out other articles!
  3. Click here to check out my GitHub!
Discuss on Twitter • View on GitHub