Если вы ищете отличные инструменты и ресурсы для повышения своих навыков фронтенда, читайте далее о бесплатных веб-сайтах, каналах YouTube и других ресурсах, которые помогут вам стать лучшим разработчиком фронтенда.
Овладение навыками front-end разработки с помощью огромного количества ресурсов может стать непростой задачей. Большинство людей застревают в состоянии под названием «Tutorial Hell», которое возникает, когда вы прекрасно следуете за учебником, но все идет не так, когда вы пытаетесь построить свое приложение на основе того, что вы узнали из учебника.
Что такое «ад учебника»?
Tutorial Hell — это состояние, когда большинство новичков продолжают смотреть обучающие видео, читать несколько книг и статей, чувствуя, что они продвигаются по пути разработки, но на самом деле они статичны (никакого реального прогресса не зафиксировано).
К счастью, есть два основных способа выбраться из этого ада. Это:
-
Изучение и понимание основ необходимых концепций для изучаемой технологии, в данном случае — front-end веб-технологий (HTML, CSS и JavaScript).
-
Отрабатывайте полученные знания на практике, создавая проекты самостоятельно.
Лучшие ресурсы для изучения и понимания основ фронтенд-веб технологий
Существует множество хороших ресурсов для обучения фронтенд-разработке, но выбрать из множества вариантов лучшие и те, которые подойдут именно вам, иногда бывает непросто.
Я составил список некоторых из лучших ресурсов для обучения фронтенд-разработке, основываясь на следующих критериях:
- Количество загрузок и отзывов.
- Насколько он удобен для новичков?
- Стоимость (мизерная или бесплатная).
Обратите внимание, что совершенно нормально и даже рекомендуется использовать более одного ресурса для изучения разработки программного обеспечения. Именно поэтому я разделил обучающие ресурсы на три категории: Bootcamp, веб-сайты и YouTube.
Вам не обязательно использовать все ресурсы, которые я упомянул в этом посте, чтобы не попасть в ад учебников, я предлагаю вам ознакомиться с ними и выбрать тот(те), который(е) лучше всего соответствует вашим предпочтениям в обучении.
Bootcamps — полное руководство по изучению определенной технологии.
-
The Complete Web Developer Zero to Mastery — научиться писать код и стать веб-разработчиком, используя HTML, CSS и JavaScript.
-
Modern HTML and CSS from the Beginning (including Sass) — научитесь создавать отзывчивые веб-сайты и пользовательские интерфейсы с помощью HTML5, CSS3 & Sass, а также освоите CSS Flex и Grid.
-
Современный JavaScript от новичка до ниндзя — изучите современный JavaScript с самого начала (для новичков) до уровня ниндзя (для экспертов), создавая исключительные приложения на JavaScript.
-
Создайте свои первые веб-страницы с помощью HTML и CSS — станьте мастером HTML и CSS, будучи абсолютным новичком.
Веб-сайты — платформы, на которые вы можете опираться, чтобы быстро освоить ту или иную концепцию.
-
Front-end веб-разработчик — MDN — узнайте все о Front-end разработке, HTML CSS JavaScript HTTPS Web APIs Web Technologies.
-
Front-end web developer — W3schools — узнайте о дозах и недозах Front-end разработки и о том, как правильно начать.
-
Freecodecamp responsive web design — изучите и поймите языки, которые разработчики используют для создания веб-страниц.
-
Scrimba — Frontend Development — узнайте о front-end разработке от HTML до front-end фреймворков.
-
Learn Frontend Development Codecademy — узнайте больше о языках, необходимых для разработки фронтенда, и о том, как мыслить как фронтенд-инженер.
-
Frontend Masters — как понятно из названия, этот сайт помогает разработчикам освоить передовые концепции, а самое интересное, что преподают курсы очень опытные разработчики, работающие в крупных технологических компаниях.
Каналы YouTube — центр серии обучающих видео для изучения и создания проектов.
- Dev Ed
- codeSTACKr
- Freecodecamp
- Дэйв Грей
- SuperSimpleDev
- Traversy Media
- Кевин Пауэлл
- WebDevSimplified
- Умный программист
- Флорин Поп
- Bro Code
- Джон Смилга
- Net Ninja
- Программирование с mosh
- Ej Media
- JavaScript Mastery
Я уверен, что вы можете выбрать один из перечисленных выше ресурсов и получить представление об основах веб-технологий, используемых для front-end разработки.
С учетом сказанного, следующим шагом будет проверка полученных знаний на практике путем создания проектов различной сложности.
Знания, полученные и не проверенные на практике, подобны знаниям, которые не были получены.
Лучшие ресурсы для генерирования дизайна и идей для проектов по разработке фронтенда
Если вы думаете о самостоятельной разработке front-end проекта с нуля, вы должны принять во внимание усилия и время, которые потребуются вам, чтобы придумать впечатляющий дизайн. Таким образом, правильно структурированные ресурсы станут отличным подспорьем в работе над вашими проектами.
Без особого порядка я отобрал некоторые из наиболее полезных ресурсов, которые помогут вам начать создавать исключительные фронтенд-дизайны, способствующие вашему росту как фронтенд-разработчика.
Пусть идеи просачиваются…
- Devchallenges
- Codewell.cc
- Frontendpractice
- Frontendmentor
- 100dayscss
- Acefrontend
- CSS Battle
- Вызовы Freecodecamp
- Первые таймеры
Codewell.cc
Codewell.cc — одна из лучших платформ для совершенствования ваших навыков фронтенда. Она проста в использовании и очень эффективна в получении реальных шаблонов дизайна для отработки навыков HTML и CSS. Codewell — это платформа, основанная на задачах, которая предоставляет серию технических задач для отработки навыков HTML и CSS.
Задачи на этой платформе могут быть бесплатными или премиум-класса. Бесплатные задачи доступны всем, кто зарегистрировался на платформе, а задачи с пометкой «премиум» доступны только тем, кто подписался на профессиональную версию.
В бесплатных задачах вы получаете доступ к активам (иконкам, изображениям) для проекта, файлу README.md и файлам дизайна PNG для настольных компьютеров, планшетов и мобильных устройств. Просубсигнатура, однако, поставляется с дополнительным файлом Figma.
Существует сообщество на slack, которое помогает вам решить возникающие трудности. Если вы столкнулись с какими-либо проблемами во время работы над задачей, поделитесь ими в slack, и у вас появятся люди, готовые помочь.
DevChallenges
DevChallenges — еще один отличный сайт для развития ваших навыков работы с фронтендом. Чтобы начать работу на этом ресурсе, достаточно выполнить следующие три шага, и вы готовы:
- Перейдите на пути задач, выберите задачу и прочитайте ее описание.
- Начните действовать, работая над проектами в одиночку или с друзьями. В конце концов, работа в команде — это то, что отрабатывается в реальном мире.
- Завершите задачу и представьте свое решение. Если вы выполните все задачи на пути, вы получите за это сертификат.
В контексте данной статьи требуемыми путями вызова являются Responsive Web Developer и Front-end Developer. За каждый выбранный вызов вы получите файл Figma для дизайна и другие ресурсы, необходимые для создания проекта.
Если у вас возникнут трудности с созданием проекта и никто не сможет помочь, вам нужно лишь перейти на вкладку решения на странице задачи, и вы получите доступ к исходному коду тех, кто представил свое решение для проекта, над которым вы работаете.
FrontendPractice
Front-end Practice — это замечательная инициатива, созданная Кайлом Шуком. Единственная цель этого ресурса — помочь разработчикам фронтенда проверить свои навыки, создав тщательно подобранный список веб-страниц, которые они могут воссоздать.
Этот ресурс действительно полезен благодаря его реальному применению и случаям использования. Выполнение этих заданий поможет вам лучше оценить свои навыки фронтенд-разработчика.
После регистрации перейдите в раздел проектов и выберите веб-сайт, который вы хотите воссоздать. Кайл Шук помог всем, кто хочет принять участие в воссоздании любого из сайтов, предоставив ресурсы, которые могут помочь вам в решении конкретной задачи, цвета, которые нужно использовать, и то, чему вы научитесь при создании сайта.
FrontendMentor
Front-end Mentor — это платформа, которую я считаю пристанищем проектов для практики front-end разработки. Этот сайт похож на codewell в плане структуры интерфейсов задач и тегов задач как бесплатных или премиум.
Он также помечает каждую задачу соответствующим уровнем сложности. Благодаря этому вы можете легко сориентироваться и выбрать подходящую вам задачу в соответствии с уровнем вашего опыта или знаний.
После регистрации на сайте перейдите в раздел «Задачи», затем выберите проект, над которым вы хотели бы поработать, и загрузите стартовые файлы. Платформа предоставляет вам активы (все изображения, необходимые для создания проекта) и другие ресурсы, такие как файл Read.MD, который поможет вам понять, что ожидается от проекта.
Вы также можете присоединиться к сообществу slack, где вы можете общаться с другими выдающимися разработчиками и делиться идеями.
! 00DaysCSS
Как фронтенд-разработчик, вы должны знать, насколько важен CSS для каждого создаваемого пользовательского интерфейса. Без CSS сайты будут просто обычным текстом с функциональностью (благодаря JavaScript), но они не будут привлекательными. Это побудило Матиаса Мартина разработать 100-дневную практическую задачу по CSS.
Как показано на снимке выше, вы получаете задание по CSS на 100 дней подряд. Все, что вам нужно сделать, это следовать предоставленному шаблону и воссоздать пример, проявив творческий подход (вы можете изменить такие свойства, как цвет, размер шрифта и другие свойства CSS).
Чтобы принять участие в этом обучении, основанном на задаче, вы должны создать учетную запись на codepen, поскольку именно эта платформа необходима для составления кода задачи. Отправьте ссылку на свой код на codepen для каждой задачи, скопировав и вставив ее в поле ввода, созданное для каждой задачи.
Acefrontend
Acefrontend, как следует из названия, — это платформа, созданная для того, чтобы помочь разработчикам фронтенда подготовиться к собеседованиям. Создатель этого сайта, будучи интервьюером в Кремниевой долине, заметил, как фронтенд-разработчики проваливают собеседования из-за мелких ошибок. Поэтому был создан Acefrontend. Это платформа, где вы практикуетесь в небольших проектах, которые вас могут попросить написать во время собеседования, так как некоторые разработчики через некоторое время становятся ржавыми.
Выберите задачу на странице задач, нажмите на нее и начните кодировать. Если вы застряли во время решения задачи, вы можете попросить подсказку или открыть решение.
CSS Battle
CSSBattle с более чем 14000+ игроков — это первая в истории платформа для игры в код-гольф (код-гольф — вид развлекательных соревнований по компьютерному программированию, участники которых стремятся создать как можно более короткий исходный код, решающий определенную задачу), созданная Кушагрой Агарвал и Кушагрой Гур.
Это игровая платформа на CSS, где вам предлагается изображение-мишень, которое нужно воспроизвести с помощью CSS и небольшого HTML.
Вот пример экрана с изображением мишени:
Секрет победы в таблице лидеров заключается в использовании меньшего количества байт для выполнения задачи и более визуальном соответствии (т.е. чем ближе ваше решение к заданному изображению).
Вызов FreeCodeCamp
Проекты FreeCodeCamp по отзывчивому веб-дизайну — это проекты, отобранные FreeCodeCamp для того, чтобы помочь учащимся проверить свои знания, полученные в рамках курса FreeCodeCamp по отзывчивому веб-дизайну. В этом разделе они предлагают вам пять проектов по веб-программированию, которые вы должны решить, чтобы получить сертификацию по Responsive Web Design.
Чтобы принять участие, вам понадобится онлайн-редактор, поскольку вам придется отправить ссылку на свой проект, чтобы FreeCodeCamp рассмотрел его.
Следуйте инструкциям, данным для каждого проекта, и создайте все пять проектов, чтобы получить сертификат.
Начинающие
Наличие проекта с открытым исходным кодом или участие в проекте с открытым исходным кодом — это то, что привлекает рекрутеров в резюме. Но вопрос в том, как внести свой вклад в проект с открытым исходным кодом? Это может оказаться непростой задачей.
First Timers — это центр ресурсов с открытым исходным кодом, который поможет вам составить список ресурсов для начала работы с открытым исходным кодом. Эти ресурсы устраняют разрыв между теми, кто создал проекты и сделал их открытыми, и теми, кто готов внести всего лишь строчку кода, чтобы сделать проект более эффективным.
Кроме того, можно ознакомиться с некоторыми другими замечательными ресурсами:
- Codepen Challenges
- Codewars
- CSS Diner
- Grid Garden
- Flexbox Defense
- Зомби из флексбокса
Заключение
Быть экспертом в том, что вы делаете, очень важно для любого человека, независимо от профессии. Как фронтенд-разработчик, вы можете найти множество ресурсов в Интернете, чтобы стать экспертом в этой области.
Здесь я отобрал для вас лучшие ресурсы для начала работы. Использование этих ресурсов дает много преимуществ для понимания концепций front-end технологий, оптимизации кода и развертывания проектов.