Серия уроков: HTML CSS верстка сайта Портфолио

HTML, CSS

В этом курсе вы сверстаете свой первый сайт на HTML и CSS. Он будет многостраничным, и адаптированным под просмотр на мобильных устройствах. Мы будем работать с дизайн макетом из программы Figma. Современный, легкий и более удобный аналог фотошопа, который не требует установки и работает прямо в браузере.

Этот курс подойдет для тех кто хочет научиться создавать сайты и хочет сверстать свой первый сайт.

Файлы с макетом для верстки

Чтобы получить файлы макета и готовой верстки, необходимо подписаться на курс: http://webcademy.ru/htmlsite/

1. Настройка редактора, знакомство с версткой. Уроки по верстке сайта Портфолио HTML CSS

В этом уроке познакомимся с основами HTML и CSS, которые пригодятся нам для верстки данного макета.

2. Верстка Шапки сайта. Уроки по верстке сайта Портфолио HTML CSS

Верстаем HTML шапку сайта. Делаем фоновое изображение через CSS на весь блок.

3. Верстка секции Портфолио. Уроки по верстке сайта Портфолио HTML CSS

Верстаем секцию Портфолио с работами на сайте. Делаем заголовок секции и размещаем карточки с работами в ряд.

4. Верстка Подвала. Уроки по верстке сайта Портфолио HTML CSS

Верстаем подвал сайта. Размещаем копирайт и ссылки на социальные сети.

5. Внутренняя страница для сайта. Уроки по верстке сайта Портфолио HTML CSS

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

6. Мобильная адаптация сайта. Уроки по верстке сайта Портфолио HTML CSS

Делаем мобильную верстку, пишем медиазапросы в CSS чтобы сайт хорошо отображался на мобильных устройствах, телефонах и планшетах.

7. Видео обложка для сайта Плавная прокрутка. Уроки по верстке сайта Портфолио HTML CSS

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

Юрий Ключевский
Оцените автора
Добавить комментарий