ТОП-10 онлайн-ресурсов для прокачки навыков фронтендера
Привет, Хабр! Я Лена Райан, фронтенд-разработчик в Х5 Tech. Решила поделиться с вами подборкой ТОП-10 проверенных зачётных онлайн-ресурсов по фронтенду, которые будут полезны как новичкам, так и желающим подтянуть свои знания по этой теме. Подборка подойдёт также тем, кто только недавно пришёл в IT или в профессию фронтендера и хочет понять, с какой базы им начать.
Очень известный бесплатный ресурс для изучения фронтенда и бэкенда. Здесь вы учитесь через практику — по каждой теме есть понятная теория и небольшая задачка, которую тут же можно отправить на проверку. В конце каждого курса есть несколько проектов, закончив которые вы получите сертификат об успешном прохождении курса.
Курсы, про которые слышал почти каждый веб-разработчик. Есть как платные курсы по разным направлениям веба, так и бесплатные тренажёры, чтобы новичок мог понять на небольшой практике, хочет ли он учиться дальше. Во время курсов студенты выполняют учебные проекты и получают помощь наставника. Лучшие студенты могут попасть на стажировку в Лигу А.
Онлайн-школа программирования, про которую я смело могу сказать, что они “свои ребята”. Представители школы общаются в Твиттере и проводят на Ютубе публичные собеседования. На сайте школы есть большое число бесплатных курсов по фронтенду, бэкенду и темам около веба, но также есть и платные, о которых я не слышала ни одного негативного отзыва.
Пожалуй, самый популярный ресурс в своём роде с огромным количеством разнообразных курсов, которые часто можно купить по очень привлекательной цене, благодаря скидкам. Перед покупкой можно почитать отзывы и решить, подходит вам выбранный курс или нет.
Популярная документация по веб-технологиям — HTML, CSS, JS и доступности. На мой вкус — не всегда текст написан понятно, иногда приходится искать объяснение на других ресурсах. Здесь не все страницы переведены на русский язык, и порой статья представляет из себя микс абзацев на русском и английском. Но каждый может прийти и поучаствовать в локализации MDN.
Совсем молодая документация по вебу и вспомогательным инструментам, написанная понятным человеческим языком, руку к которой приложил сам Вадим Макеев. Один из первых ресурсов, куда я иду, чтобы повторить ту или иную тему. Из интересного — сейчас это опенсорс, то есть каждый желающий может написать статью или совет в этот справочник. А ещё там дизайн красивый.
7. Современный учебник JavaScript (https://learn.javascript.ru/).
Постоянно обновляющийся онлайн-учебник по JavaScript, начиная с самых азов и заканчивая продвинутыми темами и тонкостями работы языка. В конце почти каждой главы есть задачи на закрепление материала.
Серия Кайла Симпсона из шести книг, объясняющая тонкости и механизмы JavaScript (в народе – «кишочки»). На данный момент первое издание полностью завершено, а на Гитхабе можно почитать книги в переводе на русский язык. Второе обновлённое издание находится в процессе написания. Одна из самых уважаемых книг по JS среди фронтендеров.
9. Документация фреймворка.
При изучении фреймворков лучшим источников знаний будет, конечно же, документация этих фреймворков. Ведь никто не знает Реакт или Вью лучше, чем их создатели. Иногда документация даже бывает переведена на русский язык.
10. Чаты фронтенд-сообществ.
Нетворкинг — очень важная часть обучения. То, что вы не смогли нагуглить, вам может подсказать кто-то из участников того самого чата фронтендеров. Кроме знаний, вы получаете общение, профессиональный юмор и новые полезные знакомства. Вот несколько примеров самых известных чатов:
Бонус №1: Индусы с YouTube.
Наши лучшие друзья. Часто именно они могут лучше всех объяснить концепцию Event Loop, Promise или функций для работы с массивами. Какие конкретно индусы? Да любые! Вы меня поймёте через несколько месяцев просмотров обучалок на Ютубе 😉
Бонус №2: Rutracker.
Очень плохой способ. Пиратство — это вообще ужасно, ведь любой труд должен быть оплачен. Но если вы честно хотели заплатить за курс, но не смогли, то что ж… Вы же пытались, правильно?
Где практиковаться?
Закончил изучение HTML и CSS на w3schools.com.
Прошел все задания которые там даются.Но они кажутся мне очень легкими.Плюс какое-то ощущение недоученности.
Подскажите где можно потренироваться в HTML и CSS,где взять различные задачи?
Вообще,буду очень признателен,если подскажете полезные ресурсы этого плана и по PHP,JavaScript и другим технологиям(в том числе и не Web),чтобы можно было тренироваться и с уверенностью выйти на свою первую работу.
Зачем тебе задачки, если по факту, как я понял, ты хочешь верстать сайты, так бери макеты и верстай, смотри видео на том же ютубе от WebDesing Master, повторяй за ним как он верстает, так и набьешь руку, HTML и CSS очень мало для работы, если только не повезет, нужно ещё кучу всего учить, jQuery как минимум, потом JS, Gulp, BEM, Sass, кучу всего кароч, можешь посмотреть что требуется от верстальщика/программиста на сайте по работе, а так HTML Academy советую, JavaScript.ru, WDM на ютубе, и NNmclub, там можешь взять скачать по той же верстке/JS, ибо сначала ты не будешь знать как верстать те или иные элементы, поэтому изучай ещё Bootstrap 3, учись адаптивной верстке, семантической, комментируй каждый блок-секцию типа .header, .footer, много моментов в общем тут, но можешь ещё на ютубе посмотреть ошибки начинающих верстальщиков, так же есть курс JavaScript для верстальщика на NNMclub, там по сути сборник jQuery плагинов типа слайдера или как сделать аккордеон, спрятать текст, плавный скролл и прочие штуки которые просят от верстальщика, и важно ещё качество кода, тут поможет плагин Beautify хотя бы выравнивать код, ну и старайся без мусора в HTML, всё оформление в CSS, в HTML лишь блоки-элементы, не нужно допустим ставить подряд
пару штук. в общем гавнокодить, но это придет только со временем, смотри код на других сайтах, как он устроен, оформление и побольше практики.
Если нужна практика в верстке, тогда вам следует идти на https://themeforest.net выбирайте там PSD шаблон и верстайте его. Также советую вам изучить вам какой-нибудь препроцессор ( Sass, Less)
Основное уже все сказали выше: nnmclub и темфорест. на форуме, кстати(nnm), есть куча вебинаров от различных школ обучения — htmlacademy, loftschool, специалист. можно смотреть их и впитывать теор. знания, а потом идти на темфорест и верстать шаблоны оттуда. также рекомендую подписаться на рассылку htmlacademy. они раз в месяц присылают любопытные статейки и плюс три бесплатный шаблона для верстки.
Обучение на примерах, видео и статьях ни к чему в конечном итоге не приведет. Необходима работа, желательно с контролем и какими-нибудь плюшками по теме. Без контроля вы сможете забросить ее на полпути, без плюшек же не будет стимула делать что либо.
Поэтому, если хотите работать, то идите смело на собеседования, проходите их. В какую-нибудь контору вас точно возьмут. А уж если вы будете прикладывать усилия, то обучение пойдет в разы быстрее, если рядом будет человек, который сможет вам быстро что-нибудь подсказать. Ищите ментора. Скорее всего, уже существуют «Менторы на час», которые за плату предоставят вам задание, проверят его и помогут в выполнении советом.
Только вот мозг такая штука, что неиспользуемые знания имеют свойство забываться. Поэтому пока не определитесь чем вы точно хотите заниматься, учить все подряд на супер-пупер уровне не стоит. Хватит и поверхностного ознакомления.
Игры, чтобы попрактиковаться в вёрстке
Специально для вас мы нашли инструменты, которые помогут практиковаться в HTML и CSS в игровой форме.
Недавно мы публиковали материал «Где попрактиковаться в программировании: 30 ресурсов» с задачками, играми, тестами по популярным языкам программирования. Вы спрашивали об играх для прокачки навыков фронтендера — их есть у нас.
Grid critters — game-changer, разработанный Дейвом Геддесом. CSS Grid — самая современная методология, которая открывает новые возможности в построении макетов для сайтов. Дейв Геддес считает, что с появлением CSS Grid проблема верстки табличных макетов решена. Освойте методологию раз и навсегда, играя в Grid Critters: Grid Mastery Game.
Сюжет игры — путешествие на загадочной планете Гридерос. Ваша миссия — использовать сетку корабля, чтобы спасти местных жителей от вымирания. Вы управляете кораблем через Grid — прописывая правильный код, вы видите, как верстка влияет на ход игры.
К сожалению, игра не бесплатная — она стоит 179 долларов.
Flexbox Zombie — еще одна игра от Дейва Геддеса, только для изучения CSS Flexbox. Это современная методология, гибкая и универсальная, но не всем просто ее освоить — многие пользуются шпаргалками, когда верстают. Пришло время изучить Flexbox так, чтобы без проблем создать любой макет.
В игре Flexbox Zombie двенадцать разделов, каждый из которых раскрывает часть сюжета и помогает изучать методологию. Сюжет построен на сражении с зомби: игрок управляет арбалетом с помощью кода. От знания Flexbox и соблюдения инструкций зависит жизнь персонажа.
Игра стоит 225 долларов, но сейчас она доступна бесплатно — достаточно зарегистрироваться на сайте.
CSS Diner — простая игра, в тайтле которой авторы пишут: «Where we feast on CSS Selectors». Поможет и освоить CSS, и освежить в памяти базовые правила верстки. В CSS Diner игрок с помощью правильной команды — игра помогает инструкциями — должен расположить на столе посуду и продукты. Всего в игре 32 уровня, на каждом из которых задания усложняются. Выполняя их, вы сможете изучить CSS от простых селекторов вроде дивов до first-child и атрибутов input.
Code the Web — игра, которая учит веб-верстке. Вообще сервис Tynker ориентирован на детей и предлагает игры для обучения программированию, но и взрослому освоить верстку там тоже можно. В Code the Web предлагают изучить основы HTML и CSS для создания простых веб-страниц на материале стартовых проектов Tynker. А скоро на сайте будет доступна игра по введению в веб-дизайн.
Flexbox Defence — еще одна игра, которая научит применять Flexbox на ваших веб-страницах. Она соответствует жанру Tower Defence: игрок возводит башни, чтобы одолеть врагов. В Flexbox Defence оборонительные сооружения строятся с помощью CSS-кода, и перед новым уровнем игрока знакомят с инструкцией по flexbox-свойствам.
Grid Garden — игра, подходящая и взрослому, и ребенку, обучит методологии CSS Grid. Уровень за уровнем игрок узнает новые grid-свойства, с помощью которых выращивает морковный сад, поливает его, избавляется от сорняков, следит за урожаем. Всего уровней двадцать восемь, и игра помогает понятными инструкциями на каждом этапе.
Flexbox Froggy — игра похожа на Grid Garden, но направлена на изучение CSS Flexbox. С помощью персонажа — лягушонка Фрогги — вы научитесь применять flexbox-свойства для позиционирования объектов на странице. По мере выполнения инструкции персонажей становится больше, и каждого из них нужно переместить на соответствующую линию с помощью CSS.
Бонусом для верстальщика
Hex Invaders — аркада, которая поможет запомнить HTML-обозначения цветов. Игроку нужно определить, какой цвет зашифрован в шестизначном коде, и выстрелить из пушки по пришельцу соответствующего цвета. Понятно, что помнить обозначения всех оттенков сложно, но чем больше играешь и проходишь уровни, тем лучше ориентируешься в цветах.
Pixactly — онлайн-инструмент для отработки навыка pixel perfect, важного для любого верстальщика. Pixactly поможет проверить, насколько хорошо развит глазомер. В игре предлагаются параметры, в соответствии с которыми нужно нарисовать прямоугольник. В зависимости от того, насколько близка нарисованная фигура к заданным размерам, вы получаете баллы. А еще оценку от Pixactly — старайтесь не ошибаться, если не хотите вместо «Great» увидеть «Great! said nobody».
Zelda: Breath of the Wild и Overwatch Hero Picker с помощью CSS — видеоинструкции от Дейва Геддеса. Вместе с Дейвом вы можете создать интерфейс игр с помощью CSS Grid, Flexbox и других современных приемов верстки. Отлично подходит для отработки навыков, полученных в играх.