Ресурсы:

Справочник по html: webref.ru

Справочник по html: htmlbook.ru

Англоязычный справочник: cssreference.io

27 бесплатных глав и 500 заданий по вёрстке: htmlacademy.ru

Форум по вёрстке html.by

Англоязычный ресурс бога вёрстки Криса Койера css-tricks.com Здесь можно найти всё и на все случаи жизни. И причем это всё работает на чистом CSS.
Бесплатные youtube-уроки: WebDesign Master
Интересный сайт, который демонстрирует возможности CSS: csszengarden.com
На этом сайте при помощи CSS множество верстальщиков создают новое отображение html-страницы.

Англоязычный ресурс: webdesign.tutsplus.com

 

Бесплатный курс:

 

На английском языке:

https://internetingishard.com/html-and-css/

Фотошоп для верстальщика

Видео на Ютуб: https://www.youtube.com/watch?v=xXv93EpWeyA&list=PLqZTjT2Z9HyJfnApkpKEOJCZdXY_EbDWD&index=1
Статья на Хабре: https://habr.com/ru/post/272649/
Статья: http://tpverstak.ru/photoshop-dlya-verstaka/

Инструментарий

 

Текстовые редакторы
Notepad++
Textmate под Mac, E или Intype под win.
Adobe Dreamweaver
FAR+colorer
HTMLPad
TopStyle
PHPStorm
Sublime Text
Zen Coding

Фреймворки

Twitter Bootstrap – готовый набор HTML+CSS+JS популярных UI компонентов.

 

Приложения по обучению вёрстки

Учебник по CSS – https://play.google.com/store/apps/details?id=ru.webref.csstutorial

Самоучитель HTML – https://play.google.com/store/apps/details?id=ru.webref.htmltutorial

Структура HTML

 

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <title>Название страницы</title>
  <link rel='stylesheet' href='styles.css'/>
</head>
  <body>
    <!-- Здесь будет контент -->
  </body>
</html>

 

Блочная модель:

Обязательная к прочтению статья: https://webref.ru/layout/learn-html-css/box-model

 

Материалы из прямого эфира:

Файл PSD, с которым я работаю –Home

Файлы с вёрсткой, которую мы начали с вами делать – examle

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

Categories: Блог, Фриланс