Где бесплатно выучить HTML и CSS?

Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.

Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org

Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.

@prog_point #web #frontend #html #css

​​Шпаргалка по CSS Grid в картинках, ещё и с единорогами

В статье собрали полный комплект материала по CSS Grid – с объяснениями в картинках и практиками, чтоб вы ощутили всю мощь этого инструмента. Тут рассказывают про базовые понятия и трюки, дают примеры кода. И конечно, не обошлось без пары полезных хитростей – для новичков и бывалых, чтоб выжать максимум из CSS Grid.

Приглашаем к прочтению

@prog_point #web #frontend #css

Шпаргалка по CSS, ещё и интерактивная

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

Кидайте в закладки эту шпаргалку

@prog_point #web #frontend #css

Всё о CSS Grid за 13 минут

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

Также использование CSS Grid помогает сократить количество кода, улучшить читаемость стилей и сделать макеты более предсказуемыми и контролируемыми.

Видео начинается с теории, а затем автор показывает, как настроить сетку с помощью CSS Grid, включая создание колонок и строк, зазоры между элементами, автоматические строки, а также выравнивание и позиционирование элементов. Тут также рассматривается работа с областями и настройка начала и конца строк и колонок.

https://youtu.be/MEOR2b69Pl4?si=Jk6MQxo7VHO-VP_v

@prog_point #web #frontend #css

​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css

Детальный справочник для веб-разработчиков от А до Я

Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!

https://doka.guide/

#шпаргалка #веб #javascript #html #css

​​​Old but gold: Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css

6 полезных свойств CSS за 10 минут

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

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

Если хотите смотреть оригинал, то он доступен по ссылке.

#видео #css #веб

Медитативное программирование: Делаем бесконечную лестницу на чистом HTML и CSS без лишних слов

#видео #html #css #веб