Содержание

с нуля до сеньора / Хабр

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.

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

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


[большая по клику]

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

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

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

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

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-код. Но только не верстальщики — им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода — это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.

С чего начинается верстка?

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

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

Однако, представьте, что вы этакий верстальщик «2-в-одном», и вам по какой-то причине пришлось верстать макет вместо дизайнера, которому глубоко плевать на ваши проблемы.

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

Обучение верстке сайтов: с нуля до профессионала

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Инструменты для создания макета сайта

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

Есть люди, которые работают только с векторной графикой и используют для создания макетов Adobe Illustrator.
И еще один редактор, который я не пробовал, но который, по слухам, представляет вполне достойную альтернативу вышеперечисленным, — это Sketch, но он работает только под Mac OS.

Знакомимся — HTML

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

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

Без этой серверной логики были бы невозможны большинство онлайн-сервисов, которые мы используем каждый день и к которым так привыкли. Что касается HTML, то это совершенно несложный язык.

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

Совершенствуемся — CSS

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

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

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

Обязательно ли учить все тэги, атрибуты и свойства HTML/CSS?

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

Обучение верстке сайтов: с нуля до профессионала

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Упрощаем процесс верстки

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

Когда вы хорошо освоите CSS и начнете верстать что-то свое, уникальное, вам может перестать хватать гибкости этого языка, и вы захотите использовать какой-нибудь CSS-препроцессор. Препроцессоры убирают из кода CSS весь мусор, делают его более чистым и логичным, увеличивают степень абстракции при помощи переменных и прочих «фишек». Наиболее популярными препроцессорами считаются LESS, Sass и Stylus.

Высший пилотаж — JavaScript

Изучая более серьезные уроки верстки сайтов, вы встретите включенные в HTML элементы JavaScript, которые делают веб-страницы интерактивными. Если вы планируете заниматься не только Back-end, но и Front-end разработкой, то JavaScript нужно знать на очень хорошем уровне.

:)

Помимо самого языка, вам нужно знать всю инфраструктуру, которая существует вокруг него (библиотеки, фреймворки, браузерные интерфейсы и т. д). На освоение всех этих элементов у вас может уйти от одного года и до бесконечности (в зависимости от того, есть ли у вас личная жизнь :) ).

Подведем итоги

Итак, как вы уже, надеюсь, поняли, верстальщик — это очень важная и древняя Интернет-профессия, от которой зависит:

скорость загрузки сайта;

адекватность его отображения в различных браузерах;

адаптивность под различные пользовательские экраны;

соответствие HTML-стандартам и требованиям поисковиков.

Изучая и совершенствуя HTML, CSS, JavaScript, PHP, получая драгоценный опыт и пополняя наше Интернет-пространство качественными, красивыми и аккуратными с технической точки зрения сайтами, вы не только окажете обществу услугу, но и сможете достойно заработать. Подробнее на эту тему читайте в нашей статье Профессия верстальщик: как заработать на верстке сайтов.

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

До новых встреч, уважаемые коллеги и те, кто только вступает на эту нелегкую, но очень увлекательную тропу веб-разработки!

Обучение верстке сайтов: с нуля до профессионала

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее :)

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Курс Верстальщик 2020 — HTML 5, CSS 3, Bootstrap 4, JavaScript — Обучение верстке сайтов с нуля

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

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

Освойте на практике необходимые инструменты современной верстки сайтов и начните работать в сфере веб-разработки!

  • Установка и работа с редактором кода Visual Studio Code
  • Основы HTML и CSS
  • Структура HTML-документа, базовые теги, атрибуты
  • Подключение CSS-стилей, селекторы, свойства
  • Работа с текстом, ссылками, изображениями и другими элементами страницы
  • Верстка веб-страниц по макетам, как верстать страницы именно так, как было задумано дизайнером
  • Блочная верстка
  • Семантическая и валидная верстка
  • Адаптив (верстка под разные устройства) и кроссбраузерность
  • Анимации и трансформации
  • Методология БЭМ
  • Современный подход в верстке FlexBox
  • Препроцессор SASS/SCSS
  • Bootstrap 4 — работа с сеткой и использование компонентов Bootstrap на практике
  • Нарезка макетов Photoshop, Figma, Zeplin
  • JavaScript для верстальщика
  • Создание слайдера, модального окна, табов, фильтра карточек на практике
  • Использование js-библиотек — jQuery, галерея, анимации, параллакс-эффект, слайдер и др.

Для кого этот курс

  • Начинающие веб-разработчики
  • Те, кто когда-то изучал верстку и хочет актуализировать знания и стать профессионалом
  • Кто уже работает, но отстал от технологий или не мог ранее освоить JS

Начните свой путь в мир IT с веба. И этот курс станет для вас отличной платформой для дальнейших успехов в профессии!

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

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Верстальщик 2020 — HTML 5, CSS 3, Bootstrap 4, JavaScript.

Course Author

Михаил Непомнящий

О преподавателе курса

  • Профессиональный практик-преподаватель
  • По образованию — прикладной информатик
  • Работал и сотрудничал с крупными международными и российскими образовательными проектами

