Курс по верстке: Общее описание и про что буду рассказывать

Уже было начала писать отчет по первому спринту, как поняла, что лучше разбить текст на два)

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

Хочу рассказывать про практические задания. Так что на процессе их выполнения и их сдаче и состредоточусь.

Инструкция к выполнению.
Инструкция написана очень подробно (может ближе к концу это изменится). Прописано все: от того, в какой урок заглянуть до придуманных для нас заранее наставниками названий классов. Там же есть перечни того, что должно присутствовать для "зачета".
Отдельно есть чек-листы для саморевью. Что тоже славно.

Теперь про процесс приемки:
- каждый проект проходит через автотесты до проверки живым человеком. Обещано, что в них сравнивается тот самый пиксель перфект, так что проскочить не выйдет.

- если автотесты упали, есть инструкция о том, как посмотреть что именно пошло не так

- немного все усложняет отсутствие платного доступа к фигме. Отступы быстро не глянуть. Предложили сходить к наставнику — гуру фигмы, спросить как смотреть отступы без дев мода. Я честно не пошла, поленилась, отчасти поэтому второй проект первого спринта прошел сложнее.

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

- сдавать проект на ревью можно 2 раза и если ты успел сделать его до дедлайна. Это понимаемо

Общее впечатление пока приятное. Первый отчет будет в следущем посте)

#курсПоВерстке #курсы

Курс по верстке: Спринт 1 (8 апреля — 27 апреля)

1 задание: «С чистого листа»
уложилась в 3 часа включая ревью и правки

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

Для первого проекта для новичков вроде изи. Резиновости нет, каких-то сложных селекторов тоже. Если у тебя проблемы с неймингом, наставники и авторы придумали их все за тебя.

В целом работу оценили хорошо с первого раза, остались те самые пропущенные мной требования. Например обернуть лого в ссылку. Еще было расхождение с pixel perfect.

2 задание «Оно тебе надо».
ушло часов 10 с правками

Я изрядно ругалась и ныла, но сделала в два присеста по сути.

Странным было то, что большую часть, с которой я мучилась, мне разрешили проигнорировать во время ревью 🤷‍♀️. Межбуквенные интервалы в этом макете выбили меня из душевного ровновесия. Только часа 2 я убила на их подгонку.

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

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

Я сначала честно пыталась поставить их как предполагалось свойством css (letter-spacing). Ничего лучше, чем обернуть буквы в спаны и задать им классы, я не придумала. И когда получила соответствующее замечание на ревью, плюнула и сделала с помощью псевдоселекторов before и after (встало как влитое). Естессно, получила следующее замечание о том, что смысловую часть лучше не выносить в content псевдоселектора. Пока у меня идей нет, как можно сделать еще. Межбуквенное расстояние осталось в моих глазах непобежденным врагом.

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

А пока у меня вопрос к вам, как бы вы решили такую головоломку?

#курсПоВерстке #курс

"А не провести ли мне трансляцию с версткой какого-нибудь макета в прямом эфире🤔" — пришло мне в голову, пока я верстала 3 и 4 задания от Яндекс.Практикума (кстати, скоро расскажу что как)

У меня накопилось парочку отложенных макетов, доступных как учебные. Можно сделать голосовашку, выбрать вместе с вами один из них и сверстать его без регистрации смс онлайн.

Было бы вам интересно присоединиться к такой трансляции, поболтать и понаблюдать за процессом?

Яндекс.Практикум: спринт 2

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

Если смотреть видео с тем, как правильно было сверстать проект «Оно тебе надо», то получается, что несколько тегов span и разного letter-spacing было достаточно. И, не смотря на это, я что-то сделала очевидно с ошибкой. Раз моя первая релизация была такая же, однако не сработало.

Во-вторых, вовсю идет следующий. Новые задания ожидаемо стали немного сложнее.

Третье задание больше похоже было подготовку к жонглированию селекторами. Самое сложное — условия выполнения задания:
1) необходимость использования трех псевдоселекторов. Двух before и after для звездочки в заголовке и самого тултипа и одного для оверлея при отображении тултипа.
2) Нужно было использовать только 2 тега h1 и vidoe.
Следственно для реализации потребовалось использовать has().

Четвертое задание развивает степень жонглирования селекторами + добавляет работы с элементами формы.

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

А пиксель перфект меня просто одолел, как и макеты. Расхождений много, комментариев с пометкой отлично не заметно. Расстроилась конечно. Исправить и отправить на второе ревью вроде надо, а вроде и ваще не хочется.

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

*скрины тут)

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

Сайт подкаста
Хайкинг лендос
Инженерные решения лендос
Соус для кофе лендос

Для меня есть интересное в каждом, так что не стесняйтесь выбирать)

В канале ожидается много всего разного. Хочу закрепить теги и ссылки на посты, чтобы при необходимости можно было легко найти тему. Со временем теги будут обновляться.

#верстка - все что касается верстки
— что нужно знать о верстке
— про поток документа
— про доступность
— про семантику HTML
— вес CSS селекторов
#курсПоВерстке

#JS
— что нужно знать про JavaScript

#TS
— что нужно знать про TypeScript

Всякая всячина:
#планирование
#мотивация
#планРазвития

Про доступность интерфейса.

Доступность в верстке в целом интересный предмет. Вроде она есть, но браузер не будет ругаться, если ее нет. Да и в целом никто не будет ругаться. Не смотря на то, что ГОСТ про доступность существует и даже обновлялся несколько раз, я про него ни от заказчиков ни от руководства никогда не слышала. Хотя разрабатывала, и сайты с гос поддержкой, и приложения для банка. Когда я была частью команды разработки банка, с нами выходила на связь целая команда делающая аудиты доступности интерфейсов. В остальных проектах, к сожалению, про это даже никто не заговаривал. :(

Грубо говоря: уровень доступности = уровню эмпатичности верстальщика + чувство личной ответственности.

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

Давайте! А как? 🤔

Что входит в понятие доступности?

- Контрастность интерфейса. Для тех, кто плохо различает цвета или использует ваше приложение на солнце
- Поддержка экстра крупных шрифтов. Для слабовидящих
- Навигация по клавишам, с или без скринридеров. Для незрячих и тех, кто не может/не хочет использовать мышь
- Добавление описаний картинок, лейблов для элементов формы и подписи к кнопкам, содержащим только иконки.
- Отключение анимаций. Для пользователей, у которых стоит такая настройка в браузере (например, страдающих эпилепсией)

А как понять что я все сделал правильно? 🤯

Существует множество инструментов.

Проверить может ли пользователь попасть на определенное поле или кнопку, не стоит вообще ничего. Достаточно просто самому понажимать кнопку табуляции.

С помощью инструментов разработчика можно смоделировать проверку:
- контрастности (или использовать проверку контрастности на уровне дизайна в Figma),
- отключенных анимаций,
- версию для слабовидящих.

Можно использовать или установить скринридер (не во всех ОС есть предустановленные скринридеры) + использовать ту же кнопку табуляции (+ стрелочки и кнопку ввода), чтобы проверить:
- правило: «Все, что должно быть интерактивным для пользователя, должно быть реализовано подходящими тегами»
- Прочтение описаний картинок, лейблов и подписей к кнопкам, переключение по меню и ссылкам.

При этом то же переключение по табуляции не берется из головы. Для этого браузер строит отдельный Accessibility Object Model на основе знакомого нам уже DOM. Отсюда вытекает один из сюрпризов (см ниже).

Кроме некорректно используемых тегов и атрибутов влиять может еще и CSS!

Вообще у Доки целая энциклопедия про доступность, рекомендую ознакомиться, освежить в памяти то, что уже знали и открыть для себя что-то новое.

Бонус для тех, кто дочитал — то, что стало сюрпризом для меня:
1) отключение маркеров списка (list-style-type: none), отключает для скринридера возможность обозначить переход на следующий элемент. Он будет читать это голым текстом.
2) можно оставлять текст для скринридера у кнопок-иконок, используя класс делающий невидимым элемент с текстом. (visibility: hidden, display: none или role=«hidden» скроют элемент от скринридера)
3) применение флексов и гридов также путает сринридер при переключении по табам. (поэксперементируйте например с row-reverse у флекса мне понравилось)
4) Что существует ГОСТ

А вы часто задумываетесь о доступности ваших интерфейсов?

#верстка #доступность #a11y

Всем привет, в голосовании за время проведения стрима с версткой большинство проголосовало за вечер 25 мая. Но так случилось, что я в этот день никак не смогу провести стрим.

Что скажете, если мы перенесем стрим 1 июня так же в 18:00 по МСК?
Ставьте 👍🏻 если придете и 👎🏻 если хотите быть на стриме, но нужно выбрать другой день и время.

Ну что, через пол часика запускаю стримец, ссылочку пришлю сюда) Кого ждать?)

Поверстать не поверсталось, зато приятно было поболтать. В следующий раз точно получится)

Всем привет)

Пишу сказать, что нет — канал не заброшен, просто разные события закрутили меня, а жара добила😅 В скором времени хочу сделать вторую трансляцию и все же поверстать выбранный нами макет. И еще готовлю пару постов про практикум и не только.

Спасибо, что остаетесь со мной❤️

Приступила к подготовке новых постов, поскольку стало посвободнее дышать.

А пока вот что хотела вам напомнить. Делать что-то в первый раз или даже разы всегда сложно.

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

Сплела все-таки, да самый простой узор, да выглядит наивно и ни разу не то, что я хотела изначально. НО делать что-то впервые всегда сложно, будь то рукоделие или задача с которой вы никогда раньше не сталкивались. Эффект один и причины одни и те же. В нашем мозгу пока нет связей, которые отвечают за решение новых задач. Создавать новые нейронные связи больно и тяжело, но если они создадутся, мы поумнеем)

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