DEV Community

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

Chris Coyier on October 11, 2019

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

Read full post

Simon Holdorf • Oct 11 '19

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 • Oct 11 '19

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 • Nov 16 '19 • Edited

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

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

Pavel Ravits • Oct 13 '19

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 • Oct 13 '19 • Edited

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 • Oct 15 '19 • Edited

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.