С чего начать фронтенд разработку

Автор: | 13.01.2021

Фронтенд разработка. С чего начать?

Каждый начинающий фронтенд разработчик задается только одним вопросом —

С чего начать изучение фронтенд разработки.

Рассмотрим основные модули, которые нужно необходимо рассмотреть. Итак, приступим

фронтенд

 

HTML5

HTML- язык гипертекстовой разметки, позволяющий представить абсолютно любую информацию на сайте во всевозможных вариациях как со стороны читабельности и понятности, так и с кучей всевозможных вариантов представления, ориентации и эффектов.

Начинайте изучение верстки именно с HTML, так как именно он является основой сайтостроения.

При изучении обратите внимание на мета теги, они в будущем помогут писать технически грамотные каркасы,  что в последствии будет помогать влиять на позиции в поисковом продвижении(СЕО).

Изучая, обратите внимания на такие технологии как Flexbox (интересный игровой тренажер) и Grid Layout(тренажер), которые позволяют более гибко сверстать каркас будущего сайта и иметь при этом хорошую адаптивность.

Для кодинга используйте программы типа Notepad++, VSCode, Atom или что вам привычнее.

Использование препроцессоров и фреймворков при работе с HTML на начальном этапе автор не рекомендует, так как сама по себе HTML разметка не сложная, но в будущем, что бы иметь в резюме строку о дополнительных библиотеках, можно и поюзать.

CSS3

Стандарт CSS3 позволяет нам преобразить страницу из простого линейного типа. С его помощью мы делаем дизайн нашей страницы уникальным или можем стилизовать все страницы огромного сайта одинаково, при этом у нас может быть несколько тысяч страниц. По правде говоря, если вы имеете художественное представление, то вы сможете сделать сайт не похожим на остальные.

Для проверки каких либо свойств и поддержки его в браузерах, мы можем воспользоваться очень полезным ресурсом

фреймворки:

Bootstrap — наверно самый популярный фреймворк для CSS. Знания их не обязательны на начальном этапе, но как показывает практика, прогресс не стоит на месте и вы будете сопровождать множество различных проектов, в которых вы скорее всего встретите это фреймворк. Так же использование фрейворка позволит вам так же получить готовую адаптацию своего проектируемого сайта.

JS

Еще одной неотъемлемой частью фронтенд разработки является применение JavaSccript.

Для того, что бы ваши сайты были динамичными, работали без перезагрузки страницы или  товары добавлялись в корзину, вы будете использовать JavaScript.

Изучая JS вам необходимо четкое понимание о DOM-дереве что бы свободно производить всевозможные манипуляции со стилями.

Что же касается поддержки браузерами, то с этим все в порядке. Так же стоит знать различия между ES6, ES8, ES2017.

фреймворки:

Тут можно выделить основные фреймворки для работы с JS, такие как Vue.js, Angular.js, а так же React.js

Данные фреймворки значительно сокращают работу с JS, но перед их изучением нужно четкое понимание чистого нативного JS

БЭМ:

Методология БЭМ(блок — элемент — модификатор) — компонентный подход в веб-разработке. Методология состоит в том, что бы разделить страницу на независимые блоки.

Основная документация методологии находится на официальном сайте.

Дизайн:

Данный раздел можно посвятить таким программам как Adobe Photoshop, Sketch, Figma, Adobe XD.

Как уже говорилось ранее, для того что бы верстать сайты, желательно художественное представление и знание программ, на которых вы можете сделать себе прототип сайта или отдельной страницы, окна входа в панель управления или всплывающие панельки с предложением подписаться на рассылку. Каждая из этих программ имеет свой ряд преимуществ и недостатков. Выбирайте программу по своему кошельку и функционалу.

 

Вывод

Как вы видите, список знаний для фронтенд разработчика на начальном этапе не слишком велик. Приступая к изучению идите от простого к сложному и вы получите заметный результат уже через не большой промежуток времени.

Так же не останавливайтесь на простых задачах , берите проекты на фрилансе, предлагайте свои услуги всем своим друзьям и знакомым, ставьте себе жесткие сроки по каждой задаче, а так же не забывайте себя поощрять.

Придумайте проект для фроненд разработки уже сегодня и приступите к его реализации.

Удачи

 

Добавить комментарий