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 |
