Блог

Как пройти интенсив HTML Academy. Часть 3: после интенсива

Курс молодого бойца «Как пройти интенсив HTML Academy»

Рассказываю, как проходить интенсивы Академии с максимальной пользой:

  1. До интенсива
  2. Во время интенсива
  3. После интенсива

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

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

Не начинайте с фриланса

До первой работы я верстал сайты на фрилансе 2 года. Сложные проекты мне не доверяли, тем более, я не умел их делать. Я плохо распределял время, работал по ночам и не успевал развиваться: сделал проект и бегом искать новый заказ. Все бесило, потому что ничего не получалось и не к кому было обратиться за советом.

Фриланс — это неплохо, но если вы стажер, не теряйте время и сразу идите в серьезный проект с командой профессионалов. Новичкам на фрилансе тяжело, потому что нет дисциплины и хороших умений. Со временем вы прокачаетесь и сможете брать хорошие проекты за нормальные деньги.

Идите в крупные компании

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

Стажер должен расти в команде профессионалов и не должен стрессовать по поводу зарплаты, диких заказчиков или неадекватных управленцев. Меньше стресса, больше развития. Компании обеспечивают это: профессионалы, большие команды, ДМС, командировки, обеды, неплохая зарплата — студии не могут такого позволить.

Начните со стажировок в Яндексе, Мейле, Рамблере. Не получится — пробуйте компании поменьше. А про сомнительные студии забудьте.

Забейте на портфолио

Кажется, чтобы взяли на работу, нужно показать портфолио. На самом деле, это не так.

Работодатель видит в вас стажера, потому что вы без опыта работы в реальных проектах. И не важно, сколько сайтов вы покажете — все понимают, что они учебные и не связаны с реальным миром.

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

Лучше потратьте время на подготовку к техническому интервью. Советую:

Положите в портфолио учебный проект и не парьтесь. 10 учебных проектов никто не оценит, потому что главное — личное общение.

Требуйте ментора

Хороший ментор — главная нужда стажера.

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

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

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

После технического интервью спросите разработчиков, где было плохо и что нужно подтянуть. Их советы — ваши ближайшие задачи, которые надо сделать, чтобы в следующий раз было лучше.

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

20 мая

Что делать, если хочется слиться

Для студентов HTML Academy.

Когда хочется отдохнуть

Когда хочется отдохнуть

Возможно, вы устали и хотите бросить учебу. Я вас понимаю:

  • Сидите по 5 часов над проблемой, а потом оказывается, что забыли поставить точку с запятой в конце строки.
  • Верстаете карточку товара 7 часов, хотя планировали потратить час.
  • Смотрите на одногруппников и кажется, что они все сделали, а вы где-то далеко.
  • Вам кажется, что верстка — это не ваше и пора все бросить.

Это нормально. Все через это прошли — сначала кураж, потом проблемы.

Сценарий один: начинаю работу с боевым настроением → появляются проблемы, но я не сдаюсь → отправил код на проверку и получил кучу правок → проблем столько, что уже не запомнить → перестал высыпаться, потому что много делать, а сроки поджимают → каждое замечание наставника выбешивает, правлю молча, не задаю вопросы → бросаю учебу или заканчиваю проект → счастлив, что все закончилось.

Если наступил момент отчаяния и все бесит, дам пару советов:

  1. Составьте список проблем, где застряли.
  2. Выспитесь. Когда голова тяжелая, пользы никакой. Вы посмотрите в монитор 2 часа и не заметите, как прошло время — потратьте его на сон.
  3. Пройдитесь по списку на свежую голову. Вы удивитесь, как быстро решите часть проблем, ведь вчера казалось, что решения нет.
  4. Если сидите над проблемой больше часа — посоветуйтесь с одногруппниками и посмотрите другие решения. Возможно, вы думаете не в том направлении, и вам нужен незамыленный взгляд.
  5. Созвонитесь с наставником, расскажите об оставшихся проблемах и посмотрите проект вместе. Попросите наставника сказать вердикт по работе и какие затыки закрыть в первую очередь.

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

Если нервы на пределе — выспитесь и попросите помощь

25 апреля

Страховка надежных сервисов

Когда я добавлял шрифты на сайты, сначала проверял, если ли шрифт на Google Fonts. Если был, я спокойно подключал по инструкции и работал дальше. Я не думал о том, что сервис гугла вдруг перестанет работать, ведь это гугл, такого не может быть.

