Большая подборка шпаргалок и инструментов для HTML, CSS и JS

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

Сохраняйте и пользуйтесь по ссылке.

@frontend_school #html #css #js

Шпаргалка по позиционированию элементов с помощью CSS Grid

Сохраняем и держим при себе.

#css #шпаргалка

Учитесь фронтенду с нами — подпишитесь 💻

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

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

Например, это может выглядеть так:
```
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}```

Более подробно о медиавыражение рекомендую почитать тут:
https://doka.guide/css/prefers-color-scheme/

#css

Учитесь фронтенду с нами — подпишитесь 💻

Математические функции CSS со ступенчатыми значениями

В CSS теперь полноценно работают функции round(), rem() и mod(). Работают они точно также, как и в JavaScript, то есть округляют, и возвращают остатки. Это даёт ещё больше возможностей для стилизации сайта без применения JavaScript, но и увеличивает нагрузку со стороны CSS.

Чтобы было понятнее, где это может быть применимо, я нашёл статью, которая объясняет их использование на простых примерах создания спрайтов анимации:

https://habr.com/ru/articles/816587/

#css

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #css

Учитесь фронтенду с нами — подпишитесь 💻

Учимся создавать анимацию жидкости с помощью JS и CSS

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

Подробнее:
https://youtu.be/a5X512icOM8

#видео #css #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. Используя её, вам не понадобится Bootstrap или его аналог.

В этой статье разобраны возможности CSS Flexbox с помощью гифок, чтобы вы сразу понимали, как работает каждый из методов — настоящая flex шпаргалка для тех, кто хочет быстро прокачать свои скилы в вёрстке.

#css

Форма авторизации с капчей

Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.

Ниже вы можете посмотреть, как это работает, а также изучить код:

https://codepen.io/Frontend-Portal/pen/oNRbjXG

#codepen #html #css #javascript

Магия clip-path

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

В этой статье вы сможете узнать скрытые возможности clip-path и увидеть интересные способы его использования:

https://emilkowal.ski/ui/the-magic-of-clip-path

#css #en

Анимации скролла во фронтенде

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

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/

#css #javascript #en

Учитесь фронтенду с нами — подпишитесь 💻

10 полезных однострочников для CSS, которые пригодятся в большинстве проектов

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

https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project

#css

Учитесь фронтенду с нами — подпишитесь 💻

CSS-классы вредны?

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда?

Сейчас вы узнаете о том, почему настало время отказаться от него:

https://habr.com/ru/companies/ruvds/articles/829926/

#css #статья

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #css

Учитесь фронтенду с нами — подпишитесь 💻

Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать

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

https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu

#видео #html #css

Учитесь фронтенду с нами — подпишитесь 💻

Полный курс HTML & CSS за 6 часов

Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.

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

В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.

Успейте посмотреть, пока YouTube ещё работает:

https://youtu.be/TPas02fsuKU

#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe

Учитесь фронтенду с нами — подпишитесь 💻

24 CSS-проекта за два с половиной часа

В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.

Смотрим тут:

https://youtu.be/TzuWIHGFKCQ

#видео #css #туториал

Учитесь фронтенду с нами — подпишитесь 💻