[Росдистант] Основы web-разработки на базе HTML и CSS (практические задания)

Практическое задание 1

Разбивка страницы сайта на блоки и элементы

Задание. Разбейте на блоки и элементы всю стартовую страницу сайта. В отчете с титульным листом предоставьте файл со скриншотами страницы, разбитой на блоки и элементы. 

Стартовая страница сайта: W3Schools

Практическое задание 2

HTML верстка страницы сайта

Задание. Сделайте HTML верстку страницы сайта, указанной на Рисунке 1, с помощью абстрактного тега "tag". Перенесите блоки страницы в HTML. Следующим шагом замените абстрактный тег на необходимый.

Пояснение: Блок, представленный на Рисунке 2 не нужно разбивать на элементы. В верстке указываем тег "div" и внутри пишем "code".

В отчете с титульным листом предоставьте файл со скриншотом кода HTML верстки.

Практическое задание 3

HTML верстка блока комментария

Задание. Сверстайте, указанный на Рисунке 1, блок комментария. Постарайтесь сделать его максимально точным по дизайну.

Рисунок 1. Блок комментария

В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученного в итоге блока комментария. 

Практическое задание 4

HTML верстка страницы

Задание. Сверстайте страницу, указанную на Рисунке 1. Ширина блока должна быть – 1200 px. Сделайте правильную HTML-структуру и примените технику Pixel Perfect. 

В отчете с титульным листом предоставьте файл со скриншотами HTML верстки и полученной в итоге страницы.