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
Learn the basics of HTML, CSS and JavaScript. HTML is the framework and basis of all websites, so you need to know what tags are, how to use them, and practice putting <and>. The easiest way to learn on the simulator.
Important skills:
Draft text and format it.
Put links and images.
CSS basics — rules, selectors, properties and cascading.
At least understand a little why JavaScript is needed.
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.
Frontend — HTML, CSS, JavaScript
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.
Learn JavaScript. Find out what variables, types, conditions, loops, arrays and objects are. At least with a dictionary and StackOverflow.
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”
JavaScript courses should explain the base — types, operators, algorithms, functions, loops, objects and data structures. Figure it out and learn how to apply, not just distinguish one from the other.
Profession “React-developer”
Complicated. Figure out the DOM, JavaScript API, and other complex things like OOP, asynchrony, Form validation, or Event Loop. But don’t think about it at the very beginning, everything will come with experience. Yes, and the courses definitely give it. Another professional developer will need the skill of JSON. To do this, you should study data transfer formats, for example, XML, JSON, JSONP and skillfully manage XMLHttpRequest.
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.
After the courses, try to find a job as a junior JavaScript developer – or, in another way, junior.
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.
Why do front-enders need React if there is JavaScript
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.
