Верстка через 4 месяца обучения. Как вам результат?

Question

[colorkid]

Примерно 4 месяца назад стал изучать верстку. Потихоньку верстал-изучал htmlacademy и прочие сервисы-учебники.
Две недели назад начал верстать учебный макет от htmlacademy - "Sedona". Проявил фантазию в некоторых нюансах и адаптивности.

Хочу спросить мнения о результатах 4 месяцев обучения, как вам моя верстка? Где ошибки? Что подтянуть?
colorkid.ru/sedona/index.html
colorkid.ru/sedona/catalog.html
colorkid.ru/sedona/hotel.html

Answer 1

[Elena Novodvorskaya]

Изучайте БЭМ и радуйтесь когда нужно будет что-нибудь застились или изменить застиленое, т.к.

.main-nav ul li a {}

не комильфо)

Answer 2

[asd111]

Молодец.
В модальном окне colorkid.ru/sedona/hotel.html#modal можно использовать jquery masked input чтобы было проще набирать номер телефона digitalbush.com/projects/masked-input-plugin

И как выше заметили
main.css строка № 600

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: #fff;
    background: #fff;
    outline: none;  // Убирает выделение в виде синего квадратика при клике на слайдер, которое добавляет браузер 
}

Comments

[Gran Torino]

и зачем его убирать? Такое выделение очень полезно для просмотра с мобильных.

[asd111]

Gran Torino: задумка дизайнера скорее всего не включала в себя синий квадратик при выделении

[Александр Софьин]

Gran Torino: В чем полезность?

[asd111]

Александр Софьин: дело не в полезности, это же дизайн - в нём главное красота.

[Gran Torino]

Александр Софьин: на маленьких экранах пользователю удобно понимать/видеть на ту ли он нажал (особенно при плотном расположении элементов интерфейса ) ссылку/кнопку если она по нажатию выделяется outline.

[Gran Torino]

asd111: так задумка дизайнера часто много чего не включает

[asd111]

Gran Torino: вопросы не ко мне, а к дизайнеру.

[Gran Torino]

asd111: Ну что включала или не включала задумка дизайнера известно только самому дизайнеру, есть еще такое немаловажное понятие на юзабилити сайта

Answer 3

[LMI]

Неплохо, но в валидаторе много ошибок. Изображения нужно делать спрайтами.

Comments

[7rulnik]

лучше даже инлайнить

[Gran Torino]

7rulnik: в смысле "инлайнить"?

[Dartess]

Если имеются в виду иконки то их лучше в SVG инлайнить.

Answer 4

[Ивор Барханский]

Считайте меня устраревшим, не знаю, но меня эти «воздушные» стили как раньше не впечатляли, так и сейчас совершенно не. Большие картинки, сносная типографика, но информация, мать ёё, информация. Нет её. А сайты то ради информации делаются, нет?

Comments

[Gran Torino]

Сайты вообще-то разные бывают и с разными задачами)

[Ивор Барханский]

Gran Torino: но тут то — рекламная листовка, не?

Answer 5

[Дмитрий Сергеевич]

Кривые селекты на форме внизу.

Answer 6

[Александр]

• для html5 используйте

  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

  
  
  
• используйте css reset
  
• грузите минимизированные скрипты
  
• убирайте весь код js в отдельный файл
  

Comments

[colorkid]

Спасибо. Полезно

Answer 7

[Alex]

joxi.ru/gmv6Gk7ulo3Pma фон слишком маленький.
А тут желательно дать радинг joxi.ru/DmB1k6xi3LDVrP

Comments

[colorkid]

спасибо. не увидел про фон. поправил

[zooks]

Не радинг, а пэддинг.

[Alex]

zooks: очепятки :)

Answer 8

[zooks]

IE7 поддерживать не надо, IE8 только по сильному желанию заказчика.
Кодировка UTF-8 по традиции пишется заглавными:
<meta charset="UTF-8">

Вижу ненужные закрывающие слеши, которые нужны только для XHTML.
Также непонятно зачем элемент дизайна оборачивать в figure, это тег нужен для рисунков в статьях.
В Firefox под ним вылезла однопиксельная полоска. Значит теста в разных браузерах не было.

Answer 9

[Андрей Федоров]

Воу, воу! Адаптивность!!! Респектос. )

Answer 10

[sumanai]

.modal:target > div {
	-webkit-animation-name: bounce;
}

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

Answer 11

[GoodProject]

Отлично!
А можно ссылку на макет по которому верстали?

Comments

[colorkid]

Держи https://yadi.sk/d/SGRLe6FbitnGp

[GoodProject]

colorkid: это Интенсив от HTML ACADEMY или что? И сколько он стоил, ибо в платном такого макета вроде бы нету

[GoodProject]

В подписке за 300 руб точнее

[colorkid]

это не в подписке, этот макет проходится в онлайн интенсиве https://htmlacademy.ru/intensive
А данный макет нашел на торентах

Answer 12

[oknechirik]

Еще момент, в шапке через уловные комменты поддержка аж ИЕ7 (понятно, что HTML5 bolierplate и все дела), а флекс только в стандарт моде. То есть ни ИЕ10, ни даже Сафари нынешнее не поддерживается.
А так норм для начала, даже вполне.

Answer 13

[Елизавета Борисова]

Кто хочет научиться верстать быстрее?

Comments

[Михаил]

Елизавета Борисова , я! Возьмете в ученики?

[Елизавета Борисова]

добавляйтесь в скайп (в профиле)

Answer 14

[Ильдар Габитов]

Привет всем, как вам мой результат адаптивной верстки в HTML через пару недель, как начал изучать верстку с нуля:)
Правда сделано с помощью пошаговой инструкции от Treehouse.
Даже домен с хостингом приобрел, чтобы в дальнейшем сделать из него портфолио:

ildargabitov.com/index.html
прикольно, только заметил, что чат понимает HTML код:)

Ищю Ментора-джедая, дабы прийти к моей цели - Фронтенд девелопер.
Пы.Сы. много идей, много сил, мало времени.

Comments

[Gran Torino]

ну, как бы вообщет ничего особенного, + только за респонсив и желание к развитию.

[Ивор Барханский]

Шрифт крайне нечитабелен. Контрастнее бы. И убрать капс. Он тоже сильно паскудит читабельность.

Answer 15

[arsenty]

Safari 8, Mac OS X 10.10
https://www.dropbox.com/s/i1cg1a7mdlixjqf/colorkid...
Вам может показаться неинтересным данный браузер и ОС :), но так не должно выглядеть ни в одном современном браузере последней версии.