Вёрстка сайта с нуля.

Что нужно делать, чтобы начать Front-End разработку.
Web-разработка начинается с вёрстки сайтов: Вы изучаете основные теги HTML, далее изучаете CSS, объединяете всё это и верстаете сайты. После достижения понимания происходящего сразу же следует избегать ошибок, чтобы ошибки не укоренились и не мешали в дальнейшей работе. Как только ошибка обнаружена, надо сделать всё, чтобы ошибка больше не повторялась. В основном, ошибки появляются из-за невнимательности и из-за незнания. Необходимо придерживаться требований к качеству работы дизайнера и верстальщика. Основные критерии это сходство страницы с макетом и правильное структурирование кода. Основные моменты, которые следует уяснить в самом начале обучения, это
- Для Front-End разработки или вёрстки сайтов используйте современные редакторы кода или полноценные IDE. Это ускоряет разработку, а автозаполнение предотвращает опечатки в коде. Так значительно сокращается время на разработку. А чем быстрее Вы выполните текущий заказ, тем быстрее возьмётесь за следующий. Это Ваш заработок, деньги.
- Используйте в тексте HTML-описания страницы правильные названия классов.
- Используйте строчные элементы внутри блочных, а не наобророт. Так как блочные элементы определяют структуру документа, а строчные нет. Используйте встроенные HTML5 Semantic Tags/Sections.
Блочные элементы div ul h1 h3 и др. их свойства by default display block. Строчные элементы: span li ссылки (тег а) используются внутри блочных по умолчанию их свойства display inline.
Правильно будет ‹h2›‹a href=""›‹/a›‹/h2› строчный элемент внутри блочного.
- Тег ‹h1› ‹/h1› заголовок первого уровня на странице должен быть только один! Его используют только для название страницы.
- Не использовать локальные style для каждого тега, вспомните, как это тяжело в Word!
- Для изображений используйте атрибут Alt он помогает поисковику индексировать содержимое сайта, так как описывают контекст изображений. Для изображений - элементов дизайна используйте пустой атрибут: Alt=""
- Проверяйте сайт валидатором на сайте validator.w3.org
Источник: youtube

Для удобства вёрстки сайта нужно установить программу Sublime text и плагин Emmet для Sublime text.
Ссылки для закачки:
1) Сайт программы Sublime text.
2) Ссылка на скачку Emmet
3) Инструкция по установке плагина Emmet для Sublime text.
После того, как все программы установлены, делаем структуру, которая одинакова для всех проектов:
1) Создаём папку проекта.
2) В папке проекта:
2.1) Создаём файл index.html
2.2) Создаём папку img. В этой папке хранятся все изображения.
2.3) Создаём папку css. В этой папке хранятся все стили.
2.3.1) В папке css создаём файл main.css В этом файле будут находится основные стили, то есть то, как браузер отображает шрифты, таблицы, заголовки и прочее, вся оформительская часть: цвета, размеры, расстояния.
В зависимости от сложности проекта могут понадобиться папки javascript и fonts.
Папки могут называться по другому, но максимально короткие названия, упрощают запись путей к файлам.
При использовании безопасных шрифтов дополнительные шрифты в папке fonts не понадобятся.
Безопасный шрифт - это такой шрифт, который есть на всех операционных системах, например, шрифт Arial. Браузер будет запрашивать безопасный шрифт с компьютера пользователя, такой шрифт при вёрстке не надо подключать отдельно.
Плагин Emmet упрощает работу верстальщика, так как плагин делает автозаполнение. При написании ключевого слова достаточно нажать клавишу Tab, чтобы программа сама написала нужный текст.

Язык гипертекстовой разметки html состоит из тегов. Теги - это текст, который пишется внутри знаков ‹ ›. Чтобы напечатать эти знаки переводим клавиатуру на английский язык и нажимаем кнопки Б Ю. Теги, как правило, бывают открывающие и закрывающие. Открывающий тег: ‹tag›; закрывающий тег: ‹/tag›. Некоторые теги не закрываются, например, тег перевода на новую строку: ‹br›
Блоком, элементом, тэгом, контейнером называют фрагмент текста, расположенный между тегами:

