mshornikov / stepik-course-homework

Homework for Stepik course about HTML & CSS

Stepik course homework

Homework for HTML/CSS course on platform Stepik

Homework have three parts:

1. HTML task (create a page on pure HTML with some complex tables)

   Images in "/img" folder, mockup in "/source" folder

   Website that help with checking semantics: https://validator.w3.org/nu/

Comments to task:

Необходимо сверстать страницу по макету "Хьюстон - макет.pdf". Так же есть скриншот уже свёрстанной страницы "Хьюстон.png", чтобы было понимание, как в итоге должно выйти.

Обязательные требования:

1. Сверстанная страница обязательно должна быть семантически верной. Если ты сомневаешься в выбранном теге, зайди на сайт оригинала и может так тебе станет яснее: https://ru.wikipedia.org/wiki/Хьюстон
2. Необходимо верстать без использования CSS
3. В содержании должны быть якоря на все заголовки
4. Твоя страница может и будет отличаться внешне от макета. Главное - верстка должна быть семантически верной.

Макет, скриншот и картинки по ссылке: https://drive.google.com/open?id=1PWoLJnHDWB-gGCZV1Nlk9w0KnmvYwnYp

Не беспокойся, если в результате страничка шире, чем в макете. Это нормально, так как в данном случае контент растягивается по всей ширине окна браузера, и для макета мы просто уменьшили его ширину.

Задание проверяется самостоятельно.

2. CSS task (add styles to previous page)

Comments to task:

Самый важный навык любого разработчика - умение ставить вопрос и находить на него ответ в интернете.

Ты уже знаешь синтаксис CSS и принципы его работы. Поэтому сможешь самостоятельно искать названия нужных свойств и примеры их использования. Например, тебе нужно подчеркнуть текст, но ты не знаешь, как это сделать. В этом случае тебе достаточно погуглить "как подчеркнуть текст в css пример" и нажать первую ссылку.

Возьми свою первую выполненную домашку и стилизуй её. Требования:

• Контент занимает 70% ширины страницы.
• Контент выровнен по середине.
• Заголовки всех уровней выполнены шрифтом без засечек.
• Верхний отступ заголовков установлен больше нижнего (например, 1.5em), чтобы соблюсти правило внутреннего и внешнего.
• Заголовки первого уровня имеют размер 32px.
• Таблицы имеют непрерывные границы чёрного цвета толщиной 1px.
• Подписи под картинками выполены курсивом.
• Картинки обтекаются текстом. Картинки справа, текст слева.

Если отдельные части страницы будут смотреться странно, то не стоит подгонять общие стили под частные случаи. Чтобы исправить отдельное место, напиши стили конкретно для него, используя селекторы по классу.

Вот, что примерно должно у тебя получиться: Хьюстон CSS (PNG, 3МБ)

Задание проверяется самостоятельно.

3. something