spanish_aviator
@spanish_aviator

Первая верстка. Сойдет для первого раза?

Добрый день!

Две недели назад прочитал данный пост:
Вопрос на Тостере

В первом решении вопроса был предложен шаблон и некоторые указания по его реализации.
Также, как и автор вопроса, я прошел все доступные уроки на HTML Academy, codecademy( HTML&CSS, JavaScript, jQuery), htmlbook - использовал как справочник.

На счет верстки. Первый слайдер, более чем полностью скопипащен, Второй, чуть менее чем полностью и они не тянутся. Не знаю как вы оцените то, что получилось, но сейчас больше всего трудностей испытываю с резинкой и адаптивностью. Проверял на телефоне, выглядит довольно страшно, но это исправить пока что, мне не под силу. Буду продолжать верстать и смотреть уроки по резиновой и адаптивной верстке, думаю смогу разобраться что было не так.

Хотел бы попросить, оценить мою первую верстку и указать на грубые ошибки.
На выполнение ушло примерно две недели, плюс-минус день.
Спасибо!

Ссылка на шаблон:
Верстка
jsfiddle
Ссылка на файлы
  • Вопрос задан
  • 3026 просмотров
Решения вопроса 3
Текущее положение дел:
  1. Нет адаптивности.
  2. Большинство размеров задано в пикселах - это ухудшает положение дел для первого пункта.
  3. Нет единого стиля написания кода.
  4. Ужасный вариант применения универсального селектора.
  5. Нет normalize.css.


Советы:
  1. Определите свой стиль, которому вы будете следовать, ибо сейчас в коде помесь двойных и одинарных кавычек.
  2. Не используйте идентификаторы для стилизации элементов. Сейчас это считается дурным тоном.
  3. Не используйте селектор по тегу для вложенных в body header, footer, main и т.д.
  4. Советую ознакомиться с различными методиками организации стилей и вообще кода. Для начала пойдет Code Guide by @mdo.
  5. Используйте CSS-препроцессоры (можно ещё и HTML).


А так, начало неплохое, даже в IE8 более-менее нормально все.
Ответ написан
@tunikov
Frontend dev
Для первого прям отлично!
Проверь код на валидность validator.w3.org, есть ошибки.
В элементе header обязательно должен быть заголовок. - это не просто замена классу .header
Шрифт в меню можно уменьшить, чтобы не растягивать на 2 строки
Слайдер едет, да.
На планшетном разрешении (786px) содержимое футера можно разместить в 2 столбца: слишком много пустого места и очень долго скроллить вниз
А вот так это будет выглядеть на телефоне: gyazo.com/8aa2915cf1e6b26ff8d470609139412d
Ответ написан
@NETChaser
Посмотрел я на это безобразие... Вопрос только один "зачем вы это делаете?" и "зачем вы делаете это таким образом?"
Теперь ответы... Вся эта затея целиком направленна на определенный результат... Результатом судя по содержанию является "работающий интернет магазин". Вы просто взяли голые HTML&CSS и сделали эту страничку. Очень хорошо в принципе. Но есть одно НО... как правило делая интернет-магазин существует ещё куча всяких компонент, на реализацию которых можно потратить очень много времени, поэтому используют готовые компоненты... Готовые компоненты используют для обеспечения интерактивности (кнопочки, менюшечки, анимация необычные элементы управления).
Поэтому что бы вам не заниматься ерундой, лучше вам взять CSS framework (рекомендую bootstrap, так как решений готовых очень много) который понравиться. С помощью него сделать тоже самое. Все основное в framework-ах уже есть, вам останется разобраться с медиазапросами в css и резиновыми шаблонами. "Резиновость" и адаптивность можно комбинировать.
Адаптивность проще всего проверить в firefox, там есть инструменты для этого.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
pomeo
@pomeo
А зачем у вас фон картинкой?
Ответ написан
@rinatoptimus
Если это самый первый опыт - отлично! Успехов!
Ответ написан
Комментировать
paradokso
@paradokso
Начинающий фронт-эндер
joxi.ru/Dr8W7YQSLMZ4A6

joxi.ru/8An5nlgT9yqK2O

текстуру для бэкграуунда можно и поменьше делать

Вот так не надо:
*{
  font: bold 21px "Bebas Neue";
  color: #A1A1A1;
}


лучше
body{
  font: bold 21px "Bebas Neue";
  color: #A1A1A1;
}


лучше опускать вниз

и вы же используете media - почему не сделали адаптивность?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы