I have always been very curious about the whole web frontend development ecosystem. It seems to me technology and developer tooling evolve very fast, and people have done a lot of creative things in this space in the last several years. Being completely ignorant to frontend it also added motivation for me to make a commitment this year (new year resolution!🎉)  to become proficient at frontend development. I was thinking what I could do to keep myself more motivated and accountable and decided to write down my goals, plan and updates here as I make progress. Goals My main goals are: become familiar with frontend development tools and process overall. Knowledge, breadth: establish my own workflow with a set of tools of choice, comfortable making frontend changes / projects. Skills, depth: have a few actual, small projects under my belt to gain practical experience, silly projects are okay / encouraged. Practical experience: Plan and Progress Updates Here is a basic breakdown of the key components in the tech stack that I know of so far. I will keep adding sections as I learn more. Under each section, I will also add updates (with dates) later on progress made or adjusted views. I'll summarize the outcome in and sections at the bottom of this page. I plan to write posts to document my learning - some posts will be "learning notes" documenting something I learned or how I figured something out, other posts will be about some standalone projects. I hope writing help me develop more clear understanding of the subjects and create useful future reference. Notes Projects HTML I considered it to be pretty self explanatory and didn't dedicated anytime here, I'll trust Google / StackOverflow moving forward 🤞 CSS Here is a quick 1.5-hr that's pretty fast paced, but fairly minimal / basic. I'd expect a ton of Googling later. crash course Javascript (Browser and Node.js) This is a new language to me, here is a great and quick I read through. I also took two Udemy courses last year: for the language itself, for using it on the server side with Node.js. summary one one I found these courses much lengthier than necessary, and can't really recommended them to others. I skipped most of the exercises and some topics - I plan to leave that experience to actual projects. It was still good to get some context on practical applications and tooling setup. React New frontend frameworks show up every year, but Vue and React seem popular and here to stay. More recently seems to be gaining a lot of popularity. Overall, I feel React is more mature / well-supported, decided to go with it. Svelte For an quick comparison of other frameworks see the chart below from . State of JS 2020 Regarding learning resources: I was attempting to go through this on Udemy but too fed up with the lengthiness and verbosity and decided to just read the docs on , which is excellent. course reactjs.org Some problems with React: React seems to be completely client-side rendered and is geared towards SPAs (Single Page App). This brings some difficulties. A complete web app / website will have some app pages and some content pages (like its landing page, blog content, FAQ etc). Client-side rendering these static pages that don't really have much UX / interactivity will be both unnecessary and probably catastrophic for SEO - slow page load speed compared to server-rendered/pre-rendered static pages, and crawler might have trouble executing client side JS. One solution is to complete separate these static/content pages from the app. But for these content pages, it would be nice to reuse the same set of UI components from the React app (buttons, navbar etc). So completely separating also isn't a great option. Here is where Next.js comes in. Next.js (still using React, but better) After reading about what offers in terms of hybrid static & server rendering it does, I was so impressed and think this is thing I was looking for. Next.js Also to note, I tried out the deployment tooling at and really liked it. Previously to make a web app, we'd need to host the backend server somewhere (say AWS or Heroku), and deploy the frontend bundle somewhere (e.g. Netlify or S3 with some CDN). So there are always kind of two places to deploy to and to pay for - a bit of a hassle especially for small projects. Vercel With Vercel, it handles the CDN for all the static assets, and hosts all the server side logic (api routes) as serverless functions executed on AWS Lambda (I think), so you really have zero hosting infra to worry about. This is getting into a bit of backend, but hard to not talk about it given the issues we face with React alone. Historically Express.js has been the de facto standard here for Javascript developers, but Next.js has become a serious contender. See the chart below from . State of JS 2020 I want to give a big shoutout to for putting out a lot of great content on Next.js, check out his courses, repos and content. Lee Robinson UI Framework / Design System After some tinkering with , it just felt a bit too convoluted. Perhaps I just didn't get it. After watching that React 2025 course videos, I decided to go with Chakra UI, will see how it goes and report back. Material UI TypeScript I took a very quick look at , and played around with it by converting a small JavaScript project into TypeScript. TypeScript for JavaScript Programmers The comfort and confidence writing with Typescript  is excellent, and I can see for a bigger project / bigger team this is going to be super useful / mandatory, something I'll revisit as my project get bigger. The adoption can be incremental anyways. Webpack In the process of setting up TypeScript project I also got to learn a bit about Webpack. When we write client side code with lots of dependencies, we need to somehow build them into something (a bundle) the browser can run), there are many browsers to accommodate. Webpack is a pretty popular and powerful tool for this bundling task (though I haven't really looked at others). It has a lot of flexibilities to customize the build process, so you can add additional steps, like processing TypeScript to JavaScript before transpiling and polyfilling so your code is compatible with older browsers. Webpack also makes it possible to handle non-code dependencies, like images, css or even markdown files. One reality though is that the modern frameworks such as React or Next already provided build script and you largely don't need to deal with Webpack directly, but in various project if you want to customize things a little bit (like add an post-proccessing step, or copying some files somewhere), knowing a bit about Webpack comes in handy. I learned everything I knew about Webpack from its and this , and can highly recommend it. documentation tutorial on YouTube Testing I haven't really done much here, it seems Mocha, Jest and Cypress are good to check out. Another super high satisfaction but currently lower usage one is . Testing Library Previously published here .

Google

Heroku

Super

YouTube

Next.js: Firebase Authentication and Middleware for API Routes

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

My Personal Plan to Learn the Whole Web Frontend Development Ecosystem in 2021

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Next.js: Firebase Authentication and Middleware for API Routes

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Next.js: Firebase Authentication and Middleware for API Routes

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps