Как эффективнее учиться верстать html css

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

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — "Я выполняю работу вдумчиво и качественно, соответственно, медленно". Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

Как правильно и быстро верстать сайты - Видеоурок

Создание контентного сайта на Jekyll от А до Я

Давайте проанализируем, какие этапы нам приходится выполнять в процессе верстки. Это позволит нам выявить основные проблемы и узкие места верстки, которые можно автоматизировать или ускорить. К слову сказать, ускорение HTML верстки, собственно и заключается в автоматизации (использование инструментов) и в ускорении (ваша скорость печати, предварительный анализ, сообразительность).

1. Анализ макетов и подготовка к верстке

Пойдем по хронологии ваших действий — от работы с PSD макетом (или другим исходником), до, собственно говоря, верстки. Конечно, немаловажную роль играет макет, который нарисовали до вас или вы сами наваяли, так как правильно подготовленный макет позволит вам сэкономить кучу времени. В конце данного урока я приведу памятку для дизайнера по подготовке макета к верстке. А пока представим, что вы простой верстальщик и по определенным причинам вам пришлось верстать макет дизайнера, которому глубоко плевать на ваши проблемы и который слабо представяет, что делют с его макетом далее. Это типичная ситуация в настоящее время.

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

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

Вообще, очень важную роль в скорости работы играет использование CSS фреймворков. Не зависимо от того, стилизуете ли вы все элементы CSS фреймворка, например, Bootstrap или используете только сетку — вы ускоряетесь до скорости света при позиционировании элементов на странице и решении вопроса с адаптивностью сайта. Чаще всего, в наше нелегкое время, требуется именно адаптивная верстка. Если вы — веб-стдия, хотите выполнять проекты быстрее и порадовать ваших верстальщиков (если у вас такая система распределения обязанностей), научите веб-дизайнеров пользоваться сеткой. Недовольные возгласы о стандартизации веб-дизайна и ограничениях можно проигнорировать, мы не картины на Невском рисуем, а значит нужно использовать эффективные и быстрые инструменты для максимальной стандартизации. Не в ущерб качеству, конечно. Сетка будет не лишней точно и даст крепкую основу для верстки.

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

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, "уже хлебнули", понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

Создайте файл _typography.html, подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице "Статья" или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции "светлым по черному". Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой все и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к "внешнему миру", такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block . Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как "Нарезка изображений" или "Нарезка макета". Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это "фиксированные" иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент 🙂

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

Вы можете также использовать инструменты типа Prepros, но Prepros — это не Gulp. Для Gulp существует тысячи полезных плагинов — от работы с файловой системой, создания спрайтов, до генерации шрифтовых иконок и многое другое. Очень часто меня спрашивают, в чем разница между Gulp и Prepros, вот вам и ответ. За один раз вы сможете настроить целый комбайн, построить нейросеть задач и пустить по трубам горячую воду, все будет автоматически работать и экономить ваше время при работе над более или менее сложными проектами.

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

Практикуйтесь в решении каких-либо задач с использованием jQuery, изучите базу (благо, там немного) и разминайте мозг, создавая интересные динамические элементы и jQuery плагины.

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

Для решения типовых задач (карусели, галереи, попап окна, валидация форм и т.д.) используйте jQuery плагины, не стоит писать свои велосипеды — это долго, нестабильно и неэффективно в большинстве случаев.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье "Как стать крутым веб-дизайнером", но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Все должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: "Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. ";
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея плохая, то хоть сколько ее не полируй и подгоняй по пикселам, она не будет работать в результате. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

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

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Путь верстальщика: с нуля до сеньора

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика

image
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

Хочу сразу добавить, что конкретных ссылок на учебные материалы в статье не будет. Буду рад дополнениям в комментариях.

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior — знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle — более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior — может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Junior

HTML — знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика — умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика — понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа — какие виды медиа можно встраивать в страницу.
Iframe — встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео — можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки — какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр — jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG — можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты — можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка — опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1 — шрифты, цвета, выравнивание, размеры.
CSS 2.1 — управление поведением блоков, позиционирование, полноценное оформление.
Селекторы — простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа :hover.
Именование — как называть классы, чтобы не было мучительно больно.
Блочная вёрстка — разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры — можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика — можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы — какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий — я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git — понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket — уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull — базовые операции для личного использования.
Stash — для временного сохранения ненужных в данный момент данных.
10 работ — сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

Middle

CSS 3 — градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы — элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации — опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки — зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS) — зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры — можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries — можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода — понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID — можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS — опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация — понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование — научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция — можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется 🙂
Постановка задач — можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox — понимание модели, умение применять полноценно.
Вёрстка писем — опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы — разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка — понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка — понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка — можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация — можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю.
Загрузка — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка — можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO — можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы — разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP — можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS — можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую WordPress).
Javascript — можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery — можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS — можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка — опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE — опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching — научиться управлять ветками в git.
Merge — научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase — разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы — разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ — к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка — разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение — понять, что это и зачем. Использовать.
Gitflow — уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ — опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ — иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.

Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии.

upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.

Как научиться верстать на HTML и CSS с нуля: хорошие онлайн-школы и курсы

Знание HTML и CSS хотя бы на базовом уровне необходимо практически каждому, кто имеет дело с сайтами. Язык разметки пригодится не только верстальщикам, но и контент-менеджерам, ведущим сайты компаний, авторам и редакторам, оформляющим статьи и промостраницы.

На онлайн-курсах можно получить как базовые навыки верстки и оформления страниц при помощи HTMLи CSS, так и продвинутые приемы анимации, создания интерфейсов, адаптивной и кроссбраузерной верстки.

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

Онлайн-университет Skillbox

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

Программа курса:

  • Вводный модуль
  • HTML
  • Основы CSS
  • Основы JavaScript
  • Адаптивность и кроссбраузерность
  • Оформление
  • Advanced CSS
  • Инструменты верстальщика

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

Geekbrains

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

Слушатель научится:

  • Верстке статических сайтов
  • Валидной кроссбраузерной вёрстке
  • Блочной вёрстке
  • Выполнению базовых операций в Photoshop
  • Использованию препроцессоров LESS и Bootstrap

Программа курса:

  • Урок 1. Основные понятия в веб-разработке
  • Урок 2. Основы языка разметки документов HTML
  • Урок 3. Основы языка оформления стилей документа CSS
  • Урок 4. Псевдоклассы и псевдоэлементы, табличная верстка
  • Урок 5. Формирование блочной модели, блочная верстка
  • Урок 6. Работа с макетом дизайна в формате PSD
  • Урок 7. Разметка сайта и знакомство с Bootstrap
  • Урок 8. Стандарты web и вспомогательные инструменты

Слушателям выдается сертификат об окончании обучения.

Udemy

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

Рассматривается как фиксированная верстка сайтов, так и адаптивная верстка. Адаптивная верстка «подстраивается» под устройства с разными разрешениями экранов.

Программа курса:

  • Вводный урок — 1 лекция
  • Знакомство с HTML-тэгами — 4 лекции
  • CSS — Каскадная таблица стилей — 3 лекции
  • Главная страница. Создание верстки портала — 10 лекций
  • Страница просмотра фильмов — создание верстки портала — 5 лекций
  • Страницы списка фильмов и сериалов — 1 лекция
  • Страница рейтинг фильмов — 1 лекция
  • Адаптивная верстка — 5

Всего 30 лекций. После обучения выдается сертификат об окончании курса.

Университет интернет-профессий «Нетология»

Знания основ HTML и CSS нужны всем, кто хочет работать с вебом, независимо от того, планируете ли вы стать верстальщиком, frontend-разработчиком или backend-разработчиком.

Дизайнерам, контент-менеджерам, интернет-маркетологам и руководителям проектов также пригодится умение внести изменения на сайте.

Программа курса:

  • Базовый курс HTML
  • Базовый курс CSS
  • Основы клиент-серверного взаимодействия
  • Сопровождение ментора и полный разбор домашних заданий
  • Практические занятия

Школа онлайн обучения IT профессиям «LoftSchool»

«Основы вёрстки сайтов»

