Short answer: read articles and books, watch educational videos on YouTube, take simulators and courses, install VS Code and try to write something – in general, learn and practice, nothing will work without it.
There is also a long answer.
Level 1. Familiarity
Draft text and format it.
Put links and images.
CSS basics — rules, selectors, properties and cascading.
Learn to distinguish between frontend and backend. To begin with, remember that the frontend is the visible part of the site, and the backend is invisible. It is needed to get something from the database and insert it on the page.
Backend — PHP, MySQL, Python
Find out why layouts are needed. This is important at least in general terms — designers will bring you their pictures, and you will turn them into code. It is also useful to find a layout for practice — for example, in some channels. It is convenient to practice on such layouts or even put them in a portfolio, the main thing is to ask the author’s permission.
Practice on the layout. First, set up everything on your home computer and experiment there. You can twist the code, break the layout, and write a couple of scripts in PHP.
Level 2. Immersion
Delve into HTML and CSS. Look at forms, tables, flexi, grids, media elements. That is, the whole body kit that can be added to texts, pictures and links.
Working with Git via the console
Get a Github. At this stage, it is better to learn how to use Github and get yourself a repository. You will be able to show good projects to employers, so as not to do all the test tasks in a row when applying for a job.
Where to apply knowledge. Make yourself a website using all the knowledge you have gained. Assemble a page, tell us about yourself and your skills and leave a link to Github. Therefore, it will come in handy. To get inspired, go to Behance and type free site web design or free portfolio site web design in the search.
And don’t be afraid that everything is broken or doesn’t work out. It’s a code, just press Ctrl+Z.
Level 3. Courses
Courses are a short way to avoid collecting information piece by piece all over the Internet.
A good layout course will teach semantic markup, grids, adaptive layout, animations, working with graphics, accessibility and automation. Check that all this is in the program, because you may be asked at the interview.
Course “Professional website layout”
Programs for every day. Deal with preprocessors (LESS or SASS), Webpack for assembly, Git for version control, Figma for graphics export, DevTools for debugging. The terminal was without it.
Level 4. React, Vue or Angular frameworks
The most popular and profitable for frontenders are React, Angular and Vue.js . Different companies need different ones, but React is most common. There are courses on it, too, so try it — you can even take a whole profession, where they will teach everything from the very beginning.
Important — frameworks quickly become obsolete. Therefore, be ready to finish your studies, as you may need Vue.js at your next place of work instead of React, which you are already familiar with.
At this level, you can earn well if you have already worked somewhere, know the basics well and do not get lost in simple tasks. And the longer and better you work, the more you get.