Перевод статьи «A practical guide to learning front end development for beginners».

Я начал свой путь в сфере фронтенд-разработки весной 2018 года, то есть, чуть меньше года назад. С того времени я приобрел некоторые навыки, но понимаю, что мне предстоит изучить намного больше. Тем не менее, я решил собрать в одной статье все, что могу посоветовать другим начинающим разработчикам. Эта статья – именно такое руководство, которое я сам хотел бы почитать год назад.

Прежде чем начать

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

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

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

В качестве отправной точки я советую зарегистрироваться на freeCodeCamp. Все мои советы базируются на их курсе. Я считаю этот курс отличным ресурсом по следующим причинам:

1. План обучения. Он может стать для вас основной направляющей. Это хорошо структурированный обзор того, что вам предстоит выучить, предусматривающий хорошую кривую обучения.
2. Упражнения. Они небольшие, что позволяет легко поддерживать взятый темп, выполняя по паре каждый день.
3. Проекты. После завершения каждой части вы создаете 5 проектов для получения сертификатов. Это идеальный способ получить некоторую практику и закрепить полученные знания.
4. Сообщество. FreeCodeCamp это больше чем платформа для обучения. Это форум, блог и YouTube-канал, где разработчики разного уровня делятся своими знаниями. А также это место, где вы можете найти вдохновение.
5. Это бесплатно. Для многих людей деньги могут быть очень серьезным ограничением, а на этой платформе вы не потратите ничего, кроме времени.

Дополнительный совет: можно создать себе аккаунт в Twitter (если у вас его еще нет) и публично участвовать в 100DaysOfCode challenge. В этом движении принимают участие много людей. Благодаря ему вы получите мотивацию и поддержку, а кроме того это поможет вам не сбавлять темп. Я настоятельно советую вам попробовать. Не стоит стесняться: вливайтесь в сообщество и получайте от этого удовольствие.

А теперь приступим!

Отзывчивый веб-дизайн

Первый раздел курса freeCodeCamp охватывает основы того, как создаются статические сайты и как к ним применяются стили.

Основы

Разделы Basic HTML и HTML5, а также Basic CSS это основа современного интернета. Разделы Applied Visual Design, Applied Accessibility и Responsive Web Design Principles научат вас основам написания хороших веб-сайтов. Не спешите, продвигайтесь только по мере усвоения материала: это основные строительные блоки в ваших знаниях.

Дополнить эти разделы можно отличным руководством Interneting Is Hard.

Далее вам нужно будет освоить CSS Flexbox и CSS Grid. Прежде чем приступить, ознакомьтесь с этим коротким обзором различных подходов к созданию макетов, которыми люди пользовались до эры Flexbox-Grid. Вряд ли вам когда-либо случится их применять, но знать, как все было устроено раньше, довольно полезно. А еще это позволяет почувствовать благодарность за то, что у нас уже есть новые технологии.

CSS Flexbox

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

И, наконец, попрактикуйтесь, играя в затягивающую игру Flexbox Froggy.

CSS Grid

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

Практика

Прежде чем перейти к завершающим проектам, я советую сделать следующее:

1. Создайте аккаунт в Codepen. Это отличная «песочница» для фронтенда, в которой вы можете создавать свои проекты, тестировать отрывки кода и практиковаться.
2. Установите на свою машину редактор кода и научитесь с ним работать.
3. Изучите основы командной строки – здесь вам поможет видео от Wes Bos или Shell Workshop на Udacity.
4. Научитесь пользоваться Git с помощью этого плейлиста от NetNinja.
5. Попрактикуйтесь немного, следуя туториалам. Выберите любые проекты из этого плейлиста от Traversy Media и пишите код, который будет в видео. Занимайтесь этим, пока не почувствуете себя увереннее. Будет здорово, если на этом этапе вы освоите редактор кода и систему управления версиями и будете загружать свои работы в специальный учебный репозиторий на Github.

Теперь вы готовы получить свои первые сертификаты!

Постройте ваши проекты, завершающие этот этап, и поделитесь ими.

Алгоритмы и структуры данных в Javascript

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

Раздел JavaScript на freeCodeCamp очень хорош, но я также рекомендую в качестве дополнительного источника javascript.info. Это лучший ресурс, где в доступной форме изложено все, что касается JavaScript.

Другие рекомендации

