Если вас привлекает фронтенд разработка, но вы не знаете с чего начать, то эта статья для вас. В ней мы рассмотрим языки и инструменты, которые обязательны к изучению для фронтенд-разработчика.
Как и в любой другой профессии, начинать нужно с основ. То есть, чтобы начать верстать сайты первое, что вы должны освоить — это основы HTML/HTML5, CSS/CSS3 и JavaScript.
Изучение основ HTML/HTML5
HTML — язык гипертекстовой разметки, с помощью которого создается разметка веб-страницы. Это первое с чего стоит начать. Изучите синтаксис, теги и атрибуты, спецификацию и правила написания кода. Научитесь логично называть классы. Об этом подробно написано в методологии БЭМ, которую мы также рекомендуем к изучению.
Изучение основ CSS/CSS3
CSS — это каскадные таблицы стилей, нужны для внешнего оформления веб-страницы. Научитесь работать с цветом, шрифтами, текстом, выравниванием и позиционированием, селекторами. Изучите принципы блочной и адаптивной верстки.
На первый взгляд CSS может показаться простым. Но на самом деле в нем много нюансов. Чтобы узнать его особенности необходимо много практиковаться.
Изучение основ JavaScript
JavaScript — язык программирования, с помощью которого страницы сайта становятся интерактивными. Изучите основы (типы данных, операторы, циклы и пр.), и как работать со страницей (обработчики событий, сборка данных с форм и пр.).
Текстовый редактор
Редактор кода нужен непосредственно для написания в нем разметки, стилей и кода. Выбирайте удобный для вас инструмент — VS Code, Atom, Sublime Text, Brackets. Настройте, установите полезные плагины и вперед!
О редакторах кода вы можете почитать в этой статье.
Инструменты разработчика в браузере
Используйте удобный для вас браузер — Google Chrome или Mozilla FireFox. Оба они имеют встроенные инструменты разработчика, которые позволяют проверять и анализировать, как сайт структурирован, поэкспериментировать с его внешним видом. Также показывают ошибки в разметке и в коде JavaScript, провести дебаг.
Системы контроля версий
Системы контроля версий (Git) позволяют отслеживать и сохранять изменения в вашем проекте, хранить и управлять разными версиями приложения, работать над проектом в команде.
Системы сборки кода
Уметь пользоваться или просто понимать принципы работы систем сборки кода (gulp, webpack, grunt) пригодится и при разработке проектов, и при трудоустройстве на работу.
Вывод
Составьте план обучения и постепенно осваивайте нужное. Приготовьтесь много и упорно работать. Не стесняйтесь спрашивать у знающих людей.
Гуглите. В Интернете полно информации. Только не изучайте все подряд. Не стоит читать старые статьи, ибо они уже не актуальны.
Что стоит читать:
- документацию, например — w3schools.com
- html5book.ru
- habr.com
- medium.com
- tproger.ru
