Frontend + Верстка

Установим browsersync глобально:

npm install -g browser-sync

Переходим в папку с проектом:

cd ~/path_to_project

Запускаем:

browser-sync start --server --no-notify --no-ui --files *

Используемые параметры:

--server — запустить локальный сервер;

--no-notify — отключить уведомления;

--no-ui — не запускать «админку»;

--files * — следить за изменениями всех файлов в директории.

---

Команда длинная, писать долго, а запомнить все параметры тяжело, да и не нужно.

Создадим алиас. В файле .bashrc или .zshrc (зависит от того, чем пользуетесь):

alias bs="browser-sync start --server --no-notify --no-ui --files *"

Обновляем окружение:

source ~/.bashrc
// or
source ~/.zshrc

Вот и все, теперь, находясь в корне проекта, локальный сервер можно запустить командой:

bs

---

Более подробно с данным инструментом можно ознакомиться в документации.

На мой вкус, эффективнее работы на реальных проектах нет ничего. Адекватные коллеги не дадут идти совсем в говнокод или не в ту степь, кроме того, без коллег бывают случаи, когда один на один сидишь с задачкой 3 дня, когда она запросто решается известной библиотекой за 15 минут, но тебе просто неоткуда о ней узнать, а в коллективе обычно можно как минимум спросить "в какую сторону гуглить". Здесь главное соблюсти грань между "не сидеть 2 дня" и не "спрашивать, не погуглив", но обычно собственная адекватность или уровень терпения коллег помогают найти баланс. Звучит неплохо, но новичку при поиске работы обычно приходится соглашаться не на самые лучшие условия, и это не только про зп.

Плюсы:

+ максимально эффективно

+ обучение в рабочее время, не надо выкраивать дополнительное

+ расширение портфолио с согласия заказчика

+ если повезёт, то можно быстро вырасти в этой компании или перейти в другую на новых условиях

+ дают денег

Минусы:

– денег дают мало

– подрабатывать где-то ещё времени нет

– без опыта не берут

2. Фриланс

В любом случае – как на картинке будет не сразу :) на несложные проекты по верстке обычно довольно большая конкуренция на биржах. Совсем новичкам не советую фриланс вообще, а после 3-6 месяцев работы в офисе, почему бы и не да. Это те же боевые проекты, возможно даже с небольшой обратной связью – заказчик уж постарается протестировать то, что вы написали, перед тем как заплатит. Однако старших коллег рядом нет, спросить зачастую не у кого. Кстати, когда совсем не у кого спросить и не помогает ни Гугл, ни StackOverflow, есть чаты в телеграмме по вёрстке и по разработке, спросить можно там - могут ответить, но могут и посамоутверждаться, тут как повезет. Отдельная специфика фриланса для разработчиков с небольшим опытом – его сложно найти, пока круг знакомств в сфере совсем маленький. Многие ребята идут на биржи, но быстро в них разочаровываются – некоторые такие сайты ещё года полтора назад дружно сделали отклики на задачи платными, да и на отклики новичков заказчики мало обращают внимания. Последних тоже можно понять – у них есть проект, например, на вёрстку одной странички, и они скорее доверят ее Антону с 400-ми положительных отзывов и рейтингом 8000, чем MegaMonstr1997, зарегистрировавшемуся 16 минут назад и, как ни странно, ещё не получившему 400 положительных отзывов. Мой опыт с биржами – нашла ту, где первые 25 откликов бесплатны, писала заказчикам подробные сопроводительные "Посмотрела сайт, с задачей справлюсь, портфолио вот, еще заметила, что у вас немного на мобилке едет верстка, бесплатно поправлю", где-то на 12-15 отклике случился первый заказ. Естественно, "бесплатно поправлю" – это про работы на 5-15 минут. А иногда первым фрилансом становятся сайтики для друзей, знакомых или для мамы. В последнем случае вы вряд ли будете брать с мамы деньги, имейте совесть, но наверняка получите столько тёплых слов и благодарностей, сколько не получите ни от одного заказчика :З

Плюсы

+ боевой опыт

+ расширение портфолио с согласия заказчика

+ денег все ещё дают

Минусы

– нет опытных коллег рядом (здесь и далее)

– денег ещё меньше

– фриланс сложно найти

3. Курсы с ментором на 2-3 месяца

Я и училась, и сама сейчас работаю наставником на таких курсах, и это хороший способ изучения. Плюс составленная изначально программа даёт системность, тогда как ментор не даёт расслабиться. Будьте готовы, что курсы изначально будут троллить вас обещаниями "Зарплата 120 тысяч через три месяца!", "Изучим одновременно Html, Css, React, Php, Java c нуля за полгода!", "Фулл-стек за 12 занятий")) Это почти всегда неправда. Однако хорошие курсы разложат по полочкам, не дадут облегчить себе задачу при выполнении практики и написать откровенной лажи

Плюсы

+ действительно дают знания

