Исповедь CSS-программиста! 

Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити за 99 рублей: boosty.to/how-to-learn-it Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Вливайся в команду мечты: psb-hr@yandex.ru Вакансии: habr.com/ru/company/psb/vacancies/ Мой телеграмм-канал: t.me/howToLearnIT 0:00 Дебют 0:36 Однонаправленная верстка 1:39 CSS-программист 2:37 1.5 землекопа 3:48 Стандартизация 4:44 Как переиспользовать стили? 6:54 Три слова зрителю 7:14 z-index 8:14 Адаптив здорового человека 10:10 Газетная метафора 10:56 Никакого !important 11:11 Закон единого стиля #html #js #css #frontend

Не думал что беседы с дизайнером могут быть настолько глубокие

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

подача на уровне. очень важные и полезные советы, приправленные юмором, очень приятно смотреть

Шикарнейшое видео!! Даже сразу пару раз пересмотрел. Нудно будет себе выписать лайфхаки еще и юзать!) По больше бы таких жизненых професиональных рекомендаций! Сразу подписка🎉

Комментарий для поддержки канала! Контент топовый, пожалуйста продолжай в том же духе!!

веселый ролик поржал "все задачи спихнуть на джуна )))"

Отличное видео! Люблю вас ❤️

Насколько хорошо ты все рассказал, мне даже верстка кажись снова интересной станет)

Видос топ! Спасибо - очень полезно!

Супер советы! Всё записал!

Супер качественный ролик. Ты крутой)

От души сделано, и реально полезно! Лукас и подписон!👍🔥

Видео супер, подписался

Это офигенно!

Господи, какое крутое видео. Вот реально столько проблем создаешь сам себе из-за неправильной верстки. Буду пересматривать, еще и еще!

Это скорее проповедь :) Спасибо!

Рассказ точно в стиле обзора на игру. Зашло 👍

годный контент, спасибо

Спасибо большое за видео

Не плохое видео ютуб закинул в рекомендации. Подчеркнул для себя некоторые моменты. Спасибо

Контент мало того, что полезный, так ещё и в кайф.

Классное видео! Полезно начинающему фронту

Ты ж моя булочка!!! Люблю твои видео ❤❤❤❤

Было бы круто увидеть ролик про то как пишут стили на больших проектах или про создание ui кита

после просмотра ролика решил остаться хэтэмэлэ-программистом 😁😁

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

как всегда интересно и жизненно

Все по делу. Подписался

Да, видео крутое и полезное. То что нужно для верстальщика на началах. Именно ЭТИ вопросы я задавал своему наставнику, а он не мог на них ответить заставляя меня ошибать с импортантами, отрицательными марджинами и прочей дичью! На канал подписался, лайк поставил.

согласен почти со всем формат приятный и простой, всё ровно что тик-ток 11 минут посмотрел

Это было очень полезно. Нашел кучу ошибок у себя в верстке. С нового проекта внедряю.

Благодарю за материал, очень полезно. Можно пожалуйста попросить настройки для prettier о которых говорилось в видео?

Продолжай пожалуйста!

БОЖЕНЬКА ТЫ ЛИ ЭТО, ВСЯ, ПРОСТО ВСЯЯЯЯЯЯЯЯ МОЯ БОЛЬ В ОДНОМ ВИДЕО, О БОЖЕНЬКА ТЫ ЛУУУУУУУУУУУУЧШИЙ. просто сохраню твое видео и оставлю до подходящего случая(если вы понимаете о чем я)), привет дизайнерам(Я ТАК 6 ЛЕТ РАБОТАЮ И НИКТО НЕ ЖАЛОВАЛСЯ))

css программист, браво

Аж вдохновение появилось знать вёрстку лучше)))

Прекрасно

CSS-программист? Это мощно 😂

CSS-программист - одна из недооцененных профессий. Многие считают, что CSS - это так просто.

Сколько боли и жизи в одном видео🤭 В 11 минут ужать весь опыт, получаемый годами... Похвально!

Про z-index хорошая мысль, тоже об этом думал, задавал всегда для какой то плавуещей штуки просто 100, потому что 100, а если нужно перекрыть прям все, 9999 :) На последних проектах поубавил значения, но суть тажа осталась, для меню мобильного сделал 10, для попапа 50, для лоадера 100. Я думаю оптимальным вариантом будет как ты сказал, но выносить десятками. Ибо как ты сказал 8:10 все зависит от проекта и можно обойтись и тремя, но завтра появится новая страница, где новый компонент который ну никак не вписывается, и рефакторить все будет долго. Думаю хорошо будет сделать что первый десяток для того то, второй для того то, и всегда использовать с начала, т.е. не рандомное число из десятка, например 15, просто потому что хочу, а первое, 10, 20, 30, а потом если нужно что-то сделать, наложить прям, то 11. 21, 31. И при этом всегда будет много места для маневра ещё на всякий пожарный, до следующего десятка

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

