devellopah
@devellopah

Как бы вы оценили этот свёрстанный одностраничный сайт?

Хочу сверстать несколько сайтов, чтобы собрать небольшое портфолио, чтобы было что показать на бирже.
Это несложный одностраничный сайт. Не могли бы вы оценить качество проделанной работы и возможно дать несколько советов на будущее.
https://github.com/dagman/jwoodtemplate
https://jwoodtemplate.surge.sh

p.s. посоветуйте интересные многостраничные макеты
  • Вопрос задан
  • 935 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
В целом - неплохо, но есть пара замечаний. Во-первых, когда делают hero header, его делают так, чтобы нижний край был по нижней границе экрана, а не уходил за нее, а то получается то, что я не могу узнать, что мне нужно скроллировать, пока не начну это делать (надписи не видно):

e84799ca926742e58b0a66eda6c90a2c.png

Ну и я бы заменил синюю полосу на темно-сине-зеленую, а то на странице синего больше нет и она как-то выбивается из общей картины. Но это имхо, может там какой-то глубокий смысл в этом.

Второе: дизайнер может ошибаться. Точка. Повторю: дизайнер может ошибаться, и ваша задача не тупо повторить то, что он намалевал, но и поправить его в случае если он не прав. Пример:

7b5d2c368c2a47d5b43a08a9d3a44891.png
У меня монитор немного отсвечивает, я не сразу заметил, что там что-то написано, а про стрелку понял, только после того, как наклонил его и посмотрел снизу. Это наглядный пример того, что дизайнеры переодически забывают о контрасте. Нужно исправить.

В исходники не смотрел, о них говорить не буду.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@ferdasfarmazone
Верстальщик!
- вместо
<div class="title home__title"><span class="bold">JWood</span> <span>Photography</span></div>

<div class="title home__title"><b>JWood</b> Photography</div>

-
font-family: OpenSansLight,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;

OpenSansLight? просто при подключении поставьте к примеру
font-weight: 300;
-
<div class="contacts__item-value contacts__item-value__mail">jason@wood.com</div>

<div class="contacts__item-value contacts__item-value__mail"><a href="mailto:jason@wood.com">jason@wood.com</a></div>

так и для телефона, только вместое mailto: tel:+

Это так, на скорую руку. В целом - хорошо!
Ответ написан
А я придерусь к паре вещей: на первом экране у вас не видно ссылки "прокрутите вниз", очевидно что для этого хорошим решением будет сделать для шапки высоту 100vh и исходить уже из нее.

Судя по тому как у вас работает меню, было бы логичнее сделать не полностью скроллирующийся сайт, а скролл блоков. Не помню как называется, что-то типа: full-page slider.
Ответ написан
lukoie
@lukoie
Теперь понятно что делали Вы только верстку, так что дизайн и контент это отдельный разговор.
Сделайте иконку тематическую а не yeoman'а
Заголовок сайту тоже желательно.
В хедер вставьте хоть намеки на сео метатеги.
Юзабилити уже и так сказали, но это не ваша проблема в данном случае.
В коде все нормально, но и сайтик то простой.
Смутило только вот это:
9a2d64a2c7c7.png
Лучше спрайтом.
И стрелки не работают - лучше чтобы они были кликабельны и открывали на следующий экран.
Ответ написан
Комментировать
Uwe_Boll
@Uwe_Boll
Я Злой и Страшный Уве Болл в Разработке знаю Толк
1) говно фреймворк
2) слишком много дивов
3) об остальном Тебе написали Ivan Bogachev и @0example
4)за иконки картинками избивать Тебя буду очень больно и очень долго
Ответ написан
Ваш ответ на вопрос

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

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