Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
رفتن به کانال در Telegram
Крутым фронтендером не рождаются — им становятся на канале @frontend_school! Наш чат: @frontend_school_chat Наша флудилка: @frontend_school_flud Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy Мы в VK: vk.com/frontend_school Связь: @jellyjail
نمایش بیشتر1 194
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-47 روز
-2230 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
هیچ دادهای
مشکلی وجود دارد؟ لطفاً صفحه را تازه کنید یا با مدیر پشتیبانی ما تماس بگیرید.
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
دسامبر '24
دسامبر '24
+3
در 0 کانالها
نوامبر '24
+3
در 0 کانالها
Get PRO
اکتبر '24
+13
در 0 کانالها
Get PRO
سپتامبر '24
+9
در 0 کانالها
Get PRO
اوت '24
+16
در 0 کانالها
Get PRO
ژوئیه '24
+315
در 14 کانالها
Get PRO
ژوئن '240
در 0 کانالها
Get PRO
مه '240
در 0 کانالها
Get PRO
آوریل '240
در 0 کانالها
Get PRO
مارس '240
در 0 کانالها
Get PRO
فوریه '240
در 0 کانالها
Get PRO
ژانویه '240
در 0 کانالها
Get PRO
دسامبر '230
در 0 کانالها
Get PRO
نوامبر '230
در 0 کانالها
Get PRO
اکتبر '230
در 0 کانالها
Get PRO
سپتامبر '230
در 0 کانالها
Get PRO
اوت '230
در 0 کانالها
Get PRO
ژوئیه '230
در 0 کانالها
Get PRO
ژوئن '230
در 0 کانالها
Get PRO
مه '230
در 0 کانالها
Get PRO
آوریل '230
در 0 کانالها
Get PRO
مارس '230
در 0 کانالها
Get PRO
فوریه '230
در 0 کانالها
Get PRO
ژانویه '230
در 0 کانالها
Get PRO
دسامبر '220
در 0 کانالها
Get PRO
نوامبر '22
+1
در 0 کانالها
Get PRO
اکتبر '220
در 0 کانالها
Get PRO
سپتامبر '22
+22
در 0 کانالها
Get PRO
اوت '22
+21
در 0 کانالها
Get PRO
ژوئیه '22
+25
در 0 کانالها
Get PRO
ژوئن '22
+41
در 0 کانالها
Get PRO
مه '22
+32
در 0 کانالها
Get PRO
آوریل '22
+7
در 0 کانالها
Get PRO
مارس '220
در 0 کانالها
Get PRO
فوریه '220
در 0 کانالها
Get PRO
ژانویه '220
در 0 کانالها
Get PRO
دسامبر '210
در 0 کانالها
Get PRO
نوامبر '21
+14
در 0 کانالها
Get PRO
اکتبر '21
+18
در 0 کانالها
Get PRO
سپتامبر '21
+35
در 0 کانالها
Get PRO
اوت '21
+33
در 0 کانالها
Get PRO
ژوئیه '21
+48
در 0 کانالها
Get PRO
ژوئن '21
+38
در 0 کانالها
Get PRO
مه '21
+36
در 0 کانالها
Get PRO
آوریل '21
+218
در 0 کانالها
Get PRO
مارس '21
+66
در 0 کانالها
Get PRO
فوریه '21
+61
در 0 کانالها
Get PRO
ژانویه '21
+82
در 0 کانالها
Get PRO
دسامبر '20
+1 205
در 0 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 20 دسامبر | 0 | |||
| 19 دسامبر | 0 | |||
| 18 دسامبر | 0 | |||
| 17 دسامبر | +2 | |||
| 16 دسامبر | 0 | |||
| 15 دسامبر | 0 | |||
| 14 دسامبر | 0 | |||
| 13 دسامبر | 0 | |||
| 12 دسامبر | 0 | |||
| 11 دسامبر | 0 | |||
| 10 دسامبر | 0 | |||
| 09 دسامبر | 0 | |||
| 08 دسامبر | +1 | |||
| 07 دسامبر | 0 | |||
| 06 دسامبر | 0 | |||
| 05 دسامبر | 0 | |||
| 04 دسامبر | 0 | |||
| 03 دسامبر | 0 | |||
| 02 دسامبر | 0 |
پستهای کانال
Про Notion уже слышали? Наверняка тут многие им пользуются, как и я. 9 сентября карета превратится в тыкву. Я собрал несколько альтернатив и рассказал где есть ещё вот в этом посте. Если кому нужно, залетайте, буду рад.
p.s. контент сюда пилить вообще не успеваю пока что, извините. Дел тьма. Но я обязательно скоро возобновлю деятельность. Пока что можете покидать в коменты, какие рубрики или тематики вам больше нравятся
Учитесь фронтенду с нами — подпишитесь 💻
| 2 | Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые популярные сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557
Файл из инструкции прилагаю на всякий случай.
Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов) | 432 |
| 3 | Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557 | 4 |
| 4 | Немного не в тему канала, но хочу поделиться с вами инструкцией, как настроить свой VPN-сервер за 1$ в месяц, который позволит вам пользоваться в том числе и YouTube на всех ваших устройствах.
Инструкция позволит пользоваться VPN только на нужных сайтах, игнорируя другие, а также настроить роутер, чтобы все устройства без специальных настроек работали, как надо.
Ссылку на инструкцию я оставляю тут: https://pikabu.ru/story/chinim_youtube_na_urovne_routera_11709314
А во вложении оставлю файл, который упоминается в инструкции, если вдруг вы не смогли его скачать по ссылке | 8 |
| 5 |  JavaScript эволюционирует: новые методы и функции для эффективной разработки
Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:
— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.
Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22
#статья #javascript | 450 |
| 6 | Любите ARIA? Нет, Кипелов тут не причем
ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой.
Основные атрибуты ARIA:
1. aria-label: используется для предоставления текста этикетки для элемента.
<button aria-label="Закрыть">X</button>
2. aria-hidden: указывает, что элемент и его дочерние элементы недоступны для вспомогательных технологий.
<div aria-hidden="true">Этот текст будет игнорироваться.</div>
3. aria-live: сообщает экранному чтецу об изменениях в содержимом, которые происходят динамически.
<div aria-live="polite">Контент будет прочитан экранным чтецом при изменении.</div>
4. aria-expanded: указывает состояние раскрытия или сворачивания элементов интерфейса (например, аккордеоны, выпадающие списки).
<button aria-expanded="false">Меню</button>
5. role: Определяет роль элемента интерфейса, помогая вспомогательным технологиям понять его назначение.
<div role="alert">Это важное сообщение!</div>
Преимущества использования ARIA:
— лучшая доступность: делает ваше приложение доступным для большего круга пользователей;
— социальная ответственность: помогает соблюдать стандарты доступности и поддерживать инклюзивность;
— улучшение SEO: иногда улучшает видимость вашего контента для поисковых систем.
Использование ARIA атрибутов поможет вам создать более доступные и понятные веб-приложения для всех пользователей.
Почитать подробнее можно в этой статье: https://doka.guide/a11y/aria-intro/
#урок #html
Учитесь фронтенду с нами — подпишитесь 💻 | 347 |
| 7 | Что должен учить фронтенд-разработчик в 2024 году
Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.
Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w
#видео #roadmap | 276 |
| 8 |  Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:
https://nuancesprog.ru/p/21194/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 279 |
| 9 | Какое из следующих утверждений о строгом режиме ("use strict") в JavaScript является неверным? | 266 |
| 10 |  Ещё немного про use strict в дополнение к этому посту.
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 281 |
| 11 |  Макет Figma: Decipad — интерактивный блокнот
Сложность: средняя
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻 | 316 |
| 12 | Выполнение реального заказа на разработку дизайна и вёрстку сайта
Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.
Смотрите, запоминайте и делайте выводы:
https://youtu.be/ofE_sxcIQS4
#видео
Учитесь фронтенду с нами — подпишитесь 💻 | 301 |
| 13 |  <div> вместо тысячи слов
#кек
Учитесь фронтенду с нами — подпишитесь 💻 | 274 |
| 14 | Сегодня поговорим о спред-операторе (...) в JavaScript
Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.
Примеры:
Копирование массива:
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log(copyArray); // [1, 2, 3]
Объединение массивов:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
Копирование объекта:
const originalObject = { a: 1, b: 2 };
const copyObject = { ...originalObject };
console.log(copyObject); // { a: 1, b: 2 }
Объединение объектов:
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
Преимущества:
— упрощает операции с массивами и объектами;
— делает код более читабельным;
— помогает избежать мутаций и побочных эффектов.
Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 272 |
| 15 | Ищем шрифты для сайта как настоящие ниндзя
Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным.
Fonts Ninja
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻 | 309 |
| 16 |  Главное, что видит пользователь
#кек | 507 |
| 17 |  8 советов, которые сделают JavaScript-код чище
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:
https://nuancesprog.ru/p/19910/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 406 |
| 18 |  Что делает директива "use strict" в JavaScript
"use strict" — это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны.
Пример:
"use strict";
var x = 1;
delete x; // Ошибка: нельзя удалить объявленную переменную
function test() {
y = 2; // Ошибка: "y" не объявлена
}
test();
Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.
Как включить строгий режим:
— в начале файла: "use strict";
— в пределах функции: function myFunction() { "use strict"; /* код */ }
Использовать строгий режим рекомендуется всегда, чтобы ваш код был безопаснее и поддерживал лучшие практики.
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻 | 355 |
| 19 | 24 CSS-проекта за два с половиной часа
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
Учитесь фронтенду с нами — подпишитесь 💻 | 357 |
| 20 |  Макеты Figma: Сайт для доступа к нейросетям
Сложность: высокая
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻 | 332 |
