How to Kickstart Your Front-End Career in 2023: Tools, Trends, and Skills

Apologies for not publishing a typical yearly forecast; this piece is aimed at anyone planning to enter front‑end development this year, whether you are just considering it or have already taken a first step.

Overview

Project engineering

Development direction

Career environment

Key frameworks/skills to master

Quick Summary

In 2017 front‑end became more standardized; newcomers who previously charged high fees after short training are now being eliminated by the market.

Front‑end tooling and build tools are maturing; while not as polished as IDEs for languages like Java or C++, modular engineering concepts are gaining traction, and writing raw HTML/CSS/JS is now limited to small projects or beginners.

Front‑end work is increasingly challenging and offers diverse career paths.

Assuming I Want to Dive into Web Front‑End Development This Year

Web front‑end is highlighted because many iOS and Android projects now adopt the "big front‑end" label, largely due to the rise of React SSR.

First, a brief look at the old perception of front‑end:

Old‑school : Photoshop slicing

Beginner : Adobe Dreamweaver

Lazy : UltraEdit, Notepad++ …

Even experienced developers can make careless mistakes; always use IDE error‑checking features.

Modern web front‑end development no longer requires extensive browser‑compatibility hacks, thanks to modern build tools.

The Toughest Domestic Challenge for Front‑End

Outdated browser versions. I once saw a 500‑level Chinese phone using a 2003 WebKit core, while Android kernels were already at 4.x.

Android WeChat stuck at Chrome 35 for a year for stability reasons.

Shell browsers like UC and Baidu wrap the system kernel; they don’t magically improve loading speed.

In the desktop era we dealt with IE6‑8; in mobile we now face legacy Android browsers.

Recommended Editors

ATOM : Currently popular

Sublime Text : Good editor, paid but not enforced

VSCode : Rich core plugins, third‑party updates slower

工欲善其事，必先利其器。

Frameworks evolve rapidly; tools like Dreamweaver can’t keep up with community updates.

Project Engineering

Avoid Meaningless Errors

Engineering concepts are spreading, but they’re still in early stages and not as beginner‑friendly as Xcode. Tools like CodeKit help, but they lag behind fast‑moving frameworks.

Now you should at least set up a local server (localhost). Do not double‑click HTML files for preview; doing so often leads to CORS errors like "XXXXX is not allowed by Access‑Control‑Allow‑Origin".

Deploying IIS or other servers can be cumbersome and may involve paid software.

Thanks to Node.js, tools like Browsersync and webpack‑dev‑server can quickly spin up a project directory if Node is installed.

Front‑End No Longer Directly Writes CSS, HTML, JS

While the statement is exaggerated, the trend is clear: developers increasingly write in higher‑level languages that compile to the browser‑compatible "triad" of CSS, HTML, and JS.

For example, jQuery syntax has been absorbed into ES2015 and native browser support.

CSS

Most developers now write in Less, SCSS, or Sass, then use postCSS plugins to add vendor prefixes.

Example Less code:

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

Compiled CSS output:

.foo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.foo .bar {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

.foo .bar:hover {
  color: red;
}

Using compilation tools saves time and reduces errors.

Other preprocessors include Pug (formerly Jade) and HAML for HTML, and TypeScript or CoffeeScript for JavaScript. Modern ES6/ES7 already provide modules and many features; Babel can compile them for older browsers.

Large Projects Can’t Avoid MV* Architecture

With the rise of Ajax, RequireJS, and front‑end/back‑end separation, a robust module system is essential.

Popular MV* frameworks:

Angular 2

Vue.js 2.0

React

React‑Native

Note: MV* refers to MVC, MVP, MVVM, etc.; understanding the exact meaning isn’t crucial.

I favor Vue 2 and its ecosystem. All these frameworks require a compiler, a project directory, and Node.js.

Koa2 and Express are also worth learning later.

Development Directions

Front‑End Has Two Directions

Interaction‑oriented

Data‑oriented

Interaction‑oriented paths are challenging but in high demand.

Interaction‑Oriented

WebGL, once introduced by Google in 2013, remains a hot topic despite performance challenges. Three.js and Mozilla’s A‑frame are the main libraries for WebVR.

Learning WebGL before WebVR is recommended. Blender can help with 3D modeling; plugins exist to export to Three.js.

Unity3D is an option for those with strong skills and resources.

Data‑Oriented

This is the mainstream path: mastering MV* frameworks, Node.js middleware, and big‑data visualization. Learning D3.js can boost career prospects.

Consider exploring WeChat Mini Programs and Chrome PWA for additional skills.

Personal view: focusing on Add‑to‑HomeScreen functionality can be more practical than chasing every new trend.

Career Environment

The current job market is favorable for front‑end beginners; legacy browsers like IE6‑8 are being phased out, and modern WebKit kernels enable rich web effects.

Tools improve developer productivity, though initial setup may be tedious. Network restrictions can affect npm usage; using cnpm (npm mirror) or configuring proxy settings helps.

Example proxy configuration for macOS:

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

And for Windows:

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

After setting proxies, npm commands and ATOM package upgrades work smoothly.

Summary: Frameworks / Skills to Master

Deploy a Node.js environment

webpack

babel

gulp

postCSS plugins

CSS : Less, SCSS

HTML : Pug, HAML (optional)

JavaScript : ES6, ES7

WebComponents (optional)

Vue.js or React (at least one MV* framework)

Hotfix technologies (e.g., Alibaba hot‑fix) are emerging but not essential.

Other

Angular 2 may require a full rewrite from Angular 1; consider the effort before adopting.

jQuery isn’t dead; it’s being integrated into native browsers. Resources for moving away from jQuery include youmightnotneedjquery.com and its GitHub mirror.

For interaction‑oriented work, explore AE + bodymovin ( GitHub ), SVG, Sketch, and WebGL as needed.

Whatever path you choose, remember:

Stay true to your original intention.