Учимся делать веб-сайты с нуля до трудоустройства. Сегодня продолжаем верстать дизайн сайта.
Что такое верстка? Это, по большому счету, превращение картинки дизайна или дизайна из конструктора в код.
Это продолжение большого урока по верстке. Ссылка на предыдущий урок здесь (Нужно начинать с Урока 9. Урок 10 - это продолжение):
Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:
Для тех, кто только к нам присоединился, ссылка на все уроки:
И ссылка на самый первый урок:
На чем мы остановились на прошлом занятии?
Напомню, что мы верстали правильным кодом дизайн, который сделали в nicepage и экспортировали его в код.
Дизайн мы сегодня верстаем один и тот же вместе, чтобы разобраться, как верстать и меннно его.
Проект я выложил на GitHub - его вы качали на предыдущем занятии по ссылке:
https://github.com/madmaker/madmaker-srmt22-lsn9-design/archive/refs/tags/v1.zip
Когда скачали и распаковали - открыли в Chrome файл index.html - эту страницу мы и верстаем. В целом она сверстана в Nicepage автоматически, только код плохой и с ним работать дальше будет невозможно.
Чтобы у нас не было расхождений на этом этапе, скачайте результат урока 9 и откройте его в vsCode - работать будем с ним.
https://github.com/madmaker/srmt22-lsn9/archive/refs/tags/v2.zip
Верстка с помощью GRID
Мы остановились на верстке этапов обучения нашего сайта. Нам требовалось сделать, чтобы иконка отображалась слева от заголовка. По сути я хочу, чтобы было 2 колонки: в левой узкой иконка, в правой широкой остальной текст.
Давайте разберемся с довольно удобной технологией верстки: grid.
Под закрывающий тег </main> в index.html добавьте фрагмент кода:
<div class="grid-wrapper">
<div id="one">Col 1</div>
<div id="two">Col 2</div>
<div id="three">Col 3</div>
<div id="four">Col 4</div>
<div id="five">Col 5</div>
<div id="six">Col 6</div>
<div id="seven">Col 7</div>
<div id="eight">Col 8</div>
<div id="nine">Col 9</div>
</div>
<style type="text/css">
.grid-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 200px 200px 200px;
background-color: beige;
gap: 10px
}
.grid-wrapper > div {
background-color: green;
}
</style>
Круто? Попробуйте закомментировать строки стиля, которе отвечают за grid-верстку (смотрите скрин ниже) - перед началом строки напишите /*, а в конце напишите */ - код будет взять в комментарий и не будет работать.
Все блоки col1-col9 расположились на всю ширину и один под другим. Собственно, наша иконка и текст в разделе study-order так и отображаются. А мы хотим, чтобы они отображались колонками.
Раскомментируйте стиль в коде назад. Теперь расскажу подробно про то, как работает grid.
У нас есть родительский контейнер <div class="grid-wrapper">. Для него мы применили ряд правил css:
display: grid;
Означает, что дочерние элементы этого блока будут отображаться "гридом" (сеткой).
grid-template-columns: 1fr 1fr 1fr;
Мы задали размеры колонок. Можно задавать в разных единицах измерения: в процентах, в пикселях, в em, и самое интересное - в долях (fr - fraction). 1fr - одна доля от всей ширины родительского контейнера.
То есть мы разделили поровну по 1 доле на каждую колонку - обозначили 3 колонки.
Давайте поэкспериментируем. Сделаем 4 колонки равных размеров.
grid-template-columns: 1fr 1fr 1fr 1fr;
Теперь давайте сделаем 2 колонки разных размеров.
grid-template-columns: 1fr 5fr;
Вы уже заметили, что если блоков больше, чем колонок, то они по тому же принципу располагаются дальше на следующих строках.
grid-template-rows: 200px 200px 200px;
Здесь мы задали высоту трех строк по 200px. Остальные строки будут подгоняться под контент.
Размер строк задавать не обязательно. В этом, пожалуй, есть смысл, если нужно сделать одинаковую высоту для всех колонок внутри строки или если контента мало, а блок в дизайне должен быть большого размера.
gap: 10px
Этим правилом мы задали отступ между блоками сетки.
На самом деле grid умеет много всего. А еще есть flex. Мы с ними будем знакомиться постепенно. На этом этапе для знакомства достаточно.
Если кому интересно подробно почитать про них, то вот хорошая статья:
Теперь удалите наш код, с которым мы экспериментировали. То есть между закрывающим </main> и закрывающим </body> все удалите.
Верстка двух колонок с помощью GRID
Итак, возвращаемся к верстке.
Напомню, что у нас так:
А мы хотим так:
Запускаем наблюдение за sass за файлами, чтобы он сразу scss превращал в css.
Для этого открываем терминал в vsCode
Окно терминала появится внизу. В нем выполняем команду sass --watch scss:css
Терминал должен ответить вам что-то типа "Sass is watching for changes. Press Ctrl-C to stop."
В general.scss сразу после правил для html,body дописываем следующий код:
.grid-wrapper {
display: grid;
}
Мы сделали css-класс grid-wrapper - его будем применять ко всем контейнерам, в которых у нас будут колонки грида. Это общий класс для всего проекта - поэтому в general.scss
Теперь в _homepage.scss внутрь #study-order добавляем правило, обозначающее, как отображать наши две колонки: долями в 1fr и 5fr
.grid-wrapper{
grid-template-columns: 1fr 5fr;
}
Обратите внимание, что мы в general.scss задали правило для .grid-wrapper - общее для всего сайта. А в _homepage.scss в разделе #study-order дополнили это правило конкретно для колонок внутри study-order.
Осталось только в index.html для тега <article> внутри секции #study-order добавить класс
<article class="grid-wrapper">
Проверяем результат в браузере.
Отлично. У нас теперь осталось 4 раздела с порядком обучения:
- ПРАКТИКА И ВЫПОЛНЕНИЕ РЕАЛЬНЫХ ЗАДАЧ НА РЕАЛЬНЫХ ПРОЕКТАХ
- ТРУДОУСТРОЙСТВО
- РАБОТА С ПОДДЕРЖКОЙ КЛУБА
- КАРЬЕРНЫЙ РОСТ
Напишите код для них сами. Все тексты у вас есть.
Я ниже приложу скрин того, как это примерно будет выглядеть. А вы уже пишите.
Имена классов иконок вы можете посмотреть на сайте fontello.com (мы оттуда брали иконочный шрифт) в разделе customize names. Либо в файле fontello-codes.css в папке fonts/fontello-xxxxx/css.
То есть вам нужно по примеру уже сверстанного нами блока <article class="grid-wrapper"> про этапы обучения добавить ниже еще 4 таких же блока с другими иконками и другим текстом. Все они внутри секции <section id="study-order">.
Результат будет такой:
Если самостоятельно совсем никак не получается, то спросите в чате в телеграм.
Если совсем никак, то подглядите результат здесь:
Верстаем Промо-блок 1
Мы уже познакомились с такими важными тегами, как header, main, section, article. Теперь будем использовать еще один: aside - он как раз и нужен для блоков, которые не имеют большой смысловой нагрузки на странице. Это блок с призывом к действию. Но без него на странице особо ничего не потеряется. Поэтому для него <aside>.
То есть под последним <section> пишем новый
<aside></aside>
Задаем ему id="start-education-today"
<aside id="start-education-today"></aside>
Внутри у нас будет 2 колонки. Будем использовать технологию grid.
Поэтому внутри в aside сразу делаем еще один <div> и к нему применяем класс grid-wrapper
<div class="grid-wrapper"></div>
В нем будет две колонки. Поэтому сразу создаем два пустых блока внутри
<div></div>
<div></div>
Вставляем контент в левую колонку (первый <div>):
<h3>Начните обучение сегодня</h3>
<p>Консультация, подбор направления и <br>первая неделя обучения бесплатно!</p>
Вставляем контент в правую колонку (второй <div>):
<button>Подробнее</button>
Получилось так:
Переходим к стилям.
В _homepage.scss создаем новое правило для #start-education-today.
Вы ведь помните, что в css если мы описываем стиль для тега, то его селектор пишется как есть: body, html, section и т.д.
Если для класса, то начинается с точки: .grid-wrapper
Если для ID, то начинается с решетки: #start-education-today
Вставляем вот такое правило.
#start-education-today {
color: white;
background-color: black;
background-image: url("../img/saas-concept-collage-2.jpg");
background-size: cover;
background-attachment:fixed;
padding: 0;
}
Задали цвет текста, фон, изображение фона, сделали, чтобы фон перекрывал всю ширину-высоту контейнера, чтобы при скроллинге фон оставался на месте, а контент скользил по нему, внутренний отступ 0.
Здесь все просто и знакомо. Только файл saas-concept-collage-2.jpg не забудьте перетащить в папку img с проекта, который вы скачали.
На изображении фона есть белый участок. Если белый текст будет на таком фоне, то он будет нечитаемым. Нужно бы фон затемнить.
На самом деле тут варианта у нас два:
- Открыть фотошоп и изображение фона обработать так, чтобы оно стало темнее
- Сверху наложить еще один блок на всю ширину-высоту блока с фоном и уже ему задать полупрозрачный фон.
Мы будем использовать второй вариант.
Сразу за тегом <aside id="start-education-today"> добавляем еще один <div>. И, соответственно, перед закрывающим тегом </aside> мы новый блок закрываем: </div>.
Теперь этому div достаточно задать фон rgba(0,0,0,0.5) и фон будет затемнен на 50%.
rgba(0,0,0,0.5)
Расскажу подробно про такую запись цвета. R G B - это RED GREEN BLUE, значения от 0 до 255, где 0 - это полное отсутствие этого цвета, а 255 - максимальное присутствие. 0 0 0, например 255 0 0 - это красный, 0 255 0 - это зеленый. С RGB разобрались. Осталось А - это альфа-канал, то есть прозрачность. 1 - это полностью непрозрачный, 0 - это полностью прозначный. Соответственно 0.1 - это 10% видимости, 0.5 - это 50% видимости/прозрачности.
Внутрь start-education добавляем такой код:
>div {
background: rgba(0, 0, 0, 0.5);
width: 100%;
margin:0;
}
>div
Угловая скобка означает, что правило действительно только для тех <div> которые являются первыми "потомками" родительского блока start-education. А уже для их дочерних блоков это правило не будет действовать.
То есть:
<div id="#start-education"> <div>для этого действует</div> <div>для этого действует</div> <div> для этого действует <div>для этого НЕ действует, потому что он уже вложен внутрь другого блока</div> </div> </div>
Мы задали ширину 100% и убрали внешний отступ для блока с полупрозрачным фоном - это сделано для того, чтобы этот блок растянулся на всю ширину блока с изображением на фоне.
Вот теперь то, что надо.
Теперь давайте поправим стиль для заголовка и текста. Внутрь #start-education-today добавьте эти правила:
h3 {
font-size: 2em;
font-weight: normal;
}
p {
font-size: 1.5em;
font-weight: normal;
}
Думаю тут объяснения уже не требуются.
Осталось донастроить наши 2 колонки и расположить контент блока по центру.
Добавляем правило внутрь #start-education-today для контейнера, в котором у нас колонки
.grid-wrapper {
margin: 0;
padding: 4em 0;
grid-template-columns: 2fr 1fr;
max-width: 900px;
margin: 0 auto;
align-items: center;
}
Напомню:
grid-template-columns: 2fr 1fr;
Мы обозначили, что будет 2 колонки - одна размером 2 доли, другая - 1.
max-width: 900px;
Мы задали максимальную ширину для этого блока (меньше сжаться может, а больше - нет)
margin: 0 auto;
Задает автоматические внешние отступы слева и справа тем самым центрирует блок.
align-items: center;
Еще одна фишка GRID - можно отцентрировать по вертикали содержимое контейнера.
Все, с промо-блоком закончили
Верстка блока "Что изучаем"
В целом тут уже все знакомо:
- Две колонки гридом.
- Слева список технологий такой же, как мы делали на странице резюме в прошлых уроках.
- Справа в колонке фон на всю ширину - cover.
Ниже код в index.html и homepage.scss. Я отдельные моменты, требующие внимания рассмотрю. А остальное посмотрите сами - должно быть ясно. Если есть вопросы - пишите их в телеграм или комментариями к статье.
index.html
<section id="what-do-we-study">
<div class="grid-wrapper">
<article>
<h3>Что изучаем</h2>
<ul>
<li>Программирование</li>
<li>Дизайн</li>
<li>Веб-программирование</li>
<li>Создание сайтов</li>
<li>Администрирование серверов</li>
<li>Разработка мобильных приложений</li>
<li>Разработка десктопных приложение</li>
<li>Робототехника</li>
<li>Программирование Arduino</li>
<li>3D моделирование</li>
<li>Разработка десктопных приложение</li>
<li>Разработка под Android</li>
<li>Разработка под IOS</li>
<li>Agile</li>
<li>PHP</li>
<li>CI-CD</li>
<li>CSS</li>
<li>Docker</li>
<li>Git</li>
<li>GoLang</li>
<li>HTML</li>
<li>Javascript</li>
<li>Kotlin</li>
<li>Laravel</li>
<li>MongoDB</li>
<li>MySQL</li>
<li>NodeJS</li>
<li>Python</li>
<li>ReactJS</li>
<li>Ruby</li>
<li>Symfony</li>
<li>TypeScript</li>
<li>VueJS</li>
<li>Yii2</li>
<li>Архитектура приложений</li>
<li>Микросервисы</li>
<li>ООП</li>
<li>Тестирование</li>
<li>PostgreSQL</li>
<li>Redis</li>
<li>ClickHouse</li>
<li>C</li>
<li>C++</li>
</ul>
</article>
<aside> </aside>
</div>
</section>
Весь блок я взял в <section> - это значимая информация на странице. Список технологий взял в <article>, а колонку с фотографией в <aside> - это просто элемент дизайна. Никакой смысловой нагрузки он не несет.
Обратите также внимание на то, что в колонке с картинкой спецсимвол неразрывного пробела: <aside> </aside>.   - non break space. Про &-последовательности мы позже поговорим. Нам здесь он нужен для того, чтобы в блоке <aside> не было пусто - иначе браузер может просто скрыть этот блок, так как он пустой. Поэтому вставили вот такую пустоту.
_homepage.scss
#what-do-we-study { .grid-wrapper { grid-template-columns: 1fr 1fr; }
article {
padding: 2em 0 3em 0;
}
h3 {
font-size: 2em;
font-weight: normal;
text-align: center;
}
ul {
list-style: none;
}
li {
border: solid #333 1px; border-radius: 20px; width: auto; display: block; float: left; margin: 5px 2px; padding: 5px 10px; }
aside {
background-image: url("../img/business-serious-manager-working-laptop-standing.jpg");
background-size: cover;
background-position: center center;
}
}
В стиле тоже все знакомо уже.
background-position: center center;
Один момент требующий внимания: положение фона. Я задал, чтобы он был по центру. Первый center: положение по вертикали (может быть top, bottom), второй center - по горизонтали (может быть left, right).
Я это сделал, чтобы центр изображения был по центру контейнера. Иначе на маленьком экране на всю колонку может быть голова человека на фоне или ноги.
Не забудьте изображение business-serious-manager-working-laptop-standing.jpg скопировать в папку img (напоминаю, что его вы можете взять в папке images в скачанном моем проекте)
Верстаем промоблок 2
Здесь тоже все будет вполне знакомо.
Код, который добавляем в index.html
<aside id="promo-block-2">
<div>
<section>
<h3>Получи бесплатную консультацию</h3>
<h4>Первая неделя обучения веб-разработки бесплатно!</h4>
<p>Свяжемся, обсудим удобный формат, подберем направление,<br>
составим программу, начнем твою карьеру в веб-разработке!</p>
<div class="grid-wrapper">
<div>
<button>Я готов!</button>
</div>
<div>
<button class="btn-outline">Мне нужно подумать</button>
</div>
</div>
</section>
</div>
</aside>
Код, который добавляем в _homepage.scss
#promo-block-2 { background-color: black; background-image: url('../img/hologram-projector-screen-with-cloud-system-technology-2.jpg'); background-size: cover; background-position: center; background-attachment: fixed; padding: 0; margin: 0; color: white; text-align: center; >div { background: rgba(0, 0, 0, 0.5); margin: 0; padding: 0; }
section {
padding: 4em 0;
margin: 0 auto;
max-width: 900px;
}
.grid-wrapper {
grid-template-columns: 1fr 1fr;
}
h3 {
font-size: 2em;
font-weight: normal;
margin: 0.5em 0;
}
h4 {
font-size: 1.5em;
font-weight: normal;
margin: 0.5em 0;
}
}
Здесь все также, как и в первом промоблоке.
Один момент, требующий внимания - мы правой кнопке "Мне нужно подумать" задали новый класс "btn-outline".
Этот класс мы описали в файле _ui-elements.scss внутри button.
&.btn-outline {
background: transparent;
border: white solid 1px;
color: white;
&:hover,
&:focus,
&:active {
background: black;
border-color:black;
}
}
Верстка уроков программирования
Я, на самом деле, решил забить на слайдер и просто сделать плитку на основе grid.
Во-первых для этого нужен javascript, а мы до него еще не дошли, во-вторых, слайдеры - это тема для отдельной статьи. Также как и кнопки и диалоговые окна - разберем на следующих уроках.
В общем, в этом блоке все очень просто и знакомо.
Ниже, как обычно, комментарии по интересным моментам.
index.html
<section id="lessons-gallery">
<h2>
Уроки программирования
</h2>
<div class="grid-wrapper">
<figure>
<img src="https://picsum.photos/300/300">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin turpis tellus, in ornare nulla rhoncus ut. Aenean tincidunt, enim eu dapibus gravida, erat orci pretium odio, quis scelerisque neque metus auctor odio.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/300/300">
<figcaption>Sed convallis tincidunt neque non interdum. Maecenas interdum ultricies nulla, hendrerit bibendum urna bibendum eu. Nam scelerisque, nunc ut semper aliquet, ipsum odio blandit ipsum, ac placerat eros odio a nunc. Cras egestas volutpat risus sit amet egestas.</figcaption>
</figure>
<figure>
<img src="https://picsum.photos/300/300">
<figcaption>Phasellus ac commodo erat. Suspendisse nec aliquet odio, et cursus risus. Cras tincidunt tincidunt massa, et pretium sem ultricies volutpat. Proin sodales, tellus quis rhoncus pulvinar, est diam maximus quam, ut pharetra dolor velit at leo. Quisque eleifend dictum massa non lacinia.</figcaption>
</figure>
</div>
</section>
figure, figcaption
Блок изображения мы взяли в специальный тег <figure></figure>. Внутри него изображение как обычно в теге <img>, а подпись к изображению в <figcaption></figcaption>
_homepage.scss
#lessons-gallery { h2 { margin: 1em 0; }
.grid-wrapper {
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 3em;
row-gap: 3em;
}
figure{
max-width: 300px;
margin: 0 auto;
}
img {
max-width: 300px;
margin-bottom: 1em;
}
}
Здесь все знакомо и понятно.
Получилось вот так:
Верстаем подвал
С подвалом вообще никаких особенностей. 3 колонки. 2 с текстом, одна с картинкой - ссылкой на блок в ZEN.
Один только момент - весь подвал мы берем в тег <footer> под тегом <main>, а не внутри его.
В <footer> применим серый фон, а внутри весь контент возьмем в еще один тег <div> - он будет центрирован и в нем будут колонки.
index.html
<footer>
<div class="grid-wrapper">
<section class="footer-info">
<p><strong><a href="https://srmt22.ru">Сарматия 22</a></strong></p>
<p>Клуб веб-разработчиков.</p>
<p>Обучаем програмированию с нуля и до трудоустройства</p>
/section>
<section class="footer-logo">
<a href="https://srmt22.ru">SRMT22.ru</a>
</section>
<aside class="footer-links">
<a href="https://zen.yandex.ru/srmt22_webclasses" target="_blank">
<img src="img/zen-new-icon.png">
</a>
</aside>
</div>
</footer>
Для подвала в папке scss сделаем новый файл _footer.scss
footer {
color:white;
background:rgb(57, 57, 57);
a,
a:visited,
a:focus,
a:hover,
a:active {
color:white;
text-decoration: none;
}
.grid-wrapper {
padding: 3em 2em;
margin: 0 auto;
max-width: 1200px;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
}
.footer-info {
padding: 0.5em 0;
p {
line-height: 1em;
}
}
.footer-logo {
font-size: 2.5em;
text-align: center;
padding: 0.5em 0;
}
.footer-links {
text-align: center;
padding: 0.5em 0;
img {
max-width: 50px;
}
}
}
В general.scss не забудьте импортировать файл со стилями подвала.
Рядом с остальными импортами добавьте.
@import 'footer.scss';
И нужно скопировать файл иконки ZEN в img.
Все, с основной версткой закончили.
Дальше мы будем работать над адаптивом: сделаем так, чтобы сайт корректно отображался на всех типах устройств: телефоны, планшеты, ноутбуки, большие мониторы.
Сверьте свой результат с моим. В адаптивной верстке нам нужно будет избежать всех расхождений.
Что делать дальше и как нам помочь?
1. Поставить лайк
2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
3. Подписаться на этот канал
4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
5. Сделать репост этого урока себе в соцсети.
Что будет на следующем занятии?
Разберемся с адаптивной версткой. Наша страница будет отлично работать на всех типах устройств.