Ask HN: Learning paths for front end dev

[anondevvie]

Hello HN community

I have 250 hours to learn front-end development and I'm asking for advice as to where to focus my attention. I am an experienced systems/backend software engineer, proficient in several programming languages, but not javascript.

Suppose you were a professor who was going to teach a course in modern frontend development. What is your syllabus? What learning path would you design for your students and why?

If you can share how many years of relevant experience you have, that would be helpful.

[johntdaly]

Honestly, I think that question is a bit harder to answer than you might think.

1) I would want you to know enough HTML, JavaScript and CSS to make a simple website. And I can’t really recommend a tutorial or book because this is so basic that modern literature sort of ignores it and the old stuff might not go deep enough (JavaScript) or to deep (CSS) for what you need now.

2) I would wan’t you to learn 2 frameworks. One JavaScript framework (Angular or Ember) and one CSS (Bootstrap, tailwind or any other one). There is a lot to modern JavaScript and CSS that is best experienced by using a framework. You can’t know what you are not doing right if you don’t know it exists.

3) Learn React or Vue. You can also look at implementing web components directly but React and Vue.

4) Build system. Up until recently I would have recommendet learning webpack but that is changing right now and might depend on what your backend choices are too.

You can try to just learn next.js through a book or their tutorial and try to fill in the wholes you have (HTML, JavaScript and CSS) as you go.

You can also try learning JavaScript the language with Eloquent JavaScript [1].

Ultimately a lot of it will boil down to frameworks, integrations and build systems and that is where it becomes difficult for anybody to get into modern frontend development.

[1]: https://eloquentjavascript.net/

[jstx1]

https://developer.mozilla.org/en-US/docs/Learn

> The aim of this area of MDN is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." From there, you should be able to start making your way, learning from the rest of MDN, and other intermediate to advanced resources that assume a lot of previous knowledge.

[u2077]

Know enough that you can build a simple website from scratch, learn a few frameworks that are commonly used by companies (react, angular, vue.js) Check out https://roadmap.sh/frontend - Pick a path that makes sense for you, skip stuff you already know.

[NiagaraThistle]

I have 10+ years of web dev experience. I've worked in-house on a team that built up a e-comm cart from scratch with CodeIgnitor (owner wanted way too much customization for an off the shelf solution - or so we thought at the time...). Worked in an agency putting out custom sites for clients.

Up until maybe 2 years ago I was dreadful with Javascript. I could copy/paste/tweak code snippets but could not build anything with it.

I would recommend Brad Traversy's youtube (https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA) and Udemy (https://www.udemy.com/user/brad-traversy/) tutorials. At least as a starting point. He is a great teacher and takes you from nothing to competency and building multiple projects along the way. He updates his Udemy courses periodically so they are somewhat up-to-date.

This was the order I worked through and I thinks it's all under 200 hours of tutorials, but working through each will obviously take more time. Hope this helps a you as much as it did me.

DISCLAIMER: I have no affiliation whatsoever with Brad, Youtube, or Udemy. This is just what I found useful.

(YT = YouTube, U = Udemy)

HTML Crash Course (YT, 1h);

CSS Crash Course (YT, 1.5h);

Flexbox CSS in 20 Minutes (YT, .5h);

CSS3 Animations & Transitions Crash Course (YT, 30m);

Sass Crash Course (YT, .75h);

Modern HTML & CSS from the Beginning (U, 21h, $15.99);

Bootstrap Beginner Course (YT, 1.25h);

Bootstrap 4 (U, 11.5h, $13.99);

Tailwind CSS Crash Course (YT, .5h);

Materialize CSS from Scratch w/ 5 Projects (U, 10.5h, $13.99);

Javascript Crash Course (YT, 1.5h);

Ajax Crash Course (YT, 1h);

Modern Javascript from the Beginning (U, 21.5h, $16.99);

Pick one framework if you know which you need/want for your job:

React Crash Course (YT, 2h);

React Front to Back (U, 20h, $13.99);

Vue Crash Course (YT, 2h);

Angular Crash Course (YT, 2h);

Angular Front to Back (U, 11.5, $13.99);

Node.js Crash Course (YT, 1.5h);

Node.js API Masterclass with Express and MongoDB (U, 12h, $15.99);

Express.js Crash Course (YT, 1.25h);

MongoDB Crash COurse (YT, .5h);

Build a MEAN JS app in 30 Minutes (YT, .5h) (if you picked Angular above);

MERN Stack Front to Back: Full Stack React, Redux, Next.js (U, 12h, $16.99) (if you picked React above);

MERN Ecommerce from Scratch (U, 15h, $13.99) (if you picked React above);

50 Projects in 50 Days - HTML, CSS, JS (U, 18.5, $13.99);

20 Web Projects with Vanilla Javascript (U, 16h, $13.99);

Typescript Crash Course (YT, 1h)

EDIT: formatting

[krasicki]

Start with Svelte

[anondevvie]

That's a tough one to start with because it doesn't have the ecosystem that others do. The less I build, the shorter my development time.

[Sateeshm]

Svelte has one of the biggest ecosystems since it works great with any vanilla js library

[Sateeshm]

Agreed. Svelte is the most beginner friendly framework.