Верстальщик от бога @godinhtml Channel on Telegram

Верстальщик от бога

@godinhtml


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

По крупицам собираем frontend-годноту из интернета.

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

По всем вопросам: @godinmedia

№ 4879212836

Верстальщик от бога (Russian)

Вы когда-нибудь задумывались, что верстка веб-сайтов может быть искусством? Если да, то канал "Верстальщик от бога" (@godinhtml) именно для вас. Этот канал является самым большим каналом по верстке в Telegram, где собирается frontend-годнота из интернета. Здесь вы найдете крупицы знаний, советы и лучшие практики по верстке, которые помогут вам стать настоящим профессионалом.

Кроме того, вы можете присоединиться к чату верстальщиков по ссылке @godinhtmlchat, где можно обсудить интересующие вас вопросы и делиться опытом с другими участниками канала. Для всех остальных вопросов и предложений вы всегда можете обратиться к администраторам по контакту @godinmedia.

Не упустите возможность улучшить свои навыки в верстке и узнать последние тенденции в этой области - присоединяйтесь к каналу "Верстальщик от бога" прямо сейчас!

Верстальщик от бога

06 Dec, 10:39


Что нужно знать про OOCSS и организацию CSS

#почитать

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

Читать статью

Верстальщик от бога

04 Dec, 12:36


закон аутсорса 😅

Верстальщик от бога

03 Dec, 05:10


Веб-дизайн для начинающих

Автор
: Роббинс Дженнифер
Год издания: 2021

#css #ru

Скачать книгу

Верстальщик от бога

02 Dec, 10:58


Настройка цитат в HTML и CSS

#почитать

Цитаты позволяют выделять часть текста и придавать особое значение.

Читать статью

Верстальщик от бога

29 Nov, 10:56


Как читать W3C-спецификации

#почитать

▫️Поймите, что спецификации W3C написаны для разработчиков реализаций, а не для конечных пользователей.
▫️Во многих спецификациях есть раздел с описанием, как они организованы и как их нужно читать.
▫️Знайте словарь, используемый в спецификациях.
▫️Помните, что не нужно читать каждое слово. Бегло просматривайте в поисках частей, которые имеют смысл.
▫️Избегайте обсуждений пространств имен.
▫️Научитесь читать BNF — он используется во многих местах.
▫️Научитесь читать DTD для ответов на вопросы по синтаксису.
▫️Если технология поддерживает скрипты, информация находится в привязках.

Читать статью

Верстальщик от бога

28 Nov, 17:44


▫️CSS-анимации для начинающих

#почитать

Фундаментальный практикум на русском, по книге CSS Animation 101

Читать статью
Скачать шпаргалку

Видеопрактика:
▫️ Основы анимации для новичков 30 минут
▫️ Гайд по CSS анимации. Transition / Animation 20 минут

Верстальщик от бога

28 Nov, 13:42


Фриланс — это свобода и возможность работать из любой точки мира. Но все мы знаем, что за этой свободой стоит множество подводных камней, связанных с получением оплат и легализацией доходов от иностранных клиентов. Как безопасно и быстро получать деньги за свои услуги, работая с зарубежными клиентами по всему миру?

Mellow — ваша надежная платформа для получения платежей с любой точки мира. А главное, безопасно и быстро!

С помощью платформы вы можете:
▫️Получать деньги от зарубежных клиентов с гарантией безопасности.
▫️Иметь полный пакет документов для налоговой: договор, счет и акт выполненных работ
▫️Легально выводить деньги на счёт ИП, или банковскую карточку или электронный кошелек.

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

Проверьте сами, насколько легко можно работать с клиентами из США, Европы и других стран.

💬 Узнать больше о Mellow, зарегистрироваться и получать деньги можно здесь https://clc.to/RV5uyg

Реклама. Рекламодатель "FRWD Limited" erid: 2VtzqvQj1Rq

Верстальщик от бога

28 Nov, 10:55


Elastic Overflow Scrolling

#почитать

Для начала понадобится какой-то элемент, выступающий в качестве контейнера для прокручиваемого контента. Конечно, можно JS, но это потребует добавления слушателей прокрутки или комбинации событий pointerDown, pointerUp и pointerMove, не говоря уже об отслеживании положения, инерционного движения и т. д. Идеальным было бы решение на CSS, и вот оно

Читать статью

Верстальщик от бога

27 Nov, 10:54


Семантическая вёрстка

#почитать

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

Читать статью

