Most valuable lesson there was in understanding what it's like to work with the native DOM, since that usually gets abstracted away when you throw in something like React/Angular/Vue.

Then I rebuilt the same thing using Angular2+ and React, but paid attention to what set of things were made easier (and in some cases, more difficult).

Once I got the basics down I picked one I liked (React) and began using it and diving more in-depth (best practices, reading blogs, codebases, etc.).

For me I try out sites, discover things I like and then search for it along with the term -jquery or "vanilla javascript" and work out just the code I need.

For reading:

For HTML find a good book on the basics (I had used Visual Quickstart Guide to HTML, but I bet there might be better ones now), for CSS I recommend "Stylin' with CSS" which will keep things simple. Maybe "Handcrafted CSS" to learn how to refine styles even more.

Another great common sense design book is "Don't Make Me Think" will go a long way into determining what would be best in design and UX.

You will find when you drill down to that - you don't need all that much much JavaScript at all. A lot of those templates and frameworks are only great when you don't know what you want but will quickly/easily get the pretty pictures and slick animations, later there's a price to pay to maintain or refactor.

If its HTML/CSS and some javascript to make it work - the best way to learn is probably to just find designs for websites/apps on a site like dribbble and try to hack it together. Try codepend.io as well - looking at how others accomplished something styling you might be struggling with also works well.

If you're talking about the more modern description of front-end - which might mean ReactJS, VueJS, or any of the other hundreds of modern frameworks - I'd say follow some tutorials on YouTube to get the basics and then just practice building simple apps.

For someone who is a backend developer and already knows how to code, it shouldn't be too difficult. You'll probably have a harder time learning CSS and understanding good design and UX.

I often use it as a refresher

So more like learning Javascript/Typescript and Frameworks as for instance React or Vue.js