«Преподаю людям разных возрастов — от 8-ми лет до 60-ти. Любимая дисциплина — создание web-сайтов.

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

онлайн-лекции/интерактивные, для начинающих с нуля

  • Профессии
    • Профессии в аналитике Профессии в дизайне Профессии в маркетинге Профессии в менеджменте Профессии в программировании Все Профессии

      Кто такой UX-аналитик

      Профессии

      Профессия Data-маркетолог: чем занимается специалист по дата-маркетингу, сколько…

      Профессии

      Кто такой HR-аналитик

      Профессии в дизайне

      Профессия «архитектурный визуализатор»: подробное описание и обзор

      Профессии в дизайне

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

      Профессии в дизайне

      Профессия «флорист»: подробное описание и обзор

      Профессии в дизайне

      Профессия «фотограф»: подробное описание и обзор

      Профессии в маркетинге

      Head of SMM: кто это и чем занимается,…

      Профессии в маркетинге

      Профессия блогер: как использовать силу соцсетей для обогащения?

      Профессии в маркетинге

      Кто такой директор по маркетингу

      Профессии в маркетинге

      Профессия «контент-мейкер в спорте»: подробное описание и обзор

      Профессии в менеджменте

      Мастер презентации и публичных выступлений: подробное описание и…

      Профессии в менеджменте

      Профессия «руководитель отдела продаж»: подробное описание и обзор

      Профессии в менеджменте

      Профессия «онлайн-преподаватель»: подробное описание и обзор

      Профессии в менеджменте

      Специалист по управлению персоналом: какие функции выполняет, каким…

      Профессии в программировании

      Профессия «Инженер-программист»: подробное описание и обзор

      Профессии в программировании

      Кто такой BI-архитектор/BI-разработчик

      Профессии в программировании

      Профессия «Go-разработчик»: подробное описание и обзор

      Профессии в программировании

      Специалист по GIT: зачем нужна система управления версиями

      Профессии

      Профессия «Инженер-программист»: подробное описание и обзор

      Профессии

      Профессия «архитектурный визуализатор»: подробное описание и обзор

      Профессии

      Кто такой BI-архитектор/BI-разработчик

      Профессии

      Профессия «Дизайнер текстильного интерьера»: подробное описание и обзор

  • Онлайн-курсы
    • Курсы для бизнеса Курсы по дизайну Курсы по маркетингу Курсы по программированию Все Курсы для бизнеса

      Топ-10 курсов по управлению командами

      Курсы для бизнеса

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

      Курсы для бизнеса

      Топ-10 курсов для финансистов

      Курсы для бизнеса

      Топ-3 курса по работе с персоналом в спортивной…

      Курсы по дизайну

      ТОП-8 курсов Tilda: создание сайтов с нуля

      Курсы по дизайну

      Топ-11 курсов для 3D-дизайнеров

      Курсы по дизайну

      Топ-10 курсов по ландшафтному дизайну

      Курсы по дизайну

      Топ-6 курсов по сервисному дизайну

      Курсы по маркетингу

      Топ-11 курсов по сквозной аналитике

      Курсы по маркетингу

      Топ-9 курсов по контент-менеджменту

      Курсы по маркетингу

      Топ-6 курсов для директоров по маркетингу

      Курсы по маркетингу

      Топ-7 курсов по созданию спортивного контента

      Курсы по программированию

      Топ-6 курсов для VR & AR-разработчиков

      Курсы по программированию

      Топ-3 курса по компьютерному зрению (Computer Vision)

      Курсы по программированию

      Топ-5 курсов по Power BI

      Курсы по программированию

      Топ-10 курсов по тестированию мобильных приложений

      Онлайн-курсы

      Летние скидки в Skillbox

      Онлайн-курсы

      Топ-11 курсов по сквозной аналитике

      Онлайн-курсы

      Топ-10 курсов по управлению командами

      Онлайн-курсы

      Топ-12 курсы по управлению на Agile: Scrum, Kanban,…

  • Рубрики
    • Soft Skills Аналитика Веб аналитика Базовые понятия Бизнес и управление Менеджмент проектов Продажи ВКонтакте Дизайн Бренд дизайн Веб-дизайн Графический дизайн Дизайн интерьеров Инстаграм Интернет-маркетинг Email-маркетинг SEO SMM Контекстная реклама (PPC) Копирайтинг Фриланс Программирование Все Soft Skills

      «Google Таблицы»: гайд для простых людей

      Аналитика

      Гайд по сервису Яндекс.Метрика: как настроить и не…

      Аналитика

      Профессия аналитик: обязанности, зарплата, где учиться и как…

      Аналитика

      Профессия Web-аналитик: кто такой и чем занимается, зарплата…

      Веб аналитика

      Гайд по сервису Яндекс.Метрика: как настроить и не…

      Базовые понятия

      Типизация в программировании или как выбрать свой язык

      Базовые понятия

      Стоимость привлечения клиента (CAC): расчет и формулы

      Базовые понятия

      Как рассчитать LTV: формула и пример расчёта жизненной…

      Базовые понятия

      Что такое CPS (PPS): показатель, формула расчёта, модель…

      Базовые понятия

Что должен уметь верстальщик в 2020 году — Блог HTML Academy

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

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

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

  • Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
  • Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
  • Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
  • Использует Git. Умеет работать в GitHub.
  • Может натянуть вёрстку на CMS: Bitrix и Wordpress.
  • JavaScript пишет с помощью jQuery, но не чурается ES6.
  • Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
  • Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
  • Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Верстальщический вундерлист

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

  • SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
  • Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
  • БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
  • Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
  • PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
  • Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей.
  • Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
  • Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
  • jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
  • Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что там с Фотошопом и Иллюстратором

Некоторые ребята говорят, что их всерьёз кто-то использует.

Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

А портфолио откуда брать?

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

Что об этом всём думают в индустрии?

Я спросил Катю, которая раньше верстала в Яндекс.Деньгах, о том, что должен уметь верстальщик, чтобы его все хотели. Катя отвечает:

По опыту: нужно точно, быстро и адаптивно.

Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.

Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.

Нынче если ищут именно верстальщика, а не полноценного фронта, значит последний уже есть, а вёрстки много и/или она сложная. Значит можно не знать JavaScript, но стоит освоить любой шаблонизатор, одну из популярных методологий, познакомиться с существующими библиотеками компонентов.

Чтобы тебя все хотели, нужно много и быстро верстать. А для этого нужно активно пользоваться доступными инструментами и подходами и уметь выбирать подходящие. Что, конечно, выходит далеко за рамки знания HTML и CSS.


Катя Иванова, перевела бабушку на React.

Что ещё?

Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.

Новая профессия не за горами

Мы перезвоним и расскажем всё о том, как стать верстальщиком.

Хочу консультацию

Нажатие на кнопку — согласие на обработку персональных данных

бесплатные и платные программы обучения

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

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

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

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

«Профессия Frontend-разработчик»

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

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

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

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

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

«Основы HTML и CSS»

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

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

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

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

Geekbrains

«HTML/CSS. Интерактивный курс»

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

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

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

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

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

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

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

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

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

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

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

Программа:

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

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

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

«Знакомство с HTML и CSS»

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

Программа:

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

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

Портал «beonmax.com»

«Курс HTML / CSS»

Интерактивный онлайн курс HTML и CSS программирования и верстки сайтов для начинающих. Обучение HTML с нуля.

В процессе обучения слушатель получит знания и навыки:

  • Основы HTML и CSS
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Работа в редакторе кода SublimeText
  • Практическое применение основных тегов HTML
  • CSS-верстка текста: цвет и размер шрифта
  • Позиционирование блоков на сайте
  • Работа с изображениями
  • Правильная HTML-разметка для SEO
  • Адаптивная верстка под мобильные устройства
  • Специальные классы для адаптивности
  • Полезные инструменты для frontend-разработчика

План курса:

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

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

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

«Профессия HTML верстальщик»

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 для начинающих»

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

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

Программа:

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

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

Портал «codebra.ru»

Бесплатные онлайн-курсы по HTML и CSS. 37 курсов и 138 уроков.

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

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

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

«Курс HTML/CSS»

Интерактивный курс создания сайтов 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 и веб-дизайна»

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

Уроки курса:

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

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

АНО ДПО «ШАД»

Фронтенд-разработчик собирает сайт по макету, пользуясь языками HTML и CSS. Понимает процессы, сопутствующие созданию сайта и его публикации в сети. Включается в совместную работу через Git и умеет настраивать сборку проекта инструментом Webpack.

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

Стоимость:

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

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

Портал «udemy.com»

Видеокурс «HTML и CSS»

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

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

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

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

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

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

«Курс по HTML»

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

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

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

Портал «coursera.org»

«Основы HTML и CSS»

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

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

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

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

16 cовременных ресурсов для обучения основам вёрстки

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

  1. htmlbook.ru —  крупный веб-портал, посвящённый изучению в большинстве своем веб-программированию. Здесь вы найдете множество информации об основах html и css.
  2. w3.org — это организация, которая занимается вопросами совместимости браузеров и веб-приложений. Так же они занимаются проблемами аппаратной и программной совместимости для доступа к сети.
  3. css-live.ru — курс, рассчитанный на тех, кто только знакомится с вёрсткой, начинающих верстальщиков и тех, кто нуждается в систематизации своих навыков.
  4. javascript.ru — сайт, на котором предоставлена грамотная и структурированная информация для изучения языка javascript и смежных технологий. Там же вы найдёте современный учебник JavaScript.
  5. html5boilerplate.com — самый популярный фронтальный шаблон.
  6. habrahabr.ru — статья, где представлен перечень книг, что можно почитать по веб-разработке.
  • codecademy.com – этот сервис предлагает интерактивный и весёлый способ обучения. Он помогает научиться программировать всем тем, кто хочет основать собственные технологические компании, не имея необходимых технических навыков.
  • teamtreehouse.com – образовательный сервис, который учит вас проектировать приложения и веб-ресурсы, он так же рассказывает, как эти полезные навыки можно применить для создания своего собственного бизнеса.
  • htmlacademy.ru – курсы для всех. Интерактивные задания помогут освоить веб-технологии и создать сайт, а интенсивные курсы подготовят к старту карьеры в IT.
  • tutsplus.com— tutlpus.com является англоязычным аналогом htmlacademy. А выделенный курс поможет вам освоить в короткие сроки основы верстки.
  • html5+css3 – видеоуроки Дмитрия Охрименко, которые расскажут, как создавать страницы с использованием новой семантической разметки основной на HTML5 и CSS3. Также Вы узнаете, как можно разместить на странице видео или аудио, узнаете, что такое Geolocation API и сможете разрабатывать интересные приложения, определяющие месторасположение пользователя.
  • Twitter Bootstrap – видеоуроки Сергея Швайцера. Это CSS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов.
  • rightblog.ru– курс для тех, кто хочет получить знания, чтобы не разбираться самому в самоучителях, и сэкономить время и получить конкретные готовые знания и навыки, можно пройти онлайн курсы.
  • dash.generalassemb.ly – это увлекательный и бесплатный онлайн-курс, который научит вас основам веб-разработки, в рамках проектов вы можете сделать в вашем браузере.
  • IDE, например, от JetBrains — Webstorm – интегрированная среда разработки, на которой лучше начинать верстать, она будет на лету указывать на ошибки и недостатки верстки.
  • initializr.com – генератор проектов на основе HTML5. Он «из коробки» позволяет делать mobile first шаблоны, да еще и на последней сборке boilerplate.

Освойте css-фреймворк, а лучше парочку. Я мечтаю о верстальщиках, которые не будут каждый раз изобретать велосипед, словно верстают под хайлоад, где каждый байт на счету.

Начните углубляться дальше в понятие семантики вёрстки, анализируйте css-фреймворки для вёрстки (Bootstrap и подобные) на предмет разметки и в целом. Потом просто берите любой макет (благо в сети PSD макетов хватает) и верстайте, верстайте, верстайте. Желательно чтобы у вас был человек, который сможет оценить проделанную работу и указать вам на ваши недостатки.

И еще раз верстайте верстайте и верстайте! Всем удачной вёрстки!

Другие материалы по теме вёрстки:

10 способов проверить знания HTML/CSS
Подборка материалов по HTML и CSS

Изучите веб-разработку как абсолютный новичок (2020)

Вы пытаетесь изучать веб-разработку как новичок, но не знаете, с чего начать?

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

Во-первых, вот шаги, которые вы должны будете выполнить как начинающий веб-разработчик.

Шаги для изучения основ веб-разработки:

  1. Основы : как работают веб-сайты, интерфейс против внутреннего, с использованием редактора кода
  2. Основы : HTML, CSS и JavaScript
  3. Инструменты : Менеджеры пакетов, инструменты сборки, контроль версий
  4. Дополнительный интерфейс : Sass, адаптивный дизайн, платформы JavaScript
  5. Базовые основы : Серверы и базы данных, язык программирования

Я рекомендую выполнять шаги 1, 2 и 3 по порядку.Затем, в зависимости от того, хотите ли вы сосредоточиться на большем количестве фронтэнда или бэкенда, вы можете выполнять шаги 4a или 4b в любом порядке.

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

Дорожная карта для изучения веб-разработки (инфографика)

Вот полезная инфографика, показывающая все шаги в дорожной карте для изучения веб-разработки как новичка!

Нажмите для загрузки полноразмерного изображения

Теперь давайте перейдем прямо к первому шагу!

1: Что такое веб-разработка?

Прежде чем мы перейдем к реальному кодированию, давайте сначала посмотрим на некоторые
общая информация о веб-разработке: как работают веб-сайты,
Разница между front и back-end и использованием редактора кода.

Как работают сайты?

Все веб-сайты, по своей сути, представляют собой просто набор файлов, которые хранятся на компьютере, называемом сервером .
Этот сервер подключен к интернету. Вы можете загрузить это
веб-сайт через браузер (например, Chrome, Firefox или Safari) на вашем
компьютер или телефон. В этой ситуации ваш браузер также называется клиентом .

Итак, каждый раз, когда вы находитесь в Интернете, вы (клиент)
получать и загружать данные (например, картинки с кошек) с сервера, а также
отправка данных обратно на сервер ( load moar cat pics! ) Это и обратно между клиентом и сервером является основой Интернета.

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

В чем разница между интерфейсом и сервером?

Термины «интерфейс», «сервер» и «полный стек» веб-разработчик
опишите, какая часть отношений клиент / сервер вы работаете
с участием.

«Фронтэнд» означает, что вы имеете дело главным образом с клиентской стороной.Это называется «передний конец», потому что это то, что вы можете увидеть в
браузер. И наоборот, «бэкэнд» — это часть веб-сайта, которую вы
не могу видеть, но он обрабатывает много логики и функциональности
это необходимо для того, чтобы все работало.

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