Верстальщик от бога

26 Nov, 10:47


Адаптивная вёрстка сайта

#почитать

▫️Прочность
▫️Относительность единиц измерения
▫️Использование контрольных точек
▫️Максимальные и минимальные значения
▫️Вложенность объектов
▫️Правильные шрифты
▫️Грамотное использование графики
▫️Выдерживание размеров макетов

Читать статью

Верстальщик от бога

25 Nov, 10:50


Фоны для блочной модели

#почитать

Можно ограничить распространение background-image элемента с помощью background-clip. Это означает, что можно применить различные фоны, скажем, к padding и border.

Читать статью

Верстальщик от бога

22 Nov, 10:46


CSS по БЭМ. Описание с примерами

#почитать

В БЭМ не используют селекторы тегов и идентификаторов. Стили блоков и элементов описываются через селекторы классов.

Читать статью

Верстальщик от бога

21 Nov, 10:23


Определение типа с @property

#почитать

Большой гайд.

Читать статью

Верстальщик от бога

20 Nov, 10:57


Переходы и анимация

#почитать

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash.

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

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

Быстрый гайд WebRef

Верстальщик от бога

19 Nov, 05:10


Справочник JavaScript

Авторы:
Никольский А.П.,
Дубовик Е.В.
Год издания: 2021

#javascript #ru

Скачать книгу

Верстальщик от бога

18 Nov, 10:45


Всё о селекторах в CSS: от основ до высшего пилотажа

#почитать

Быстрый гайд от МТС.

Читать статью

Верстальщик от бога

15 Nov, 10:43


Комбинированные селекторы

#почитать

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

Читать статью

Верстальщик от бога

14 Nov, 10:37


Псевдокласс :has()

#почитать

В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().

Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов.

Читать статью

Верстальщик от бога

13 Nov, 10:32


Стилевая функция rgb()

#почитать

Цвет в виде шестнадцатеричного значения не всегда удобен для использования из-за сложности перевода десятичных чисел в шестнадцатеричные. В качестве альтернативы в CSS имеется стилевая функция rgb(), позволяющая задавать компоненты цвета в виде десятичных чисел.

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

Читать статью

Верстальщик от бога

12 Nov, 10:41


Кратко о методологиях объектно-ориентированного CSS: OOCSS, SMACSS, BEM и SASS

#почитать

Многие девелоперы, даже имея за плечами не один успешно выполненный коммерческий проект не оставляют поиски наилучшего способа организации стилей в макете. И большинство из них остановились на синтезе OOCSS, SMACSS, BEM и SASS. В этой статье мы не только поговорим о том, что из себя представляет правильный CSS.

Читать статью

Верстальщик от бога

11 Nov, 05:19


JavaScript с нуля

Автор:
Кирупа Чиннатхамби
Год издания: 2021

#javascript #ru

Скачать книгу

Верстальщик от бога

08 Nov, 10:30


Синус и косинус в веб-дизайне

#почитать

В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков.

Читать статью

Верстальщик от бога

07 Nov, 05:09


Специфичность в CSS

#почитать

Специфичность в CSS определяет, как браузеры определяют важность, актуальность и «старшинство» стилей, то есть как разрешаются уонфликтующие стили.

Читать статью

Верстальщик от бога

06 Nov, 10:45


25 передовых CSS-техник

#почитать

scroll-behavior: smooth и так далее

Читать

Верстальщик от бога

05 Nov, 05:09


Справочник HTML
Кратко, быстро, под рукой

Автор:
Кириченко А.В.
Год издания: 2021

#html #ru

Скачать книгу

Верстальщик от бога

04 Nov, 05:11


Изображения. Быстрый бесплатный курс для новых фронтендеров

#почитать

Курс от знакомства с элементом и до CDN-сетей доставки.

Читать

Верстальщик от бога

01 Nov, 05:21


Сократить HTML-код и писать только на CSS

#почитать

Вооружившись принципом DRY.

Читать статью

Верстальщик от бога

31 Oct, 10:42


Ключи в JavaScript фреймворках и библиотеках

#почитать

"Ключи" в JavaScript фреймворках и библиотеках, зачем они используются и как помогают при работе с DOM.

Читать статью

Верстальщик от бога

30 Oct, 10:59


Как работать с box shadows

#почитать

В инструментах наподобие Photoshop, Gimp, Figma и CSS есть множество разных реализаций фильтра отбрасываемой тени, каждая из которых обладает своим набором возможностей. Например, CSS поддерживает опциональное значение размытия, применяемого к отбрасываемой тени.

