Практическое руководство по изучению развития переднего конца для начинающих

Автор оригинала: FreeCodeCamp Community Member.

Никита Руденко

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

До начала

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

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

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

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

Теперь мы все начать начать! ?

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

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

Основы

Базовый HTML и HTML5 и Основные секции CSS являются основы современного Интернета. Прикладной визуальный дизайн, прикладная доступность и адаптивные принципы веб-дизайна научит вам основы написания хороших веб-сайтов. Не спешите и следите за тщательно, это основные строительные блоки в ваших знаниях.

Вы можете дополнить учебу с отличным руководством по Интернет жесткий Отказ

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

CSS Flexbox.

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

И, наконец, практика, играя захватывающие Flexbox FrOggy игра. ?

CSS Grid

Сетка более продвинута и гибкая, но в большинстве случаев Flexbox вполне достаточно. В любом случае, у вас будет еще один мощный инструмент в вашем арсенале. Особенно, если это так легко понять, когда вы выращиваете свои культуры в Сетчатый сад Отказ ?

Упражняться

Прежде чем перейти к финальным проектам, я рекомендую вам сделать это:

1. Создайте учетную запись на Кодепен . Это классная площадка для переднего конца, где вы можете создавать свои проекты, тестировать свои фрагменты и практиковать.
2. Установите Редактор кода На вашей машине и научитесь работать с этим.
3. Узнайте основные основы командной строки от Это видео WES BOS или Рабочий мастерский на удобность.
4. Узнайте, как использовать Git в этом Плейлист от Netninja.
5. Получить некоторую направленную практику. Выберите любые проекты из Этот плейлист по обрванию носителя и кода вместе. Построить их, пока не чувствуешь себя уверенно. Было бы здорово, если вы уже используете редактор кода и контроль версий, и загрузите работу на специальное исследование REPO на GitHub.

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

Иди и постройте свои последние проекты и поделитесь их?

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

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

Раздел JavaScript FreeCodecamp отличный Но я очень советую посмотреть на J avascript.info в качестве дополнительной справки. Это лучший ресурс, обеспечивающий всеобъемлющую информацию для всего, связанного с JavaScript.

Больше рекомендаций

1. Базовый курс JavaScript Beau Carnes, если вы предпочитаете визуальные гиды.
2. Что касается нового стандарта для JavaScript, мои фавориты – великие курсы ES6 для всех! (оплачено) WES BOS и Современный JavaScript Beau Carnes.
3. Регулярные выражения Курс на Scrimba.
4. Объектно-ориентированный JavaScript Курс Netninja был очень полезен для меня.

Алгоритмы

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

Как небольшая помощь, я советую вам смотреть JavaScript Cardio Sessions по обрванию СМИ.

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

Чтобы найти прочие претенденты на 100 дней, включая меня, перейдите к настройкам вашей учетной записи и введите # 100Дасофкод в поле клана.

Прежде чем приступить к финальным проектам, вы должны быть подготовлены к финальному боссу, кассовым аппарат. ?

После того, как вы побьете это, я могу сказать это …

… Теперь вы знаете, как работать с JavaScript! ?

Прилипать вещи вместе

Теперь пришло время взять JavaScript 30 Вызов WES BOS. Это лучший способ узнать, как работают HTML, CSS и JavaScript вместе, пользуются вашими знаниями о основах, и понять DOM. Создание этих маленьких проектов было отличным опытом и очень веселым для меня!

Передние библиотеки

С этого момента вы становитесь настоящим разработчиком переднего конца?

Загрузка

Самые популярные CSS Framework. Постройте пару сайтов вместе с гидами на YouTube. Привыкайте к знаменитую колонну Bootstrap.

jquery

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

Сасс

Я не был полностью оценен CSS Frameworks, пока я не увидел свою реальную власть. Я хотел изучить передовые методы CSS и купил удивительную Усовершенствованные CSS и SASS Курс (платный) Джонас Шмедтманн. Настоятельно рекомендуется, если вы хотите полировать свои навыки CSS и понять рабочий процесс. Я все еще рад, что я нашел это.

Реагировать и redux.

Это основная часть сечения библиотек переднего конца. React – отличный выбор в качестве первой библиотеки JavaScript для изучения.

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

Мои личные фавориты:

1. Полное учебное пособие на реагирование (с redux) от Netninja
2. Реагировать для начинающих (оплачено) WES BOS
3. Реагировать – полное руководство (оплачено) акантаминд

Я надеюсь, что вы взволнованы, чтобы использовать ваши новые знания о финальных проектах.

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

Двигаться дальше

Теперь вы настоящий интерфейс разработчика сейчас и достаточно навыков для создания отличных веб-приложений. Может быть, вам любопытно, что делать дальше, и ответ так же просто, как “Построить, построить, построить!” . Ваша текущая задача – создать портфель для себя и получить больше практики.

Вот несколько советов для вас на что делать дальше:

1. Получить идеи для проекта в Взять домашние проекты Раздел на FreeCodeCamp.
2. Создайте любой проект вместе с курсом, затем измените и улучшайте его, добавив новые функции.
3. Shalle d3.js и node.js, чтобы получить следующие сертификаты FreeCodecamp!
4. Читать Красноречивый JavaScript и Вы не знаете JS стать JavaScript Ninja.
5. Улучшите свой ранг на кодовых направлениях.
6. Получите вкус расширенного веб-дизайна от этого Веб-дизайн для веб-разработчиков курс.
7. Держите свой аккаунт GitHub Account и попытайтесь внести свой вклад в открытый источник.

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

Я надеюсь, что это руководство поможет вам с вашим обучением и, надеюсь, сэкономить вам время?

Удачи!

Оригинал: “https://www.freecodecamp.org/news/a-practical-guide-to-learning-front-end-development-for-beginners-da6516505e41/”