Starting a Frontend Career Through Self-Study (Without a Bootcamp)

Note: I’m trying out a Trakteer page for donations to support my blog/writing, (supports almost all digital wallets) https://trakteer.id/hanipcode . Please support me if you enjoy this post

In this post, I’ll try to explain how to start a frontend career through self-study and with almost no cost at all. Is this the best way? Of course not. Some people benefit from the social side of a bootcamp, where they can learn together. But others actually learn more effectively on their own. Well, this guide is for people in that second group.

Basically, I think the timeline for starting a frontend career should look something like this.

The Attitude of a Software Engineer

Before getting into the material, I’ll first talk about the attitude an engineer should have.

A Desire to Learn

It’s no secret, you won’t survive in the IT world if you stop learning. A software engineer has to be willing and able to keep learning. Frontend development moves especially fast. If you stop learning, your career is guaranteed to stall right there.

Curiosity

A software engineer also needs to be curious. This is what allows you to spend hours working through the bug-solving or bug-fixing process. If your curiosity runs out quickly, you’ll give up sooner and turn to quick-fix solutions.

Be Willing to Read (RTFM: Read The F*cking Manual)

A software engineer has to be willing to read. At the very least, read source code and documentation. Asking something that is clearly already covered in the documentation will often get you roasted by the software engineering community. But that’s fair enough—just so you know, engineers aren’t exactly thrilled about writing documentation either. They already went to the trouble of writing it, and you still won’t read it. Sheesh.

If you look around, successful engineers are often the ones willing to share. Almost every well-known dev has a blog or is active in a community—take Dan Abramov (inventor of Redux) and Kent C. Dodds (PayPal engineer, creator of downshift), for example. They all write or participate in communities. In fact, writing and being active in communities also helped advance their careers—for instance, Dan Abramov and the creator of Babel were eventually recruited by Facebook.

Mastering the Fundamentals

What are the fundamentals of frontend? In frontend, there are HTML/CSS/JavaScript(JS).

HTML

HTML is a markup language used to structure website documents. So learning HTML is a must. It’s even better if you apply HTML best practices such as semantic markup and start learning SEO.

beginner:
- Menyusun dokumen website dengan html

intermediate:
- Semantic HTML5 (utilize tag tambahan seperti main, nav, section etc)

advanced:
- mulai pelajari tentang SEO (meta tag, viewport tag, etc)

CSS

CSS is a styling language used on websites to make them look better. CSS is a very broad subject because it’s also closely related to UX. Here are the learning stages

beginner:
- memahami property property pada CSS
- mampu melakukan styling tata letak sederhana
- mengetahui tentang selector (Id, class, select attribute,  etc)
- mengetahui tentang specificity (ID vs class vs tag vs  important)

interemediate:
- mmebuat animasi sederhana dengan css
- mengetahui  tentang pseudo classes (:before, :after, :nth-child)
- mampu styling dengan framework css
- mengenal basic css preprocessor seperti sass/less

advanced:
- mengenal lebih dalam css preprocessor (function/mixin/etc di sass)
- Mengenal konsep strukturisasi CSS (BEM, OOCSS, etc)

JS (JavaScript)

JavaScript is a programming language that, in the context of frontend, is used to make websites interactive. The scope of JS is actually very broad, so I’ll simplify it here

beginner:
- memahami bahasa pemrograman javascript (varriable, type, control flow, looping, etc)
- mampu menggunakan vanilla javascript untuk interaksi interaksi  simple (jQuery jg masih oke, tapi kebanyakan yang bisa dilakuin jquery udah bisa dilakuin vanilla javascript sih)
- meemahami DOM

intermediate:
- mempelajari konsep Functional Programming dasar seperti closure, higher order function, etc (most of frontend framework mmeilih jalur FP)
- mampu menggunakan Frontend Framework (just pick one React/Vue/Angular)
- Mengenal static typing untuk JS seperti Typescript / Flow

advanced:
- Mengenal engine browser seperti V8
- Mengenal event loop dan microtask
- mengenal lebih  dalam frontend framework (misal advanced pattern seeperti Render Props, HoC, di React)
- Mengenal design pattern
- mengenal lebih jauh konsep konsep FP (currying, monad, etc).

Additional Skills/Concepts

Here are some additional skills/concepts you need to master to support your frontend career

beginner: 
- git basic

intermediate:
- clean code
- scrum (Jira/ trello board at leeast)
- structuring git project (branching/git flow/tagging, etc)

advanced:
- Design Pattern
- Design System
- Technical Leadership

Learning Path

So, how do you start learning? My first piece of advice is to be patient. Learning the basics will definitely get boring

Learn the Basics

First, learn the basic parts of HTML/CSS/JS above. The expected output is that you can build a very simple website and understand the basics of JavaScript. At this stage, focus on learning the fundamental concepts instead of going through tons of tutorials. Even if you do follow a tutorial, make sure you’re also trying to understand the underlying concepts. Once you understand the concepts, if you want to take the optional internship step, start building a portfolio and a GitHub account. You can learn Git concepts along the way too. It’s a good idea to manage every portfolio project you create with Git and push it to GitHub.

(Optional) Start an Internship

If you’ve learned the basics and truly understand the concepts, you can start trying for an internship at a startup or software house. Here’s what you need to prepare if you choose this path

- portfolio
- akun Linkedin
- akun github (berisi portfolio)
- blog (nilai plus)

Learn Intermediate Skills

If you choose the internship path and the company where you intern happens to use a JS framework, you’re pretty lucky because you can kill two birds with one stone. If not, this phase might be the most fun part of learning. Your knowledge is starting to grow, but you haven’t yet faced the reality that you still know very little haha. Learn a frontend framework. My suggestion is to first get familiar with all of them conceptually, then choose the one you like most. After learning, build lots of portfolio projects to prepare for the next phase

Start a Full-Time Junior Dev Job

Just like with the internship option, here are the things you need to prepare. Of course, you’ll need to be better prepared than when applying for an internship. This is also the ideal phase to start a blog or share with the community, because you already have enough knowledge to share. It will also build your personal brand and increase your chances of getting a job.

- portfolio
- akun Linkedin
- akun github (berisi portfolio)
- blog (nilai plus)

Keep Learning and Growing Your Career

Once you get a job, keep learning and growing your career. Start getting into advanced topics. You really won’t run out of things to learn—the things I listed are actually still only a small part of it. And keep moving forward in your career as a frontend developer.

Typical Career Path

Here’s a typical career path for a frontend developer. It’s not the same at every company, but it generally looks like this:

- Intern FE Engineer
- Junior FE Engineer
- FE Engineer
- Senior FE Engineer
- FE Team Leader
- FE Tech Lead
- FE Architect (Principal Engineeer) / Engineering Manager (Frontend)

Free Learning Resources

Here are some resources that might help

W3Schools

https://www.w3schools.com/ is an interactive website where you can learn

Eloquent JavaScript

A free JavaScript book, https://eloquentjavascript.net/ is highly recommended for learning JS

YDKJS (You Don’t Know JavaScript)

A free JavaScript book if you want to read it on GitHub here

JavaScript Indonesia Facebook Group

JS Indonesia Group

Note: Maintaining this blog takes time. If you find this post useful and would like to donate so I can keep writing, you can visit my Trakteer page and make a donation (supports almost all digital wallets) https://trakteer.id/hanipcode . Please support me if you enjoy this post