Start

If I have to pick only one website in all of the internet for recommended to the learner of front end, that must be MDN. You can find everything about front end you should know over here.

Some people start their study by Vue or React. In some case, that’s not a bad idea. You can build your web quickly with many templates in github. But, you will find you don’t know why and how to fix if some bugs appear.

At my past job, I met a guy who wrote a dozen lines of CSS just to center a DIV horizontally(I replace it with margin: auto;). Or copy the code with the same function but don’t know to change the variable name. That’s hard to say. If I hadn’t actually work with them, I wouldn’t have thought anyone would make this mistake.

Basic is important. You don’t need to remember them all the time. Just read them once attentive. Then you will know what you can do and what you cannot. That’s important. Especially you know what you can do, you can use chatgpt or similar tools to implement functions instead of writing them yourself.

Next

Js is different from html or css, you should read it carefully several times, and need more hands-on programming. At this step, I recommended The Modern JavaScript Tutorial. And you should start learning about browsers. Then Promise. Then ES6+. (This is the official website, may be a bit complicated, you can start by this Turorial).

After you know more about js and browser. You can study the popular framework now. React or Vue. Compare them by implement the demo in their websites and choose the one you like more. The front end has developed rapidly over the years. So you can go deep into the underlying implementation of these frameworks after you have enough understanding of the front end.

End

You shuold build your website successfully now. You can say that you are an entry-level front-end developer. There’s a lot stuff I didn’t say before but you should know, but I’m sure you already know a little bit.

  • Build Tool: webpack, vite
  • CSS+: Sass, Stylus, PostCSS, Less
  • Test: Jest, Enzyme, Puppeteer
  • Browser compatibility/difference
  • TypeScript
  • DNS, CDN
  • HTTP, HTTPS, WebSocket
  • Npm, Yarn, Npx
  • Code Style Guide: JS, CSS, JSX
  • Performance: FP, FCP, FMP, TTI
  • DevTool: Lighthouse, Performance
  • Server-side Rendering: Next.js, Nuxt.js
  • Design Patterns
  • WebAssembly

And as a programmer, I think you must know: data structure and algorithm.

As you see, their are much more things you have to learn.

Now answer a question:

What happens when you type a url into your browser?

Here is an answer from Jenna pederson as comparison.

There are also much more stuff I hadn’t talk, like live video, h5 games, 3D rendering, electron. But I think you know where to find these and how to implement.

Have fun.