Слушатель за 5 недель качественно освоит верстку на HTML и CSS, и получит первый проект в портфолио.

Преимущества:

  • 11 обучающих модулей, 6 практических вебинаров, 100+ часов обучения
  • Личный наставник
  • Готовое портфолио
  • Доступ к материалам
  • Slack-чат

Программа:

  • Неделя 1 — Работа с хостингом, HTML
  • Неделя 2 — CSS, работа с PSD-макетом, Perfect Pixel
  • Неделя 3 — Flexbox, БЭМ-нейминг
  • Неделя 4 — CSS-анимации
  • Неделя 5 — Защита выпускного проекта

По окончании обучения слушатель получит сертификат с уникальным ID.

BangBangEducation

Основы веб-верстки

Программа руководителя кафедры «Дизайн и программирование» в Школе дизайна НИУ ВШЭ Захара Дня эффективно обучает основам веб-вёрстки. Студенты получат фундаментальные знания, поймут, как устроена информационная экосистема и получат базу для самостоятельного развития после окончания курса.

Чему вы научитесь:

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

Интерактивные онлайн-курсы «HTML Academy»

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

Программа:

  • Глава 1. Знакомство с HTML и CSS
  • Глава 2. Структура HTML-документа
  • Глава 3. Разметка текста
  • Глава 4. Ссылки и изображения
  • Глава 5. Основы CSS
  • Глава 6. Оформление текста

Всего: 6 глав, 95 заданий, 5 испытаний.

Портал «beonmax.com»

  • Введение
  • Подготовка к работе. Установка редактора кода
  • Основы HTML и CSS. Базовая разметка, HTML-теги, CSS-стили
  • Создание сайта на практике. Главная страница – верхняя часть и меню
  • Создание сайта на практике. Главная страница – правый блок
  • Создание сайта на практике. Главная страница – нижняя часть
  • Создание сайта на практике. Главная страница – фильмы, сериалы, блог
  • Создание сайта на практике. Страница просмотра фильмов
  • Создание сайта. Страницы фильмов и рейтинг фильмов
  • Создание сайта. Адаптивная верстка

По завершении курса выдается сертификат.

Школа веб-разработки «webcademy.ru»

165 видеоуроков, 32 практические задачи, 3 выпускных проекта.

Программа:

  • Неделя 1. Основы HTML разметки. Хостинг и домен
  • Неделя 2. Основы CSS
  • Неделя 3. Блочная верстка. Photoshop. Верстка макета. Сетка. Стартовый шаблон
  • Неделя 4. HTML фреймворки. Адаптивная верстка
  • Неделя 5. CSS3 эффекты. Препроцессор Less
  • Неделя 6. Знакомство с JavaScript. jQuery скрипты
  • Неделя 7. PHP. Блок по трудоустройству. Фриланс
  • Неделя 8. PHP. Ajax. Валидация форм
  • Неделя 9. Индивидуальный проект. Коучинг по фрилансу и трудоустройству
  • Неделя 10. Задания коучинга. Фриланс и трудоустройство
  • Неделя 11. Ускорение верстки. Сниппеты. Шаблоны и заготовки
  • Неделя 12. Проект менеджмент в веб-разработке. Задания коучинга

Стоимость:

  • «Тест драйв» — 900 р. (одна неделя обучения)
  • «Стандарт» — 18 000 р. (обучение в группе)
  • «Премиум» — 26 000 р. (обучение в группе и консультации с наставником)

После прохождения курса слушатель получает сертификат.

Портал «webshake.ru»

Основы вёрстки сайтов на HTML и CSS. Онлайн курс по HTML – это возможность самостоятельно сделать первый шаг на пути освоения специальности веб-разработчика.

Онлайн курс по HTML представляет собой серию уроков, объединенных в несколько разделов и сопровождающихся графическими и видеоматериалами. В конце каждой темы пользователю предлагается выполнить домашнее задание, которое позволит закрепить пройденное.

Программа:

  • Уровень 1. Введение и основы HTML
  • Уровень 2. Структура HTML-документа
  • Уровень 3. Разметка текста
  • Уровень 4. Ссылки
  • Уровень 5. Картинки
  • Уровень 6. Таблицы
  • Уровень 7. Формы
  • Уровень 8. Создание сайта и его выкладка в Интернет
  • Уровень 9. Подведение итога

