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

Question

[Олег]

Добрый день!

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

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

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

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

Ссылка на шаблон:
Верстка
jsfiddle
Ссылка на файлы

Comments

[Денис Инешин]

выложите проект на jsfiddle или codepen, не везде можно скачать ваш зипчик.

[uyrij]

115 строка логичнее выглядело бы if(!pause){slideTime = setTimeout(function(){animSlide('prew')}, hwTimeOut);} вместо next потому что майка LEVIS :) ну и порядок элементов в #slider тоже соответстенно поменять чтоб слева направо было

[Ihor Gevorkyan]

Не слушай тех, кто говорит, что это плохо. Первый всегда комом. Мое мнение - не нужно тебе делать адаптив и резину. Расставь для себя все точки над "и" со статикой. Сделай 3-5 проектов со статической версткой, потом изучишь особенности резины, отзывчивости и адаптива

Answer 1

[Денис Малиночкин]

Текущее положение дел:

1. Нет адаптивности.
   
2. Большинство размеров задано в пикселах - это ухудшает положение дел для первого пункта.
   
3. Нет единого стиля написания кода.
   
4. Ужасный вариант применения универсального селектора.
   
5. Нет normalize.css.
   

Советы:

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

А так, начало неплохое, даже в IE8 более-менее нормально все.

Comments

[rhost]

"Большинство размеров задано в пикселах" пиксели это плохо? оО

[Максим Дунаевский]

Роман: не очень, но, например, Bootstrap 4 будет целиком в относительных единицах.

[rhost]

Максим Дунаевский: не ну, так то пофиг как там в бутстрапе то) меня интересует почему именно это плохо

[Максим Дунаевский]

Роман: Простой пример: делаем размер отступов 15px. На экране мобильника норм, на экране планшета вроде тоже ничего, на FullHD уже как-то маловато, блоки начинают сливаться, открываем на 4K-телевизоре или Retina, WAIT, OH, SHI~

[rhost]

Максим Дунаевский: хм, ну вот сайт где все в пикселях на ретине(мак)...все ок оО

[Emptyform]

Денис Малиночкин Уважаемый, покритикуйте, плиз, мою верстку : Покритикуйте верстку, какие в ней есть ошибки?

Answer 2

[Anton]

Для первого прям отлично!
Проверь код на валидность validator.w3.org, есть ошибки.
В элементе header обязательно должен быть заголовок. - это не просто замена классу .header
Шрифт в меню можно уменьшить, чтобы не растягивать на 2 строки
Слайдер едет, да.
На планшетном разрешении (786px) содержимое футера можно разместить в 2 столбца: слишком много пустого места и очень долго скроллить вниз
А вот так это будет выглядеть на телефоне: gyazo.com/8aa2915cf1e6b26ff8d470609139412d

Comments

[Олег]

Сергей Сергеев: я не собирался делать магазин, тем более с первого раза\с первой попытки\первым проектом. Понимаю, что сделать его сложно. Как я написал, взял задание которое посоветовал как пример, который можно сделать. И про телефон тоже написал - выглядит по-уродскому, не спорю. Но это первая моя страница.

[Anton]

Олег: молодец, одним словом, продолжай развиваться! :) А критиков попроси прислать свои первые проекты на обзор)

[Олег]

Anton: Спасибо)

Answer 3

[NETChaser]

Посмотрел я на это безобразие... Вопрос только один "зачем вы это делаете?" и "зачем вы делаете это таким образом?"
Теперь ответы... Вся эта затея целиком направленна на определенный результат... Результатом судя по содержанию является "работающий интернет магазин". Вы просто взяли голые HTML&CSS и сделали эту страничку. Очень хорошо в принципе. Но есть одно НО... как правило делая интернет-магазин существует ещё куча всяких компонент, на реализацию которых можно потратить очень много времени, поэтому используют готовые компоненты... Готовые компоненты используют для обеспечения интерактивности (кнопочки, менюшечки, анимация необычные элементы управления).
Поэтому что бы вам не заниматься ерундой, лучше вам взять CSS framework (рекомендую bootstrap, так как решений готовых очень много) который понравиться. С помощью него сделать тоже самое. Все основное в framework-ах уже есть, вам останется разобраться с медиазапросами в css и резиновыми шаблонами. "Резиновость" и адаптивность можно комбинировать.
Адаптивность проще всего проверить в firefox, там есть инструменты для этого.

Comments

[pomeo]

NETChaser: так в хроме тоже есть, открываем devtools и слева от elements иконка мобильника

[Денис Малиночкин]

Сергей Сергеев: зачем это постить под каждым вопросом про адаптивность?))

[pomeo]

Сергей Сергеев: у вас и ноутбуки наверное от 800x600 до 4K

[Александр Опекун]

Парень учится верстать, зачем ему использовать фреймворки? Все правильно он делает и для первого раза верстка норм

Answer 4

[pomeo]

А зачем у вас фон картинкой?

Comments

[Олег]

Эммммм....там фон зернистый и просто вырезал в фотошопе небольшой квадратик. Или есть другой способ?

Answer 5

[rinatoptimus]

Если это самый первый опыт - отлично! Успехов!

Answer 6

[Роман]

joxi.ru/Dr8W7YQSLMZ4A6

joxi.ru/8An5nlgT9yqK2O

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

Вот так не надо:

*{
  font: bold 21px "Bebas Neue";
  color: #A1A1A1;
}

лучше

body{
  font: bold 21px "Bebas Neue";
  color: #A1A1A1;
}

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

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

Comments

[Олег]

Спасибо за ответ.
Да еще не разобрался с адаптивностью.

[Emptyform]

Роман покритикуйте, плс, мой html/css код в этой темке: Покритикуйте верстку, какие в ней есть ошибки?

Answer 7

[m4a1fox]

validator.w3.org/check?uri=https%3A%2F%2Fdl.dropbo...