XML Schema - https://www.amazon.com/Definitive-XML-Schema-Charles-Goldfar...
You don’t have to be a slave to some framework to do frontend web work. You can actually learn how these technologies actually work.
1. XML Schema by Priscilla Walmsley - https://www.amazon.com/Definitive-XML-Schema-Priscilla-Walms...
2. DOM Scripting by Jeremy Keith - https://www.amazon.com/DOM-Scripting-Design-JavaScript-Docum...
3. CSS Pocket Reference - Eric Meyer - https://www.amazon.com/CSS-Pocket-Reference-Visual-Presentat...
Most of the developers I have worked with in my career are absolutely terrified by tree structures. They will admit otherwise like some kind of pathological liar, but this is easily exposed and that's so unfortunate. A tree structure is just a data structure like any other and embracing that liberates you from a kind of Stockholm Syndrome.
DOM Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith
Great book and interacting with the DOM is essential to performance in any kind of browser work. Unfortunately most developers today are completely terrified of the DOM, as in PTSD and need counseling terrified.
DOM Enlightenment - https://www.amazon.com/DOM-Scripting-Design-JavaScript-Docum...
Definitive XML Schema - https://www.amazon.com/Definitive-XML-Schema-Charles-Goldfar...
I am a better developer because of building my thinking about software around a deeper appreciation of data structures setting goals by focusing on personal considerations of ethics.
Books that have improved me but not my career:
Principles - https://www.amazon.com/Principles-Ray-Dalio-audiobook/dp/B07...
Lots and lots of fiction.
1) Start with HTML. You don't need to memorize every tag. Just remember HTML tags describe content. If you encounter HTML tags that that primarily change the appearance of things ignore it and purge it from your memory. Learn that HTML describes and structures the content in a way that is meaningful to blind people reading the page content.
2) DOM. The DOM is the Document Object Model. This is both the glue and backbone of all front-end web technologies. If you don't learn this you are hopelessly pissing against the wind hoping some framework does your job for you. Sadly, most front-end developers never learn this, and its perfectly clear. With a good DOM resource it takes about 2-4 hours of practice to really master and its a skill that stays with you forever. Here is one I wrote many years ago: https://prettydiff.com/2/guide/unrelated_dom.xhtml
I also recommend this book learning the DOM: https://www.amazon.com/DOM-Scripting-Design-JavaScript-Docum...
In learning the DOM you will encounter several basic DOM methods for accessing things in a page, or navigating content (walking the DOM). Gain a good understanding of the basic concepts, but don't spend the time memorizing anything yet. We will come back to this.
3) Learn CSS. CSS is a presentation only language that does not impose any meaning or navigation onto the HTML or text content of the page. You can tell expert front-end developers from pretenders by their fear of CSS. CSS is like a strategy board game in that it takes only a few minutes to really learn but an enormous amount of practice to really do amazing things comfortably. For CSS I recommend this book: https://www.amazon.com/CSS-Pocket-Reference-Visual-Presentat...
For practicing CSS I recommend a few CSS Zen Garden attempts. CSS Zen Garden was an old playground where you take a given sample of HTML content and using only CSS you radically changing the output into some creative work of art.
* CSS Zen Garden - http://www.csszengarden.com/
* My zen attempt from 2008 - http://mailmarkup.org/zen/
Learning the DOM you will understand that HTML structures content into a meaningful way and that structure is a tree system of nodes. Many CSS rules cascade down that tree. You don't need any JavaScript to learn CSS.
4) Learn JavaScript. JavaScript is a high-level general purpose programming language that happens to natively run in web browsers. You need something to write JavaScript, but a good code editor is helpful. People will try to convince you to use a bunch of tools, packages, and frameworks to write JavaScript. As you are learning you don't need any of that. It is just bullshit that distracts you learning.
One exception to the tool rule is Node.js. Node allows writing JavaScript that executes in a command terminal. There is also Deno that does the same thing, but its new and not quite as mature.
It is hard to say how to learn any programming language while remaining neutral and objective. As a front-end developer you will largely be learning to write JavaScript that runs in the browser and supports user interaction. I recommend learning events and how to dynamically modify CSS rules. You will need to know how to access various parts of the HTML page for your code to do anything meaningful. This is where those DOM methods matter. Learning the DOM methods is important because it reveals that the HTML page is just a big data structure and everything on that page is immediately available to you with little effort. Most people never learn to access the page like this anymore, and so they are crippled beggars at the mercy of something else to do it for them, which is unfortunate because it requires so very little effort to learn.
Since JavaScript is a general purpose language with extensive practice you may find yourself learning to write programs with it or something else not directly related to user interactions. It takes time and practice to gain the level of comfort where you realize you can do nearly anything with these technologies.
If you don't know how to do unobtrusive JS, I would recommend DOM Scripting by Jeremy Keith: http://www.amazon.co.uk/DOM-Scripting-Design-JavaScript-Docu...
1. If you want to be good at this start with a solid foundation. The compile target of the browser is the DOM (Document Object Model).
2. Read about accessibility: https://www.w3.org/WAI/standards-guidelines/wcag/ Understanding accessibility will influence why things are done in certain ways and will make clear the difference between presentation and developers who may not understand this platform as well as they claim.
3. Learn about events and asynchronous execution.
4. Finally, learn to program JavaScript, but understand OOP is optional and considerably more work.
If you can build even the most minor of confidence in those 4 areas you will become a stellar developer compared to your peers working on this platform.