ivan-hilckov / first-steps Goto Github PK

Обще описание
Макет в Фигме.

Список нужно сверстать адаптивно:

• для десктопа
• для планшетов
• для мобильных устройств адаптируйте имеющийся дизайн самостоятельно, постарайтесь сделать его как можно более консистентным

Для просты разобьем макет на части.

• HEADER

• FILTERS

• LIST

• подключить шрифты
  Один из моментов которые часто встречаются в начале карьеры это верстка лендингов и других маленьких сайтов.
  И скорее всего шрифт в макете будет отличаться. В данном макете шрифт у нас Montserrat. Нужно подключить его на страницу.

https://fonts.google.com/specimen/Montserrat

Материалы на тему:

https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website
https://www.youtube.com/watch?v=g15mF_XAOB8&ab_channel=DaniKrossing

Стоит поискать ответы на вопросы:

Какие способы подключения шрифтов? (есть? html, css, js)

• HEADER

верстаем шапку, тайтал делаем тегом h1 (семантика)
для поля поиска потребуеться иконка ее достаем в svg

Стоит поискать ответы на вопросы:

Семантическая верстка - что это?
Какие форматы у картинок бывают?
Чем svg отличается от png?

• FILTERS

тут вроде все просто
FilterTitle - иконка в svg + текс, для того что бы отделить иконку заюзать cвойство css gap, центрировать через display: flex и justify-content: center
FilterSubTitle - стили
FilterButton - учесть три состояние (default | hover | active), отступы между кнопками через свойство gap

Стоит поискать ответы на вопросы:

Семантическая верстка - что это?
Какие форматы у картинок бывают?
Чем svg отличается от png?

• LIST

ListItem - cтили

Что читать пока делаешь?

гриды - https://css-tricks.com/snippets/css/complete-guide-grid/
флексбоксы -https://css-tricks.com/snippets/css/a-guide-to-flexbox/
тут подробно разобран кей когда надо что то сделать по центру - https://css-tricks.com/centering-css-complete-guide/