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.
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?
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?
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.
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.
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
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
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.