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

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

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

@frontend_school #html #css #js

Ловите крутой сайт для веб-разработчиков

В своё время он и мне очень сильно помог. Здесь собраны справочники и руководства по HTML, CSS и JavaScript. Надеюсь, что окажется полезным и для вас. Сохраняйте себе и пользуйтесь на здоровье:

https://doka.guide/

@catreview #webdev

Спорим, вы знаете не все методы для работы со строками в JavaScript?

Хоть нам и приходится каждый день иметь дело с JS, но всё знать невозможно. В этой статье собраны 40 методов, которые позволяют взаимодействовать со строками:

https://proglib.io/p/40-osnovnyh-i-nestandartnyh-metodov-dlya-raboty-so-strokami-v-javascript-2022-05-19

Напишите в комментарии сколько из них вы знали до прочтения статьи 👇

#javascript #строки

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

Роадмап по фронтенду

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

Ссылка на видео: https://youtu.be/eYrdtDOq5Lg
Ссылка на роадмап: https://roadmap.sh/frontend

#роадмап #фронтенд

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

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

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

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

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

«Классная» идея для формы авторизации на сайте

Помогите вашему пользователю получить доступ к аккаунту, сделав подсказку о пароле😉

#кек

Как работают функции JavaScript

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

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

https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12

#javascript

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

Что такое делегирование событий в JS и как это работает

Это техника, которая позволяет обрабатывать события на родительских элементах вместо на дочерних.

Мы знаем, что события всплывают вверх по DOM-дереву. То есть если вы установите обработчик события на родительском элементе, он будет вызван при срабатывании и на любом дочернем.

Вот пример, как можно это использовать:

// Получаем родительский элемент
const parentElement = document.getElementById('parentElement');
// Добавляем обработчик на родительский элемент
parentElement.addEventListener('click', function(event) {
// Проверяем, что кликнули на нужный дочерний элемент
if(event.target.classList.contains('childElement')) {
// Обрабатываем событие
console.log('Событие обработано на дочернем элементе');
}
});

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

#javascript #урок

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

30 самых полезных библиотек Python для веб-разработки в 2024 году

Занимаетесь вебом и не расстаётесь с JavaScript? Пора это исправить! Я тут нашёл для вас подборку из 30 библиотек Python, которые пригодятся веб-разработчикам.

Справедливости ради, в вебе действительно есть задачи, которые проще решать на Python: от анализа данных до веб-разработки. Посмотрите сами. Надеюсь, что найдёте для себе что-то новое и полезное:

https://tproger.ru/articles/30-samyh-poleznyh-bibliotek-python-dlya-veb-razrabotki-v-2024-godu

#веб #python

🐈‍⬛ Подписывайтесь на меня 😌

Полный курс по React, Redux и TypeScript бесплатно

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

Здесь вы научитесь инициализировать Redux Store, создавать хуки и работать с TS:

https://youtu.be/ETWABFYv0GM

#видео #курс #react #redux #typescript

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

Выходные — не повод сидеть без дела! Поэтому предлагаем сверстать очередной сайт для оттачивания мастерства вёрстки

По ссылке ниже вы найдёте стильный макет, по которому сможете сделать не менее красивый, но при этом ещё и функциональный лендинг:

https://www.figma.com/design/PSr7478hcIydh1tC6YZkUr/2rism?node-id=0-1&t=mVxuzEoR26yERLGI-0

#figma #макет #вёрстка

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

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

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

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

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

#css

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

100 видеоуроков по фронтенду для новичков и не только

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

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

https://www.youtube.com/playlist?list=PLV9lBwGQ2FU1VOctyWifetyMMC-OTJ51e

#видео #курс

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

Математические функции 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

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

Сложный макет в Figma для прокачки ваших навыков

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

По ссылке ниже вы найдёте объёмный макет для CRM дошкольной образовательной организации. Справитесь?

https://www.figma.com/design/egY90HlOAiLF53TaTrkM9W/детсад?node-id=0-1&t=cMtypXlNrFBGq9yF-1

#figma #макет

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

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

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

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

#css