Ну про дизайн, я вот не так давно делал дизайн, хоть я и веб-разработчик, но учился :) Во всем дизайне я использовал размеры заголовков с font-scale 1.333 и 1.125 для телефонов. Отступы делал 15, 30, 60, 80 и 180 для контейнера, по бокам. Чаще всего 30, во всех карточках, формочках, попапах, везде 30, в каких то блоках могло быть 60 или 80, 15 для текстов или для кнопки, расстояния между иконкой и текстом.

1:28 марджины верхние и левые. Ну да, согласен в каждой конторе разный стиль верстки

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

Казалось бы, первое апреля, а советы то годные.

то чувство когда ты backend программист и смотришь о проблемах frontend

Очень смешно и полезно 😄😄😄

лайк и подписка 😊

А у вас есть видео о настройках линтора?

Надо взять за правило периодически пересматривать этот видос и бить себе по рукам за то за се

Прикольное видео. Только пока сам не прочувствуешь это все на личном опыте будешь совершать те же ошибки

Привет, а ты не планируешь перейти на старый формат своих видео, когда ты объяснял какие-то новые технологии и фишки js и ts. Мне очень нравился такой формат. Хотя сейчас, честно признаться, тоже неплохо.

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

В бэкенде ровно то же самое - на собесе DDD, SOLID, GRASP, DRY, пара десятков шаблонов проектирования с узнаванием каждого по примеру, пользовательские процедуры SQL и так далее, а на проекте мудацкая архитектура стиля The Big Ball of Mud, написаная сорока макаками годы назад, нулевые стандарты кода - каждый пишет как и во что горазд, ветки с комитами хер найдёшь потому что названы по желанию левой пятки, кто куда что мержил не разобрать, деплои на продакшн в пятницу мимо стейджа, хотфиксы напрямую и мимо репозиториев вообще, код слеплен из говна и костылей, так что понять "зачем тут это" можно только через долгий и задроченный реверс инжиниринг, потому что написавший это уволился уже пару лет как, а документацию никто не вёл никогда вообще и много другого занимательного. Причём и тебе тоже придётся скреплять костыли говном, потому что попытка сделать что-то правильно стремительно наебнёт проект и не впишется в бюджет, который поддерживает только разработку стиля "хуяк-хуяк и в продакшн". Заняло довольно прилично времени найти компанию где все процесы отлажены и такого блядского цирка нет.

Начал изучать Пайтон. Научился писать “Hello World”. Написал калькулятор. Почувствовал себя программистом. Создал резюме на позицию Джуна. Посмотрел это видео. Свернул эмулятор CMD. Лег. Словил депрессию..

классное видево, половину правил вообще первый раз слышу, го более подробные видео

C z-index'ами я бы так на переменные не надеялся Насколько помню, у эл-ов есть контекст наложения - z-index отсчитывается от него. Может быть несколько контекстов наложения. Шарить общую палитру z-index'ов между ними кажется не совсем корректно. Наверное кейс не часты или я ошибаюсь, поправьте - буду благодарен.

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

Не с того видео я решил начать изучать html и css)

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

Про адаптацию, всегда делал от ПК, а потом под телефоны адаптировал. Видел порой в либах наоборот делается и я ещё удивлялся. Как то думал об этом, но отбросил ибо как то очень не привычно и стремно. Но я не могу сказать что как я сейчас делаю - плохо, т.е. мой сайт сделанный от ПК к мобильной версии, выглядит 1 в 1 как дизайн. Разве что нюансы иногда были, что блок имел другую компоновку на телефоне, под которую моя ПК версия не могла быть адаптирована и приходилось переделывать Так же скорее это минус, но я использую вместо пикселей ремы везде, задаю html фонт сайз типа 100vw / 1920 и всюду использую ремы. Потом для телефона 100vw / 375. 1920 и 375 - ширина из дизайна. Как итог, сайт получается такой, что на любом другом экране, он будет смотреться точно так же, ничего никуда не поедет, и не скукожится. Но почему я ответил это как минус - на больших очень экранах, сайт может быть очень громадным, так как просто растянется, особенно если дизайн был в 1440 сделан или вообще 1366, хорошей темой было бы ограничит его по ширине и центровать по центру. Хотя даже это можно реализовать с ремами, скажем от 1920 экранов просто задать что 1рем = 1пх, и сайт дальше расти не будет. Так что хз. Как минимум когда сроки горят, это хорошая тема, всего 2 медиа запроса, планшет и телефон, все, и сайт готов и ничего некуда не едет и все функционирует как положено. Вспомнил ещё про -, не работает "лупа" / "приближение" на сайте, он тупо не дает себя приблизить, так как масштабируется :) Кому интересно, можете это затестить: ante.ua

Интересно, где готовят "css-программистов" которые пишут такие классы: dark-pagination-without-next-prev-arrowcss

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

Кайф

