There are many resources available for learning front-end development from basic to advanced. But I will recommend this path -

.Start with HTML and CSS: Learn the basics of HTML and CSS by building simple web pages. You can use online tutorials or take an online course to learn the basics.
Learn JavaScript: Once you are comfortable with HTML and CSS, start learning JavaScript. JavaScript is a programming language that is used to make web pages interactive. You can learn JavaScript by taking an online course or following tutorials.
Practice building web pages: As you learn HTML, CSS, and JavaScript, practice building simple web pages. This will help you gain a deeper understanding of how these technologies work together.
Learn a JavaScript framework: To take your front-end development skills to the next level, learn a JavaScript framework such as React or Angular. These frameworks will help you build more complex web applications.
Practice building real projects: Once you have a good understanding of the basics, start building real-world projects. This will help you gain more experience and improve your skills.

We will follow these steps . And I will try to write every possible topic from why HTML is invented to s why a front-end application may crash when handling a large number of users.