Верстальщик от бога
9.21K subscribers
1.38K photos
18 videos
1 file
1.64K links
Регистрация в перечне РКН:
https://knd.gov.ru/license?id=6757e1989d804a279b283165&registryType=bloggersPermission

Самый большой канал по верстке в телеграм.

Чат верстальщиков: @godinhtmlchat

По всем вопросам: @anothertechrock
Download Telegram
em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, и другие юниты. Гайд по единицам измерения в CSS

#почитать

В CSS есть разные единицы измерения. Больше всего применимы пиксели, но есть и другие – не такие популярные, но весьма удобные в некоторых случаях.
В этой статье рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

Читать статью
👍12❤3
Друзья, сегодня рекомендуем отличный канал с материалами по тестированию!

🐞Тестировщик от бога — официальный канал сайта testengineer.ru.

Что отличает нас от кучи других каналов по тестированию:

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

Подписывайся на тестировщика от бога и узнай уже наконец разницу между тест-планом и баг-репортом 😇
👍9🔥3❤2
Прекрасно!
🔥31😁9
🌐2023. Можно ли ограничиться соцсетями и не делать сайт, и может ли сайт обеспечить хороший доход

#посмотреть

Также:
▫️Чем хороша Tilda
▫️Bitrix или Wordpress
▫️С чего начать изучение CSS и HTML
▫️Float, Flexbox или Grid CSS
▫️Зачем вообще Figma
▫️Стоит ли верстальщику быть программистом PHP, JS, Python
▫️Заменит ли ChatGPT верстальщиков
▫️Есть ли альтернатива Youtube в России

Смотреть видео на YouTube (40 минут)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤2🔥2
Классификация и идентификация элементов в HTML и CSS и немного о БЭМ для самых маленьких

#почитать

▫️Классы и идентификаторы позволяют уникально идентифицировать элементы и компоненты на веб-странице.
▫️Идентификаторы (задаются через атрибут id) являются уникальными для всей страницы, тогда как классы (задаются через атрибут class) могут быть применены к нескольким элементам.
▫️Классы и идентификаторы используются для применения стилей CSS к элементам. Они помогают создавать каскадные таблицы стилей (CSS) и делать внешний вид веб-страницы более привлекательным.
▫️Классы и идентификаторы часто используются в JavaScript для обращения к элементам страницы и добавления им динамического поведения.

Читать статью
🔥12❤3👍2
🔥12 принципов Уолта Диснея для анимационного сторителлинга и не только

#почитать

▫️Союз моушн-дизайна и UX относительно новый, но его корни были заложены еще Уолтом Диснеем. Фрэнк Томас и Олли Джонстон являлись одними из самых приближенных аниматоров Уолта Диснея. Они принимали участие в создании таких классических произведений, как «Пиноккио», «Бэмби» и «Фантазия».

▫️Изложенные ими 12 принципов анимации остаются до сих пор незаменимыми при разработке анимации для кинематографа, телевидения и любого цифрового контента.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Как верстать и оформлять цитаты. Мини-туториал

#почитать

▫️Обводки или рамки
▫️Обратный отступ
▫️Фоновый цвет

Читать статью
👍8🔥3❤2
🌐Крик души CSS-программиста

#посмотреть

О стандартизации, переиспользовании стилей, и адаптиве курильщика.

Смотреть видео на YouTube (15 минут)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2
AI изменит работу дизайнера, но никогда не заменит творчество, эмпатию и интуицию

#почитать

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

Читать статью
🔥9👍4❤2😁2👎1
Как наложить макет на вёрстку через PerfectPixel

#почитать

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

Читать статью
🔥11❤4👍3
Как вписать блоки в страницу или в контейнер? Используйте css grid

#почитать

"На днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование.
При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную блочную верстку (когда ее уже пометят как obsolete?)), либо с помощью избыточного кода (если использовать flex). Давайте я покажу на примере, как это делать правильно."

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11👎3🔥2
Простой генератор паттернов

Онлайновый инструмент для создания повторяющихся паттернов для фона веб-страницы или элемента. Сперва выбираешь одну или несколько картинок из готовых вариантов или загружаешь свою в формате SVG. Затем настраиваешь размеры паттерна, цвет картинки и другие параметры. На выходе получишь изображение в формате PNG, которое легко добавить к любому элементу веб-страницы.

Посмотреть
🔥10👍3
😁40🤬7👎6🔥2👍1
Как сделать всплывающую подсказку

#почитать

Всплывающая подсказка, небольшой блок (тултип), который появляется при наведении или нажатии на элемент. Цель — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям. Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS.

🟢Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👏4🔥3
Друзья! Мы подготовили папку с каналами, которые публикуют еженедельные дайджесты по разным IT-направлениям!

Забирайте и будьте в курсе последних новостей и видео в индустрии. Всего 1-2 поста в неделю и у вас есть все, что вышло за неделю.

Направления наших дайджестов:

— фронтенд
— python
— мобильная разработка
— PHP
— Java
— GameDev
— Tестирование
— Project & Product менеджмент


Что нужно сделать:

1. Нажимаем на эту ссылку https://t.me/addlist/OB0tZHD_z3lhMWUy
2. Добавляем всю папку себе (без регистрации и смс)
3. После добавления папка станет твоей и ты сможешь управлять подписками внутри папки

Добавил себе - поделись с коллегой!
👍7❤3🔥2
Дизайнеры воруют идеи и это как бы нормально

#почитать

Долго думал писать или не писать эту статью, ведь скорее всего святые моралисты закидают меня помидорами. Но давайте будем реалистами, 70% дизайна продукта это применение бест практис от других продуктов, смежных или нет - пофиг.

🟢Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3👏2
😅
😁39🤔4🔥3👍1
Сокровища HTML: 7 тегов, которые должны упростить вам жизнь

#почитать

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

🟢Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍5
Как верстальщику научиться понимать то, что нарисовал дизайнер и не наделать ошибок

#почитать

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

Если у вас только один фронтенд, все еще не так плохо. Однако, когда их количество достигает 10, микроошибки в компонентах могут отнимать до 200-300 человеко-часов в год. С учетом современных зарплат, это значительная сумма. А помимо фронтенда у нас также есть бекенд, девопс и тестирование, что также требует значительных затрат. Давайте вместе разберемся, как можно справиться с этой проблемой.

▫️Компоненты
▫️Layouts
▫️Направление отступов
▫️Влияние дизайна компонентов на дизайн layout’ов
▫️Область действия компонентов
▫️Цвета
▫️Иконки
▫️Компоненты форм

🟢Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍4