atkishkinvlad / article-markup

article-markup task

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

1. Посмотри, на то, как должна будет выглядеть статья, в результате твоей верстки. Для этого открой в браузере макет: ./article-design/index.html. Макет экспортирован в html. При клике на разные элементы можно в колонке справа увидеть стили, размеры и прочее полезное. К сожалению, разметка, которая получается при экспорте из редакторов, непригодна для размещения в интернете, поэтому верстальщики все еще нужны. Картинки для статьи лежат в папке с непроизносимым названием в article-design. Картинки в ней представлены несколькими размерами — выбирай любой.

2. Сверстай статью по макету. Контент и картинки бери из макета. Отступы и размеры должы совпасть с макетом. Единственное, в чем может быть заметное отличие, это шрифты: шрифты в вебе зависят от того, какие из них есть на компьютере пользователя. Если нужного шрифта нет, то браузер выбирает какие-то дефолтные. Поэтому шрифт для заголовков создай такой:

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif

Шрифт для основного текста должен быть таким:

font-family: Georgia, Cambria, "Times New Roman", Times, serif

Для кода используй моноширинный шрифт:

font-family: "Courier New", monospace;

3. Сверстай шапку для нашей статьи. Открой макет, который лежит в директории responsive-design. В правой колонке выбери пункт Desktop HD. Там над статьей появилась шапка сайта: логотип и навигационное меню. В навигационном меню сейчас выбран пункт "Блог" (мы находимся на странице блога), на примере пункта "Проекты" дизайнер показал, как выглядит пункт меню при наведении на него курсора.

Сверстай шапку сайта, помня о том, что меню семантически верно верстать так:

<nav>
    <ul>
        <li><a>Пункт Меню</a></li>
    </ul>
</nav>

Чтобы убрать дефолтные буллеты списка, воспользуйся свойством list-style (https://webref.ru/css/list-style). Для задания фона тебе пригодится свойство background-color (https://webref.ru/css/background-color). Чтобы сделать или убрать подчеркивание ссылок есть стиль text-decoration (https://webref.ru/css/text-decoration)

4. Сайты должны существовать в разных разрешениях экранов. Поэтому дизайнеры часто делают макеты, показывающие мобильный вид сайта. У твоего сайта тоже должен быть мобильный вид. В дизайне из директории responsive-design, в правой колонке выбери пункт Mobile. Этот дизайн применяется для экранов ≤800px шириной. В файле styles.css уже есть заготовка @media для мобильных стилей. Переопредели стили для мобильного вида. Проверяй себя, уменьшая окно браузера.

Источник статьи: https://medium.com/webbdev/closures-9a20e84b62cd