so currently i'm learning web dev and decided to start building some projects with pure javascript before moving to the frameworks .

knowing that i already learned some react basics and build the simple projects that are listed in the freecodecamp tutorial video . i tried back then to pause before the solution to every problem and did fairly well on applying what i was learning but i never build something big like a e-commerce website with it or a blog or anything that requires databases even though i know mongodb , mysql , oracle databases and previously made a e-commerce website using php which i forgot btw .

i understand the important concepts in javascript lfor example asynchronous operations , objects ,Modules , destructing.

i really need advise like my goal right now is to be able to comfortably build a any web application that requires both front-end and backend .

i really don't enjoy front-end much as much as the code is functional i don't really take great detail in it . although i want to get into machine learning and automation after web dev as it is what i really like and enjoy.

i really need your advice programmers !

I can use Antlr to validate the syntax of an HTML document. What can I use to go a step further, and validate that the 'structure' of an html document is correct? i.e.

html: html_decl head body; head: head_item+; head_item: style|title|script; body: body_item+; body_item: div|p|h; etc

this seems like I just wrote some valid 'structure' validation rules in Antlr. I'm pretty sure Antlr is not meant to achieve this, but i'm ignorant of any implementations that could handle this and i'd like to know if it's possible.

The best I can figure is that I need to write two grammars, one to parse the raw source text, and then a second to parse the object types. Am I thinking about this correctly? Or is there another way?