Читать статью

Верстальщик от бога

29 Oct, 10:32


"Умные" макеты с контейнерными запросами

#почитать

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

Читать статью

Верстальщик от бога

28 Oct, 11:04


▫️ Плавающие элементы и Clearfix

#посмотреть

Плавающие элементы и очистка потока (Floating Elements & Clearfix)

Смотреть на YouTube 10 минут

Верстальщик от бога

28 Oct, 06:14


Ускоряем сайт с помощью CSS

#почитать

Какие проблемы возникают с CSS:

CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;

CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;

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

Читать статью

Верстальщик от бога

25 Oct, 11:24


Наглядный CSS

Автор:
Сидельников Грег
Год издания: 2021

#css #ru

Скачать книгу

Верстальщик от бога

25 Oct, 07:30


Прими участие в «Хакатоне по разработке кибериммунных технологий 3.0» от «Лаборатории Касперского» с призовым фондом 1 000 000 рублей!

Регистрация на хакатон открыта до 15 ноября: https://cnrlink.com/cyberimmunehack3gdhtml

Приглашаем разработчиков, аналитиков, архитекторов ПО, экспертов по информационной безопасности и студентов программирования и кибербезопасности. Участвуй индивидуально или в команде до 5 человек.

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

Это твой шанс прокачать навыки в кибербезопасности и пообщаться с экспертами «Лаборатории Касперского».

Ключевые даты:
• 15 октября – 15 ноября – регистрация участников
• 8 ноября – митап с экспертами и игра «Огнеборец»
• 15 ноября – старт хакатона
• 17 ноября – дедлайн загрузки решений
• 22 ноября – подведение итогов и объявление победителей

Регистрируйся, прояви себя и внеси вклад в безопасность каршеринговых сервисов: https://cnrlink.com/cyberimmunehack3gdhtml

Реклама. АО «Лаборатория Касперского». ИНН 7713140469. erid: LjN8K5SaJ

Верстальщик от бога

24 Oct, 10:42


50 сайтов с бесплатными HTML/CSS/JS шаблонами

#почитать

Источники вдохновения, или творческого заимствования.

Ознакомиться

Верстальщик от бога

23 Oct, 16:41


▫️ Асинхронность и промисы

#посмотреть

Разбираемся с асинхронностью в JavaScript, изучаем промисы (Promise), async await и узнаем, как работает событийный цикл (Event Loop).

Смотреть на YouTube 25 минут

Верстальщик от бога

23 Oct, 13:00


Технологический гараж на МТС True Tech Champ

Дата: 8 ноября
Место: МТС Live Холл + онлайн

МТС приглашает в True Tech Garage. Тут можно поиграть в деловые игры, научиться управлять логикой на воркшопе, побатлиться в кодинге с победителем олимпиады, а к вечеру просто весело провести время за прогерскими шутками. Максимально ламповая и кодерская атмосфера!

А вот несколько примеров, что тебя ждет:

— Деловая игра THE CODE от разработчика бизнес-симуляций Александра Белякова. Нужно будет распутать сложный узел причинно-следственных связей и найти код.

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

— «Плохие прогреские шутки». ИТ-батл, где пары разработчиков попробуют перешутить друг друга, а победителей выберут зрители.

— «Плохой собес». Стресс-воркшоп, где участникам предстоит оказаться на худшем собеседовании в жизни.

True Tech Garage будет работать на очном финале ИТ-чемпионата в МТС Live Холл. Приходи — тут все свои!

Узнать подробности и зарегистрироваться на событие можно по ссылке: https://truetechchamp.ru/conf

Верстальщик от бога

23 Oct, 05:03


Ограничение Contain

#почитать

Ограничение области применения стилей, компоновок и отрисовок.

Читать
Также новый подробный гайд DevNotes

Верстальщик от бога

22 Oct, 05:14


Виды анимаций на верстке

#почитать

CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.

Читать статью

Верстальщик от бога

21 Oct, 05:06


Советы по вёрстке от гика

#почитать


▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;

▪️чем можно заменить объявления свойства height со значением auto для изображений;

▪️какой есть нюанс при установке максимальной ширины у группы элементов;

▪️плавную прокрутку без неприятных ситуаций для пользователя;

▪️чего не хватает при использовании фоновых изображений.


Читать статью

Верстальщик от бога

17 Oct, 05:02


Основы и практика CSS Grid Layout

#почитать

Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.

Читать статью

Верстальщик от бога

16 Oct, 05:01


Чистый CSS или фреймворк

#почитать

Пару очевидных и не очень фактов:

• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.

Читать статью

Верстальщик от бога

15 Oct, 10:52


Продвинутая адаптивная верстка - CSS container queries

#посмотреть

Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.

Смотреть на YouTube 15 минут

Верстальщик от бога

15 Oct, 06:08


Шпаргалки для начинающего
верстальщика HTML/CSS

Автор
: Эберт Елена
Год издания: 2021

#html #css #ru

Скачать книгу

Верстальщик от бога

14 Oct, 10:51


Сборник генераторов CSS-градиентов

#почитать

Curated list of the best gradient websites.

Посмотреть

Верстальщик от бога

09 Oct, 04:47


Сборник CSS-градиентов

#почитать

Подборка 23-х фонов с линейным и радиальным градиентом.

Читать статью

Верстальщик от бога

08 Oct, 14:57


Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?

➡️ Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:

✔️ архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️ как создавать маршруты, контроллеры и использовать middleware;
✔️ как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️ методы тестирования и отладки приложений Nest.Js.

Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.

Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!

➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://u.to/caTuIA

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8JyLdf

Верстальщик от бога

08 Oct, 07:08


JavaScript с нуля до профи

Авторы:
Лоренс Ларс Свекис,
М. ван Путтен, Р. Персиваль
Год издания: 2023

#javascript #ru

Скачать книгу

Верстальщик от бога

07 Oct, 10:52


25 HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер

#почитать

В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.

Список

Верстальщик от бога

06 Oct, 06:18


Область видимости и замыкания

Автор:
Кайл Симпсон
Год издания: 2022

#javascript #ru

Скачать книгу

Верстальщик от бога

04 Oct, 10:26


Погружение в Atomic CSS

#почитать

Методология верстки, в которой мы используем маленькие атомарные CSS-правила, каждое из которых делает одно действие. Эти классы еще называют утилитами. Часто они применяет одно CSS-свойство (например, меняет цвет текста).

Читать статью

Верстальщик от бога

03 Oct, 10:36


Что, если использовать контейнерные единицы измерения для всего

#почитать

Казалось, ответ может быть таким: всё будет очень хорошо масштабироваться!

Читать статью

Верстальщик от бога

02 Oct, 10:47


Полезный CSS. Часть 4

#почитать

▫️сброс стилей до значений, взятых из веб-стандартов;
▫️возврат значений свойств, установленных в браузере;
▫️что можно сделать с прыжками контента при открытии и закрытии модального окна;
▫️возможность отобразить текст «красиво» с помощью ключевого слова system-ui;
▫️способ стилизации элементов на языке, отличающимся от основного.

Читать статью

Верстальщик от бога

01 Oct, 10:33


Советы по вёрстке от гика, часть 3

#почитать

▫️подходы при стилизации элементов для вёрстки текста;
▫️какая может быть проблема с радиокнопками в проекте;
▫️как задать размеры с использованием функций min() и max();
▫️CSS-наследование и свойство line-height;
▫️для чего делать подсказки в имени класса.

Читать статью

Верстальщик от бога

30 Sep, 13:58


Разработка игр на языке JavaScript

Автор:
Беляев С. А
Год издания: 2022

#javascript #ru

Скачать книгу

Верстальщик от бога

30 Sep, 09:31


👀 Создаем Color Picker на Vue 3 с использованием Context API и Composables

Ждём вас на открытом вебинаре 3 октября в 20:00 мск, где мы разберем:

- как создать простой color picker с использованием Context API и Composables;
- как передавать состояние родительского компонента к дочерним компонентам;
- как переиспользовать код с помощью создания своих Composables и использования готовых из коллекции VueUse.

Урок для разработчиков, желающих улучшить понимание внутренних механизмов Vue 3, создавать свои компоненты и контролы, а также повысить эффективность разработки за счет переиспользования кода.

Спикер Юрий Тимофеев — опытный разработчик с широким технологическим стеком, преподаватель.

Встречаемся в преддверии старта курса «Vue.js разработчик». Все участники вебинара получат специальную цену на обучение!

➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://u.to/_S-mIA

Верстальщик от бога

30 Sep, 05:18


Вендорные префиксы

#почитать

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

Читать статью

14,670

subscribers

1,101

photos

14

videos