Когда Роскомнадзор блокировал телеграм, под раздачу попали шрифты от гугла. Если разработчик подключал шрифты только через гугл, сайт остался без них:

Во время блокировки я прозрел — нужно страховаться от падения даже надежных сервисов. Кажется, что это очевидная мысль, но ребята, кто мог подумать, что гугл упадет из-за блокировки телеграма?

Кажется, что это единичный случай, но нет. В Украине заблокировали доступ к сервисам Яндекса. Что произошло с сайтами, где разработчик подключил Яндекс.Карты:

Теперь я везде включаю скептика:

  • Отвалятся шрифты от гугла — добавлю локально
  • Отвалятся Яндекс.Карты — добавлю картинку с местоположением
  • Не загрузится фоновая фотография — добавлю подложку с похожим цветом, чтобы белые буквы читались.
24 апреля

Проектируйте компоненты

Продолжение статьи "Как писать меньше стилей и не бояться правок".

Когда я смотрю проекты студентов Академии, вижу одну картину:

Разные классы для общих элементов.

Разные классы для общих элементов.

По дизайну здесь одинаковые заголовки, текст и кнопки. Для каждого такого блока студент задает отдельный класс и копирует стили. Когда придет дизайнер и попросит поменять цвет кнопок, придется пройтись по всем этим классам и поменять стиль. Чтобы не было так больно, спроектируйте компоненты.

Откройте все страницы макета и найдите общее:

  • Шрифт, размер заголовков и текста
  • Кнопки
  • Инпуты: текстовые, радиокнопки, чекбоксы
  • Цвета
  • Закругления

Соберите компоненты в фотошопе или скетче, чтобы было наглядно:

Собрал общие цвета, заголовок, текст, кнопку и инпуты.

Собрал общие цвета, заголовок, текст, кнопку и инпуты.

Теперь переведите компоненты в код.

Для цветов, размеров и закруглений используйте переменные:

// Переменные на LESS
@color-primary: #65D0BC;
@color-secondary: #444444;

@title-size: 24px;
@text-size: 16px;

@border-radius: 4px;

С компонентами посложнее. Для каждой задачи свой вариант:

Создать миксины

Делаем миксин под каждый блок и добавляем в классы:

// Миксины на LESS
.title() {
    margin: 0;
    font-size: 25px;
}

// Классы на страницах
.item__title {
    .title();
}

.reviews__title {
    .title();
}

Создать отдельный блок с классами

Блок theme. Этот метод описывал в статье:

.theme__title {
    margin: 0;
    font-size: 25px;
}
<h2 class="theme__title item__title">Вязаные корзинки</h2>
...
<h2 class="theme__title reviews__title">Отзывы</h2>
...

Классы item__title и reviews__title нужны, чтобы задать отступы и другие стили для дизайна этого блока. theme__title отвечает только за заголовок.

Создать отдельные классы

Создаем отдельные классы title, text, button и добавляем в HTML:

.title {
    margin: 0;
    font-size: 25px;
}
...
<h2 class="title item__title">Вязаные корзинки</h2>
...
<h2 class="title reviews__title">Отзывы</h2>
...

Получится так:

Тоже самое, что и с theme__title, отличие только в методологиях. Здесь мы делаем отдельный блок для каждого класса, а в theme собираем элементы под одним блоком.

Задать глобально

Задаем стили прямо для h1, h2, p и так далее. Опасный вариант, потому что мы привязываемся к определенным тегам и если тег не вписывается в дизайн, то его придется переопределять.

Но глобальные стили удобны для блогов. Если мне надо сделать блог, я оборачиваю в теги блок content:

<article class="content">
    <h1>Фронтенд-разработка</h1>
    <p>Верстаю семантично, адаптивно и кроссбраузерно.</p>
    <p>Раньше использовал Pug (Jade), потом перестал.</p>
</article>
.content {
    h1 {
        margin: 0;
        padding-top: 40px;
        font-size: 40px;
    }

    p {
        margin: 0;
        padding-top: 15px;
        font-size: 18px;
    }
}

Делай компоненты

Делайте компоненты — не стыдитесь работать меньше.

16 апреля

Sass или Less?

Студенты Академии спрашивают: «А что круче — Sass или Less?».

