I want to step up my game as a Developer!

1

Hello everyone, I am a self-taught developer looking for help to step up my game as a web developer!
I realized majority of the web-based projects are done as a static HTML projects, where it is mostly comprised with HTML, CSS, and JavaScript. Now, I want to step up the quality of my projects to be more interactive and delightful in terms of user experience.

For example, I want to know how to implement a loading screen when the webpage is loading, an interactive animation as the user interact or page fade out for page transitions etc.
These are few websites which I want to know more how they achieved such quality of the website:

Google Cloud Infrastructure
7Up
fff
Nelson Cash
Plastic

I guess my main concern is I want to know how to create more complete, solid, and fun interactive product (website) for the user. Any advices, suggestions for different libraries, frameworks are welcome!

PS - For anyone who’s curious about the level of skill I am at now, I’ll leave a link to my GitHub.

2

For each thing you mention there are many different strategies, so I’d suggest learning them one at a time by searching for guides and examples.

A front-end framework like react or vue could be helpful, but all of that could be achieved with vanilla JS, HTML and CSS if you wanted to.

for the examples you gave, my best guess for what they are using is:

  • Google cloud infrastructure - probably angular, css transitions and keyframe animations, and d3.js for the animated globe
  • 7Up - HTML5 Canvas animations for the fancy animations
  • fff - HTML5 Canvas, possibly 3JS or D3 as well
  • Nelson Cash - svg animations and css transitions
  • Plastic - jQuery, tweenMax animation library, bezierEasing library
1 Like
3

Thanks for this! I’ll definitely have a look at what you’ve recommended :slight_smile: