Топ-10 курсов по обучению html и css с нуля +бесплатные

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

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

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

Работа верстальщиком удаленно

Где ее найти? Ведь во фрилансе основная проблема – найти заказ. А новичкам сделать это очень и очень сложно, особенно если вы самоучка и нет опыта реальной работы.

Первый опыт можно получить бесплатно. Т.е. предлагать свои услуги за положительный отзыв. Найти заказчиков несложно – находите сайты и предлагайте сделать верстку за положительный отзыв. Многие вебмастера будут рады такому предложению, а в дальнейшем будут обращаться к вам по другим вопросам (уже платно) или посоветуют знакомым. Главное покажите себя с лучшей стороны.
Найти работу можно там, где требуется постоянно создавать или дорабатывать сайты. Так что вам стоит обратиться в студии веб-дизайна или крупные интернет-проекты. Можно напрямую написать веб-студиям с предложением о сотрудничестве. На первых порах можно работать на бесплатной основе (испытательный срок + обучение), а через месяц выйти на оплату. Так вы сможете получить реальный опыт работы, а потом сможете пристроиться на постоянную удаленную работу. Но тут многое зависит от ваших умений, талантов и удачи.
Не забывайте про самый распространенный вариант – биржи фриланса. Именно там новички могут получить свой первых опыт, хотя взять первый заказ будет проблематично. На сайте weblancer.net довольно много заказов по верстке, а конкуренция не так сильна как на fl.ru

5 советов для начинающих верстальщиков:

Думай. Верстка это не простое дело, которому легко и просто обучиться.
Будь в курсе всего нового в этой сфере – читайте блоги, форумы, сайты и другие источники информации по этой теме. Постоянно появляются новые технологии, техники, выявляются распространенные ошибки – вы должны держать руку на пульсе, чтобы не пропустить важную информацию.
Html + css – старайтесь по минимуму использовать javascript, чтобы ускорить загрузку страницы.
Используйте наработки – сохраняйте свои старые наработки, чтобы была возможность к ним вернуться и воспользоваться в новом проекте.
Занимайтесь версткой только если вам действительно это интересно. Просто выучить Html и css мало – надо жить версткой. Ведь в каком-то смысле это искусство, в котором нужно отдавать все свои силы, время и интерес, и только тогда можно получить удовольствие от работы и прийти к успеху.

Так что прежде чем задаваться вопросом «как стать верстальщиком с нуля», спросите себя «нравится ли мне работа верстальщиком удаленно или лучше попробовать что-то другое?». Ведь вариантов очень много, и это не та сфере, в которую стоит идти только ради денег.

На каких сайтах можно освоить HTML и CSS?

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

Адрес сайта	Описание сайта
Курс «Старт в программировании» в Нетологии	Онлайн-курс, который позволяет попробовать себя в роли программиста и сделать первый личный проект. Здесь можно познакомиться с популярными языками: JavaScript, HTML, CSS, ECMAScript. Формат обучения: лекции в записи, а также живые вебинары по вечерам. Идет две недели.
	Онлайн-школа программирования. Здесь можно освоить профессию верстальщика. Оплата идет по подписке. Обучение состоит из уроков, упражнений на тренажере и проверочных тестов.
	Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
	На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
	На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
	На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
	Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
	Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
	Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
	Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
	Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
	На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
	Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
	На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
	Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список,
вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и
переместим элементы налево, где были маркеры. Так же мы нарисуем
каждый элемент списка на белом фоне в своем черном квадрате (зачем?
просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что
давайте добавим и это свойство: синими будут ссылки которые
пользователь еще не смотрел, пурпурными — те которые он уже
посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>

Флексбокс

Классика завтрашнего дня

Мы будем использовать флексбокс, чтобы создать раздел сайта «Бокс-офис «. Вот HTML-код :

<div id="boxoffice">
    <ul class="flex-container">
        <li class="item first">Cinderella: $67.9M</li>
        <li class="item second">Run All Night: $11.0M</li>
        <li class="item third">Kingsman: The Secret Service: $6.2M</li>
        <li class="item">Focus: $5.7M</li>
        <li class="item">Chappie: $5.7M</li>
        <li class="item">McFarland USA: $3.6M</li>
        <li class="item">The DUFF: $2.9M</li>
        <li class="item">American Sniper: $2.8M</li>
    </ul>
</div>

Вот CSS-код для контейнера “boxoffice ”:

#boxoffice {
    width: 780px;
    height: 500px;
    background-image: url(../images/box_office_cropped.jpg);
    background-repeat: cover;
    border-radius: 5px;
    padding: 20px;
}

Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex . Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей:

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

По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:

flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
}

Вот как выглядит наш небольшой бокс-офис:

Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.

Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .

Вот наш код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

И вот каким образом отразились эти изменения:

Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .

Чтобы использовать его, добавьте свойство в селектор флексбокса:

.flex-container {
    align-items: flex-end;
}

Все элементы сместятся к правому краю:

Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .

Попробуйте добавить следующий код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