Берите любой. В работе вам понадобятся вложенности, переменные и миксины — эти функции есть во всех препроцессорах.

Все равно

12 апреля

Как писать HTML и CSS быстро: emmet

Эммет — инструмент, который поможет писать HTML и CSS быстро.

Слева пишем обычным способом, справа с помощью эммета — сравните:

Как это работает: пишем комбинацию, жмем Tab и код раскрывается в HTML.

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

HTML

Повторим алгоритм: пишем комбинацию, жмем Tab и код раскрывается в HTML.

Див или любой другой тег

Пишем тег и раскрываем:

Тег с классом

Чтобы написать класс, поставьте перед названием точку, прям как в CSS. Если написать класс без тега .my-class, то комбинация раскроется в <div class="my-class"></div>

Вложить тег в тег

Чтобы записать код внутри тега, поставьте знак >

Теги друг за другом

Чтобы расположить теги друг за другом, поставьте знак +

Несколько одинаковых тегов

Поставьте знак *, чтобы размножить теги:

Текст в теге

Оберните текст в фигурные скобки, чтобы он раскрылся внутри тега:

Рыбный текст

Если не хотите придумывать текст, ставьте шаблонный. Комбинация lorem раскрывает абзац текста. Если дописать цифру lorem2, то раскроется то количество слов, которое вы указали:

Этого хватит для большинства случаев, остальное в документации.

CSS

Алгоритм такой же: пишем комбинацию, жмем Tab и получаем CSS.

Свойства

Просто вводите первые буквы свойств:

  • fw → font-wegth,
  • fz → font-size,
  • fs → font-style,
  • w → width,
  • h → height.

Свойства и значения

Можно вводить свойства сразу со значениями:

  • df → display: flex,
  • dib → display: inline-block
  • w15 → width: 15px,
  • p12 → padding: 12px.

Если не хотите пиксели, дописывайте единицу измерения — fz2em → font-size: 2em.

Множественные значения

Чтобы проставить значения подряд, пишите через дефис: p10-12-15.

Как установить эммет в редактор кода

  • Sublime Text 3
  • Brackets
  • Atom
  • В Visual Code эммет встроен по умолчанию
  • В WebStorm эммет встроен по умолчанию
  • Остальные редакторы смотрите в списке

Эммет помогает писать быстро, но все комбинации сразу не запомнить. Поначалу пользуйтесь шпаргалкой, постепенно запомните.

12 апреля

Как пройти интенсив HTML Academy. Часть 2: во время интенсива

Курс молодого бойца «Как пройти интенсив HTML Academy»

Рассказываю, как проходить интенсивы Академии с максимальной пользой:

  1. До интенсива
  2. Во время интенсива
  3. После интенсива

Сегодня поговорим, как работать на интенсиве, чтобы сдать проект и усвоить навыки.

Читать материалы и проходить демки

К каждому занятию преподаватели Академии выкладывают материалы: статьи, инструменты, главы из книг. Советую читать их 2 раза:

  • Сразу после лекции, чтобы детально разобраться в теме.
  • Перед выполнением домашнего задания, чтобы вспомнить, о чем говорили на лекции.

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

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

Некоторые домашние задания сделаны по аналогии с демками, чтобы было проще. Не стоит копировать код из демки, потому что вы ничему не научитесь. Если не понимаете, как работает код в демке — записывайте вопрос наставнику.

Вовремя сдавать задания

На этом этапе сливается большинство студентов, поэтому расскажу подробно.

Допустим, занятия проходят в понедельник и пятницу. Вы прошли занятие в понедельник, и к пятнице вам надо написать html для 2 страниц:

НовичокОпытный
Прикидывает, что сделает задание за два дня. До среды занимается другими делами.Во вторник набрасывает алгоритм и делает первый подход. Рассказывает наставнику, как планирует делать задание и отправляет сырую верстку, чтобы показать, что он имеет в виду.
Приступает в среду вечером. Появляются первые трудности, но студент не пишет наставнику, а разбирается сам.В среду наставник пишет правки и говорит, как лучше сделать.
Упорно верстает в четверг, борется с трудностями, тратит ночь и сдает работу под утро пятницы.До четверга студент верстает страницы, советуется с командой и отправляет наставнику.
Наставник находит ошибки и не принимает работу. У студента нет сил исправлять, потому что он всю ночь работал и не выспался.В четверг наставник пишет правки. В пятницу студент дорабатывает проект.
Начинается новое занятие, задание не выполнено.Начинается новое занятие, задание выполнено.

