Kadzi

1. Заходим в инструменты разработчика, наводим курсор на любую иконку, и видим, что это шрифт:


2. Заходим на сайт elusiveicons.com , скачиваем. У каждой иконки свой класс и content. Через поиск ищем нужную иконку:


Прямо на сайте при клике на иконку мы видим класс:

чек лист вёрстки
то же, подробно

что можно делать без опыта:

открыть сборку на смартфоне, планшете, десктопе. именно на реальном устройстве.

а) быстрый обзор страницы, соответствие макету: отступы, размеры, шрифты и размер шрифта, формат графики, неровности, что сразу бросаются в глаза.
б) медленный обзор по блокам: сходство, косяки, работоспособность, прям пробегаемся по каждому блоку с каждого устройства. (нет планшета? самый простой вариант веб-инспектор гугла)
в) нажимаем, тыкаем, зумим, скролим, листаем (меняем масштаб страницы, делаем все агрессивно, чтобы быстрее заметить микроглюки). Задача взаимодействовать со всем, что есть на странице. Смотрим че ломается, едет, скрипит при нашем тесте.
г) сразу можно проверять оптимизацию графики: с помощью гугл пейдж спид, вбиваем юрл, смотрим, на что жалуется, сколько весит графика (оптимизировали ли её?)
д) повторяем процедуру в ТОП браузерах: хром, яндекс, мозила, сафари, едж (ИЕ, если нужно), мобильные браузеры, смотрим, что не так и всё ли работает

это минимум:

ПОХОЖЕ НА МАКЕТ
ВСЕ КОНТРОЛЫ РАБОТАЮТ
НЕ ЕДЕТ, НЕ РАЗВАЛИВАЕТСЯ
В ДРУГИХ БРАУЗЕРАХ ОК

отдельным пунктом ДОСТУПНО
всеми контролами можно управлять клавиатурой, сайт (в идеале) полностью функционирует при выключенном CSS и JS (в хроме есть плагин - Web Developer, скачиваем из магазина, тыкаем, тестим)

ПЕРЕПОЛНЕНИЕ КОНТЕНТОМ
тестируем поведение блоков прямо в хроме, через инспектор. (об этом предлагаю автору найти уже готовые описалки... аааа, ладно, на: обзор веб-инспекторов)

______________________________________

полезные ссылки:

Блог Киселёвой, куча обзоров книг + полезные вырезки, крутейший блог

о доступности:

https://weblind.ru/ ОСНОВНОЕ ЧИТАТЬ
https://www.bl2.ru/programing/colourcontrastcheck.html
https://habr.com/post/347478/
https://developer.paciellogroup.com/resources/cont...
https://usabilitylab.ru/blog/dostupnost-internet-b...
https://blog.sibirix.ru/2018/05/22/almost-blind-ve...
https://www.toptal.com/designers/colorfilter
www.bbc.co.uk/guidelines/futuremedia
https://www.lightningdesignsystem.com/accessibilit...
https://geon.github.io/programming/2016/03/03/dsxyliea
https://wearecolorblind.com/
blog.gov.design/blog/2016/11/08/accessibility.html
specialbank.ru/guide
specialbank.ru/guide/index.html

P.S

валидаторы кода (пускай меня поправят если не так) во-первых их 2 и они отличаются, во-вторых, если видим ошибку - это не значит, что это всегда ошибка. Т.к некоторые вещи могут быть не описаны там

Илья, зайди в гугле в режим разработчика и посмотри брейкпоинты:



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

Как нужно такое делать:

1) придумываешь блоки
2) прикидываешь, что будет резиновым, а что нет
3) учитываешь поведение элементов, при разных разрешениях
4) посмотри как ведут себя блоки при растяжке на сайте, в режиме разработчика

Да, возможно нужна будет сетка под 1920 (например для карточек интернет-магазина). Посмотри как пример сайт студии лебедева в режиме разработчика, вопросы отпадут. У них текст остается какбы в пределах 1200px, а карточки и фоны тянутся по всей ширине.

p.s переходи срочно в figma, это в разы ускорит разработку + там ты сразу можешь тестить свой дизайн.

прикладываю на всякий случай сетки, копируй их в свой документ в фигме и делай все там (там кстати можно прям в режиме реального времени протестить как поведут себя блоки при растяжке)

Привет, рекомендую изучить какие вообще бывают элементы верстки и как их можно разделять.

Совет бюро, базовые элементы верстки

В этом совете еще 12 ссылок на эту тематику, в том числе, про выравнивание и чередование ритма. А на самом сайте бюро в советах можно поискать дополнительные ответы, их не прикладываю, так как ты интуитивно найдешь нужные.

От себя могу добавить, что строгие сайты, например сайт юридических услуг может допускать нестрогое выравнивание блоков, от этого продажи не упадут, так как в первую очередь качественный текст и смыслы, которые мы доносим.

Чтобы сделать резкий скачок, рекомендую:

1) Подборка советов главреда по тексту их там очень много, за месяц не осилить если вдумчиво читать и осознавать, но за 2 месяца, с видео на его канале, вполне.

2) Книга А.Горбунова Типгорафика и верстка (можно на сайте бюро купить подписку, а можно скачать из сети, например из вк)

3) Джеймс Феличи, Типографика: шрифт, верстка, дизайн. Ооочень классный справочник. Читается не легко. Информации много, почти 500 страниц. Но после него, ты со скоростью света будешь принимать решения в верстке. (а это очень важно для хорошего адаптивного сайта, например, сложные таблицы и т.д).

4) Ян Чихольд: Облик книги. Перечитываю сейчас и нахожу новое, что не замечал ранее. Также поможет со скоростью верстки.

5) Эдвард Тафти. Рекомендую погуглить его. И Брокмана "Модульные сетки в графическом дизайне".

6) Упражнение. Однажды я пошел и купил порядка 700 листов А4, плотных, это несколько альбомов, были также А2. И по очереди каждый разукрашивал кисточкой, черной краской, серой краской, красной. Рисовал полоски, имитируя текст, заголовки, рисовал квадраты, представляя, что это картинки. Ну и всякие кружки. У меня ушло несколько недель на это, чтобы не лениться. Но после 300 листа, я стал импровизировать и самонаучился, вкус начал развиваться. Я делал симметритчно, асимметрично, упарывался с полосками, прямоугольниками, квадратами и кружками. И осознание наступило. А потом пришло понимание, когда нужны собственные сетки.

7) стайлгайды

Кто оказался тут, в поисках ответов:

Требования к PSD макетам