С другой стороны, фоновая веб-разработка похожа на «заднюю часть
дом »часть ресторана. Это где поставки и инвентарь
удалось, и процесс создания пищи все происходит. Там много
за кулисами, которые клиенты не увидят, но они
испытать (и, надеюсь, насладиться) конечный продукт — вкусная еда!

Помимо

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

Использование редактора кода

Когда вы создаете сайт, самый важный инструмент, который вы будете использовать
Ваш редактор кода или IDE (Интегрированная среда разработки).это
инструмент позволяет вам написать разметку и код, который будет составлять
интернет сайт.

Есть немало хороших вариантов, но в настоящее время самый популярный редактор кода — VS Code. Кодекс VS
более легкая версия Visual Studio, основной среды разработки Microsoft.
Это быстрый, бесплатный, простой в использовании, и вы можете настроить его с темами и
расширения.

Другие редакторы кода — Sublime Text, Atom и Vim.

Если вы только начинаете, я бы порекомендовал проверить VS Code, который вы можете загрузить с их сайта.

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

2: базовый интерфейс

Внешний интерфейс веб-сайта состоит из трех типов файлов: HTML,
CSS и JavaScript. Эти файлы загружаются в браузере, на
на стороне клиента.

Давайте внимательнее посмотрим на каждого из них.

HTML

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

Например, вы можете использовать теги для создания заголовков заголовков, абзацев,
маркированные списки, изображения и так далее. HTML-теги сами по себе имеют некоторые
прикрепленные стили, но они довольно простые, как то, что вы увидите в
Документ Word.

CSS

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

В CSS много глубины, и иногда люди склонны
над ним, чтобы они могли перейти к таким вещам, как JavaScript. Тем не менее, я не могу
переоценивать важность понимания, как преобразовать дизайн
в макет сайта с помощью CSS. Если вы хотите специализироваться на front-end,
важно иметь действительно твердые навыки CSS.

JavaScript

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

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

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

Где выучить HTML, CSS и JavaScript

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

Примечание : некоторые из ссылок ниже (ссылки на платные курсы и книги) являются партнерскими ссылками, что означает, что я получу комиссию, если вы совершите покупку через них без дополнительных затрат для себя.Это один из способов помочь мне в создании таких полезных ресурсов, как этот!

Одно из моих любимых мест, чтобы порекомендовать мне

.

HTML компьютерных элементов кода


HTML содержит несколько элементов для определения пользовательского ввода и
компьютерный код.



HTML для ввода с клавиатуры

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

Пример

Определите некоторый текст как ввод с клавиатуры в документе:

Сохраните документ, нажав Ctrl + S

Результат:

Сохраните документ, нажав Ctrl + S

Попробуй сам "


HTML для вывода программы

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

Пример

Определите некоторый текст как пример вывода из компьютерной программы в документе:

Сообщение с моего компьютера:

Файл не найден.
Нажмите F1, чтобы
продолжить

Результат:

Сообщение с моего компьютера:

Файл не найден.
Нажмите F1, чтобы продолжить

Попробуй сам "



HTML для компьютерного кода

Используется элемент HTML
определить кусок компьютерного кода.Содержимое внутри отображается в
моноширинный шрифт браузера по умолчанию.

Пример

Определите некоторый текст как компьютерный код в документе:

<код>
х = 5;
у = 6;
z = x + y;

Результат:


х = 5;
у = 6;
z = x + y;

Попробуй сам "

Обратите внимание, что элемент не сохраняет лишних пробелов и переносов строк.

Чтобы исправить это, вы можете поместить элемент внутри элемента

 : 


HTML для переменных

Используется элемент HTML
определяет переменную в программировании или в математическом выражении.
содержимое внутри обычно отображается курсивом.

Пример

Определите некоторый текст как переменные в документе:

Площадь треугольника: 1/2 x b x h , где b
является основанием, а h является вертикальной высотой.

Результат:

Площадь треугольника: 1/2 x b x h , где b - основание, а h - вертикальная высота.

Попробуй сам "


Краткое содержание главы

  • Элемент используется для определения
    ввод с клавиатуры
  • Элемент используется для определения
    Пример вывода из компьютерной программы
  • Элемент используется для
    определить кусок компьютерного кода
  • Элемент используется для
    определяет переменную в программировании или в математическом выражении
  • Элемент
      используется для определения
    предварительно отформатированный текст

HTML Упражнения


HTML компьютерных элементов кода

Tag Описание
<код> Определяет программный код
Определяет ввод с клавиатуры
<образец> Определяет вывод компьютера
Определяет переменную
 
Определяет предварительно форматированный текст

,

Введение в HTML


HTML - это стандартный язык разметки для создания веб-страниц.


Что такое HTML?

  • HTML обозначает язык гипертекстовой разметки
  • HTML является стандартным языком разметки для создания веб-страниц
  • HTML описывает структуру веб-страницы
  • HTML состоит из серии элементов
  • HTML-элементов говорят браузеру, как отображать контент
  • HTML-элементы обозначают фрагменты контента, такие как «это заголовок», «это
    это абзац "," это ссылка "и т. д.

