Фронтенд-челленджи

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

Точно найдёте что-нибудь интересное для себя:

https://tprg.ru/cFEL

#фронтенд #css

Отступы в CSS

Огромный гайд на тему отступов в CSS — различные подходы к реализации, padding и margin, практические примеры:

https://tprg.ru/aFcw

#фронтенд #css

13 способов стилизации списков

Не любите списки? Да вы просто не умеете их готовить!

В своей статье автор делится нетривиальными способами стилизации. Всё оформлено в CodePen, так что можно потыкать код, не отходя от кассы.

https://tprg.ru/BOgt

#фронтенд #css

Свойства CSS, которые сэкономят кучу времени

Для достижения некоторых эффектов не нужно писать миллион строк. В статье описаны такие свойства:

— Центрирование с помощью place-items: center и CSS Grid или margin: auto и Flexbox.
— Стилизация маркеров списка.
— Центрирование текста.
— Иконки в одну линию с display: inline-flex.
— Добавление границ между столбцами.
— Повторение фоновой картинки без обрезки.
— Соблюдение размеров объекта с object-fit.

Больше информации, код и результаты в картинках можно найти в самой статье:

https://tprg.ru/STXI

#фронтенд #css

Что значит 100% в CSS?

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

Амелия Ваттенбергер не только написала об этом, но и сделала статью интерактивной. Так что можете потаскать ползунки и посмотреть, что получится:

https://tprg.ru/YU83

#фронтенд #css

Друзья!
Короткое видео-объявление. Продублирую здесь.
Если вы хотите, чтобы мы с @nezdolIy разобрали вашу вёрстку и макет на стриме в рубрике #CSS-разбор - пишите мне в личку.
@serdyuk
https://youtu.be/4dZkPf6Rtgc

​Создание объемной фигуры из текста с анимацией на HTML и CSS

Небольшой видеоурок по созданию интересной анимации из текста от нашего подписчика.

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

https://tprg.ru/DIat

#фронтенд #html #css