+ систематизация

+ ментор

+ код ревью

Минусы

– сложно выбрать хорошие курсы

– сложно выбрать толкового ментора, обычно кот в мешке

– требует времени, некоторые мои студенты даже брали отпуска, чтобы закончить курсы и защитить диплом

– курсы заинтересованы, чтобы вы покупали и дальше, поэтому зачастую многие важные темы "будут рассмотрены только на втором уровне"

– работодателю обычно пофиг на курсы и сертификаты с них

– дорого (в среднем от 20 тыс до 60 тыс) – если вы студент

– дёшево (в среднем 3-7 тыс) – если вы ментор и хотите подзаработать

4. Бесплатные видосы с Ютуба и где найдете

Неожиданно, что выше книг-статей и прочего? А вот так. Для меня видео-уроки стали просто открытием. В зависимости от силы мотивации в конкретный день я выбирала соответствующий по длительности видос по вёрстке с симпатичным результатом в конце. Например, поисковый запрос на Ютубе мог выглядеть как "Верстка лендинга html", далее смотрю, сколько длится видео и что получается в конце. Мое любимое – 2-2,5 часа и небольшой лендосик по путешествиям или вкусняхам. Но был и один курс на 10+ занятий с более серьезным проектом в конце. Суть просмотра – останавливать видео каждые 30 секунд и повторять за автором, делать ту же страничку / приложение. Звучит просто, но уже на 15-ой минуте у тебя начинает отваливаться то, что у ведущего прекрасно работает. Начинаешь искать, выясняется, что забыл пару css свойств, которые автор быстро напечатал на 3-ей минуте. И вот этот поиск – самое ценное, в процессе поиска учишься отладке через DevTools браузера, через консоль и тд.

Плюсы:

+ бесплатно

+ хороший обучающий эффект

+ быстрый результат в виде знаний и сверстанного шаблона

Минусы:

– можно попасть на недалёкого автора и научиться делать неправильно

4. Книги с упражнениями

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

Плюсы:

+ системность

+ недорого по сравнению с курсами

Минусы:

– очень быстро устаревают

– без практики прочитанное усваивается очень слабо

– совсем не похоже на тусу по уровню веселья

5. Статьи

Статей "Советы по отладке JS", "CSS-трюки: режимы наложения цветов", "10 хитростей JavaScript о которых вы не знали" – великое множество, однако если пока для человека весь JavaScript - одна большая хитрость, толку от них будет немного. Зато уже в процессе изучения и работы во фронтенде, одна прочитанная с утра по пути в офис статья может дать не только понимание того, что нового появилось в мире разработке, но и +100 к чсв, а также возможность лёгкого выпендрежа перед коллегами (или начальством, если повезёт).

Плюсы:

+ больше шансов быть всегда в теме происходящего в мире разработки

+ малая трудозатратность

Минусы:

– бессистемно

– дают вишенки на торте, но не сами навыки

6. Игры типа рпг на минималках

В отличие от книг звучит и выглядит весело. За все игрухи не скажу, но мне попалась та, которая стоила 4 доллара в месяц и имела сотни заданий вида "Есть твой персонаж, есть песчаные яки - от них надо уклоняться, но стрелять по ним нельзя, есть скелеты - их бить мечом, есть орки - если слабый, то защищаться щитом и бить мечом, если сильный, то создавать своих клонов, сначала надо всех орков рассортивать по силе". Далее игрок преобразует то, что понял из "ТЗ" в код на JS с описанными методами "защищаться щитом", "рубить мечом", "создавать клонов", обычно в циклов, условий, сортировки. На мой взгляд, такие игры могут быть полезны только для совсем новичков, которым надо попробовать написать первые циклы и условия, для всех остальных толку будет немного. Еще – вы фиг докажете начальству, что таким образом учите JS :)

Способы, которые я сама не пробовала – например, поиск частного ментора, я не описываю.

jQuery

// При клике на кнопку
$('.js-accordion').on('click', function() {
 // раскрываем следующий элемент
 $(this).next().slideToggle();
});

В итоге вся магия в методе .slideToggle(). Можете еще почитать о .next() и .on(), хотя пожалуй не стоит. Лучше посетите мой codepen :)

Стили

.question-input {
 display: none;
}

.answer {
 height: 0;
 overflow: hidden;
 transition: 0.5s;
}

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Разберем по частям

Скрываем чекбокс

.question-input {
 display: none;
}

Задаем стили для ответа

.answer {
 // обнуляем высоту
 height: 0;
 // скрываем блок
 overflow: hidden;
 // задаем длительность анимации
 transition: 0.5s;
}

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Пара слов об анимации — она кривая:

Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение. Именно поэтому, в качестве хака, мы используем padding.

Если такая анимация вас устраивает — считайте вам повезло, а если она и вовсе не нужна — читайте следующую статью про создание аккордеона на чистом HTML.

Актуальное демо смотрите в моем codepen.