🎹

Etudes for the Web Browser
by Jason Tu

Become career-ready in React,
with exercises designed by a senior frontend dev.

Etudes for the Web Browser is a workbook that hones your frontend skills to a professional level with progressive coding projects.

Sign up to be notified when Etudes for the Web Browser is launched:

Or take a look below ↓

So you want to learn frontend development... 🖼️

Maybe you want to get your first job as a junior frontend developer.

Or maybe you have experience under your belt, but you want to dip your toes into the frontend stack at work.

Either way, you run into one of 3 issues:

  1. It's so overwhelming. You're unsure what to learn, what the roadmap looks like, or what might be the perfect course for you.
  2. Tutorial hell. You might watch hours and hours of videos, but still don't feel like you learned anything at the end. You still can't do the job, after all.
  3. Hopelessness. You don't know if you'll ever land that job, or whether your experience is the norm, or whether you're taking too long, or whether you're working on the right projects.

The result? You give up.

You think that frontend work isn't right for you, or that you like backend work more.

And you miss out on a career path that is not only lucrative – good frontend engineers are very well-compensated – but also tremendously satisfying for people who love working on user-facing products.

Build UIs that get used in every part of today's knowledge economy. Frontend is a blast.

But there's always hope... 💡

Overwhelm and tutorial hell are solvable problems.

And if you're looking for a job, all you need is a plan from people who've been in your shoes, and succeeded.

You can do this, if only:

  1. You knew exactly what you needed to learn.
  2. You completely understood the lesson behind any tutorial, and feel like you have a firm grasp of the concepts. Tutorial heaven, not tutorial hell.
  3. You have utmost confidence that you'll get that job, or knock out that frontend task at work. And you feel empowered to put in the work to get there.

But... how?

Become career-ready in React, with Etudes for the Web Browser 🎶

You need a roadmap. A curriculum.

Not one that is more overwhelming, mind you. But rather, one that teaches you exactly what you need to know, so that you can let experience take you the rest of the way.

Thus, I introduce you to Etudes for the Web Browser: a comprehensive workbook of frontend exercises based on my decade of full-stack (and frontend-heavy) software engineering experience.

If you successfully complete all the exercises in this workbook, you will be fit to do frontend development at 95% of companies out there. Heck, I'd even hire you personally.

Intrigued? Take a look at the book's contents below...

1. Tackle overwhelm with a no-fluff curriculum designed by a senior engineer. 🥊

Etudes for the Web Browser teaches a curriculum that contains no fluff, with a heavy emphasis on exercises designed by a working senior engineer.

Although it's in the early stages, here's a rough pass at what the curriculum will cover:

    Chapters

  1. Applying for jobs, and the power of focusing on one application
  2. How to build your skills, with the LEAT framework
  3. HTML, the important concepts to practice
  4. CSS, the important concepts to practice
  5. JavaScript, the important concepts to practice
  6. The DOM, manipulation and scripting
  7. React, the important concepts to practice
  8. Common UI patterns to practice building
  9. Portfolio project

But how is this better than a plain ol' book or video course? That leads us to...

2. Climb out of tutorial hell with the LEAT framework. 🧗

LEAT is a mental framework for learning through action. It stands for:

Thus, every module in Etudes for the Web Browser is structured with the LEAT approach in mind:

  1. Learn, by doing some googling and documentation reading.
  2. Exercise, by doing the module's problem set (which will require writing code of your own). Think of it as a math workbook of sorts.
  3. Apply, by choosing a portfolio project, and thinking of a feature that makes use of your newly learned concepts.
  4. Teach, by writing a summary of how your portfolio project applies the skills learned in each of Etudes for the Web Browser's modules.

The benefit?

Unlike other educational materials that have you wade through hours of video content, Etudes has you solving real frontend problems from day 1.

👇 Here are some examples (click or press this sentence to expand): 👇
  1. Build a fuzzy search UI component to make the Ask HN: Who’s hiring? thread easier to sift.
  2. Build a UI component for gathering user feedback.
  3. Grab all the DOM nodes containing user names on this web page.
  4. Build a diagram maker that allows me to create boxes, arrows, and type text.
  5. Build a UI that makes it easier for me to narrow down my hobby selection from Wikipedia's list of hobbies.
  6. Given this React code, make the design responsive.

And the best part: upon finishing the workbook, you will have a portfolio of mini-projects to demonstrate your newfound skills to any potential employers or bosses.

But if you're in the middle of a career transition, or are otherwise feeling a little hopeless, perhaps...

3. Feel empowered and confident with a step-by-step approach. 🏋️

Whether you are:

  1. looking for your first job,
  2. getting into frontend as an experienced developer, or
  3. just looking to learn some light DOM scripting as a product manager,

different pathways through the book will guide you to your desired learning outcome:

Say goodbye to hopelessness. With the book's focus on action, you can feel empowered – knowing that the only thing keeping you from your goals is putting in the work.

Interested? 👀

Etudes for the Web Browser is a work-in-progress, and hasn't been released yet.

If you're interested, please sign up for email updates as the workbook makes its way to launch:

Frequently Asked Questions 🤔

Who are you anyway, and why should I listen to you?

Etudes for the Web Browser is made by me, Jason Tu.

I've been developing frontend JavaScript applications since the jQuery and Backbone.js days (2013), seen the evolution of MVC frameworks such as Ember.js, and have continued working all the way to today's modern React and TypeScript stacks.

And I have significant professional experience, having worked as a full-stack engineer across many businesses (Wonder, Segment.io, Jet.com, Zynga, to name a few). I've mentored several people at these companies, and bootstrapped them with just enough frontend skills to be dangerous.

In short: I spent my entire 20's doing this (I'm 29 now!). I know my stuff, and I can teach you what I know.

How is this book better than The Odin Project, Scrimba, Udemy, or any of the other course platforms out there?

Many of the courses out there are fantastic. If those courses work for you, then great!

However, Etudes for the Web Browser was born out of frustration. There’s little training material for developers who want to contribute to frontend codebases right away, or want nothing more than to land their first job, but lack a proper understanding of the fundamentals.

In such a situation, you really need something practical – something that gets your hands dirty as soon as possible, taught by someone with hard-won industry experience.

That’s what I hope to provide as part of my book

Will this book be free or paid?

This book will be a paid product. That said, I’m not sure what the pricing will look like yet – I still have to flesh out the workbook’s contents!

What prerequisites should I know before diving into this workbook?

You should have a general familiarity of:

  • how to use a web browser
  • how to use a plain text editor (versus a rich text editor, such as Microsoft Word)
  • the basics of HTTP, web servers, and how browsers work (see my frontend overview blog post for a good rundown)

Assuming you are familiar with the basic concepts of web development, this book will take you further into practical skill territory.

How long will it take to finish the workbook?

This remains to be seen! Once I am finished with the workbook and have tested it with some initial readers, I’ll be able to give a less hand-wavy time estimate.

That said, the workbook is intended to ramp you up on frontend skills as fast as possible. Depending on your goals, you can find immediate value from the skills you learn in early modules – without completing the entire book.

What's included in the workbook?

For now, my plan is as follows:

  1. Produce a workbook.
  2. Produce a set of exercises for each chapter, as well as corresponding answers (which will inlude source code).

I also plan on creating a meeting format for a 1:1 office hours meeting, where we can meet regularly to discuss progress towards goals.

What if I go through the workbook, and still have questions?

For now, you can shoot me an email at jasontu4@gmail.com and I’ll get back to you shortly!

But these plans are tentative, and I’d like to produce the workbook first before deciding on support plans. (There could also be a Discord channel, or office hours, or a GitHub issue tracker for example.)