1 Востаннє редагувалося Monolith (22.11.2016 16:30:46)

Тема: Покритикуйте будь ласка верстку

Загалом витратив півтора дня. Це моя перша практика(саме повністю самостійно з .psd). До цього робив або по відеоурокам, або прості сторінки без задуманого заздалегідь макету.

Мій код/макет сайту у .psd-форматі прикріпив до цього повідомлення(2,9mb).

Найскладнішим для мене було(як не дивно, в крайньому випадку для мене особисто) це шапка сайту(слайдер).  Зіткнувся з відступами та новою для мене властивістю line-height, про яку писав на днях.

Буду просто неймовірно радий любій критиці з вашої сторони, так як хочу навчитися верстати саме правильно і впевнений, що професіонал відразу помітить помилку новачка. Але в першу чергу мене цікавлять такі запитання:

1. Якщо на макеті в мене відступ(міряв за допомогою лінійки), наприклад 75px, а в коді мушу писати 125px, щоб на око виглядало як треба. Таке в мене було коли задавав line-height для тексту. Тобто це нормально, що верстальщик має "на око" виставляти відступи, чи якщо відбувається така ситуація, це показує, що щось він робить не так?

2. Також помучився з іконками соц. мереж у шапці.

https://pp.vk.me/c636229/v636229466/3d96c/_A2bMLEtMbU.jpg

На макеті вони зроблені за допомогою Font Awesome, але повторити їх за допомогою CSS я просто фізично не зміг, при чому однієї іконки(Google Plus) я навіть не знайшов. Тому просто вирізав та вставив як картинки. Чи правильно я зробив?

3. Коли треба вставляти картинку як фон, а коли у HTML? Розумію, що якщо вона не несе інформації користувачеві - то фон, але на практиці в мене виник ступор. От наприклад слайдер. По ідеї це має бути як картинка. Але чи треба її вставляти у HTML і гратися з z-index, щоб вона була якби на фоні, чи це мене понесло не туди? Теж саме про картинки соц. мереж. Бачив відео, де автор вставляв їх саме як картинки, а не фон, тому теж так зробив.

4. І ще питання про посилання Readmore:

https://pp.vk.me/c636229/v636229466/3d94f/-cAwp8G6_Pg.jpg

https://pp.vk.me/c636229/v636229466/3d956/X_Tmqwm2Vjc.jpg

Проблема в тому, що на макеті вони розташовані на одні лінії:

https://pp.vk.me/c636229/v636229466/3d95e/rt6uzsA3i58.jpg

Чого немає в мене(у нижчому блоці). Якщо однаковий по обсягу вміст, то все добре...але якщо ні то виходять така каша. Що в такому випадку робити? Залишити все як є, бо на макеті це просто для краси зроблено?

І тоді ще одне питання виникаюче з попереднього. От у мене такий же шрифт як і на макеті, такий же відступ, ширина блоку тощо. Але все-рівно текст розташований по-різному. От наприклад:

https://pp.vk.me/c636229/v636229466/3d974/3CL1hrogCOA.jpg

Тобто на макеті шрифт ніби менший. Але займає більше місця. Це в мене галюни чи як, бо використовував той самий шрифт.

Заздалегідь дякую за відповідь.

Post's attachments

18.11.2016.zip 2.91 mb, 506 downloads since 2016-11-22 

Подякували: 221VOLT1

2 Востаннє редагувалося 221VOLT (22.11.2016 16:09:46)

Re: Покритикуйте будь ласка верстку

0. скриншотів не видно

1. постараюсь не мудрувати багато -
1.1. властивості елементів по DOM наслідуються зверху донизу
1.2. пікселів у верстці дуже багато ( https://habrahabr.ru/post/121964/ , https://learn.javascript.ru/css-units , https://habrahabr.ru/post/229359/ , https://habrahabr.ru/post/220681/)
1.3. імхо, у більшості випадків - не проблема, якщо перевіряти
2. тут багато варіантів -- шрифт, svg-спрайт, png-спрайт, css-only, (ще може бути таке "ізвращєніє", яким страдаю я -- додаю на сторінку inline-svg з js-файла), у кожного варіанту - свої переваги та недоліки
3. якщо картинкою -- на мою думку це дає більше можливостей, якщо фоном - це просто швидше
4. 1. не паритись 2. текст має більше css-властивостей, ніж здається на перший погляд

5. критика
5.1.
http://f2.s.qip.ru/15iw6PVW8.png
відсутній hover-ефект (відчуття наче не вистачає)

5.2.
http://f3.s.qip.ru/15iw6PVW9.png
отут можна/треба зробити посиланням/кнопкою цей блок, а не лише текст,, додати hover-ефект

5.3.
http://f5.s.qip.ru/15iw6PVWa.png
чому лише текст є посиланням, а стрілочка - ні?

5.4.
адаптивість - де вона?))

=====
загалом - нічогенько так)) мої вітання))

Подякували: Monolith1

3 Востаннє редагувалося Monolith (22.11.2016 16:38:49)

Re: Покритикуйте будь ласка верстку

221VOLT написав:

0. скриншотів не видно

1. постараюсь не мудрувати багато -
1.1. властивості елементів по DOM наслідуються зверху донизу
1.2. пікселів у верстці дуже багато ( https://habrahabr.ru/post/121964/ , https://learn.javascript.ru/css-units , https://habrahabr.ru/post/229359/ , https://habrahabr.ru/post/220681/)
1.3. імхо, у більшості випадків - не проблема, якщо перевіряти
2. тут багато варіантів -- шрифт, svg-спрайт, png-спрайт, css-only, (ще може бути таке "ізвращєніє", яким страдаю я -- додаю на сторінку inline-svg з js-файла), у кожного варіанту - свої переваги та недоліки
3. якщо картинкою -- на мою думку це дає більше можливостей, якщо фоном - це просто швидше
4. 1. не паритись 2. текст має більше css-властивостей, ніж здається на перший погляд

5. критика
5.1.
http://f2.s.qip.ru/15iw6PVW8.png
відсутній hover-ефект (відчуття наче не вистачає)

5.2.
http://f3.s.qip.ru/15iw6PVW9.png
отут можна/треба зробити посиланням/кнопкою цей блок, а не лише текст,, додати hover-ефект

5.3.
http://f5.s.qip.ru/15iw6PVWa.png
чому лише текст є посиланням, а стрілочка - ні?

5.4.
адаптивість - де вона?))

=====
загалом - нічогенько так)) мої вітання))

0. Виправив. Вже видно.
1. Дякую за посилання. Але мене більше цікавило чи це нормальна практика коли верстальщик "на око" підправляє розміри елементів макету?
4.2. Треба буде ще погратися тоді.
5.1,5.2. Зроблю. І тоді відразу запитання: верстальщик сам має на свій розсуд робити hover-ефекти? Бо на макеті у Фотошопі цього не побачиш...
5.3. Ну...на макеті кольором посилання було виділено тільки слово Readmore...
5.4. Ще стільки запитань, що до адаптивності не дійшов, але обов'язково буде :)

Подякували: 221VOLT1

4

Re: Покритикуйте будь ласка верстку

якщо окремо не обговорено - получається, що на свій розсуд
зрештою, це важлива частина верстки

Подякували: Monolith1