9:18, не понял, если глобально задать классу цвет допустим зелёный, то он и в медиазапросах будет таким, там ничего не нужно писать больше, меняй fz, fw, but color gonna be the same. Да и вообще медиа можно писать внутри класса, зачем отдельно выносить

а если у меня styled components

верхний и левый марджин - это самая глупейшая затея, элемент не должен двигать сам себя

CSS ПРОГРАММИСТ О_О

Ещё ни разу не видел, чтобы хоть одна вакансия называлась "CSS-программист".

как найти работу в it вахавх , почему такая тишина

5:49 нтмизации?

если честно процентов 80, а то и все 90 видео я не понял ни одного слова, так как начал заниматься всем этим недавно, но со вставок я дико поржал в голос, спасибо автору, если даже такой нуб как я словил ха-ха с этого видоса, то боюсь представить что почувствовали челики которые уже реально не первый год в этой теме

про какой сайт он рассказал в начале? 0:03

миксины, классы, темы. правда хорошее видео и я возможно не уловил суть, но эти проблемы прекрасно решаются с БЭМ методологией. Причем я абсолютно согласен с тем что фронтендер не должен писать стили, ему должны готовый UI Kit подать, или он сам изначально (конечно в идеале) сделать себе UI Kit. Но это в условиях больших проектов с проджект менеджерами и командой дизайнеров которые делают целые дизайн системы. А если ваш стартап основан на Lean и у вас слишком много изменений в каждом спринте и вы строго хотите сделать свою дизайн систему а не готовую купить (чего я советую, обычно даже готовый UI Kit придется изучить, в любом случае теряете время да и гибкость заодно) то этот метод не катит. Но что универсально так это БЭМ, или просто OOCSS как Tailwind, но это не совсем о чем говорит автор, tailwind это практически писать стили с помощью классов, но обожаю ее, и я знаю что можно кастомные классы писать но там как и выше говорил пишите стили с помощью классов - этим я кстати и пользуюсь. Но больше всего мне не понравилось метод автора на счет отступов, какой кошмар, правда на вкус и цвет товарища нет, но это больно для глаз, по сути нет разницы что поставил снизу и справа или сверху и слева, один и тот же результат, только в одном элементы освобождает пространство снизу и справа, а в другом сверху и слева. но когда ты человек и ты привык смотреть на вещи сверху вниз и справа на лево то обратное тебя как то смущает. Можно придираться мол будут такие-то такие-то проблемы с этим способом, ты идешь не туда, но автор аргументировал свою точку зрения так что я далек от критики, но все равно глаза колят. В общем удачи всем, изучайте, набирайте опыт и все дела.

Подписался

> Автор рассказывает про MobileFirst. > Новички, учившие на курсах DesktopFirst 🤯

а я постоянно в ручную разбиваю стили на группы. И не понимаю как можно настроить prettier, чтоб он это делал самостоятельно. Может кто-то помочь с этим ?)

Тут это ) чатгпт 4 делает вашу работу намного аккуратнее ))) и не задает глупых вопросов

щас миксины часто юзают?

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

про адаптив и @media надо подробней.

ващекрута!!!

Хороший перевод чужого контента,

Я тока включил и уже угорнул с назывния CSS програмист

А зачем договариваться про левые и верхние марджины, когда можно использовать класс (напр.) .stack-1 который будет как {display:flex;glex-direction:row;}, у которого есть свойство gap: var(--gap-standart-1-for-example), в соответствии с описанными в проекте стандартами отступов? Для людей же придумали )

Марджины должны быть внутренними и не будет проблем с блоками. Желательно еже однонаправленными. Сорри за ошибки. У меня глюк приложения. Черный текст на черном при написании и редактировании😢

не хочу обидеть джунов, но не стоит говорить что ты css прогер в приличном обществе😃 зы.изначально зашел поорать с коментов, но перед этим посмотрел видео, инфа годная, автору респект)

Нужен ли дизайнер, если есть midjorney?)

А разве gap не решает проблему с марджинами?

6:05 а как это к css относится? Это же тайпскрипт

3:15 я верстал этот макет за 4 часа

Css программист. Знаю людей которые поржали бы...

Если кандидатов много, то любые средства отсеивания хороши, в том числе и алгоритмические задачи

Товарищи, с привязкой к четверкам это перегиб) 9 - вполне допустимое число даже в сетке с зерном 4, хоть и не часто может встречаться. Опытный дизайнер отличается от джуна тем, что знает про оптическую компенсацию. Если так не нравится 9 пишите 4*2+4/4. Всем пис =)

в 2к23 до сих пор есть понятие css Программист? html прогер тоже?

Про БЭМ забыл сказать)

А зачем при адаптиве тащить в медиа запросы одни и те же стили то? Типа так реально кто-то делает? Мб я что-то понял не так, они же не меняются, пока ты сам не укажешь изменение

Так паддинги же верхние и левые, а марджины правые и нижние ? Это много где продвигается.