Шпаргалка по позиционированию элементов с помощью 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

Zeplin — инструмент для работы с макетами формата .psd

Сегодня всё больше верстают по макетам из Figma. Но иногда всё же встречаются и другие форматы. Zeplin — это инструмент, который помогает дизайнерам и разработчикам совместно работать над макетами. Он позволяет быстро и удобно экспортировать дизайн из Sketch, Figma или Adobe XD, создавать спецификации для разработчиков, а также обмениваться комментариями и обратной связью. Zeplin упрощает процесс совместной работы и помогает сохранить единство дизайна на всех этапах разработки.

Скачать можно здесь: https://zeplin.io/

#инструменты

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

Метод bind() в JavaScript

Простыми словами, bind — это инструмент, который позволяет «привязать» определённый контекст (this) к функции.

Давайте разберёмся на примере. Представьте, что у вас есть объект user:

const user = {
name: 'Аня',
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};

Если мы вызовем user.greet(), то увидим: «Привет, меня зовут Аня». Всё работает, потому что контекст (this) указывает на объект user.

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

const greetFunc = user.greet;
greetFunc(); // Что произойдет?

В этом случае контекст потеряется, и this будет указывать не на user, а на глобальный объект (или undefined в строгом режиме). Метод bind поможет нам решить эту проблему:

const greetFuncBound = user.greet.bind(user);
greetFuncBound(); // Привет, меня зовут Аня

Теперь функция greetFuncBound всегда будет знать, что её контекст — это объект user.

#урок #javascript

Область видимости и замыкания в JavaScript

Область видимости в JS — это любая область в коде, которая содержит именованные сущности (переменные, классы, функции) и определяет их доступность из разных частей кода. В зависимости от того, где расположен ваш код — в глобальной или локальной области, он будет вести себя по-разному.

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

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

#javascript

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

Хорошо, что у нас в канале всё бесплатно!

#кек

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

Что такое Git для начинающих

Многие из вас уже пробовали работать с Git и GitHub, а некоторые только собираются подступиться к нему. Если не знаете с чего начать, то здесь вы найдете все ответы!

Узнайте, что такое GitHub, как использовать Git для начинающих, и как выполнить установку Git за 15 минут:

https://youtu.be/VJm_AjiTEEc

#git #github

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