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

Comments

[Simon Holdorf]

Great advices Chris! I agree that knowing JS libraries and frameworks is only one piece in the puzzle and there is a lot more to learn and master. I, for example, find that soft-skills like emotional intelligence, empathy to some point and the ability to communicate effectively are also very important. If I think about it, I might go and write an article on that.
On a side note: CSS-Tricks is one of my favorite blogs, you have done amazing work and I deeply admire your consistency over the years! And thanks for mentioning me :)

[Ravavyr]

Great article, hits the nail on the head on the whole javascript thing. Too many frontenders focus on the JS frameworks these days. Not that they shouldn't be learning at least one framework well, but understanding HTML and CSS is vital for building cross-browser and cross-device web apps and sites.
Accessibility is gaining important each year and know at least the basics is a plus above most current devs, even the experienced ones often do not yet pay attention to accessibility issues.

Some items I'd add to this list that I think a frontender should know:

• URLs [things like uppercase is not the same as lowercase to search engine bots, and when to use "%20" or "+" in urls versus passing parameters via request parameters like "?bob=1"
• Understanding Meta tags and Open Graph structures and when to use JSON objects versus inline html attributes [mostly this helps social sites and search engines to know what to render when your links show up on them]
• For HTML and CSS learning how to use Media Queries properly for responsiveness [either go all max-widths or all min-widths, don't use both please and min/max-heights should be used sparingly or not at all, but it all depends on what you are building and what it has to look like]
• Practice UI/UX, it's vital that you know how to do form validations, but that you also do it nicely for the user. Like how you display error messages, where they are placed, is it intuitive for a user to know what went wrong and how to fix it. That kinda stuff is incredibly important for frontenders.

There are more things of course, but that's all that comes to mind right now.
Anywho, my 2 cents.

[Jasper Stephenson]

when to use "%20" or "+" in urls

Will you please write this? I have no clue when to use which!

[Tyler V. (he/him)]

I think you forgot to add the last 2 items to your list 😅

[mogwai]

I love this. The Dribbble shot thing sounds intimidating, but I wasn't going to get away with avoiding clever CSSin' for very long anyway!

[Robert Marshall]

I like how accessibility is central, as well as focus on the creative. The two can and should be side by side. Some good ideas!

[WISDOMUDO]

Better advice!!...Thank.

[Pavel Ravits]

I read you every time suggesting this, but I don't understand, what is the point doing form validation in html and css, limiting yourself with what they can offer.
In js you will do it better, faster and will not have to know the current state and limits of the css.

[Pavel Ravits]

You mention accessibility in every sentence. Do companies and freelancers have the budget and time focusing so much on accessibility?
In the end, client pays for features and not bothered about accessibility.
Especially start-ups and these developers that are doing full-stack or full front-end (and not the front of the front-end). They do applications and not only websites.
When you write, it sounds like you are talking to some limited part of the developers - design oriented - front of the front-end.

[leydar]

Accessibility is only expensive when it's retro-fitted. Most browsers have excellent built in accessibility features that you get for free. As long as you do simple things like adding text alternatives to non-text items (alt tags to images). That way they can be translated to audio, large print, braille, different language. Even making sure your tabbed sequence makes sense and having focus on logical inputs is massively helpful. Decent descriptions for video/audio are great too.

Take a look at the WCAG. Focussing on accessibility may seem like a small return but to people with disabilities it means the difference between being able to use your app/site or not.

[Konstantin Meiklyar]

Huge like, great list

[christian mfuke]

thank you for the project suggestion