Новичок уверен, что проблем не будет: он все сделает и проект примут. Опытный закладывает время на правки и постоянно сверяется с наставником, чтобы не было неожиданностей.

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

Разбили задачу на маленькие кусочки. Сделали кусок — показали наставнику. Сделали следующий — показали наставнику.

Работайте над проектом каждый день по чуть-чуть и показывайте работу наставнику, чтобы убедиться, что все в порядке.

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

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

Работать с наставником

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

Наставник должен быть опытнее вас. Если чувствуйте, что по уровню вы одинаковые — ищите другого наставника.

Наставник проверяет проект по критериям. Если критерии не будут выполнены, то наставник не зачтет работу. Перед сдачей работы сверяйтесь с критериями, чтобы потом не переделывать.

Хотите меньше правок — сверяйтесь с критериями.

Бомбить вопросами наставника по 15 раз в день нехорошо, потому что он тоже работает и у него есть другие студенты. Я работаю с менторами так: записываю вопросы в течение дня и утром все обсуждаю. Каждый день по 15–20 минут. Это лучше, чем 15 раз в течение дня, потому что:

  • До общения с наставником вы можете уже что-то нагуглить или обсудить с командой
  • Наставнику не надо на вас часто переключаться — это отвлекает от работы. Если наставник будет часто переключаться, вы испортите отношения, и он будет выходить на связь 2 раза в неделю на полчасика, как написано в регламенте.

Работать с командой

Команда — это студенты, которые работают с одним наставником.

В команде делятся опытом: обсуждают тонкие моменты в проектах, рассказывают, кто как заверстал страницы, объясняют друг другу темы. Команда дополняет наставника.

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

Иногда наставник объединяет студентов в общий чат, чтобы получилась команда. Если вас не объединили, попросите наставника об этом сами.

Работать над своим проектом

Если вы успеваете делать учебный проект, работайте над своим.

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

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

10 апреля

Как пройти интенсив HTML Academy. Часть 1: до интенсива

Курс молодого бойца «Как пройти интенсив HTML Academy»

Рассказываю, как проходить интенсивы Академии с максимальной пользой:

  1. До интенсива
  2. Во время интенсива
  3. После интенсива

Учиться в Академии тяжело: судя интенсивов по отчетам, около 40% участников не сдают проект. Чтобы усвоить знания и не слиться, стоит подготовиться.

Составить список тем

Допустим, вы идете на верстку 2 уровня. Откройте программу интенсива и выпишите темы, которые не знаете. У меня получился такой список:

  • Методология БЭМ
  • Less, Sass
  • Gulp и Grunt
  • Тег picture
  • SVG-спрайты
Программа занятия по&nbsp;препроцессорам и&nbsp;автоматизации. Видите незнакомые слова&nbsp;&mdash; пишите в&nbsp;список.

Программа занятия по препроцессорам и автоматизации. Видите незнакомые слова — пишите в список.

Изучить

Теперь пора погуглить по каждой из тем. Достаточно ответить на 3 вопроса:

  1. Что это такое?
  2. Зачем нужно?
  3. Где применяется?

Вот я гуглю «Методология БЭМ» и перехожу по первой ссылке:

