Using Dribbble and StackBlitz to improve your frontend skills

This is how you can quickly and easily practice your front-end development skills or even build web apps.

Using Dribbble and StackBlitz to
improve your frontend skills

In this post, I illustrate how you can use these Web Applications to practice your Front-end development skills quickly and easily.

Outline

  • Is this post for you?
  • What to expect?
  • Why use Dribbble & StackBlitz?
  • Dribbble
  • StackBlitz
  • Frontend Technologies
  • My current experimentations
  • Starter Projects
  • Follow Tutorial Online
  • Conclusion

Is this post for you?

Team work, work colleagues, working together
Photo by Annie Spratt / Unsplash

This might be relevant to you if you're a Junior Web Developer or aspiring to be one. Or maybe you were previously working on the Front-end, but you are nowadays doing something else.

If you want to stay in touch with these skills while inputting the least time and effort, you can benefit from this post.

What to expect?

It was at the end of the day… we were heading to godafoss…that walk was lighted with this fabulous sunlight behind this mountain… what a show!
Photo by Khamkéo Vilaysing / Unsplash

Web Development is on a continuous rise nowadays. Therefore, if  anyone can grab this opportunity, he or she should do it.

I’m primarily a Web Developer but working nowadays on Automation Testing.

Therefore, I like spending a few hours per week just to stay in touch with CSS and perhaps a tiny bit on the latest frameworks that are relevant to my industry.

The journey is the aim.

I don’t focus on building anything but instead fill my technical breaks with interesting stuff to let my mind wonder.

In that way, I don't also lose motivation in my day to day work.

Why use Dribbble & StackBlitz?

This duo is a good way to improve your front-end development skills. You don't need to create wire-frames or designs yourself. You can inspire yourself from those on Dribble.

With StackBlizt, you don’t need to manually install the technologies such as nodeJS on your machine. Moreover, you can save additional time by reusing existing starter projects such as Angular with TailwindCSS.

Dribbble

Dribbble is an excellent platform for inspiration. You can begin playing with simple designs especially for Mobile. This is how I experimented with different outlines when learning flexbox.

Dribbble

StackBlitz

With StackBlitz, you get a fully working environment within a few clicks.

You can sign in with your Github account and start focusing on your next project.

StackBlitz

There are also other alternatives you can try such as Plunker.

Frontend Technologies

You can select among the most popular frameworks such as:

  • Angular -> Highly in demand in the Enterprise world
  • ReactJS -> Popular, especially with frameworks such as NextJS
  • VueJS -> Easier learning curve compared to others
  • Svelte -> Latest kid in the block

CSS libraries / frameworks

My current experimentations

At work, we use Angular. That's the reason I mostly use this framework. But I also have experience in ReactJS and VueJS.

Starter Projects

As I mentioned above, you don't need to create projects from scratch. There are plenty of starter packs with the technologies you want.

Follow Tutorial Online

List with bullet points for a tutorial
Photo by Markus Winkler / Unsplash

Another huge benefit of using tools like StackBlitz is you can follow online tutorials and courses without having to manually create repositories on your local machine. This might be even more relevant if you don't have admin access or your computer is too slow.

Conclusion

Photo by Element5 Digital / Unsplash

Learning new things, experimenting on new technologies and/or improving existing skills takes a lot of time and effort.

The more friction there is, the harder it is to do consistently.

Using Dribbble gives you inspiration so that you don’t need to think it yourself.

Use of StackBlizt to quickly and effortlessly setup a project from existing ones without having to start from scratch.

I’ve found this combo to work well for me if I need to practice or keep in touch with certain skills.

Otherwise, I can also use Figma and StackBlizt to design some ideas which I can work on for a couple of hours per week.

For me, the journey of developing these skills is more important than the end results themselves.