Блог. Верстка страниц сайта. HTML+CSS. Emmet и Less. Урок#1

Воспроизведение вашего видео начнется через 35

↓СМОТРИТЕ ВИДЕО ↓ НА ЭТОМ САЙТЕ ↓БЕСПЛАТНО ↓


2 Просмотры

В данном цикле уроков мы будем создавать простой блог. В первом уроке рассмотрим общую структуру страниц сайта, создадим html-верстку и настроим внешн...

:2020-06-30T13:05:06+0000

Издатель
В данном цикле уроков мы будем создавать простой блог. В первом уроке рассмотрим общую структуру страниц сайта, создадим html-верстку и настроим внешний вид с помощью css-стилей.

Вторая часть видео здесь: https://www.youtube.com/watch?v=BlL4yO1W8e4

0:00 О чем этот цикл уроков
0:27 Что мы будем делать на первом уроке
1:31 Макет (основная структура страниц)
5:14 Файл таблицы стилей (LESS/CSS)
6:17 Страница катергории (category.html)
6:40 Выбираем шртифт (Google Fonts)
8:05 Шапка сайта (section-header)
10:12 Меню (section-menu)
12:32 Основная секция (section-main)
15:40 Подвал сайта (section-footer)
19:06 Список статей в категории (category-list)
21:32 Добавляем стили странице категории
22:40 Класс container
23:47 Класс section-header
27:56 Класс section-menu
32:26 Самоочистка блока
34:00 Класс section-footer
38:06 Класс section-main
38:50 Крошки сайта, класс breadcrumbs
47:01 Контент страницы, класс content
48:48 Список статей, класс category-list
57:38 Задание соотношения сторон обложке
1:01:40 Что делать, если блоки в списке разной высоты

Задавайте вопросы по уроку в комментариях!

Гугл-шрифты: https://fonts.google.com/
HTML-справочник: http://htmlbook.ru/
Справочник EMMET сокращений: https://webdesign-master.ru/blog/html-css/2.html
Cascading Style Sheets (CSS): https://developer.mozilla.org/ru/docs/Web/CSS
Leaner Style Sheets (LESS): https://cutt.ly/quDi0Gh
PhpStorm IDE: https://www.jetbrains.com/ru-ru/phpstorm/
Lorem Ipsum генератор: https://loremipsum.io/ru/

/* О канале */
Я Андрей, программист с опытом работы более 15 лет. На моем канале Вы найдете множество видеоуроков по созданию веб-сайтов. Здесь вы узнаете как создать сайт любой сложности, получить или усовершенствовать навыки программирования на PHP и работы с фреймворком Yii2. Мы подробно разберем как создаются интернет-проекты, как делать сайты быстро и не затрачивать на это больших усилий:
https://www.youtube.com/channel/UC5aU-LX3mGFcDilEovn8lBw
Категория
Создание сайта
Комментариев нет.