‹tag› Текст, формат которого задан тегами. ‹/tag›


По сути дела, любая html страница - это обыкновенный текст с тегами. Теги - это "команды" для браузера. Браузер, например, Chrome или Inetnet Explorer выводит текст на экран, а вместо тегов появляются необходимые шрифты или таблицы. Но, несмотря на то что html страница это простой текстовый файл, нельзя написать просто текст. Каждый фрагмент текста обязательно должен быть заключён между тегами, чтобы браузер "понимал" как показывать этот текст на экране.
У тега может быть ноль, один или несколько атрибутов. Атрибут, это необязательный текст внутри тега, который заставляет браузер показывать этот фрагмент текста со всевозможными изменениями и дополнениями. Атрибуты тега пишутся через пробелы, они содержат ключевые слова, для браузера. Правило написания атрибутов такое:
‹тег атрибут1="действие_браузера1" атрибут2="действие_браузера2" › Текст внутри тегов ‹/тег›
то есть: ‹тег атрибут1="значение" атрибут2="значение" атрибут3="значение"›Текст ‹/тег›

Рассмотрим стркутуру, которую созадёт плагин Emmet
‹!DOCTYPE html›
‹html lang="en"›
‹head›
‹meta charset="UTF-8"›
‹title>Document‹/title›
‹/head›
‹body›

‹/body›
‹/html›

С этой структуры начинается практически любая страница, это обязательная вещь. Не будем вдаваться в подробности, отметим, что если страница на Русском языке, то строку lang="en" надо переписать так: lang="ru", что достаточно очевидно.
В секции ‹head› ‹/head› задаются правила чтения нашей страницы. Тег meta с атрибутом charset
‹meta charset="UTF-8"›
задаёт кодировку нашей страницы, чтобы браузер корректно отображал русские буквы. Всё содержимое страницы помещаете внутри тега body:
‹body› Содержимое страницы расположено тут ‹/body›
При написании текста следует учитывать, что браузер воспринимет только один пробел, остальные пробелы будут проигнорированы. Переносы текста тоже игнорируются. Разметка-то у нас делается тегами! Ну и закрывается всё тегом ‹/html›
Тег div универсальный блок.
Тег h1 h2 h3... заголовки. Самый важный заголовк: h1. Менее важные заголовки следуют в порядке возрастания номера.
Наберём в Sublime такой текст:
‹!DOCTYPE html›
‹html lang="en"›
‹head›
‹meta charset="UTF-8"›
‹title›Golden‹/title›
‹/head›
‹body›
‹h1›Заголовок h1‹/h1›
‹h2›Заголовок h2‹/h2›
‹h3›Заголовок h3‹/h3›
‹h4›Заголовок h4‹/h4›
‹h5›Заголовок h5‹/h5›
‹h6›Заголовок h6‹/h6›
‹/body›
‹/html›
Сохраним в нашем проекте в файле main.html и откроем получившийся файл в браузере.
Добавим в наш текст тег ‹p›‹/p›, который размечает параграфы. Параграф вмещает несколько строк текста в одном кусочке сайта.
Тег ‹a› ‹/a› определяет гиперссылку. Внутри тега размещается видимая часть ссылки, то есть то, на что мы нажимаем в браузере. Обязательным атрибутом тега ‹a› является строка href=" " внутри кавычек помещют адрес ссылки. В общем случае текст для формирования гиперссылки выглядит так:
‹a href="https://yandex.ru/"› Нажмёшь сюда, попадёшь в Яндекс ‹/a›
Для картинок имеется тег ‹img src=" " alt=" "›
src обязательный атрибут - в кавычках нужно указать путь к картинке. Атрибут alt выводит текст, который выводится в то время, пока загружается картинка.
Тег img не закрывается.
Тег ‹span› ‹/span› используют для выделения фрагмента текста, например, наклонны шрифт или шрифт другого цвета.
Тег ‹br› тоже не закрывется, служит для переноса текста на новую строку.

