Микро-анонс
Совсем скоро мое выступление на митапе, где я буду говорить про менторство в целом и свой опыт в частности. Сейчас я готовлюсь, дорабатываю презентацию, пишу план рассказа.
Кстати, как вам эти тезисы?
— Цель должна быть четкой, а путь до нее понятным
— Необходимы точки контроля за результатами, чтобы не заблудиться по пути к цели (про это тут)
Вроде очевидно же, не?
Да-да, но как именно определить реальную цель и сформировать эти точки контроля? Есть вариант применить на практике методы, сюрприз, применяемые при разработке проектов и продуктов.
Сомнительно на первый взгляд, но как-то в чате менторов кто-то поделился, что пользуется ими, чтобы помочь своим менти. Я заинтересовалась, почитала о них и... Выглядит рабочей схемой. Про их применение я и хочу рассказать.
Я много лет учусь планировать свои цели и задачи, постоянно ищу рабочие техники и пробую их адаптировать под себя. Тема повышения эффективности меня не обошла стороной, как ни крути, мы живем в эпоху достигаторства. Так что время от времени, я буду писать про планирование, тайм-менеджмент и мотивацию. 🤷♀️
#планирование #мотивация #планРазвития
Совсем скоро мое выступление на митапе, где я буду говорить про менторство в целом и свой опыт в частности. Сейчас я готовлюсь, дорабатываю презентацию, пишу план рассказа.
Кстати, как вам эти тезисы?
— Цель должна быть четкой, а путь до нее понятным
— Необходимы точки контроля за результатами, чтобы не заблудиться по пути к цели (про это тут)
Вроде очевидно же, не?
Да-да, но как именно определить реальную цель и сформировать эти точки контроля? Есть вариант применить на практике методы, сюрприз, применяемые при разработке проектов и продуктов.
Сомнительно на первый взгляд, но как-то в чате менторов кто-то поделился, что пользуется ими, чтобы помочь своим менти. Я заинтересовалась, почитала о них и... Выглядит рабочей схемой. Про их применение я и хочу рассказать.
Я много лет учусь планировать свои цели и задачи, постоянно ищу рабочие техники и пробую их адаптировать под себя. Тема повышения эффективности меня не обошла стороной, как ни крути, мы живем в эпоху достигаторства. Так что время от времени, я буду писать про планирование, тайм-менеджмент и мотивацию. 🤷♀️
#планирование #мотивация #планРазвития
Telegram
О фронтенде с любовью
Если вы еще не знаете о SMART и GROW, тогда мы идем к вам.
Методы особенно популярны среди руководителей проектов и продуктов.
Если думать например про цель: «Увеличение среднего чека», то можно прикинуть в голове, как ее описать по буквам аббревиатуры…
Методы особенно популярны среди руководителей проектов и продуктов.
Если думать например про цель: «Увеличение среднего чека», то можно прикинуть в голове, как ее описать по буквам аббревиатуры…
❤🔥1👍1
Если вы еще не знаете о SMART и GROW, тогда мы идем к вам.
Метод SMART особенно популярны среди руководителей проектов и продуктов.
Если думать например про цель: «Увеличение среднего чека», то можно прикинуть в голове, как ее описать по буквам аббревиатуры, но как интерпретировать в случае личной цели?
Для начала, в обоих случаях, необходимо декомпозировать глобальную цель.
Например глобальная цель: Устроится на первую работу
Устроится на первую работу => Пройти собеседование, попасть на собеседование.
Пройти собеседование => Знать теорию, уметь применить ее на практике и т.д.
Давайте сразу к атомарному кусочку: Научиться уверенно и качественно верстать.
Как проверить цель по SMART:
S — Specific — конкретная.
Цель должна:
- Давать точный ответ на вопрос «Что делать?» — Научиться уверенно и качественно верстать.
- Подразумевать только один результат — вроде подходит, никаких двойных смыслов
M — Measurable — измеримая.
Результат должен иметь критерий оценки — Могу сверстать сложный макет по всем правилам (семантичность, адаптивность, резиновость, достуность, отсутствие ошибок линтера)
A — Achievable — достижимая.
Цель должна:
- Укладываться в реалистичные сроки — Можно изучить основы и натренироваться с нуля за 3 месяца интенсивной работы? — Да
- Опираться на объективные показатели — Цель будет считаться достигнутой, если я смогу сверстать макет соответствующий требованиям не больше, чем за 3 дня (24 рабочих часа)
R — Relevant — значимая.
Цель должна быть значимой для достижения глобальной цели — Если я буду хорошо верстать, это даст мне преимущество среди других кандидатов.
T — Time bound — ограниченная во времени.
Необходимо ограничить время достижения цели, чтобы не откладывать и не деморализовываться — Через 3 месяца я должен приступить к другой цели, чтобы приблизится к основной цели.
Если возникает ощущение, что можно так же расписать более мелкие задачи, это можно и нужно сделать, главное, не забудьте ограничить срок выполнения, исходя из того срока, который в определили для родительской цели.7
Есть мнение, что последняя буква (Time bound) самая важная из всех, потому что именно она показывает, как отставание от графика отдаляет вас от вашей глобальной цели.
А что на счет GROW?
Он больше направлен на мотивационную составляющую:
G — Goal — цель.
«Что делать?» — Научиться уверенно и качественно верстать.
R — Reality — настоящее.
Что мотивирует? Чувства/эмоции/ощущения — Неуверенность в своих навыках, желание иметь преимущество перед другими кандидатами, желание стать первоклассным специалистом.
O — Options — варианты достижения.
Как делать? Каким способом — Здесь описываются конкретные способы и какие эмоции в вас вызывают эти способы. Они вас демотивируют или наоборот? Сомневаетесь вы в них или твердо убеждены в их эффективности
W — Will — волеизъявление.
Взятие ответственности за результат на себя — Теперь я уверен, что для меня это важно, я знаю как действовать. Я беру на себя ответственность получить результат.
Вы в праве использовать эти методы, видоизменить их под себя или отказаться. Воля ваша.
Каков итог?
GROW поможет отфильтровать те цели и способы их достижения, которые будут все замедлять, оставляя только то, что мотивирует или является важным.
SMART поможет составить конкретный план реализации, который избавит от вопроса: «А что мне вообще нужно сейчас делать?»
А если вам лень самим этим заниматься, можно попробовать найти ментора, который об этих методах знает. Тогда он выстроит вам план и из тени будет подсовывать нужные итерации. А отличный ментор еще и будет синхронизировать свой план с вашим видением/желаниями/волеизъявлением)
#планирование #мотивация
Метод SMART особенно популярны среди руководителей проектов и продуктов.
Если думать например про цель: «Увеличение среднего чека», то можно прикинуть в голове, как ее описать по буквам аббревиатуры, но как интерпретировать в случае личной цели?
Для начала, в обоих случаях, необходимо декомпозировать глобальную цель.
Например глобальная цель: Устроится на первую работу
Устроится на первую работу => Пройти собеседование, попасть на собеседование.
Пройти собеседование => Знать теорию, уметь применить ее на практике и т.д.
Давайте сразу к атомарному кусочку: Научиться уверенно и качественно верстать.
Как проверить цель по SMART:
S — Specific — конкретная.
Цель должна:
- Давать точный ответ на вопрос «Что делать?» — Научиться уверенно и качественно верстать.
- Подразумевать только один результат — вроде подходит, никаких двойных смыслов
M — Measurable — измеримая.
Результат должен иметь критерий оценки — Могу сверстать сложный макет по всем правилам (семантичность, адаптивность, резиновость, достуность, отсутствие ошибок линтера)
A — Achievable — достижимая.
Цель должна:
- Укладываться в реалистичные сроки — Можно изучить основы и натренироваться с нуля за 3 месяца интенсивной работы? — Да
- Опираться на объективные показатели — Цель будет считаться достигнутой, если я смогу сверстать макет соответствующий требованиям не больше, чем за 3 дня (24 рабочих часа)
R — Relevant — значимая.
Цель должна быть значимой для достижения глобальной цели — Если я буду хорошо верстать, это даст мне преимущество среди других кандидатов.
T — Time bound — ограниченная во времени.
Необходимо ограничить время достижения цели, чтобы не откладывать и не деморализовываться — Через 3 месяца я должен приступить к другой цели, чтобы приблизится к основной цели.
Если возникает ощущение, что можно так же расписать более мелкие задачи, это можно и нужно сделать, главное, не забудьте ограничить срок выполнения, исходя из того срока, который в определили для родительской цели.7
Есть мнение, что последняя буква (Time bound) самая важная из всех, потому что именно она показывает, как отставание от графика отдаляет вас от вашей глобальной цели.
А что на счет GROW?
Он больше направлен на мотивационную составляющую:
G — Goal — цель.
«Что делать?» — Научиться уверенно и качественно верстать.
R — Reality — настоящее.
Что мотивирует? Чувства/эмоции/ощущения — Неуверенность в своих навыках, желание иметь преимущество перед другими кандидатами, желание стать первоклассным специалистом.
O — Options — варианты достижения.
Как делать? Каким способом — Здесь описываются конкретные способы и какие эмоции в вас вызывают эти способы. Они вас демотивируют или наоборот? Сомневаетесь вы в них или твердо убеждены в их эффективности
W — Will — волеизъявление.
Взятие ответственности за результат на себя — Теперь я уверен, что для меня это важно, я знаю как действовать. Я беру на себя ответственность получить результат.
Вы в праве использовать эти методы, видоизменить их под себя или отказаться. Воля ваша.
Каков итог?
GROW поможет отфильтровать те цели и способы их достижения, которые будут все замедлять, оставляя только то, что мотивирует или является важным.
SMART поможет составить конкретный план реализации, который избавит от вопроса: «А что мне вообще нужно сейчас делать?»
А если вам лень самим этим заниматься, можно попробовать найти ментора, который об этих методах знает. Тогда он выстроит вам план и из тени будет подсовывать нужные итерации. А отличный ментор еще и будет синхронизировать свой план с вашим видением/желаниями/волеизъявлением)
#планирование #мотивация
🔥3👍2
Конкретная цель и способы ее достижения
Как-то в обсуждение целеполагания в чате менторов пришел автор книги "Карта Гипотез". И рассказал, что её можно использовать не только для развития продукта или проекта, но и для личных целей. Ну я и пошла смотреть 🤓
Вот мой комментарий, написанный сразу после прочтения и обмозгования прочитанного:
В чем суть? Есть 4 сущности:
1) Цель — Рекомендуется явно указывать по каким критериям считать цель достигнутой, какие критерии принципиальны/обязательны для достижения результатов.
2) Субъект — человек или группа людей, влияя на которые, мы сможем достичь цели. Субъектом никогда не может быть исполнитель задач или сам человек, если речь идет о личном планировании.
3) Гипотеза — идея или аргументация, соединяющая между собой субъекта, на которого мы собираемся влиять, и задачи, которые необходимо для этого выполнить. При этом, гипотеза должна объяснять почему те задачи, которые мы выполним, окажут на субъекта желаемый эффект.
4) Задача (их может быть множество) — должна прикрепляться к определенной гипотезе. Если проверка причинно-следственной связи нарушается, то необходимо временно оставить эту задачу висящей в воздухе.
Для описания задач рекомендуется использовать SMART. Поскольку каждая задача должна быть оценена в качественно-количественном показателе.
При заполнении гипотезы необходимо соблюдать такую конструкцию:
Если:сделаем А
То:поведение субъекта изменится Б
Потому что:теперь субъект *получит/не делает и т.д
Цель может видоизмениться тотально несколько раз в процессе работы над картой гипотез. И это норма
Нельзя написать: "Если я изучу React, то смогу разрабатывать приложения, потому что теперь умею" (субъект и исполнитель задачи один)
Скорее должно получиться: "Если я смогу писать полоценные приложения на React, то работодатель оценит меня выше, потому что получит сотрудника, которого не нужно много обучать"
Гипотез можно нагенерировать массу. И не все из них приведут к желаемому результату. Как понять с какой начать?
Нужно расставить приоритеты. Гипотеза, которая кажется вам наиболее правдоподобной и практичной, пойдет в работу первой.
А как вы проверяете свои цели и задачи на релевантность?
Как-то в обсуждение целеполагания в чате менторов пришел автор книги "Карта Гипотез". И рассказал, что её можно использовать не только для развития продукта или проекта, но и для личных целей. Ну я и пошла смотреть 🤓
Вот мой комментарий, написанный сразу после прочтения и обмозгования прочитанного:
Мне понравилась идея карты гипотез, потому что она организует этап планирования, смещая фокус на то, что между задачами и результатом должно быть пояснение.
Почему выполнение задачи приведет нас к результату?
В процессе размышлений на эту тему могут проявиться явно критерии, по которым будет легко отслеживать прогресс исполнения задачи и уменьшится вероятность потери мотивации.
В чем суть? Есть 4 сущности:
1) Цель — Рекомендуется явно указывать по каким критериям считать цель достигнутой, какие критерии принципиальны/обязательны для достижения результатов.
2) Субъект — человек или группа людей, влияя на которые, мы сможем достичь цели. Субъектом никогда не может быть исполнитель задач или сам человек, если речь идет о личном планировании.
3) Гипотеза — идея или аргументация, соединяющая между собой субъекта, на которого мы собираемся влиять, и задачи, которые необходимо для этого выполнить. При этом, гипотеза должна объяснять почему те задачи, которые мы выполним, окажут на субъекта желаемый эффект.
4) Задача (их может быть множество) — должна прикрепляться к определенной гипотезе. Если проверка причинно-следственной связи нарушается, то необходимо временно оставить эту задачу висящей в воздухе.
Для описания задач рекомендуется использовать SMART. Поскольку каждая задача должна быть оценена в качественно-количественном показателе.
При заполнении гипотезы необходимо соблюдать такую конструкцию:
Если:
То:
Потому что:
Цель может видоизмениться тотально несколько раз в процессе работы над картой гипотез. И это норма
Нельзя написать: "Если я изучу React, то смогу разрабатывать приложения, потому что теперь умею" (субъект и исполнитель задачи один)
Скорее должно получиться: "Если я смогу писать полоценные приложения на React, то работодатель оценит меня выше, потому что получит сотрудника, которого не нужно много обучать"
Гипотез можно нагенерировать массу. И не все из них приведут к желаемому результату. Как понять с какой начать?
Нужно расставить приоритеты. Гипотеза, которая кажется вам наиболее правдоподобной и практичной, пойдет в работу первой.
А как вы проверяете свои цели и задачи на релевантность?
❤1👍1
Forwarded from Голос Технократии
24 апреля в 18:00 на YouTube-канале Технократии будем ждать слушателей, которым небезразлична Frontend-разработка, потому что мы собрали классный лайн-ап спикеров:
🔹Олег Кузнецов, ведущий frontend-разработчик, «Технократия
Тема: «Валидация response в api»
🔹Ольга Юзликеева, ментор, frontend-разработчица, ведущая подкастов
Тема: «Менторинг. Вклад в себя и в коммьюнити»
🔹Ильмир Шайхутдинов, frontend-разработчик, «Яндекс»
Тема: «React Server Components»
Приходите, будет интересно!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2👍1
В середине апреля для меня начался курс по верстке от Яндекс.Практикума. Зачем мне это?
Я училась верстать самостоятельно, и несколько первых лет делала это императивно, даже не представляя, что нужно знать о верстке на самом деле. Позже начала закрывать пробелы и расти в скилле. Однако, в силу особенности работы я редко сталкивалась с необычными или сложными компонентами и лендингами (в части верстки).
Более того, с 2016 года css шагнул сильно вперед, а последние обновления прошли как-то мимо меня. Нет, на флексы и гриды я перешла, но новые резиновые единицы измерения или функции остались без моего внимания. Первое время, кстати, было неловко понимать, что я с ходу не могу ответить на вопрос, потому что 5 минут назад не знала о существовании функции has или clamp. Потом отставила самобичевание и просто пошла изучать.
Для меня курс решает сразу несколько вопросов:
1. Практика верстки с ревью от реальных людей, глаз которых натренирован проверять ошибки и писать развернутую обратную связь
2. Хорошо составленный теоретический материал (значит что-то полезное и интересное для меня там найдется)
3. Подтверждение для самой себя, что я хороша в этом (а что вы мне сделаете: я в другом городе)
4. Терпеть не могу пиксель-перфект. Тут вынуждают им пользоваться
То, что применение актуальных методов и свойств присутствует на курсе, я знаю от своих менти.
В общем, я собираюсь делиться с вами чем-то вроде дневника. Хочу рассказывать, как проходит для меня обучение каждый спринт, что я думаю о заданиях, ревью и в целом впечатления о курсе.
#курсПоВерстке #курсы
Я училась верстать самостоятельно, и несколько первых лет делала это императивно, даже не представляя, что нужно знать о верстке на самом деле. Позже начала закрывать пробелы и расти в скилле. Однако, в силу особенности работы я редко сталкивалась с необычными или сложными компонентами и лендингами (в части верстки).
Более того, с 2016 года css шагнул сильно вперед, а последние обновления прошли как-то мимо меня. Нет, на флексы и гриды я перешла, но новые резиновые единицы измерения или функции остались без моего внимания. Первое время, кстати, было неловко понимать, что я с ходу не могу ответить на вопрос, потому что 5 минут назад не знала о существовании функции has или clamp. Потом отставила самобичевание и просто пошла изучать.
Для меня курс решает сразу несколько вопросов:
1. Практика верстки с ревью от реальных людей, глаз которых натренирован проверять ошибки и писать развернутую обратную связь
2. Хорошо составленный теоретический материал (значит что-то полезное и интересное для меня там найдется)
3. Подтверждение для самой себя, что я хороша в этом (а что вы мне сделаете: я в другом городе)
4. Терпеть не могу пиксель-перфект. Тут вынуждают им пользоваться
То, что применение актуальных методов и свойств присутствует на курсе, я знаю от своих менти.
В общем, я собираюсь делиться с вами чем-то вроде дневника. Хочу рассказывать, как проходит для меня обучение каждый спринт, что я думаю о заданиях, ревью и в целом впечатления о курсе.
#курсПоВерстке #курсы
❤🔥3
Курс по верстке: Общее описание и про что буду рассказывать
Уже было начала писать отчет по первому спринту, как поняла, что лучше разбить текст на два)
Про теорию не буду рассказывать подробно, мне сложно объективно оценивать ее объем. Поскольку курс предназначен для новичков, я читаю его по диагонали и на большей части не задерживаю внимание.
Хочу рассказывать про практические задания. Так что на процессе их выполнения и их сдаче и состредоточусь.
Инструкция к выполнению.
Инструкция написана очень подробно (может ближе к концу это изменится). Прописано все: от того, в какой урок заглянуть до придуманных для нас заранее наставниками названий классов. Там же есть перечни того, что должно присутствовать для "зачета".
Отдельно есть чек-листы для саморевью. Что тоже славно.
Теперь про процесс приемки:
- каждый проект проходит через автотесты до проверки живым человеком. Обещано, что в них сравнивается тот самый пиксель перфект, так что проскочить не выйдет.
- если автотесты упали, есть инструкция о том, как посмотреть что именно пошло не так
- немного все усложняет отсутствие платного доступа к фигме. Отступы быстро не глянуть. Предложили сходить к наставнику — гуру фигмы, спросить как смотреть отступы без дев мода. Я честно не пошла, поленилась, отчасти поэтому второй проект первого спринта прошел сложнее.
- ревьюеры пишут комментарии к коду, кстати, довольно подробно, терпеливо и вежливо. Прямо как завещалось на бесплатном курсе Яндекса по экологичной обратной связи
- сдавать проект на ревью можно 2 раза и если ты успел сделать его до дедлайна. Это понимаемо
Общее впечатление пока приятное. Первый отчет будет в следущем посте)
#курсПоВерстке #курсы
Уже было начала писать отчет по первому спринту, как поняла, что лучше разбить текст на два)
Про теорию не буду рассказывать подробно, мне сложно объективно оценивать ее объем. Поскольку курс предназначен для новичков, я читаю его по диагонали и на большей части не задерживаю внимание.
Хочу рассказывать про практические задания. Так что на процессе их выполнения и их сдаче и состредоточусь.
Инструкция к выполнению.
Инструкция написана очень подробно (может ближе к концу это изменится). Прописано все: от того, в какой урок заглянуть до придуманных для нас заранее наставниками названий классов. Там же есть перечни того, что должно присутствовать для "зачета".
Отдельно есть чек-листы для саморевью. Что тоже славно.
Теперь про процесс приемки:
- каждый проект проходит через автотесты до проверки живым человеком. Обещано, что в них сравнивается тот самый пиксель перфект, так что проскочить не выйдет.
- если автотесты упали, есть инструкция о том, как посмотреть что именно пошло не так
- немного все усложняет отсутствие платного доступа к фигме. Отступы быстро не глянуть. Предложили сходить к наставнику — гуру фигмы, спросить как смотреть отступы без дев мода. Я честно не пошла, поленилась, отчасти поэтому второй проект первого спринта прошел сложнее.
- ревьюеры пишут комментарии к коду, кстати, довольно подробно, терпеливо и вежливо. Прямо как завещалось на бесплатном курсе Яндекса по экологичной обратной связи
- сдавать проект на ревью можно 2 раза и если ты успел сделать его до дедлайна. Это понимаемо
Общее впечатление пока приятное. Первый отчет будет в следущем посте)
#курсПоВерстке #курсы
👍2
Курс по верстке: Спринт 1 (8 апреля — 27 апреля)
1 задание: «С чистого листа»
уложилась в 3 часа включая ревью и правки
Ох уж этот пиксель перфект и моя невнимательность. Я случайно проигнорировала статью с рекомендациями по реализации проекта и была удивлена некоторым требованиям во время проверки.
Для первого проекта для новичков вроде изи. Резиновости нет, каких-то сложных селекторов тоже. Если у тебя проблемы с неймингом, наставники и авторы придумали их все за тебя.
В целом работу оценили хорошо с первого раза, остались те самые пропущенные мной требования. Например обернуть лого в ссылку. Еще было расхождение с pixel perfect.
2 задание «Оно тебе надо».
ушло часов 10 с правками
Я изрядно ругалась и ныла, но сделала в два присеста по сути.
Странным было то, что большую часть, с которой я мучилась, мне разрешили проигнорировать во время ревью 🤷♀️. Межбуквенные интервалы в этом макете выбили меня из душевного ровновесия. Только часа 2 я убила на их подгонку.
Еще я отметила комментарии на доске от других обучающихся, с жалобами на сложность и короткие дедлайны для заданий. И правда сложновато, на мой взгляд. Хотя, кто знает, может без преодоления, наверное, обучение таким эффективным не получится.
Хочу с разрешения куратора еще поделиться скриншотом сложного места во втором задании. Обратите внимание на то, что межбуквенное интервалы между буквами в разных словах отличаются.
Я сначала честно пыталась поставить их как предполагалось свойством css (letter-spacing). Ничего лучше, чем обернуть буквы в спаны и задать им классы, я не придумала. И когда получила соответствующее замечание на ревью, плюнула и сделала с помощью псевдоселекторов before и after (встало как влитое). Естессно, получила следующее замечание о том, что смысловую часть лучше не выносить в content псевдоселектора. Пока у меня идей нет, как можно сделать еще. Межбуквенное расстояние осталось в моих глазах непобежденным врагом.
На будущей неделе обещают открыть видео с объяснением, как же все-таки это нужно было сделать. Посмотрим, где скрывается правильная реализация задумки.
А пока у меня вопрос к вам, как бы вы решили такую головоломку?
#курсПоВерстке #курс
1 задание: «С чистого листа»
уложилась в 3 часа включая ревью и правки
Ох уж этот пиксель перфект и моя невнимательность. Я случайно проигнорировала статью с рекомендациями по реализации проекта и была удивлена некоторым требованиям во время проверки.
Для первого проекта для новичков вроде изи. Резиновости нет, каких-то сложных селекторов тоже. Если у тебя проблемы с неймингом, наставники и авторы придумали их все за тебя.
В целом работу оценили хорошо с первого раза, остались те самые пропущенные мной требования. Например обернуть лого в ссылку. Еще было расхождение с pixel perfect.
2 задание «Оно тебе надо».
ушло часов 10 с правками
Я изрядно ругалась и ныла, но сделала в два присеста по сути.
Странным было то, что большую часть, с которой я мучилась, мне разрешили проигнорировать во время ревью 🤷♀️. Межбуквенные интервалы в этом макете выбили меня из душевного ровновесия. Только часа 2 я убила на их подгонку.
Еще я отметила комментарии на доске от других обучающихся, с жалобами на сложность и короткие дедлайны для заданий. И правда сложновато, на мой взгляд. Хотя, кто знает, может без преодоления, наверное, обучение таким эффективным не получится.
Хочу с разрешения куратора еще поделиться скриншотом сложного места во втором задании. Обратите внимание на то, что межбуквенное интервалы между буквами в разных словах отличаются.
Я сначала честно пыталась поставить их как предполагалось свойством css (letter-spacing). Ничего лучше, чем обернуть буквы в спаны и задать им классы, я не придумала. И когда получила соответствующее замечание на ревью, плюнула и сделала с помощью псевдоселекторов before и after (встало как влитое). Естессно, получила следующее замечание о том, что смысловую часть лучше не выносить в content псевдоселектора. Пока у меня идей нет, как можно сделать еще. Межбуквенное расстояние осталось в моих глазах непобежденным врагом.
На будущей неделе обещают открыть видео с объяснением, как же все-таки это нужно было сделать. Посмотрим, где скрывается правильная реализация задумки.
А пока у меня вопрос к вам, как бы вы решили такую головоломку?
#курсПоВерстке #курс
👍3
"А не провести ли мне трансляцию с версткой какого-нибудь макета в прямом эфире🤔" — пришло мне в голову, пока я верстала 3 и 4 задания от Яндекс.Практикума (кстати, скоро расскажу что как)
У меня накопилось парочку отложенных макетов, доступных как учебные. Можно сделать голосовашку, выбрать вместе с вами один из них и сверстать егобез регистрации смс онлайн .
Было бы вам интересно присоединиться к такой трансляции, поболтать и понаблюдать за процессом?
У меня накопилось парочку отложенных макетов, доступных как учебные. Можно сделать голосовашку, выбрать вместе с вами один из них и сверстать его
Было бы вам интересно присоединиться к такой трансляции, поболтать и понаблюдать за процессом?
👍5🔥2
Яндекс.Практикум: спринт 2
Во-первых, как и обещала, рассказываю про правильный путь решения верстки из первого спринта.
Если смотреть видео с тем, как правильно было сверстать проект «Оно тебе надо», то получается, что несколько тегов span и разного letter-spacing было достаточно. И, не смотря на это, я что-то сделала очевидно с ошибкой. Раз моя первая релизация была такая же, однако не сработало.
Во-вторых, вовсю идет следующий. Новые задания ожидаемо стали немного сложнее.
Третье задание больше похоже было подготовку к жонглированию селекторами. Самое сложное — условия выполнения задания:
1) необходимость использования трех псевдоселекторов. Двух before и after для звездочки в заголовке и самого тултипа и одного для оверлея при отображении тултипа.
2) Нужно было использовать только 2 тега h1 и vidoe.
Следственно для реализации потребовалось использовать has().
Четвертое задание развивает степень жонглирования селекторами + добавляет работы с элементами формы.
Должна признаться, в четвертом задании, у меня не сработал аутлайн у чекбоксов.
А пиксель перфект меня просто одолел, как и макеты. Расхождений много, комментариев с пометкой отлично не заметно. Расстроилась конечно. Исправить и отправить на второе ревью вроде надо, а вроде и ваще не хочется.
В целом, про плюсы, минусы и раздражители мне хочется рассказать убедившись в своем мнении по окончании курса. Стей тьюнд, как говорится, все будет.
*скрины тут)
Во-первых, как и обещала, рассказываю про правильный путь решения верстки из первого спринта.
Если смотреть видео с тем, как правильно было сверстать проект «Оно тебе надо», то получается, что несколько тегов span и разного letter-spacing было достаточно. И, не смотря на это, я что-то сделала очевидно с ошибкой. Раз моя первая релизация была такая же, однако не сработало.
Во-вторых, вовсю идет следующий. Новые задания ожидаемо стали немного сложнее.
Третье задание больше похоже было подготовку к жонглированию селекторами. Самое сложное — условия выполнения задания:
1) необходимость использования трех псевдоселекторов. Двух before и after для звездочки в заголовке и самого тултипа и одного для оверлея при отображении тултипа.
2) Нужно было использовать только 2 тега h1 и vidoe.
Следственно для реализации потребовалось использовать has().
Четвертое задание развивает степень жонглирования селекторами + добавляет работы с элементами формы.
Должна признаться, в четвертом задании, у меня не сработал аутлайн у чекбоксов.
А пиксель перфект меня просто одолел, как и макеты. Расхождений много, комментариев с пометкой отлично не заметно. Расстроилась конечно. Исправить и отправить на второе ревью вроде надо, а вроде и ваще не хочется.
В целом, про плюсы, минусы и раздражители мне хочется рассказать убедившись в своем мнении по окончании курса. Стей тьюнд, как говорится, все будет.
*скрины тут)
Telegram
О фронтенде с любовью
Скриншоты 1-2 — задание 3
Скриншот 3 — задание 4
Скриншот 3 — задание 4
Все еще хочу провести стрим с версткой какого-нибудь макета. Скоро придет время выбирать время и дату, а пока давайте определимся с самим макетом. В этом посте перечисление вариантов, а ниже будет голосование.
Сайт подкаста
Хайкинг лендос
Инженерные решения лендос
Соус для кофе лендос
Для меня есть интересное в каждом, так что не стесняйтесь выбирать)
Сайт подкаста
Хайкинг лендос
Инженерные решения лендос
Соус для кофе лендос
Для меня есть интересное в каждом, так что не стесняйтесь выбирать)
Figma
PodOfCast
Created with Figma
Голосуем за макет для стрима
Anonymous Poll
38%
Сайт подкаста
13%
Лендос про хайкинг
0%
Лендос инжнерных сервисов
50%
Лендос соуса для кофе
Хочется чтобы вы пришли на фан-встречу, т.е. на стрим. Предлагаю выбрать день и время)
Anonymous Poll
33%
20-21 мая (будни) после 19:00 по мск
0%
25 мая (сб) где-то днем по мск
50%
25 мая (сб) вечером после 18:00 по мск
0%
26 мая (вс) где-то днем по мск
17%
26 мая (вс) вечером после 18:00 по мск
В канале ожидается много всего разного. Хочу закрепить теги и ссылки на посты, чтобы при необходимости можно было легко найти тему. Со временем теги будут обновляться.
#верстка - все что касается верстки
— что нужно знать о верстке
— про поток документа
— про доступность
— про семантику HTML
— вес CSS селекторов
#курсПоВерстке
#JS
— что нужно знать про JavaScript
#TS
— что нужно знать про TypeScript
Всякая всячина:
#планирование
#мотивация
#планРазвития
#верстка - все что касается верстки
— что нужно знать о верстке
— про поток документа
— про доступность
— про семантику HTML
— вес CSS селекторов
#курсПоВерстке
#JS
— что нужно знать про JavaScript
#TS
— что нужно знать про TypeScript
Всякая всячина:
#планирование
#мотивация
#планРазвития
Telegram
О фронтенде с любовью
Поток документа: Что это? Зачем? Как им управлять?
Поток документа — это то, как элементы на странице располагаются относительно друг друга и самой страницы.
Все написанные нами теги, если не стилизовать их дополнительно, располагаются на странице в том…
Поток документа — это то, как элементы на странице располагаются относительно друг друга и самой страницы.
Все написанные нами теги, если не стилизовать их дополнительно, располагаются на странице в том…