RedEagle69
@RedEagle69
Html-верстальщик, Front-end разработчик

Оцените вёрстку?

Здравствуйте!

Оцените, пожалуйста, вёрстку. Она состоит из двух страниц. Переход на вторую страницу: «Каталог» => «Сливочное».
Покритикуйте, что так а что не так? Как лучше и что плохо? В общем отдаю свою работу на ваше растерзание.

Занимаюсь всеми этими «фронтэндерскими» делами около полугода. На вёрстку ушло 2,5 недели. Сейчас верстаю еще два интернет магазина по три страницы на каждый. Хватит ли этого чтобы найти работу или выйти на фриланс?

Ссылка на вёрстку

Макет: «Html Academy».

Всем заранее огромное спасибо за ответ!
  • Вопрос задан
  • 952 просмотра
Решения вопроса 4
@Mpa3buHa
1)Подсказку скрывает окошко, не нашел, как убрать его
5c96172f01748008526380.png
2)При наведении на окошко, оно меняет высоту и заезжает на другой блок, мне визуально не очень это нравится.5c96178414fdc036011064.png
А так все классно.
Ответ написан
Martovitskiy
@Martovitskiy
интересуюсь front-end
Форма обратной связи на мобилках перекрывает карту. Уберите ниже или закрывайте по клику
Ответ написан
dom1n1k
@dom1n1k
В целом хорошо. Конечно, есть шероховатости, но ничего критичного.

1. Ширина блоков с мороженым ограничивается через max-width, отчего при некоторых размерах окна они слипаются. Нужно сделать нормальные отступы между ними.

2. В блоке .features я не понимаю, зачем нужно иконку выносить в before и вешать на модификатор? Ну точнее, понимаю - лаконичность кода, бла-бла - но считаю это плохой практикой. Иконка должна быть отдельным элементом, это очевиднее и гибче.

3. Название мороженного это ссылка (логично), но при ховере на блок подчеркивание пропадает почему-то.

4. Не нужно использовать слишком общие классы типа .header или .modal. В почти любом сайте у вас будет несколько хедеров и так далее. Нужно конретизировать, даже если прямо сейчас это вроде бы пока не нужно: page-header, modal-header, section-header, catalog-header и т.п.

5. Телефон некликабельный. И даже если бы он был кликабельный, все равно не получилось бы нажать, потому что слайдер его перекрывает.

6. В слайдере перелистывание только по "биатлону"? Для мобилы это мелко, нужен свайп или боковые кнопки.

7. Я сделал бы кнопки тегом [button], а не [a]

8. Ну и для кнопок имеет смысл отключать возможность выделения текста.

Это то что я нашел за несколько минут.

Найти работу однозначно можно, потому что качество результата уже сейчас выше, чем у большинства людей, которые называют себя верстальщиками. Самое главное - видно, что автор обладает аккуратностью и вниманием к деталям. Это просто бич огромной части разрабов! Всякие scss и gulp-ы они значит изучили, а разницу между 10 и 15 пикселями не видят...
Ответ написан
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
Верхняя часть по tab не доступна. Над доступностью поработайте.

Иконка "вход" если с нее прыгать на кнопку и за пределы - то переходы резкие на иконке. delay и на иконке нужен.

Кликаю по слайдеру - возвращает к верху. А если у телефона горизонтальная ориентация - то это пугает дерганье к верху.

Зачем в слайдере картинки на 1000 пикселей (200 килобайт) если у меня экран 360? И все 3 картинки в нём разом не нужны. Можно же по клику их инициализировать.

"Для поставщиков и О производстве" в подвале - слишком близко друг к другу. На мобильном и женщинам промахнуться легко с их тоненькими пальцами.

При наведении на поиск "что ищем" - визуально текст уменьшается из-за обводки видимо - и выглядит словно поехала верстка.

Слайдеры цены (filter-form__range-scale) у меня не двигаются, в консоли ошибка https://yadi.sk/i/jySkrd3FVd5QSg

Ну если тестировать саму вёрстку - то вроде норм.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Zoominger
@Zoominger
System Engineer
Мне нравится, с iPhone 7+ выглядит оче круто :3
Ответ написан
hzzzzl
@hzzzzl
сайдбар на мобилке прикольно так буллльк
Ответ написан
Если вы в нашем курсе не участвовали, а просто взяли наш макет для тренировки, то хотя бы это укажите в своём вопросе. "Господа, я взял тренировочный макет для вёрстки у HTML Academy, сверстал, оцените." А то уж совсем некрасиво.
Ответ написан
mayaokt
@mayaokt
html, css, js, gulp, pug, stylus, wordpress, ai
Для стажа в пол года, очень долго. При условия, что половина js вообще отсутствует
Ответ написан
Ваш ответ на вопрос

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

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