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

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

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

По всем вопросам: @anothertechrock
Download Telegram
Бесит — подборка косяков, постоянно встречающихся от сайта к сайту

#почитать

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


tl;dr:
▫️Приложения, в которых нельзя отключить рекламные пуши
▫️Безосновательное разлогинивание
▫️Сброс выбранного города или неверное его отображение
▫️Выбор дат без возможности ввода с клавиатуры
▫️Буквенная клавиатура для телефонных номеров и неуместная автокоррекция ввода
▫️Куки-ху*ки

⏱Читать беситься
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13
🔥 Вакансия: React frontend-разработчик в vivaCRM

Привет-привет! Сразу по-честному: у нас особая любовь к интерфейсам и пользовательскому опыту. Обожаем когда всё выглядит стильно и профессионально. Мы ищем талантливого разработчика, который имеет те же чувства к клиентской части сервисов.

Мы уделяем большое внимание архитектуре, интерфейсам и внутренним взаимодействиям: не спешим с релизами, уделяем время рефакторингу и юнит-тестам. Проводим совместное планирование функционала и его декомпозицию.

▫️СРО ждёт именно тебя, так как:
— Профессионально владеешь react и Java
— Любишь и умеешь работать с дизайн системами
— Имеешь опыт работы с Redux и понимаешь принципы управления состоянием приложений
— Обладаешь опытом в создании отзывчивых и адаптивных веб-интерфейсов
— Интересуешься последними тенденциями в разработке фронтенд-решений

➡️ Откликнуться
👍8👎2🔥2
Игры на чистом CSS

#почитать

От головоломок до классики — игры, демонстрирующие универсальность CSS - без JavaScript.


⏱Посмотреть демо и исходники
Please open Telegram to view this post
VIEW IN TELEGRAM
👏11🔥3👍2
Event Loop. Разбор

#почитать

В сети есть довольно большое количество публикаций про Event loop и как он работает. Новые статьи появляются на популярных ресурсах и по сей день, в том числе на Хабре. Однако, к сожалению, далеко не вся информация, представленная в этих материалах является проверенной или достоверной. В связи с чем, само понятие обросло рядом мифов и догадок. Порой, даже опытному разработчику требуется немало внимания и опыта, чтобы понять, где истина, а где, чистой воды, вымысел.

⏱Читать разбор
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10👎2🔥1
Тест на CSS Flexbox на 10 вопросов

#почитать

Концепции и свойства Flexbox.

⏱Приступить
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍2🔥1
Портфолио с CodePen

#почитать

Лучшие проекты CodePen: карусели, 3D-карты, стили кнопок на все случаи жизни. Для портфолио.

⏱Посмотреть
Please open Telegram to view this post
VIEW IN TELEGRAM
👏9❤3👍1🔥1
"Вёрстка — это не тупо"

#почитать

Сводка ошибок которые встречались во фронтенде и верстке за время работы. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤3
Плохие стороны HTML

#почитать

Хотелось найти баланс между широко известными проблемами и встречаемыми (но менее известными), а также добавить в список то, что воспринимаем, как должное. В каждом из разделов укажу степень серьёзности проблемы, альтернативные решения и ссылки, по которым можно найти более подробную информацию.

▫️<select multiple>
▫️<i> (для значков)
▫️<ul> и <ol>
▫️Атрибут title
▫️<datalist>
▫️<input placeholder>
▫️<input type=number>
▫️<input type=date>
▫️<menu>
▫️<button disabled>
▫️<video>
▫️Протоколы ссылок (tel:, mailto:)

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👎2👏2👍1
Синтаксис CSS. Директивы и переменные

#почитать

Синтаксис, переменные и комментарии, CSS-директивы (@-правила).

▫️CSS-правила
▫️CSS-директивы или at-rules
▫️CSS-переменные
▫️Комментарии в CSS
▫️Кэширование CSS-файлов в браузере

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
Искусство взаимодействия. Эстетика, Функциональность, и Пользовательский Опыт

#почитать

Также кейсы успешных продуктовых дизайнов.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
Еще раз о svh, lvh, dvh в CSS и адаптивной верстке

#почитать

Допустим, вам нужно сверстать кнопку, которая попросит пользователя принять пользовательское соглашение. Используя vh, вы легко могли попасть в ситуацию, когда ваша кнопка скрывается за поисковой строкой. Чтобы решить эту проблему, в CSS ввели новые единицы измерения. Это svh, lvh и dvh.


⏱Читать статью или лучше
▫️ Посмотреть видео ⏱ 10 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
😁25👍3👏2
Как правильно скруглять внутренние углы фигур

#почитать

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

⏱Разобраться
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Идеи проектов UI (на HTML, CSS и JavaScript)

#почитать

Создание пользовательских интерфейсов помогает закрепить знания, полученные при изучении HTML, CSS и JS, а также развить дизайнерские способности. Представляем подборку подходящих идей UI-проектов. К каждому проекту прилагается скриншот общего вида и Codepen с примером реализации.

⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🎉2
▫️ Как научиться анимациям в CSS за 20 минут

#почитать #посмотреть

▫️ В CSS существует два способа создания анимаций: переходы (transitions) и анимации (animations).
▫️ Переходы используются для плавного изменения свойств при взаимодействии пользователя, например, при наведении курсора.
▫️ Анимации позволяют контролировать анимацию по кадрам с помощью ключевых кадров (keyframes) для создания сложных анимаций.
▫️ Для создания перехода необходимо указать свойства transition: transition-property, transition-duration, transition-timing-function и transition-delay.
▫️ Можно использовать сокращенную запись свойства transition, объединяя все параметры перехода.
При изменении нескольких свойств можно использовать ключевое слово 'all' в свойстве transition для применения анимации ко всем свойствам.
▫️ Для создания анимации необходимо определить ключевые кадры с помощью синтаксиса @keyframes и задать параметры анимации: animation-name, animation-duration и другие.
▫️ Свойство animation-fill-mode определяет, как стили из ключевых кадров применяются до и после выполнения анимации.
▫️ Можно использовать сокращенную запись свойства animation, объединяя все параметры анимации.
▫️ Для повышения удобства использования и избежания жесткой привязки анимации к элементам можно создавать утилитарные классы с анимацией.
▫️ Создание утилитарных классов позволяет создать свою мини-библиотеку анимаций и использовать их в различных элементах HTML.
▫️ Примеры анимаций включают движение влево (slideInLeft), вправо (slideInRight), вращение (rotate) и отскок (bounce).
▫️ Свойство transform-origin позволяет изменять точку, относительно которой происходит трансформация (например, вращение).
▫️ Использование процентов в @keyframes дает больший контроль над промежуточными состояниями анимации.

⏱Читать статью
или ▫️ Смотреть на YouTube (EN 🇻🇬)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥3
Нашумевшее на Хабре "Не стоит недооценивать HTML"

#почитать

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍2😁2
Про userstyles (пользовательский CSS)

#почитать

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


⏱Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍5
У HTML Academy день рождение, поэтому мы дарим подарки.

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

У нас вы сможете освоить профессию веб-разработчика независимо от уровня знаний.

Мы 12 лет посвятили обучению веб-разработке и ведём полноценные дисциплины в сильнейших технических вузах страны.

Прямо во время учёбы за вашими результатами будут наблюдать IT-компании, и многие из них готовы пригласить вас на работу сразу после окончания курса.

Никакой боли с бесконечными откликами на вакансии и собеседованиями.

Найти подарок
👍10
😁21🎉5👍3👏2