1. JavaScript Basics Course от Beau Carnes – если вы предпочитаете визуальные руководства.
2. Что касается новых стандартов JavaScript, мои фавориты – отличные курсы ES6 for everyone! (платно) от Wes Bos и Modern JavaScript от Beau Carnes.
3. Курс по регулярным выражениям на Scrimba.
4. Также мне очень пригодился курс Object-Oriented JavaScript от NetNinja.

Алгоритмы

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

Вам может немного помочь просмотр JavaScript Cardio Sessions от Traversy Media.

Для практики я советую зарегистрироваться на CodeWars и поставить себе начальную цель в 6kyu. Это очень полезно, потому что при завершении любой задачи вы можете посмотреть решения других людей и обогатиться новыми приемами, подходами и идеями.

Чтобы найти на CodeWars людей, участвующих в 100DaysOfCode (включая меня), перейдите в Account Settings и наберите #100DaysOfCode в поле Clan.

Прежде чем перейти к завершающим проектам, вы должны быть готовы к «схватке» с Cash Register (кассовым аппаратом). А когда вы его одолеете, можно будет сказать, что…

…теперь вы умеете работать с JavaScript!

Собираем все знания воедино

Теперь пришла пора взяться за Javascript30 challenge от Wes Bos. Это лучший способ изучить, как HTML, CSS и JavaScript работают вместе, отточить ваше знание основ разработки и разобраться с DOM. Мне было очень интересно создавать эти маленькие проекты, а кроме того, это был отличный опыт!

Библиотеки фронтенда

На этом этапе вы становитесь настоящим фронтенд-разработчиком.

Bootstrap

Самый популярный CSS-фреймворк. Постройте с его помощью пару сайтов по руководствам на YouTube. Освойте знаменитую колоночную сетку Bootstrap.

JQuery

Хотя кто-то может сказать, что jQuery мертва, использование этой библиотеки пригодится в тех случаях, когда решить проблему на чистом JavaScript сложновато, а использовать JS-фреймворк уже перебор. Это будет еще один отличный инструмент в вашем арсенале. Создайте с его помощью пару простых приложений, чтобы попрактиковаться.

Sass

Я был неспособен по-настоящему оценить CSS-фреймворки, пока не увидел их настоящую силу. Вот тогда я и захотел изучить продвинутые техники CSS. Для этого я купил прекрасный курс Advanced CSS and Sass (платно) от Jonas Schmedtmann. Рекомендую обратиться к нему, если вы хотите отточить свои навыки CSS и понимание рабочих процессов. Я все еще очень рад, что нашел его.

React & Redux

Это основная часть раздела, посвященного библиотекам фронтенда. Если вы думаете, какую библиотеку JavaScript изучать первой, React будет прекрасным выбором.

Честно говоря, в формате freeCodeCamp сложно понять, как работать с этой библиотекой, поскольку там вы не можете создавать что-либо с нуля, а работа некоторых вещей вообще от вас скрыта. Поэтому пройдите отдельный курс по React и Redux, уделите время тому чтобы понять их идеи и инструменты.

Мои фавориты среди ресурсов:

1. Complete React Tutorial (with Redux) от NetNinja
2. React for beginners (платно) от Wes Bos
3. React – The Complete Guide (платно) от Academind

Надеюсь, вы будете в восторге от возможности применить свои знания в завершающих проектах.

Теперь вы можете построить все, что захотите.

Идем дальше

Теперь вы настоящий фронтенд-разработчик и обладаете навыками, достаточными для создания веб-приложений. Вероятно, вам интересно, что делать дальше. Ответ прост: «Строить, строить и строить!». Ваша текущая задача – создать портфолио и приобрести больше практики.

Вот несколько советов насчет дальнейших действий:

1. Идеи для проектов можно найти в разделе Take Home Projects на freeCodeCamp.
2. Создайте любой проект, следуя какому-нибудь туториалу, а затем измените его и улучшите путем добавления функционала.
3. Возьмитесь за D3.js и Node.js, чтобы получить следующие сертификаты от freeCodeCamp!
4. Чтобы стать мастером в JavaScript , читайте Eloquent JavaScript и You Don’t Know JS.
5. Повышайте свой уровень на Codewars.
6. Почувствуйте вкус продвинутого веб-дизайна, пройдя курс Web Design for Web Developers.
7. Поддерживайте свой аккаунт на GitHub в активном состоянии и старайтесь участвовать в open source.

Если что-то из этого вам не подойдет, ничего страшного. То, что сработало для одного, не обязательно должно подойти каждому.

Надеюсь, это руководство поможет вам учиться быстрее. Удачи!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]