Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.21K subscribers
550 photos
66 videos
3 files
252 links
Крутым фронтендером не рождаются — им становятся на канале @frontend_school!

Наш чат: @frontend_school_chat
Наша флудилка: @frontend_school_flud

Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy

Мы в VK: vk.com/frontend_school

Связь: @jellyjail
Download Telegram
Какое значение будет присвоено переменной result при выполнении кода, представленного на изображении выше?
Anonymous Quiz
60%
[1, 2, 3, 4, 5, 6]
24%
[1, 2, 3]
6%
[1, 2, 3, 4]
10%
[4, 5, 6]
@frontend_school #статья #HTML

10 полезных советов для веб-разработчиков по загрузке файлов в HTML

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

Читать статью
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Форма ввода пароля

Посмотрите какая интересная форма для ввода пароля! Здесь и приятная анимация, и проверка на секьюрность имеется благодаря наличию регулярок. Полезно к изучению всем, особенно тем, кто хочет разобраться с SVG и регулярными выражениями.

CodePen
@frontend_school #статья #CSS

Динамические размеры липкой боковой панели с HTML и CSS

Cоздание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.

Читать статью
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Форма ввода электронной почты

У этой формы не только приятный дизайн, но ещё и валидация текста. То есть, если вы напишете что-то непохожее на email, то форма даст вам об этом знать.

CodePen
@frontend_school #видео #JavaScript

Как ускорить JavaScript разработку с Quokka

Quokka — это расширение для редакторов кода и IDE, которое помогает работать с JS. Например, с помощью него можно сразу посмотреть каким будет результат выполнения части кода прямо в редакторе. Помимо этого у него достаточно много возможностей. Подробнее вам расскажут в видео.

Смотреть видео
Иллюстрированная шпаргалка по Flexbox CSS

Сразу заметим, что статья на английском языке. Но! Текста там немного, по большей части там картинки с понятной визуализацией работы различных свойств Flexbox. А ещё они очень милые и легко запоминающиеся! Поэтому сохраняйте в закладки, чтобы всегда были под рукой.

Читать статью

@frontend_school #статья #CSS #en
​​Что нового ожидать в ES2021

Летом должна выйти новая версия нашего любимого JavaScript. Обещают много новых возможностей. Если вы сейчас в процессе его изучения или уже активно им пользуетесь, то ознакомиться с этой статьёй, чтобы быть во всеоружии.

Читать статью

@frontend_school #статья #JavaScript
​​Вы можете создавать эти элементы, не используя JavaScript

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

Читать статью

@frontend_school #статья #JavaScript
​​Что такое @font-face на самом деле

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

Читать статью

@frontend_school #CSS
​​9 полезных плагинов VS Code для вёрстки

VS Code на сегодняшний день один из самых популярных редакторов кода не только в фронтенде, но и в других областях программирования. Но нас, разумеется, больше интересует фронтенд и, в частности, вёрстка.

В этой статье вам расскажут о 9 плагинах, которые вам могут помочь верстать проще и быстрее.

Читать статью

@frontend_school #статья
Нас таким не напугать. Правда ведь?

@frontend_school #юмор
​​Как заменить все одинаковые подстроки в строке на JavaScript

Представим, что у вас есть строка var str = "Test abc test test abc test test test abc test test abc" и вам нужно заменить все подстроки abc. Метод replace не подойдёт, ведь он заменит только первую подстроку. Как тогда это сделать? Расскажут и покажут в этой статье.

Читать статью

@frontend_school #статья #JavaScript
​​Забудьте про div, семантика спасёт интернет

Существует два типа верстальщиков — те, кто используют только div и те, кто использует семантическую вёрстку. Сразу скажем, вторые круче! И в этой статье вы узнаете почему.

Читать статью

@frontend_school #статья #HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Когда пытаешься следовать туториалу.

Кстати, сегодня выложим интересный туториал для любителей игр.

@frontend_school #юмор
Flappy Bird и Doodle Jump на JavaScript

Помните эти некогда популярные игры? Кто-то, возможно, в них играет до сих пор. В этом видео автор пошагово вам покажет, как реализовать такие игры на JavaScript.

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

Смотреть видео

@frontend_school #видео #JavaScript #en
​​Что Такое JSON?

JSON (JavaScript Object Notation) — это формат для хранения и обмена информацией, доступной для чтения человеком. Он очень часто используется во фронтенде, если только его не заменяет какой-нибудь XML или YAML, но о них в другой раз.

В этой статье статье вы узнаете как использовать JSON и зачем он вам может понадобиться.

Читать статью

@frontend_school #статья #JSON
Есть тут любители светлых тем? Признавайтесь!

@frontend_school #юмор
​​Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году

Сегодня недостаточно знать HTML, CSS и JavaScript, чтобы считаться хорошим фронтенд-разработчиком. Существует множество инструментов, которые упрощают создание фронтенда и которые нужно знать, чтобы быть востребованным специалистом.

В этой статье разобрали несколько инструментов и направлений, в которых необходимо разбираться в 2021 году.

Читать статью

@frontend_school #статья