И вот, что в результате получится:

Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец (или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.

Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

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

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

ШАГ 7: внешний CSS

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

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

Конечный резульат

«Уроки HTML5»

Без выдачи сертификата

Срок обучения: 18 уроков с обучающим контентом.

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

Также на нашем сайте есть более углубленные курсы HTML, что будут пройдены в программе по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack.

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

Введение в HTML.
Файл index.html. Отображение сайта в браузере.
Как создаются сайты? Смотрим код чужого проекта.
Комментарии в HTML. Метаданные meta.
Теги для работы с текстом.
Работа со списками.
Что такое атрибуты в HTML?
Создание ссылок. Разные типы ссылок в HTML.
Работа с изображениями.
Создание HTML-таблиц: ряды, столбцы, ячейки.
Теги для подключения файлов.
Теги Div и Span.
Создание HTML-форм и полей для ввода.
Поле для ввода текста. Тег для создания кнопки.
Селекторы выбора информации.
Специальные HTML5-теги.
Оптимизация под браузеры.
Заключительная часть.

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим
CSS стили и HTML разметку в разные файлы. Раздельное хранение
хорошо тем, что легче использовать те же самые стили для множества
HTML файлов: Вам нужно написать CSS стили только один раз. Но на
этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу.
Определения стилей будут внутри этого тэга. Возвращаемся к
редактору и добавляем следующие пять строчек в заголовок HTML кода
между тэгами <head> и </head>. Строки, которые надо
добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>

Первая строка говорит браузеру о том, что это таблица стилей и
что она написана на CSS (“text/css”). Вторая строка говорит, что мы
применяем стиль к элементу “body”. Третья устанавливает цвет текста
в пурпурный, а следующая устанавливает цвет фона в желто-зеленый
оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое
правило состоит из трех частей:

селектор (в нашем примере: “body”), которые
говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются
‘color’ и ‘background-color’), которое указывает что именно мы
устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое
устанавливает значение атрибута.

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

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body”
один раз и поместили свойства и значения вместе. Для получения
большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы
явно не назначили другим элементам (p, li, address…) фона, так что
по умолчанию у них его нет (или он прозрачный). Свойство ‘color’
устанавливает цвет текста элемента body, но все остальные элементы
внутри body наследуют этот цвет, пока для них не задан другой в
виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или
“Save” из файлового меню) и переключитесь обратно в браузер. Если
вы нажмете кнопку “обновить” , то изображение сменится со “скучной”
страницы на разукрашенную (но все еще однообразную) страницу. Кроме
ссылок сверху, весь текст должен быть пурпурный на желто-зеленом
фоне.

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

На старт!

В начале обо мне. Я верстальщик с опытом более 4 лет. Поэтому в верстке знаю толк, умею делать новомодные CSS3 эффекты, добавлять параллакс и превращать статичный макет в адаптивный сайт, а также балуюсь с NodeJS и всякими Grunt и Gulp. В общем все, что угодно.

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

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

Кстати, сайт подойдет не только для тех кто хочет обучится верстки, но и для проффи. Узнаете много нового и утрясете знания. Советую!

Что хорошего там есть?

Так приятно писать обзоры на полезные сервисы. Текст так и выпрыгивает из под парящих над клавиатурой рук. Ну что ж… перейдем от лирики к особенностям данного сайта.

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

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

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

Прошел все курсы. И узнал много нового кстати. Думаешь, что знаешь о верстке все? Ага, сейчас! После прохождения всего узнаешь для себя много нового о чем раньше даже и не думал. Ребята постоянно добавляют новые курсы и улучшают старые.

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

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

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

Как стать верстальщиком с нуля

1. Для начала вам нужно изучить HTML, CSS и JavaScript. Можно не запоминать с ходу все значения, а составить себе понятную и удобную шпаргалку

Особенно обратите внимание на следующие моменты:

HTML:

как строится HTML страница – основные теги страницы (head, body) и что в них может находиться.
главные HTML элементы – a, p, div, table, h1-h6, ol, ul, span и т.п.. Научитесь их правильно прописывать, изучите зачем нужны. Поймите разницу между блочными и строчными элементами.
Ознакомьтесь с версиями HTML и какие теги в них входят.
Изучите отличие табличной и блочной верстки, какие у них преимущества.
Основные элементы HTML5.

CSS:

Изучить виды селекторов.
Основные (фон, размер, цвет, шрифт, границы и т.п.) и особенные (position, float …) свойства CSS.
Ознакомьтесь с версиями CSS, какие к ним относятся свойства.
Какие свойства работают по другому в некоторых браузерах.
Научитесь делать блочную структуру web-страницы.
Изучите основны CSS3.

JavaScript:

Зачем и когда применяется.
Как скрыть или показать определенный блок.
Как добавить анимацию (скроллер или слайдер).
Как сменить класс и стиль элемента.
Как получить или изменить значение определенного элемента.

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

Делать нарезку макета.
Определять размеры.
Получать нужные цвета.
Вырезать определенные элементы из макета.

3. Изучите основы верстки – разберитесь в терминологии (кроссбраузерность, валидность, семантика). Почитайте пару книг по этой теме или посмотрите хотя бы бесплатные курсы – их полно. Желательно научиться работать с WordPress и Joomla, так как многие сайты работают на этих CMS, и у них много особенностей в работе.

4. Практикуйтесь – не нужно сразу идти на биржу фриланса и хватать самый сложный заказ. Сделайте 2-3 тестовые работы, чтобы набить руку и отточить практические навыки.

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

Вот пример:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.

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

HTML-код :

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .

И вот, что я получил:

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.

Работа с графикой

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

Если изображение контентое (важное для повествования, смысла) — используем тег

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

И также не забывайте о форматах изображений:

Для изображений, не требующих прозрачности, используйте формат jpg
Для изображений с прозрачным фоном — png
Для иконок — svg

Также рекомендую использовать формат webp для лучшей оптимизации сайта.