Для настройки проекта нашу паку можно просто перетянуть мышкой в оно программы Sublime text и папка подключится к проекту.


Скрыть панель с папками проекта можно таким образом:

Удобно ещё будет разделить на две колонки содерижмое редактора, чтобы редактировать одновременно два файла main.css и index.html.

Каждый тег может иметь большое количество атрибутов, атрибуты образуют стили. Чтобы читаемость исходного кода не ухудшалась, придумали выносить атрибуты в файл CSS.
Для подключения файла CSS нужно, сначала создать сам файл CSS, потом подключить его в HTML файл index.hmtl
Файлы CSS подключаются в секции head.
Для этого нужно добавить строку ‹link rel="stylesheet" href="css/main.css"›
Таким же образом можно подключить файл JS (Java Script), для этого надо вставить тег Script.
‹script src="main.js"› ‹/script› Размещать этот тег можно как между тегами head, так и между тегами body. Чаще всего ставят перед закрывающим тегом ‹/body›, но об этом позже. Вернёмся к файлу CSS.
Файлы CSS - это текстовые файлы. Файл CSS состоит из правил. Правило описывает определённый блок в HTML. Правил может быть сколь угодно много.
Синтаксис правила CSS:
селектор {
свойство: значение;
свойство: значение;
...
свойство: значение;
}
Селектор это способ обратиться к какому-либо элементу в HTML. Обращение происходит либо по тэгу, либо по классу или по ID. К тэгу обращаются очень редко.
Например, изменить заголовок h1 можно так:
h1 {
color: blue;
font-size: 25px;
}
Таким образом, мы задали для раздела h1 цвет шрифта синий, размер 25 пикселей.
Изучение CSS сводится к заучиванию множества атрибутов, таких как: цвет элемента, размер шрифта, шрифт, фон, длина, высота, отступы внутрь, отступы наружу, позиционирование слева, позиционирование справа. На каждую из таких задач существует свойство в CSS. Сразу это всё выучить невозможно. В отличие от естественных языков, в которых заучивают слова, лучший способ выучить свойства CSS - это заниматься вёрсткой. Заучивание произойдёт в процессе повторения. К тому же вёрстка длительный процесс, забытое можно не торопясь посмотреть в интернете. Например, вот здесь. Из всего арсенала средств минимум свойств CSS способны решить максимум задач.
Какими могут быть селекторы? Cелектор параграфа ‹p› ‹/p›. На странице (в тексте HTML файла) может быть несколько параграфов, то есть участков текста, заключённого в тэг ‹p›. Чтобы различать параграфы придумали такие атрибуты как class. Вот пример применения:

‹p class"first"› Такой записью параграфу p мы назначили класс first ‹/p›

В CSS свойства класса задают так:
.first {
color: blue;
font-size: 25px;
}
точка обозначает класс, в фигурных скобках указаны атрибуты класса first. В нашем случае синий цвет и размер 25 пикселей.
Лучше всего картинки сайта поместить в папку img. Формат png позволяет сделать картинки прозрачными, тогда через картинки будет виден фон сайта. То есть, если под картинкой должен виднется како-то слой, то нужен формат png. Секция - логический завершённый фрагмент макета.
Тег div используется в том случае, если трудно охарактеризовать содержимое как заголовок, параграф или ссылку, то есть применить специальный тег затруднительно. В современной вёрстке вместо div используется тег section. Если на сайте имеется, к примеру, пять секций, то нужно написать пять тегов ‹section› ‹/section›
Для секции заголовка сайта есть специальный тег ‹header› ‹/header› для секции окончания сайта ‹footer› ‹/footer› Такая организация текста файла HTML значительно облегчает чтение исходного кода.
Вёрстка происходит сверху-вниз, слева-направо.


Статья написана по мотивам вот этого видео.