После прохождения курса ученик получает сертификат об успешном обучении.

Портал «codebra.ru»

Первые десять курсов:

  • Знакомство с HTML (14 уроков и 5 практик)
  • Разметка текста (8 уроков и 3 практики)
  • Ссылки (3 урока)
  • Изображения (4 урока и 1 практика)
  • Таблицы (9 уроков и 1 практика)
  • Формы (10 уроков)
  • HTML5 (6 уроков)
  • Остальное (4 урока)
  • Знакомство с CSS (2 урока)
  • Селекторы в CSS (15 уроков)

Интерактивные курсы программирования «FructCode»

Интерактивный курс создания сайтов HTML и CSS с нуля — обучение HTML онлайн. 66 заданий и 5 часов видео.

В уроках HTML и CSS слушатель узнает:

  • Основы верстки сайтов (html и css)
  • Как пользоваться html-тэгами div, span, p, ul, li и другими
  • Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах
  • Как использовать css-свойства margin, position, padding, color, background и другие
  • Что такое адаптивная верстка
  • Как сделать верстку сайта
  • Как пользоваться инструментами разработчика в браузере Google Chrome
  • Что такое viewport и как его использовать
  • Как создать раздел с комментариями на сайте
  • Как встроить видео в html-страницу
  • Как изменить верстку сайта в браузере
  • Как связать html-страницы между собой
  • Как сверстать меню на сайте

После успешного прохождения уроков и заданий курса HTML/CSS слушатель получит сертификат на пяти языках.

Практические курсы по программированию «Hexlet»

Курс посвящен базовым концепциям веб-дизайна, языка разметки HTML и CSS. Слушатель научится делать статические веб-страницы, задавать стили элементам, думать о пространстве и расстояниях, работать с документом в браузере с Developer Tools, публиковать страницы в интернете и интегрировать их с социальными сетями.

Уроки курса:

  • Верстальщик vs. веб-дизайнер
  • Знакомство с HTML
  • Элементы, теги и атрибуты
  • Структура страницы
  • Основы CSS
  • Chrome DevTools
  • Каскад
  • div, span и display
  • Правило близости
  • Размещение на Github Pages
  • Интеграция с соц. сетями и семантический веб

Продолжительность курса – 8 часов.

АНО ДПО «ШАД»

За 7 месяцев обучения по 10 часов в неделю слушатель освоит востребованные навыки фронтенд-разработчика и соберёт портфолио проектов.

Стоимость:

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

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

Портал «web.cofp.ru»

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

Программа курса:

  • Введение в HTML
  • Первый HTML файл
  • Что такое ТЕГ?
  • Структура HTML файла
  • Атрибуты тегов
  • Теги форматирования текста
  • Списки
  • Ссылки
  • Изображения
  • Таблицы
  • Формы
  • Фреймы
  • Теги мета-данных
  • Подключение кода CSS и JAVASCRIPT
  • Заключение

Портал «coursera.org»

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

Программа курса:

  • Введение в HTML – продолжительность 2 часа
  • Введение в HTML, часть 2 – продолжительность 4 часа
  • Введение в CSS – продолжительность 3 часа
  • Шрифты и текст – продолжительность 4 часа
  • Анимации в CSS – продолжительность 4 часа

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

Related Articles

Как научиться модно одеваться и сочетать одежду: лучшие курсы и бесплатные уроки

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

Как научиться играть на барабанах, не выходя из дома: хорошие онлайн-школы, курсы и видео-уроки

4 Comments

Для тех кто хочет научиться верстать есть еще такие хорошие онлайн курсы https://wezom.academy/courses/html-css-js/
Они посвящены основам верстки HTML + CSS + JS
Также курсы будут полезены людям, которые занимаются администрированием и наполнением сайтов при помощи визуальных редакторов типа TinyMCE, CKEditor, Spaw и им подобных.

В подборке курсы хорошие, но бесплатной информации на них дается мало. Есть один действительно насыщенный бесплатный курс — https://imdiz.ru/kurs-html-verstki. Рекомендую включить в подборку.

Очень зря что авторы забыли упомянуть Михаила Русаков. Очень хороший автор отличных материалов

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *