Добрый вечер!
Какое ваше мнение о верстке?
Это мой первый макет, здесь попыталась использовать все лучшее сразу) препроцессор less, именования классов по БЭМ, flex, grunt, простенькие скрипты js и jq, github.
Если уровень вам покажется слишком низким, подскажите пожалуйста, на чем сконцентрировать внимание. https://zi-web.github.io/kidzmaster/
Сергей delphinpro, спасибо за комментарий)
Я пока не претендую на продакшн, на данном этапе мне было важно услышать конструктивную критику, ну и главное, что все не безнадежно))
run through, Спасибо большое за отзыв)
То что верстку опытные товарищи называют не самой ужасной очень подбадривает)
Если не сложно поясните в двух словах, как сделать контейнер для больших экранов?
run through, Спасибо за подсказку!
Да? Вы less пользуетесь? я уже скакать с одного на другое не буду, пока хоть один препроцессор не изучу, а там видно будет.
Видимо поверхностно читали.
PostCSS - этакий комбайн, который сам по себе не может почти ничего, но вся мощь в расширении плагинами. В том числе и LESS - https://www.npmjs.com/package/postcss-less
Всё работает, только шрифты не подключились и normalize.css не подключился. Это можно увидеть если в браузере нажать F12 и потом нажать на красный кружок с крестиком рядом с которым число. Посмотрите есть ли они у вас и скопируйте на сервер эти файлы.
Шрифты Roboto можно подключать с google fonts. https://fonts.google.com/specimen/Roboto
В целом тут дорабатывать только внешний вид для разных разрешений экрана, но для этого нужны макеты для всех разрешений экрана. Когда у вас нет макетов под много разрешений экрана то адаптивность можно не добавлять и оставить макет неадаптивным, как во вконтакте например.
Спасибо большое за комментарий)
Да, с консолью я потихоньку разбираюсь)
Можно оставить не адаптивным, но резиновым? Я вот попыталась, у меня на больших разрешениях разъехалось все абы куда.
Irissska89, обычно это решает дизайнер. Как правило делается обычный статичный сайт и отдельно мобильная версия как у того же вконтакте есть vk.com и m.vk.com. Так получается проще и быстрее чем возится с адаптивностью - один человек делает обычную версию, а другой мобильную и заканчивают работу в один день - так очень удобно. И с таким подходом в случае если на обычной версии нужно будет что то поменять то мобильная версия не сломается.
В целом в вашей версии нужно добавить шрифты и добавить самый верхний контейнер div, который будет статичного размера примерно 1000px или сколько нужно по шаблону, чтобы дальше этого контейнера ничего никуда не уехало на больших экранах.
Irissska89, сразу под body добавьте div.container и все остальное положите в него, и сделайте ему нужную ширину в пикселях — это чтобы все элементы никуда не уплывали когда экран больше.
asd111, ага, вот как! круто! я думала, что один человек чаще всего верстает и мобилку и десктоп. Везде mobile first рекомендуют, мне кажется этот подход сложным пока)
мне нравится верстка, но не нравится макет, если она соответствует ему :)
в мобилке расстояния между блоками надо подправить. придираться можно ко многому, но в любом случае для первого макета - отлично
Простой
Простой