Простой HTML-документ

Пример

Page Title

Мой первый заголовок

Мой первый абзац.


Попробуй сам "

Пример объяснения

  • Декларация определяет
    что этот документ является HTML5 документом
  • элемент является корневым элементом HTML
    страница
  • Элемент содержит метаинформацию о
    HTML-страница
  • Элемент </code> определяет заголовок для<br /> HTML-страница (которая отображается в строке заголовка браузера или на вкладке страницы) </li> <li> Элемент <body> </code> <code> определяет<br /> тело документа и является контейнером для всего видимого содержимого, такого как<br /> заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.</li> <li> Элемент <code> <div> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3><span class="ez-toc-section" id="_HTML-5"> Что такое элемент HTML? </span></h3> <p> HTML-элемент определяется начальным тегом, некоторым содержимым и конечным тегом: </p> <p> <tagname> Содержимое идет сюда ... </ tagname> </p> <p> Элемент </strong> HTML <strong> - это все от начального тега до конечного тега: </p> <p> <H2> Мой<br /> Первый заголовок </ h2> </p> <p><p> Мой первый абзац.</ Р> </p> <table> <tr> <th> Стартовый тег </th> <th> Содержимое элемента </th> <th> Конечная метка </th> </tr> <tr> <td> <div> </td> <td> Моя первая рубрика </td> <td> </ h2> </td> </tr> <tr> <td> </td> <td> Мой первый абзац. </td> <td> </ p> </td> </tr> <tr> <td> </td> <td> <em> нет </em> </td> <td> <em> нет </em> </td> </tr> </table> <p> <strong> Примечание: </strong> Некоторые элементы HTML не имеют содержимого (например, <br /> элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега! </p> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-51"> Веб-браузеры </span></h3> <p> Целью веб-браузера (Chrome, Edge, Firefox, Safari) является чтение документов HTML и их отображение.<br /> правильно. </p> <p> Браузер не отображает теги HTML, но использует их для определения способа отображения документа: </p> </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-6"> Структура HTML-страницы </span></h3> <p> Ниже представлена ​​визуализация структуры HTML-страницы: </p> <p> <title> Название страницы </ title> </p> <p><div> Это заголовок </ h2> </p> <p><p> Это абзац.</ p> </p> <p><p> Это еще один абзац. </ P> </p> <p> <strong> Примечание: </strong> Только содержимое внутри раздела <body> (белая область выше)<br /> будет отображаться в браузере. </p> <hr/> <h3><span class="ez-toc-section" id="_HTML-7"> История HTML </span></h3> <p> С первых дней существования всемирной паутины было много версий HTML: </p> <p> Это руководство соответствует последнему стандарту HTML 5. </p> <p></p> <p> ,</p> <div> Поезд кодирования · GitHub </h2> <p> перейти к содержанию</p> <p> CodingTrain</p> <p> Зарегистрироваться</p> <ul> <li> <p> Почему GitHub?</p> <p> Особенности →</p> <ul> <li> Обзор кода </li> <li> Управление проектами </li> <li> Интеграция </li> <li> Действия </li> <li> Пакеты </li> <li> Безопасность </li> <li> Управление командой </li> <li> Хостинг </li> </ul> <ul> <li> Отзывы клиентов → </li> <li> Безопасность → </li> </ul> </li> <li> команда </li> <li> предприятие </li> <li> <p> Проводить исследования</p> <ul> <li> Исследуйте GitHub → </li> </ul> <h5><span class="ez-toc-section" id="i-52"> учиться и внести свой вклад </span></h5> <ul> <li> Темы </li> <li> Коллекции </li> <li> Тенденции </li> <li> Learning Lab </li> <li> Руководства с открытым исходным кодом </li> </ul> <h5><span class="ez-toc-section" id="i-53"> Общайтесь с другими </span></h5> <ul> <li> События </li> <li> Общественный форум </li> </ul> </li> </ul> <p>.</p> <div class="wp_rp_wrap wp_rp_pinterest" id="wp_rp_first"><div class="wp_rp_content"><ul class="related_post wp_rp"><li data-position="0" data-poid="in-1475" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/%d0%ba%d0%b0%d0%ba-%d0%bd%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d1%82%d1%8c-email-%d0%ba%d0%b0%d0%ba-%d0%bf%d1%80%d0%b0%d0%b2%d0%b8%d0%bb%d1%8c%d0%bd%d0%be-%d0%bd%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d1%82%d1%8c.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/11.jpg" alt="Как написать email: Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо…" width="150" /></a><a href="https://1agenstvo.ru/raznoe/%d0%ba%d0%b0%d0%ba-%d0%bd%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d1%82%d1%8c-email-%d0%ba%d0%b0%d0%ba-%d0%bf%d1%80%d0%b0%d0%b2%d0%b8%d0%bb%d1%8c%d0%bd%d0%be-%d0%bd%d0%b0%d0%bf%d0%b8%d1%81%d0%b0%d1%82%d1%8c.html" class="wp_rp_title">Как написать email: Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо…</a></li><li data-position="1" data-poid="in-1070" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/zakryt-ot-indeksacii-chast-teksta-pravilnoe-zakrytie-ot-indeksacii-ssylok-i-teksta-na-sajte.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/2.jpg" alt="Закрыть от индексации часть текста: Правильное закрытие от индексации ссылок и текста на сайте" width="150" /></a><a href="https://1agenstvo.ru/raznoe/zakryt-ot-indeksacii-chast-teksta-pravilnoe-zakrytie-ot-indeksacii-ssylok-i-teksta-na-sajte.html" class="wp_rp_title">Закрыть от индексации часть текста: Правильное закрытие от индексации ссылок и текста на сайте</a></li><li data-position="2" data-poid="in-1371" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/%d0%bd%d0%be%d0%b2%d1%8b%d0%b5-%d1%81%d0%bb%d0%be%d0%b2%d0%b0%d1%80%d0%bd%d1%8b%d0%b5-%d1%81%d0%bb%d0%be%d0%b2%d0%b0-%d0%b8-%d0%b8%d1%85-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d0%bb.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/9.jpg" alt="Новые словарные слова и их значение: Словарь современных слов" width="150" /></a><a href="https://1agenstvo.ru/raznoe/%d0%bd%d0%be%d0%b2%d1%8b%d0%b5-%d1%81%d0%bb%d0%be%d0%b2%d0%b0%d1%80%d0%bd%d1%8b%d0%b5-%d1%81%d0%bb%d0%be%d0%b2%d0%b0-%d0%b8-%d0%b8%d1%85-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d0%bb.html" class="wp_rp_title">Новые словарные слова и их значение: Словарь современных слов</a></li><li data-position="3" data-poid="in-4171" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/%d1%81%d0%be%d1%83%d1%81-%d1%81%d1%80%d0%b8%d1%80%d0%b0%d1%87%d0%b0-%d1%87%d1%82%d0%be-%d1%8d%d1%82%d0%be-%d1%82%d0%b0%d0%ba%d0%be%d0%b5-%d1%81-%d1%87%d0%b5%d0%bc-%d0%b5%d0%b4%d1%8f%d1%82-%d1%81.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/28.jpg" alt="Соус срирача: что это такое, с чем едят, состав и другое" width="150" /></a><a href="https://1agenstvo.ru/raznoe/%d1%81%d0%be%d1%83%d1%81-%d1%81%d1%80%d0%b8%d1%80%d0%b0%d1%87%d0%b0-%d1%87%d1%82%d0%be-%d1%8d%d1%82%d0%be-%d1%82%d0%b0%d0%ba%d0%be%d0%b5-%d1%81-%d1%87%d0%b5%d0%bc-%d0%b5%d0%b4%d1%8f%d1%82-%d1%81.html" class="wp_rp_title">Соус срирача: что это такое, с чем едят, состав и другое</a></li><li data-position="4" data-poid="in-1609" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/%d0%b2%d0%b8%d0%b1%d1%80%d0%be%d0%bf%d1%83%d0%bb%d1%8f-%d0%ba%d0%b0%d0%ba-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d1%87%d1%82%d0%be-%d1%8d%d1%82%d0%be-%d1%82%d0%b0.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/25.jpg" alt="Вибропуля как использовать: что это такое, для чего нужна и как пользоваться правильно" width="150" /></a><a href="https://1agenstvo.ru/raznoe/%d0%b2%d0%b8%d0%b1%d1%80%d0%be%d0%bf%d1%83%d0%bb%d1%8f-%d0%ba%d0%b0%d0%ba-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d1%87%d1%82%d0%be-%d1%8d%d1%82%d0%be-%d1%82%d0%b0.html" class="wp_rp_title">Вибропуля как использовать: что это такое, для чего нужна и как пользоваться правильно</a></li><li data-position="5" data-poid="in-1913" data-post-type="none" ><a href="https://1agenstvo.ru/raznoe/%d1%81%d1%82%d0%b0%d1%82%d1%8c-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d1%87%d0%b8%d0%ba%d0%be%d0%bc-%d0%b0%d0%bd%d0%b4%d1%80%d0%be%d0%b8%d0%b4-31-%d1%81%d0%be%d0%b2%d0%b5%d1%82-%d0%b1.html" class="wp_rp_thumbnail"><img src="https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/12.jpg" alt="Стать разработчиком андроид: 31 совет / Блог компании Alconost / Хабр" width="150" /></a><a href="https://1agenstvo.ru/raznoe/%d1%81%d1%82%d0%b0%d1%82%d1%8c-%d1%80%d0%b0%d0%b7%d1%80%d0%b0%d0%b1%d0%be%d1%82%d1%87%d0%b8%d0%ba%d0%be%d0%bc-%d0%b0%d0%bd%d0%b4%d1%80%d0%be%d0%b8%d0%b4-31-%d1%81%d0%be%d0%b2%d0%b5%d1%82-%d0%b1.html" class="wp_rp_title">Стать разработчиком андроид: 31 совет / Блог компании Alconost / Хабр</a></li></ul></div></div> <div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div><!-- .post-content --> <div class="clear"></div> <div class="post-meta-bottom"> <p class="post-categories"><span class="category-icon"><span class="front-flap"></span></span> <a href="https://1agenstvo.ru/category/raznoe" rel="category tag">Разное</a></p> <div class="clear"></div> <div class="post-nav"> <a class="post-nav-older" href="https://1agenstvo.ru/raznoe/%d1%8d%d0%ba%d0%be%d0%bd%d0%be%d0%bc%d0%b8%d1%81%d1%82-%d0%bd%d0%b0-%d0%bf%d1%80%d0%b5%d0%b4%d0%bf%d1%80%d0%b8%d1%8f%d1%82%d0%b8%d0%b8-%d1%87%d1%82%d0%be-%d0%b4%d0%be%d0%bb%d0%b6%d0%b5%d0%bd-%d0%b7.html"> <h5>Previous post</h5> Экономист на предприятии что должен знать: Должностные обязанности экономиста на предприятии :: BusinessMan.ru </a> <a class="post-nav-newer" href="https://1agenstvo.ru/raznoe/htaccess-https-wordpress-%d0%bd%d0%b0%d1%81%d1%82%d1%80%d0%be%d0%b8%d1%82%d1%8c-%d0%b2-wordpress-%d1%80%d0%b5%d0%b4%d0%b8%d1%80%d0%b5%d0%ba%d1%82-%d0%bd%d0%b0-https-%d0%b7%d0%b0-5-%d0%bc%d0%b8%d0%bd.html"> <h5>Next post</h5> Htaccess https wordpress: Настроить в WordPress редирект на HTTPS за 5 минут </a> <div class="clear"></div> </div><!-- .post-nav --> </div><!-- .post-meta-bottom --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/verstalshhik-html-obuchenie-%F0%9F%92%BE-verstka-sajta-s-nulya-podborka-luchshix-kursov-po-html-css.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://1agenstvo.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='1088' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- .post --> </div><!-- .posts --> </div><!-- .content --> <div class="sidebar right" role="complementary"> <div class="widget widget_search"><div class="widget-content"><form role="search" method="get" id="searchform" class="searchform" action="https://1agenstvo.ru/"> <div> <label class="screen-reader-text" for="s">Найти:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Поиск" /> </div> </form></div><div class="clear"></div></div><div class="widget widget_categories"><div class="widget-content"><h3 class="widget-title">Рубрики</h3> <ul> <li class="cat-item cat-item-6"><a href="https://1agenstvo.ru/category/%d0%b2%d0%b5%d0%b1">Веб</a> </li> <li class="cat-item cat-item-7"><a href="https://1agenstvo.ru/category/%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80">Дизайнер</a> </li> <li class="cat-item cat-item-8"><a href="https://1agenstvo.ru/category/%d0%b8%d0%b4%d0%b5%d0%b8">Идеи</a> </li> <li class="cat-item cat-item-5"><a href="https://1agenstvo.ru/category/portfolio">Портфолио</a> </li> <li class="cat-item cat-item-4"><a href="https://1agenstvo.ru/category/rabota">Работа</a> </li> <li class="cat-item cat-item-3"><a href="https://1agenstvo.ru/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-10"><a href="https://1agenstvo.ru/category/%d1%81%d0%be%d0%b2%d0%b5%d1%82">Совет</a> </li> <li class="cat-item cat-item-1"><a href="https://1agenstvo.ru/category/sovety">Советы</a> </li> <li class="cat-item cat-item-9"><a href="https://1agenstvo.ru/category/%d1%84%d1%80%d0%b8%d0%bb%d0%b0%d0%bd%d1%81%d0%b5%d1%80">Фрилансер</a> </li> </ul> </div><div class="clear"></div></div><div class="widget_text widget widget_custom_html"><div class="widget_text widget-content"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </div></div><div class="clear"></div></div> </div><!-- /sidebar --> <div class="clear"></div> </div><!-- .wrapper --> <div class="footer section large-padding bg-dark"> <div class="footer-inner section-inner"> <!-- .footer-a --> <!-- .footer-b --> <!-- .footer-c --> <div class="clear"></div> </div><!-- .footer-inner --> </div><!-- .footer --> <div class="credits section bg-dark no-padding"> <div class="credits-inner section-inner"> <p class="credits-left"> 2020 © Все права защищены. </p> <p class="credits-right"> 2020 © Все права защищены. </p> <div class="clear"></div> </div><!-- .credits-inner --> </div><!-- .credits --> </div><!-- .big-wrapper --> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://1agenstvo.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://1agenstvo.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.5.1' type='text/css' media='all' /> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/themes/hemingway/js/global.js?ver=1.75' id='hemingway_global-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/wordpress-23-related-posts-plugin/static/js/pinterest.js?ver=3.6.4' id='wp_rp_pinterest-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://1agenstvo.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){return} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){return} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://1agenstvo.ru/wp-content/plugins/wp-rocket/assets/js/lazyload/12.0/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> </body> </html>