Ok Google! How to center a div?
Нерассказанная история веб-разработки
1990: HTML придумали
1994: CSS придумали, чтобы пофиксить HTML
1995: JS придумали, чтобы пофиксить HTML/CSS
2006: jQuery придумали, чтобы пофиксить JS
2010: AngularJS придумали, чтобы пофиксить jQuery
2013: React придумали, чтобы пофиксить AngularJS
2014: Vue придумали, чтобы пофиксить React & Angular
2016: Angular 2 придумали, чтобы пофиксить AngularJS & React
2019: Svelte 3 придумали, чтобы пофиксить React, Angular, Vue
2019: React hooks придумали, чтобы пофиксить React
2020: Vue 3 придумали, чтобы пофиксить React hooks
2020: Solid придумали, чтобы пофиксить React, Angular, Svelte, Vue
2020: HTMX 1.0 придумали, чтобы пофиксить React, Angular, Svelte, Vue, Solid
2021: React Suspense придумали, чтобы пофиксить React, снова
2023: Svelte Runes придумали, чтобы пофиксить Svelte
2024: jQuery до сих пор используется на 75% сайтов
Что вы об этом думаете?
html,body{color:#CCC;background:#000;}
.story-block,.story__main,.profile__section,.profile__user,.profile__header,.section_padding_none,.header__main,.profile-series,.profile-series_empty,.feed-panel,.stories-feed__message,.stories-feed__message_show,.footer,.footer__main,.story__footer,.section-group,.section,.section_padding,.story-comments,.section-group,.story-comments__menu,.section_header,.story-comments__all,.section-group,.comments,.comment-reply__controls,.comments-part,.section-group,.comment__body,.hint,.hint_left,.user__nick,.input,.input_section,.comment__children::before,.story__read-more,.story__content-inner,.story__content-inner_slice-by-height,.player,.player__video,.story-image__image,.image-link,.player__preview,.comment__body::before,.comment__body,.comment__collapsing-area,.section_gray,.page-answers__filters,.story__author-panel,.popup__wrapper,.popup,.popup_animate,.popup_show,.popup__container,.popup__content,.popup__content>form,.company-blogs-info,.popup,.popup_animate,.popup_show,.profilem,.profile_short{color:#CCC;background:#030507;}
.pkb-normal-btn,.pkb-normal-btn_wide{color:#FFF;background:#231;}
.comment__rating-count,.player__video-loader,.avatar.avatar_large.image-lazy.avatar_level_1.image-lazy-processed{background:none;}
.story__read-more::before,.story-block,.story-block_type_video,.player__svg-stretch,.player__controls-wrapper{background:linear-gradient(#0000,#030507);}
.scroll-up-button,.scroll-up-button_mode-header-attached,.scroll-up-button_active,.scroll-up-button:active,.scroll-up-button_mode-header-attached:active,.scroll-up-button_active:active,.story__content,.story__typography,.story__bg-story-short{background:none;}
.input_editor{color:#638c47;background:#000;font-size:3em;resize:both;}
.input_editor,.input__input{line-height:1.2em;}
.comment__children,.comment__body_highlight_yellow{background:#000;}.comment__tool,.hint,.icon,.icon--ui__link,.icon--ui__link_comments{display:block;}
.comment__more,.comment__rating-up,.comment__rating-down{color:#CCC;background:#223813;}
.comment__more:hover,.comment__more:active{color:#DFE;background:#638c47;}
.section_warning,.section_warning>a{text-decoration:none;color:#FFF;background:#900903;}.section_warning>a{text-decoration:none;color:#0D0;padding:3px;}.section_warning>a:hover{text-decoration:none;color:#0F0;background:#0009;border-radius:9px;font-size:1.2em;}
.main,.background{width:100%;max-width:100%;}
.app__inner{width:90%;max-width:90%;}
.story__content,.comment__content{font-size:3em;line-height:1.2em;}
.story-block,.story-block_type_text,.story-block>*>a{font-size:1.4em;line-height:1.2em;color:#000;text-shadow:0px 0px 1px #DEF,0px 0px 2px #CDE,0px 0px 3px #BCD,0px 0px 5px #ABC,0px 0px 7px #9AB;}
.popup__wrapper,.section_warning>a:hover{border-radius:11px;box-shadow:0px 0px 1px #684,0px 0px 2px #684,0px 0px 3px #684,0px 0px 5px #684,0px 0px 7px #684,0px 0px 4px #684,0px 0px 6px #684,0px 0px 8px #684,0px 0px 9px #684,0px 0px 11px #684;}
.story-block.story-block_type_text>p>b,.story-block>*>a:hover,.comment__content>a:hover,.rv-comment>a:hover{color:#000;text-decoration:none;text-shadow:0px 0px 1px #89f540,0px 0px 2px #89e34b,0px 0px 3px #84d14f,0px 0px 5px #638c47,0px 0px 7px #4e6e39,0px 0px 10px #253d15,0px 0px 15px #1a300b;}
.story-block>*>a,.rv-comment>a{color:#638c47;text-decoration:none;text-shadow:none;}
.profile__header,.background__placeholder{background-repeat:both;}
.icon--ui__logo-text{color:#012345;}
::selection{background:#a9eb7c;color:#000;text-shadow:none;box-shadow:none;}
.story-block__title{color:#000;}
.comment__rating-count,.comment__rating-count.hint.hint_left{font-size:1.8em;line-height:.8em;}
Не пора ли гнать ссаными тряпками с пикабы тех, кому нужен тег <code>?
Записал ролике-эксперимент о смене стэка
я школьник не ругайте спер сильно
В этом ролике я провел эксперимент сменил свой стэк технологий. Поменял акцент с бэка на фронт,пересел с html`а на react,и научился базовым анимациям,также я перешел с бутстрапа на tailwindcss.
О CSS новичку
О Каскадных Таблицах Стилей для новичков-энтузиастов. CSS - технология старая, обкатанная, меняющаяся крайне медленно. Курсов по CSS создано бесконечное количество. И знаете, что самое интересное? Почти все эти курсы качественные, интересные и полезные. Но они не отвечают на самый главный вопрос: нужен ли CSS именно Вам? Если Вы в поисках, куда бы приложить свои силы и таланты, то прочитайте эту короткую статейку. Может быть, она поможет Вам определиться.
*** Нужен ли CSS именно Вам? ***
Помню, когда учился в школе, с нами, старшеклассниками, провели такой эксперимент. Нам организовали экскурсию в морг. Результаты оказались впечатляющими. Несколько экскурсантов упали в обморок, зато двое или трое стали потом профессиональными врачами. Вот такой блестящий пример профориентации.
Примерно так и мы поступим сейчас для определения, нужно ли вам работать в области фронтенда (HTML+CSS+JS), конкретно стать специалистом CSS.
*** Подсмотрим за CSS мастером, что он там делает? ***
CSS специалист получает в виде полуфабриката некий готовый HTML макет с подготовленными блоками и контентом, а заодно получает задание как-то это все сделать красивым или хотя бы просто читабельным.
Пример HTML кода, который получил CSS специалист.
<div id="div1">
<h2>Я очень сильно <span id="span1">❤</span> CSS</h2>
<p id="p1">И эта любовь так сильна, что ее невозможно выразить словами.</p>
<p id="p2">Я готов все дни и ночи напролет колдовать над стилями, чтобы добиться максимального эффекта.</p>
</div>
Все это будет работать и без CSS.
Но это слишком скучно, хотя и понятно. И вот за дело берется специалист CSS и предлагает для обсуждения версию номер 1.
Начальник посмотрел на это творение и сказал так.
- Э-э-э... Как-то это все слишком уж... Э-э-э... Просто, что ли... Хочется, чего-то такого, - начальник пощелкал пальцами, - ну, ты меня понимаешь.
Фронтендер (так часто называют специалистов HTML + CSS + JS), конечно, сразу все понял и предложил версию номер 2.
- Вот это совсем другое дело! - обрадовался начальник, посмотрев на версию 2, - можешь ведь, когда хочешь!
Конечно, это вовсе не какое-то "другое дело", а то же самое. Просто стили CSS слегка изменены.
Важно. Если, даже получив одобрение руководства, Вы не останавливаетесь на достигнутом, а продолжаете даже в свободное от работы время изобретать новые версии не денег ради, а просто из любви к искусству, то это добрый признак. Вполне возможно, что CSS - Ваше призвание.
Например, Вам может прийти в голову идея реализовать что-то такое вроде "Версия 3. Под мухой".
Практическая ценность этой версии в том, что она демонстрирует возможности работы CSS с маленькими графическими файлами, в т.ч. и передвижения их по документу.
Затем, вдоволь наигравшись с мухой (а может и с другими насекомыми), возможно, в голову придет другая идея, например, почему бы не посмотреть на все это дело изнутри (т.е. с другой стороны монитора, планшета, смартфона и т.д.)
Получится примерно так.
Это вроде как послание тем загадочным существам, которые, возможно, живут по ту сторону экрана.
*** Вы почувствовали себя энтузиастом CSS? ***
Вот мы потихонечку подошли к самому главному принципиальному вопросу.
Если все эти простейшие штучки вас интересуют, забавляют, развлекают, значит, возможно, вам реально надо заняться CSS.
Собственно, работа CSS дизайнера в этом и заключается, чтобы придумать как максимально эффективно и даже эффектно преподнести пользователю ту или иную информацию.
Вы почувствовали себя энтузиастом CSS?
Это очень важно. Если у Вас есть внутренняя тяга к этому виду творчества, то вы обязательно и работу найдете в этой области, и удовольствие будете получать от процесса, да еще и будете хорошо зарабатывать.
Беседа с рекрутером при приеме на работу для Вас будет выглядеть не как попытка убедить и что-то доказать, а как разговор двух равноправных участников, которые обожают CSS. Это, конечно, значительно повышает Ваши шансы.
Информации выше вполне достаточно для внутреннего понимания, есть ли для Вас смысл глубже погрузиться в CSS.
Первоисточник здесь:
https://wpvi.ru/pages/story/00016/ - Здесь реализация на чистом CSS (в тексте выше просто скрины). Можно скачать файл CSS и получить дополнительные пояснения. Бесплатно, без СМС, без регистрации.
#############
### Конец ###
#############
Конвертация дизайна из Фигмы в рабочий код на HTML + CSS + React
Kombai
Достаточно сбросить дизайн в Kombai и получить готовый код ✅
Разработчики могут бесплатно использовать Kombai во время предварительных исследований
Бесплатно можно получить:
➕ Неограниченное количество загрузок дизайна
➕ Неограниченное количество загрузок кода
➕ React и HTML + CSS
➕ Tailwind CSS и MUI Base (для компонентов форм)
➖ Но обменяться файлами дизайна с третьми лицами не получится 🤷🏻♀️
Для доступа к расширенному функционалу, а именно, - интеграция и настройка, пользовательские переменные CSS и миксины, библиотеки пользовательских компонентов, вывод кода в соответствии с технологическим стеком и премиум поддержка, - необходимо связываться с разработчиками Kombai
Больше полезных сервисов для работы и учебы в моем телеграмм канале (ссылка в описании профиля), там я рассказываю, как можно использовать нейросети для бизнеса
Сможете найти на картинке цифру среди букв?
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
Помощь в поиске видео по web дизайну
Всем привет. Примерно пол года назад тут на пикабу выкладывали видео(или в комментарии кто-то выкладывал), почему сайты которые содержат только html без стилей круты, типа более удобочитаемые и быстрее грузятся. Видео на английском, но с субтитрами. Еще и задавали риторический вопрос в стиле "Что же вам еще надо?". Помогите найти видео, никак не могу найти... :(