Сайт [ru.bem.info](https://ru.bem.info/)

Сайт ru.bem.info

Статей и видео по каждой теме много. Не стоит читать все подряд, главное понять, что это за технология, в чем польза и где ее применяют.

Применить на своем проекте

Сначала просто запустите технологию и убедитесь, что она работает. Если не хватает документации, поищите видео на ютубе. Например, по Less и Sass куча пошаговых руководств.

Потом попробуйте использовать технологию на своем проекте. Если нет проекта — придумайте: сайт-портфолио, сайт про увлечения или сайт другу.

Берите реальный проект, не придумывайте упражнения. Как мы придумываем упражнения: вспоминаем, что умеем → подбираем задание под свои возможности. Реальный проект нацелен на результат, независимо от возможностей:

УпражнениеПроект
Создать миксин и добавить его к тегу buttonЗаверстать страницу про свои увлечения на Less
Создать переменнуюСоздать адаптивную страницу, используя переменные
Сделать миксинЗаверстать 3 страницы сайта и применить миксины на общих элементах

Если вы отработаете технологию на реальном проекте, то сможете оценить, насколько вам удобно пользоваться инструментом. На лекции вы уже будете в теме, и прокачаетесь еще сильнее. Упражнения такого эффекта не дают.

Не придумывайте упражнения — берите реальный проект.

Некоторые спрашивают: «Зачем изучать темы самостоятельно, если на интенсиве и так все расскажут?».

Как проходит неделя студента, который не готовился заранее. Допустим, было занятие по препроцессорам:

  • Студент слушает лекцию и про препроцессоры.
  • Тратит день на чтение статей, чтобы понять, зачем нужны препроцессоры и какой вообще выбрать.
  • У студента появляются базовые вопросы: не получается подключить препроцессор, стили не отображаются.
  • Команда и наставник помогают — студент начинает верстать. К вечеру накапливается список вопросов.
  • Наставник отвечает на вопросы, студент вникает, но начинается следующее занятие.
  • Студент забивает на лекцию, чтобы сделать задание по препроцессорам — без принятого задания дальше не пройти. Ничего, на выходных посидит подольше и догонит группу.
  • На выходных студент смотрит лекцию, появляется еще больше вопросов. Плюс наставник подвозит список правок по заданию с препроцессорами. Мозг кипит, знания смешиваются в кашу.
  • Через пару занятий студент сливается от перегруза.

Чтобы мозг не кипел, изучите темы заранее. А на лекции разберетесь в тонкостях работы.

9 апреля

Сначала погуглить, потом к наставнику

Когда у меня не получалось верстать, я сразу просил старшего коллегу наставника помочь. Мне было стыдно, что я бегал к нему по 12 раз в день, но он мгновенно давал решения, и я привык так быстро получать ответы. Через неделю он не выдержал и после очередного вопроса спросил:

  • — Слушай, а ты гуглить пробовал?

Я погуглил и по первой ссылке нашел решение. Тогда я понял, что не стоит бегать к наставнику по всем вопросам, потому что такая назойливость испортит отношения. В тот день я завел правило:

Сначала погугли

Но давайте начистоту: намного проще сразу пойти к наставнику — в 9 из 10 случаев он знает решение, и не надо искать самому. Но учтите:

  • Если вы хотите выйти из младших разработчиков, приучайтесь к самостоятельности — специалист умеет сам решать проблемы.
  • Часто нагуглить решение быстрее. Если у вас популярный вопрос, то вы узнаете ответ через 10 секунд. С наставником так не получится: пока вы напишете в чате, пока он ответит и задаст вопросы, пройдет куча времени.

Просто попробуйте сначала погуглить

Гугл не всегда спасает. Иногда находишь решение, но у тебя оно не работает.

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

И вот спрашивается: «чего сразу-то не пошел?» Для таких случаев у меня тоже есть правило:

Если проблема не решается в течение часа — пиши наставнику

Вы начали верстать и у вас что-то не получается. 3 варианта развития:

  • Погуглил → нашел решение → разобрался и понял
  • Погуглил → нашел решение → все получилось, но не понятно, как это работает
    Расскажите наставнику, что у вас была проблема, вы ее решили, но не понимаете, почему все работает.
  • Погуглил → просидел час и не нашел решения
    Запишите вопрос и идите к наставнику.

Сначала погуглить, потом к наставнику

9 апреля

Простой лейбл с инпутом

Если вы пишите лейбл с инпутом только так, статья для вас.

<label for="my-input">Лейбл для инпута</label>
<input id="my-input" type="text" />

Предлагаю заверстать форму, где инпутов много.

Фильтр компьютеров в&nbsp;[юлмарте](https://www.ulmart.ru/catalog/brand_computers?sort=5&amp;viewType=0&amp;rec=true)

Фильтр компьютеров в юлмарте

Готов поспорить, что вы устанете придумывать айди шестидесяти семи инпутам. Еще придется следить, чтобы айди не повторялись, иначе будет ошибка:

Делайте проще

<label>
    <span>Лейбл для инпута</span>
    <input type="text" />
</label>

Айди придумывать не надо. А чтобы добавить новый инпут, достаточно просто скопировать код.

Подход удобен, чтобы стилизовать радиобаттоны или чекбоксы.

Чтобы написать конструкцию с помощью эммета, напишите label{Текст}>input. Строка развернется так:

<label for="">Текст<input type="text" /></label>

Но при нажатии на текст инпут не сработает. Это потому, что у лейбла стоит атрибут for. Даже если for пустой, он будет искать инпут с таким же айди. Чтобы сработало, удалите for.

See the Pen Лейбл с ошибкой by Dmirty (@shalfey41) on CodePen.

label>input хороший прием, но смотрите по ситуации. Например, если делаете слайдер на CSS, смело отделяйте.

5 марта 2017

Хорошая сетка

Студенты Академии верстают каталог:

Учебный проект «Техномарт» [Академии](https://htmlacademy.ru/)

Учебный проект «Техномарт» Академии

Заверстаем сетку для списка перфораторов. Добавляю карточкам отступ справа 20 пикселей, а у каждой третьей убираю:

.grid__item {
    margin-right: 20px;
}

.grid__item:nth-child(3n) {
    margin-right: 0;
}
Сетка на&nbsp;марджинах

Сетка на марджинах

Получилось хорошо. Но при таком подходе придется следить за размером экрана и дописывать стили.

Давайте уменьшим размер окна, чтобы осталось по две карточки. Сетка сломалась, потому что у каждой третьей карточки нет отступа.

Поменяли размер экрана

Поменяли размер экрана

Сетка должна быть резиновой. Я нашел решение в коде бутстрапа. Давайте повторим.

Чтобы все получилось, я создал контейнеры для списка, элементов и контента. Пусть будет 3 карточки:

<div class="grid__list">
    <div class="grid__item">
        <div class="grid__content"></div>
    </div>

    <div class="grid__item">
        <div class="grid__content"></div>
    </div>

    <div class="grid__item">
        <div class="grid__content"></div>
    </div>
</div>

Проставим отступы. Представьте 2 карточки рядом. У первой карточки отступ справа 10 пикселей, а у второй — такой же отступ слева. В сумме 20 пикселей:

.grid__item {
    padding-left: 10px;
    padding-right: 10px;
}

Теперь между карточками расстояние 20 пикселей. Почти готово, но у самой первой карточки ненужный отступ слева 10 пикселей, а у последней — справа. Чтобы исправить, добавлю отрицательный отступ для всего списка:

.grid__list {
    margin-left: -10px;
    margin-right: -10px;
}

Вот и все. Хорошая сетка сохранит время и количество кода. Особенно, если сайт адаптивный.

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

Но как же justify-content: space-between?

Некоторые делают сетку проще:

.grid__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.grid__item {
    width: 200px;
}

Но что, если в каталоге будет не 9 товаров, а 5?

Карточки разъехались. Я уже не говорю о разных размерах экрана.

Это не значит, что justify-content: space-between нельзя использовать — если вы знаете, что в макете будет два элемента, которые прижаты по бокам, то space-between справится лучше всех.

Старайтесь предугадывать, как может измениться ваша верстка: «Что, если будет 5 карточек? А что, если сайт будет адаптивным?» — вам же над сайтом и работать. А если и не вам, то не стоит заставлять другого разработчика переписывать ваш код. Думайте наперед.

Итоговая сетка.

13 февраля 2017

Как писать меньше стилей и не бояться правок

Продолжаю разбирать работы студентов базового интенсива Академии. Вот фрагмент макета:

Фрагмент макета &laquo;Девайс&raquo; от&nbsp;HTML Academy

Фрагмент макета «Девайс» от HTML Academy

Студент пишет разметку блока «о нас»:

<section class="about">
    <h2 class="about__title">О нас</h2>
    <p class="about__text">Огромный выбор гаджетов не оставит равнодушным гика, который есть в каждом из нас</p>
    ...
    <a class="about__btn" href="about.html">Подробнее о нас</a>
</section>

Рядом блок «контакты»:

<section class="contacts">
    <h2 class="contacts__title">Контакты</h2>
    ...
    <a class="contacts__btn" href="contact-form.html">Напишите нам</a>
</section>

Теперь CSS-файл. «О нас»:

.about__title {
    font-size: 44px;
    position: relative;
    padding-top: 45px;
    margin-bottom: 50px;
}

.about__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 7px;
    background-color: black;
}

...

.about__btn {
    position: relative;
    max-width: 300px;
    padding: 0 18px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    text-align: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}

.about__btn:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 8px;
    background-color: #f0c52e;
    z-index: -1;
}

«Контакты»:

.contacts__title {
    font-size: 44px;
    position: relative;
    padding-top: 45px;
    margin-bottom: 50px;
}

.contacts__title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 7px;
    background-color: black;
}

...

.contacts__btn {
    position: relative;
    max-width: 300px;
    padding: 0 18px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    text-align: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}

.contacts__btn:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 8px;
    background-color: #f0c52e;
    z-index: -1;
}

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

Я заметил, что размер заголовка по макету равен 47 пикселей, а студент поставил 44:

  • — Тут с размером заголовка косяк. Поправь, пожалуйста.
  • — Окей.
.promo__title {
    font-size: 47px;
}

...

.about__title {
    font-size: 47px;
}

...

.contacts__title {
    font-size: 47px;
}

...

.form__title {
    font-size: 47px;
}

...

.goods__title {
    font-size: 47px;
}
  • — Кстати, с межбуквенным расстоянием кнопок не досмотрел.
  • — Блин…
.promo__btn {
    letter-spacing: 0.1em;
}

...

.about__btn {
    letter-spacing: 0.1em;
}

...

.contacts__btn {
    letter-spacing: 0.1em;
}

...

.form__btn {
    letter-spacing: 0.1em;
}

...

.goods__btn {
    letter-spacing: 0.1em;
}

Лютый копипаст увеличивает размер кода и раздражение разработчика при очередных правках.

Как правильно

Найдите в макете повторяющиеся элементы. Чаще всего это:

  • заголовки,
  • основной текст,
  • кнопки,
  • списки.

