Этот макет дался мне намного легче предыдущих. Наверное потому, что здесь не было как таковых сложных фоновых изображений и контента, выходящего за основной контейнер.
-
Перенести все стили в несколько файлов. Сначала я хотел создать отдельный файл под каждую секцию, и потом слить их в один style.css, но после минут 20 стараний, ничего не получилось, и я бросил это дело, чтобы не сгореть.
-
Бургер-меню, которое открывается при клике. Я даже не пытался его сделать, потому что не хватило времени, а доделывать под конец дня не хочется. К тому же я никогда его не делал. Да и в макете он не прописал (найс отговорки, думаю хватит).
-
Адаптив для маленьких экранов (хотя потенциал у этого сайта для адаптива есть).
-
Одинаковые имена классов для заголовков секций. Права, я не задал отступы сверху и снизу для этого заголовка. Насчет отступа снизу я не уверен, но отступа сверху можно было избежать, применив его для класса-обертки для большей гибкости.
-
Использовал контейнеры по назначению. На этом макете все было очевидно по поводу контейнеров, они были в каждой секции по середине.
-
Опробовал стабильную конструкцию section> .container.> .section__wrapper.
section
нужен для заднего фона..container
нужен для выравнивания по центру и ограничения всего контента по ширине.section__wrapper
нужен для задания направления контента (чаще всего с помощьюflex
). Теперь весь контент не разъезжается, если увеличить размер экрана. -
Сделал отзывчивый размер шрифта с помощью специальной формулы
calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}))
mobSize
- желаемый размер шрифта для мобилок (320px).maxWidth
- ширина самого большого контейнера со шрифтом.addSize
- разница между максимальным и минимальным шрифтами. -
Хоть я и не сделал отзывчивые margin, padding & line-height, но я хотя бы понял, как это сделать. С помощью
em|rem
можно задать величины этих свойств, а размер шрифта автоматически будет меняться по этой формуле. Получится своего рода отзывчивый текст с отступами. -
Изучил новую анимацию приближения
transform: scale(#{coeff})
. Она прикольно подходит при наведении на какую-то карточку. Благодаря ей сайт становится еще более интерактивным.
До завтра нужно разузнать, как раскидать стили по файлам и конкретнее обдумать адаптивный шрифт и отступы (я пока не понял, чем лучше пользоваться em | rem
).
До завтра!