9 (Other) Projects you can do to Become a Front-End Master in 2020

I love this post by Simon Holdorf. He's got some ideas for you to level up your skills as a front-end developer next year. Here they are:

• Build a movie search app using React
• Build a chat app with Vue
• Build a weather app with Angular
• Build a to-do app with Svelte

... and 5 more like that.

All good ideas. All extremely JavaScript framework focused.

I like the idea of thinking of being a front-end developer as being someone who is a browser person. You deal with people who use some kind of client to use the web on some kind of device. That's the job.

I love JavaScript frameworks, but knowing them isn't what makes you a good front-end developer. Being performance-focused and accessibility-focused, and thus user-focused is what makes you a front-end master, beyond executing the skills required to get the website built.

In that vein, here's some more ideas.

• Go find a Dribbble shot that appeals to you. Re-build it in HTML and CSS in the cleanest and most accessible way you can.
• Find a component you can abstract in your codebase, and abstract it so you can re-use it efficiently. Consider accessibility as you do it. Could you make it more accessible while doing it such that the entire site benefits?
• Install the Axe accessibility plugin for DevTools and run it on an important site you control. Make changes to improve the accessibility as it suggests.
• Spin up a copy of Fractal. Check out how it can help you think about building front ends as components, even at the HTML/CSS level.
• Build a beautiful form in HTML/CSS that does something useful for you, like receive leads for freelance work. Learn all about form validation and see how much you can do in just HTML, then HTML plus some CSS, then with some vanilla JavaScript. Make the form work by using a small dedicated service.
• Read a bit about Serverless and how it can extend your front-end developer skillset.
• Figure out how to implement an SVG icon system. So many sites these days need an icon set. Inlining SVG is a great simple solution, but how you can abstract that to be easy to work with for your workflow? How can it work with the framework you use?