Tools get updated constantly, packages get updated constantly, breaking changes get made almost constantly. Five years from now, your packages probably won't work, and it will be almost impossible to work on a project -- unless you've been maintaining it over the past five years. If your product is your business, of course you're maintaining it. But if it's just a hobby you want to work on sometimes -- then you want to be able to abandon it and then come back later without the pain of figuring out why you can't compile your SCSS, javascript, or similar things.
Learning A can be pretty quick for some basics, learning B is a rabbit hole that can take ages to 'learn'. The good news is most of what you need is for something 'competent' is in A
To answer your points below:
1) Front load your design. The equivalent to Pseudocode for the Front-End is to wireframe. Consider all of your pieces, how they should be grouped, and why. There are some common patterns you'll run into in everyday life. If you find those patterns, draw them on a piece of paper (or your editor of choice, you could do it with mspaint if you wanna). Then you can write out your HTML/CSS. I typically work back and forth. All the HTML, then I CSS, then more html if needed, then more css. etc.
2) An effective Front-End is one which gets the user where they want to go with as little friction *as possible*. Emphasis on as-possible because, just like asap, it doesn't mean "yesterday" it means, "Please prioritize this task above other tasks". An effective FE has a clear idea of purpose and wastes no time achieving those goals. Also, see patterns above. This might not be useful yet but one pattern is to look at the shape of what you're trying to display and allow that to dictate the FE. As an example - almost all documentation sites have a left (or right, or floating) vertical navigation, it takes up maybe 10% of screen width, and then the content of that documentation fill the rest of the width with some amount of padding on the left and right. Consider flipping this pattern. Make the Nav horizontal and the documentation full width to get a feel for why most documentation looks the way it does.
2.1) Some terms to search, "Elements of Art and Principles of Design". I recommend everyone look them up - there are ~20 ideas that reference how we go about making something aesthetic.( Art - color, form, line, shape, space, texture, and value ; Design contrast, balance, emphasis, proportion, hierarchy, repetition, rhythm, pattern, white space, movement, variety, and unity )
3) Uh this is a bit more complicated than I can do in a single comment but maybe we can share discord names if you like the cut of my jib so far.