Автор Тема: Качество верстки из PSD  (Прочитано 551 раз)

12 Сентябрь, 2017, 18:56:48

Оффлайн Dera_Alexandr

  • Школьник
  • *
  • Сообщений: 3
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 60.0.3112.113 Chrome 60.0.3112.113
    • Просмотр профиля
Доброго дня, товарищи!

Интересует Ваша оценка корректности написанного кода и советы опытных.
За основу был взят макет из свободного доступа https://freebiesbug.com/psd-freebies/surfers-bootstrap-psd-template/.

Сверстано половина простыни из шаблона, в работе использовались html и css, следовал БЭМ методологии, в размерах использовал rem'ы для последующей возможности управлять масштабированием в html{font-size: 16px;} через JS и media query.

Проект лежит по ссылке https://github.com/alexandrdera/Surfers.

Что не удалось:
1. Настроить ширину высоту фоновой картинки первой страницы - волны, таким образом, что бы при масштабе 100% она была видна по всей ширине и карточка с досками не уезжала глубоко вниз.
2. Перенести на слой ниже или сделать " не выделяемым " вертикальный текст BOARDS на карточке с досками (элемент .card__hidden-text), из-за чего в блоке bar элементы стрелок не кликабельны.
3. Исправить положение объекта Arrow_right.svg - поставить его справа от Arrow_left.svg, т.к. он выходит за рамки блока card.
...

Вопросы:
1. Половина практически готова, у меня сложилось представление о временных затратах. Соответственно во сколько времени Вы оцениваете верстку всего макета?
2. В макете ширина страницы 1920 точек, у меня на hd экране получилось все крупным. Изменение размеров не решит проблему, соответственно как теперь перейти к адаптивности?

Форум вебмастеров - Webmasters.BY

Качество верстки из PSD
« : 12 Сентябрь, 2017, 18:56:48 »

13 Сентябрь, 2017, 09:59:44
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 55.0 Firefox 55.0
    • Просмотр профиля
1) Количество времени на такой макет зависит только от мастерства верстальщика, у каждого оно будет своё.
2) Указывайте размеры в процентах или используйте @media query
и лучше давайте ссылку на страницу с результатом, чтобы не нужно было скачивать с гитхаба.

13 Сентябрь, 2017, 12:07:31
Ответ #2

Оффлайн Dera_Alexandr

  • Школьник
  • *
  • Сообщений: 3
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 60.0.3112.113 Chrome 60.0.3112.113
    • Просмотр профиля
Загрузил страничку на бесплатный хостинг https://alexandrdera.000webhostapp.com/.

Как определиться с выбором, что, например в данном проекте, использовать % или @media query?

14 Сентябрь, 2017, 11:19:56
Ответ #3

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 55.0 Firefox 55.0
    • Просмотр профиля
использовать % или @media query  - это вы уже сами решайте, как он у вас должен выглядеть при разных разрешениях

и еще, замечания по коду:
1) у вас указан не корректный DOCTYPE, должен быть <!DOCTYPE html>
2) нельзя определять два аттрибута class для тега  <section class="about" class="clearfix"> должно быть <section class="about clearfix">
3) тег IMG не должен иметь закрывающий тег

23 Октябрь, 2017, 19:36:27
Ответ #4

Оффлайн nonstop

  • Школьник
  • *
  • Сообщений: 20
  • Репутация: 2
  • OS: Windows NT 6.2 Windows NT 6.2
  • Browser: Firefox 56.0 Firefox 56.0
    • Просмотр профиля
По качеству, не очень как-то получается, но если поработать можно исправить.