Как оцените верстку?

Question

[Irissska89]

Добрый вечер!
Какое ваше мнение о верстке?
Это мой первый макет, здесь попыталась использовать все лучшее сразу) препроцессор less, именования классов по БЭМ, flex, grunt, простенькие скрипты js и jq, github.
Если уровень вам покажется слишком низким, подскажите пожалуйста, на чем сконцентрировать внимание.
https://zi-web.github.io/kidzmaster/

Comments

[Александр]

Double Kill.

[Сергей delphinpro]

Направление верное. Даже неплохо. Но для продакшн не катит. Много недоработок в мелочах.

[yanis_kondakov]

И вообще не смотрите даже на Less. Смотрите на Sass или PostCSS.

[Irissska89]

Алексей, спасибо за комментарий)
Подключала grunt-autoprefixer, наверное что-то не так.
Отдельное спасибо за подсказку по шрифтам, поправлю.

[Irissska89]

Сергей delphinpro, спасибо за комментарий)
Я пока не претендую на продакшн, на данном этапе мне было важно услышать конструктивную критику, ну и главное, что все не безнадежно))

[Irissska89]

run through, Спасибо большое за отзыв)
То что верстку опытные товарищи называют не самой ужасной очень подбадривает)
Если не сложно поясните в двух словах, как сделать контейнер для больших экранов?

[Irissska89]

yanis_kondakov, да я уже прочитала что PostCSS получше будет less. Спасибо за комментарий)

[Irissska89]

run through, Спасибо за подсказку!
Да? Вы less пользуетесь? я уже скакать с одного на другое не буду, пока хоть один препроцессор не изучу, а там видно будет.

[Сергей delphinpro]

Irissska89,

PostCSS получше будет less.

Видимо поверхностно читали.
PostCSS - этакий комбайн, который сам по себе не может почти ничего, но вся мощь в расширении плагинами. В том числе и LESS - https://www.npmjs.com/package/postcss-less

Answer 1

[asd111]

Всё работает, только шрифты не подключились и normalize.css не подключился. Это можно увидеть если в браузере нажать F12 и потом нажать на красный кружок с крестиком рядом с которым число. Посмотрите есть ли они у вас и скопируйте на сервер эти файлы.
Шрифты Roboto можно подключать с google fonts.
https://fonts.google.com/specimen/Roboto

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

Comments

[Irissska89]

Спасибо большое за комментарий)
Да, с консолью я потихоньку разбираюсь)
Можно оставить не адаптивным, но резиновым? Я вот попыталась, у меня на больших разрешениях разъехалось все абы куда.

[asd111]

Irissska89, обычно это решает дизайнер. Как правило делается обычный статичный сайт и отдельно мобильная версия как у того же вконтакте есть vk.com и m.vk.com. Так получается проще и быстрее чем возится с адаптивностью - один человек делает обычную версию, а другой мобильную и заканчивают работу в один день - так очень удобно. И с таким подходом в случае если на обычной версии нужно будет что то поменять то мобильная версия не сломается.
В целом в вашей версии нужно добавить шрифты и добавить самый верхний контейнер div, который будет статичного размера примерно 1000px или сколько нужно по шаблону, чтобы дальше этого контейнера ничего никуда не уехало на больших экранах.

[asd111]

Irissska89, сразу под body добавьте div.container и все остальное положите в него, и сделайте ему нужную ширину в пикселях — это чтобы все элементы никуда не уплывали когда экран больше.

[Irissska89]

asd111, ага, вот как! круто! я думала, что один человек чаще всего верстает и мобилку и десктоп. Везде mobile first рекомендуют, мне кажется этот подход сложным пока)

Answer 2

[Serzio]

мне нравится верстка, но не нравится макет, если она соответствует ему :)
в мобилке расстояния между блоками надо подправить. придираться можно ко многому, но в любом случае для первого макета - отлично

Comments

[Irissska89]

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