Here the path I would outline:
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.