50 Projects in (more than) 50 Days

It was easy for me to make the decision to buy ‘50 Projects in 50 Days – HTML, CSS & Javascript‘ because it’s another course from Brad Traversy.

I’ve followed a number of Brads’ courses in the past, and find that they are a great way to get some insight into the approaches that people use for writing code as well as just being great ways to learn (or practice) skills just by doing it.


Developer muscle memory

A number of people would likely be put off by a course like this as is essentially a code-along.

You could copy all the source code that’s shown and not actually understand any of it – but still have the ‘work’ to show for it.

I see it as a great way to just get more experience writing code. That’s not always easy to get when you don’t have any ‘real’ development tasks to carry out each day.

I would of course recommend that if anyone was following along and they didn’t understand something, that they get themselves over to the appropriate documentation and work out what’s going on.


Just keep swimming

At this stage in the FrontendFolio process, my projects are usually practical experiments based on other courses/resources.

I completed a course, or learn something new, then I go and think of different ways that I may be able to apply that learning to a real-world project/problem.

That can take a bit of thinking and planning before I can start coding.

For the days and weeks that I’m unable to dedicate too much time to writing anything towards those projects, a course like the 50 Days, 50 Projects one is perfect.

It lets me get some more time served in VS Code. I have been using the command line for creating a new copy of the boilerplate folder & files for each project, and for making my Git commits.

This might be overkill because I can do the same things just as easily in VS Code, but it works for just making sure that I don’t forget the fundamentals too easily.


My 50 Projects (Github repo)

I plan on re-visiting each of these mini-projects in the future to make some tweaks or refinements as I learn other things – obviously, that’s the whole point of this approach/blog.

I’ve already seen some examples that would benefit from more semantic markup.

Other projects have shown me some ideas for how I might tackle some other Accessibility considerations in other projects.

I think this is one of the fundamentals of my approach – to take new learnings and apply them to previous projects/work where they can make something more valuable overall.

  1. Expanding Cards
  2. Progress Steps
  3. Rotating Navigation
  4. Hidden Search Widget
  5. Blurry Loading
  6. Scroll Animation
  7. Split Landing Page
  8. Form Wave Animation
  9. Sound Board
  10. Dad Jokes
  11. Event KeyCodes
  12. FAQ COllapse
  13. Random Choice Picker
  14. Animated Navigation
  15. Incrementing Counter
  16. Drink Water
  17. Movie App
  18. Background Slider
  19. Theme Clock
  20. Button Ripple Effect
  21. Drag N Drop
  22. Drawing App
  23. Kinetic CSS Loader
  24. Content Placeholder
  25. Sticky Navbar
  26. Double Vertical Slider
  27. Toast Notification
  28. Github Profiles
  29. Double Heart Click
  30. Auto Text Effect
  31. Password Generator
  32. Good, Cheap, Fast Checkboxes
  33. Notes App
  34. Animated Countdown
  35. Image Carousel
  36. Hoverboard
  37. Pokedex
  38. Mobile Tab Navigation
  39. Password Strength Background
  40. 3D Background Boxes
  41. Verify Account UI
  42. Live User Filter
  43. Feedback UI Design
  44. Custom Range Slider
  45. Netflix Navigation
  46. Quiz App
  47. Testimonial Box Switcher
  48. Random Image Feed
  49. Todo List
  50. Insect Catch Game