Чтобы элементы были на виду, создайте новый документ в фотошопе и перенесите их.

Создайте классы, куда сложите общие элементы:

.theme__title {
    font-size: 44px;
    position: relative;
    padding-top: 45px;
}

.theme__btn {
    position: relative;
    max-width: 300px;
    padding: 0 18px;
    font-size: 18px;
    font-weight: bold;
    color: black;
    text-align: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}

Осталось добавить тему к разметке:

<section class="contacts">
    <h2 class="theme__title contacts__title">Контакты</h2>
    ...
    <a class="theme__btn contacts__btn" href="contact-form.html">Напишите нам</a>
</section>

А теперь представьте, что к вам пришел менеджер:

  • — Привет. Заголовки крупноваты, давай уменьшим. 25 пикселей будет ок.
  • — Через 10 секунд подойди.

9 секунд, чтобы открыть файл и найти класс, 1 секунда, чтобы внести изменения:

.theme__title {
    font-size: 25px;
}

Любитель переменных скажет: «Зачем мне дополнительные классы? Я создам переменные.»:

// style.less
@h2: 47px;

.about__title {
    font-size: @h2;
}

...

.contacts__title {
    font-size: @h2;
}

...

.form__title {
    font-size: @h2;
}

Окей, пусть переменные. А что, если на мониторах увеличить заголовок до 60 пикселей?

// style.less
@media (min-width: 1600px) {
    @h2: 60px;
}

Мы переопределили переменную, но размер не поменялся. Придется копировать:

// style.less
@media (min-width: 500px) {
    @h2: 30px;

    .about__title {
        font-size: @h2;
    }

    ...

    .contacts__title {
        font-size: @h2;
    }

    ...

    .form__title {
        font-size: @h2;
    }
}

Иными словами, мы вернулись к проблеме. Решение с классом:

// style.less
@media (min-width: 1600px) {
    .theme__title {
        font-size: 60px;
    }
}

Не пишите лишнего

В блоке «о нас» и в «контактах» у заголовка одинаковый отступ снизу. Хочется поддаться искушению и добавить отступ в общий класс:

.theme__title {
    ...
    margin-bottom: 45px;  
}

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

// Общий стиль, который только описывает заголовок
.theme__title {
    font-size: 44px;
    position: relative;
    padding-top: 45px;
}

// В блоке «контакты» и «о нас» отступ 45 пикселей
.about__title,
.contacts__title {
    margin-bottom: 45px;
}

// А здесь 60 пикселей
.form__title {
    margin-bottom: 60px;
}
Пример кода на кодпене

Ищите общие элементы в макетах. Не стесняйтесь упрощать себе работу.

30 января 2017