You can also read the post at my blog, progress will be updated there
Despite working at a few large tech companies, I know very little about web development and especially frontend development - most of my time is spent on machine learning models. That's the curse of specialization, perhaps.
I have always been quite 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. This year, one of my goals is to get self-sufficient with building web projects end-to-end, and learning frontend development is one of the main items to tackle.
I thought about 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
- Knowledge, breadth: become familiar with frontend development tools and process overall.
- Skills, depth: establish my own workflow with a set of tools of choice, comfortable making frontend changes/projects.
- Practical experience: have a few actual, small projects under my belt to gain practical experience, silly projects are OK/encouraged.
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 Notes and Projects 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.
HTML
I considered it to be pretty self explanatory and didn't dedicated anytime here, I'll trust Google/StackOverflow moving forward 🤞
Just kidding, I had a bit of experience before using HTML and datatables for putting together small data dashboard sites (all the pages are compiled beforehand). So I feel I knew enough here to get started.
CSS
Here is a quick 1.5-hr crash course that's pretty fast paced, but fairly minimal/basic. I'd expect a ton of Googling later.
Javascript (Browser and Node.js)
This is a new language to me, here is a great and quick summary I read through. I also took two Udemy courses last year: one for the language itself, one for using it on the server side with Node.js. 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 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 Svelte seems to be gaining a lot of popularity. Overall, I feel React is more mature/well-supported, decided to go with it. 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 course on Udemy but too fed up with the lengthiness and verbosity and decided to just read the docs on reactjs.org, which is excellent.
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 Next.js offers in terms of hybrid static & server rendering it does, I was so impressed and think this is thing I was looking for.
Also to note, I tried out the deployment tooling at Vercel 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.
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 Lee Robinson for putting out a lot of great content on Next.js, check out his courses, repos and content. Here is one of his courses that's pretty practical with an actual app.
UI Framework / Design System
After some tinkering with Material UI, 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.
TypeScript
I took a very quick look at TypeScript for JavaScript Programmers, and played around with it by converting a small JavaScript project into TypeScript. 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 documentation and this tutorial on YouTube, and can highly recommend it.
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.
Top comments (6)
This is scary.
And then seeing all that React!
We tutor boot camp grads all the time, and they get rushed through HTML and CSS - and JS - and straight to Bootstrap and React. Then if they don't have "hooks" they can't make anything / and they have very distorted models for how everything works.
Consider just starting to build things: Maybe a "business-card" style website to start. MDN HTML and CSS references. This way, you are making something practical right out of the gate. You can also get help in the CSS Discord.
If you learn in order of necessity - you will loose a lot less time. The less code to get the goal the better right? No one has ever had the goal of "having a website" or "learning web pack." The goal is usually something else - and those are just tools to get there. If you set goals like "learn about coding" then that's what you'll get. Consider setting a measurable goals - with timelines.
Consider these books as a guide:
This is great advice. Everything ends up as HTML, CSS and JS in a browser, so treating two of those three things as unimportant (ie, spending more time on Webpack than HTML) is not a great strategy, imo.
Yeah, I totally agree on building a solid foundation on html, I was trying to wing it with CSS and ended up wasting a lot of time.
I added something in the post to call out this point
Good call, I will definitely spend some time to cover the HTML basics :) Thanks for the pointers!
Thanks Jeff. I'm just figuring this out as I go along :)
good advice