May 5, 2020Frontend Pattern: Route Object
May 1, 2020Frontend skills for the Web Designer
April 10, 2020Learning Frontend Path
January 26, 2020Podcasts I listen to (Jan 2020)
January 23, 2020Are you too old to start programming
January 22, 2020Use tabs not spaces
October 18, 2019Refactoring Overgrown React Components slides
October 2, 2019Book Review: Factfulness
October 1, 2019Yes, it's a good time to add TypeScript to your project
September 24, 2019Code Review – Best Practices, Guidelines & Process Insights
June 10, 2019Why I read on the iPad
March 18, 2019Software & Hardware I use
March 16, 2019Why I dont use React Router Link component
November 15, 2018Why public money software is not open source?
July 5, 2018How learning Angular made me better React developer
May 23, 2018My 12 tips how to increase your frontend coding productivity

Frontend learning path

Learning frontend is still hot topic. I easily see tons of bootcamps and Udermy courses. Many of them offer quite twisted learning path, inclduing all-possible-buzzwords, so now frontend learning path is also Node, Mongo, PHP, React, Angular - and all of these to get first junior position...

I obviously don't buy this shit. Yes, some guys running all these courses or bootcamps just want to get money so they will give people "certificates" how they tought someone 2-3-4-5 years of learning into 3 months, sure.

For me it's quite easy to say that's bullshit, but I know people who seek their luck learning from scratch don't know that, so I will try to write it down reasonably.

First define what do you want

Most of people just want to change industry to become programmers and they pick frontend, because it's easy to start with. They probably "did some Wordpress 15 years ago, how difficult can it be right?". But that's fine.

Your path will vary depending on your goal.

If you are learning programming as a hobby or some extra skill in your current job (Excel automations or data viz), you will probably choose different technologies or at least focus on different skills comparing to full-time programmer.

If you goal is to get a programmer job, you need to focus on learning what minimum skills and experience you need to have, so someone will be willing to pay you for it. Let's break it down for a front-end programmer position.

Why it's hard to get first programming position

In 2015 when I get my first programming full-time position, it was easier. There were not that much juniors out there, there were almost none programming schools (in Poland) and people weren't realized about high salaries. Now you read about programmers money in newspapers headlines.

Why does it matter? Because market changes every year. One year we need a lot of architects (not software ones), because we build a lot of buildings. Few years later a lot of fresh graduates flood the market, while real-estate crisis makes them unemployed - that's life.

In IT we didn't have that drop for now, but we definitely are flooded with junior/intern/newbie level programmer-wannabes. Senior salaries are still sky-rocketing, while companies don't want to hire juniors anymore. There are just too many of them comparing how many open positions are available by companies.

Why companies don't want to hire juniors?

Let's face the truth

  • Junior is an investment, not an asset
  • Probably most of junior's code will go to trash.
  • Many clients will reject juniors for their projects, because they want "the best men"
  • Juniors are not independent - they require seniors' time
  • Mentoring by seniors cost far more money than junior salary
  • Companies are afraid junior will quit company after gaining some experience

To get first junior position, you need to hack this "junior" stage.

What companies expect from programmers?

The expectations are different depending on position. The lower the position, the more coding programmers do. With bigger experience, more time is spent on meetings, documentations, talking to clients, designing architecture etc.

So let's imagine company X, the software house, hires a junior developer. They need someone who will do coding, because - no surprises here - a lot of this job is coding. But they don't have enough seniors to have senior only team to code some basic stuff. They rather mix the team.

How generic seniority structure looks like

From my experience the typical team's seniority looks more or less within normal distribution

  • ~25% of senior developers, including team leaders, architects
  • ~50% of regular developers, who are doing most of effective work
  • ~25% of junior developers, who are programming not too effective, buy they are investment for the future

This ratio is very effective, because:

  • Too many seniors are too expensive
  • Too many juniors will left them without direct mentor and supervision
  • Not enough seniors will cause serious technological problems related to higher-level design

Being said, most of junior responsibility is to write the code under supervision and learn from seniors. But running a software company isn't a charity - they need to make money. In software houses, they will value programmer by value he can produce related to his salary. It's often not the quality, but the speed and pragmatism. In product companies they will probably value good quality-to-delivery ratio with startup mindset. Companies who outsource programmers will need them to be good enough the client want to pay for them.

What companies expect from junior frontend developer?

Being pragmatic, companies, leaders and managers will delegate tasks related to the skills. Most of jobs can be done by a senior programmer - e.g. senior frontend developer should do excellent CSS, perfect semantic HTML and well designed JS code. Junior can't be trusted to do well JS, but probably can still write good CSS, right?

Most likely junior developers will do easiest tasks, gradually increasing the complexity with time. It's both due to their knowledge and to optimize time of senior developers, who are only capable of difficult tasks.

As a frontend leader, I would expect from junior I would like to hire few, but solid skills, instead of many but shallow.

Company can sell a CSS developer but can't sell someone who knows only a little of everything, without any strong skill

Let's take a website, like the e-commerce shop. We can have the team of 2 - senior and junior. Senior will lead the way, choose technologies, do the client talking, do the API integration, animations etc. Junior will help him with writing HTML templates and CSS styling. If possible, junior will help with minor JS problems, getting experience.

Now let's imagine our junior doesn't know HTML and CSS well and senior has to fix it every time after him. But this junior is a graduate of a frontend boocamp, where he learned CSS & HTML in 2 weeks, then he moved to 1-month JS course, then learned basics of PHP in another month, then React & Angular without even understanding why he needs all of these.

Do you think this junior will be valuable asset? No company will benefit from this scenario, because none of these skill reach the level that can be sold.

Another example will be the language translator. It's better to know one language that will give the translator work, then to learn another language, than knowledge how to order a beer in 15 languages (but nothing more).

My opinion - required frontend skills & learning path

HTML

First thing one should learn is HTML. This includes using HTML5 syntax, data attributes, forms, semantics, basics of accessibility, box model, DOM tree understanding. When basic website can be written without making a mistakes, time to move on.

CSS

After learning the page structure, it's time to learn how to style it. Junior should get what is cascading, know how to structure layouts with Flexbox and Grid, know different types of units, know CSS variables and more-or-less modern CSS features.

This step should end with several coded pages before moving on

RWD

After fluency in writing CSS, one should add RWD on top of that - this means mostly media queries, however it requires changing a lot how to design the code, the way of thinking.

This step should also end up with some projects, could be the same as previous ones but responsvie.

CSS Framework

After fluent CSS, some CSS Framework should be learned. I'm against these libraries (like Bootstrap etc), but understanding what libraries like this do and what are they for is a great value. It builds an abstraction.

This should end with some project coded using Bootstrap or similar. It should not be used before learning CSS first!

BEM & CSS methodologies

When fluent in previous steps, BEM or similar methodology (SMACSS, Atomic) should be learned and used in some projects. The more the better, which will open up the head, showing how different approaches change how the code is written.

Sass

At this stage, HTML and CSS should we quite well structured and well designed. Sass should be learned on top of solid CSS knowledge, since it extends it. One should see the benefit of using multiple files, mixins and nesting and how it helps with structuring the project (term of components should be introduced since BEM is component approach, easily implemented with Sass).

Javascript basics

Term JavaScript is huge and even basics are hard to define - since we start with programming here. When I started, we learned mostly jQuery since it was focused on website manipulation which was majority of JS work during pre-framework times.

I think I would expect

  • Full proficiency with syntax
  • ES6 syntax (I don't care about ES5 in 2020, we have Babel)
  • Understanding Promises, Async/Await and general asynchronous javascript
  • Good DOM API proficiency, like manipulating elements, classes, styles etc
  • Solid data fetching/axios/fetch whatever to fetch data and display it on the screen
  • Forms handling
  • Npm, using libraries, using some build system (Parcel, Webpack etc)

I don't expect any framework here!

TypeScript basics

Typescript actually makes you a better programmer, since you learn advanced concept not available in pure JS. More and more companies are switching to TS and it increases quality of code a lot. It also helps learning, since TS is helping with stupid mistakes. It doesn't have to be advances TS, but just a simple type system.

Basics of testing

Unit tests are the easiest so at least some testing basics should be learned. Even without writing actual tests, learning them will increase the code quality a lot and shows the skill of the programmer. I would say that you will see the skill of a programmer not by his code, but his tests.

Git

Git is total must have. Can be learned at any stage.

Frontend tooling

There are a lot of tools that help with code quality and development performance, like ESLint, Prettier, Git Hooks and much more. Showing this knowledge is a value.

No frameworks here!

As you can see, I didn't include any advanced concepts, any backend parts and no frameworks. I think learning frameworks are good to widen the knowledge, but after the basics are learned.

How learning Angular made me better React developer

Wrap up

I believe these skills are enough to get hired. Obviously every case changes and often people's path will be different. Some companies are so popular, they will have very high expectations. Some companies will just never hire juniors. I know companies who hire only senior+ programmers, so if you aim to one of these, you probably start somewhere else.

Extra pro tips

  • Accept you need any job for start
  • Accept that possibly you will work for free or for a little money. But you will shortly get normal job, because you learn fastest at work
  • Track job offers and check requirements. Then learn them, adjust to the market.
  • Get some programming mentor