Иллюстрированная шпаргалка по Flexbox CSS

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

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

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

​​Что нового ожидать в ES2021

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

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

@frontend_school #статья #JavaScript

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

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

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

@frontend_school #статья #JavaScript

Мотивации пост

@frontend_school #юмор

​​Что такое @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

Но без него было бы тяжело

@frontend_school #юмор

Когда пытаешься следовать туториалу.

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

@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 #статья

Срочно! Как поставить Emmet на бумагу?!

@frontend_School #юмор

​​DevTools для «чайников»

Данная статья, прежде всего, обращена к тем, кто еще находится в самом начале своего пути к программистскому Олимпу.

Здесь вы сможете разобраться в том, что же такое DevTools, какими возможностями обладает, а также узнаете некоторые фишки, которые выделят вас на фоне обычных интернет-пользователей.

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

@frontend_school #статья

3D-самолёт

Интересный проект на CodePen, где автор создал анимацию полёта самолёта. Вы, кстати, можете менять направление полёта простым движением мышки, а клик переключает проект в ночной режим. Из интересного тут библиотека GSAP, а также использование препроцессоров Pug для HTML и Stylus для CSS.

CodePen

@frontend_school #интересное

​​Малоизвестные, но крутые атрибуты в HTML

Все знаю такие HTML-атрибуты, как src, href и прочие, которые применяет каждый фронтенд-разработчик. Но помимо них существуют ещё несколько любопытных, которые не так часто применяются и не так известны, как остальные. В этой статье вы узнаете о некоторых из них.

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

@frontend_school #статья #HTML

Кнопка на Vue

Отличный пример работы реактивности во Vue — симпатичная кнопка с приятной анимацией. Можете посмотреть код и даже добавить его в свой проект.

CodePen

@frontend_school #интересное

​​БЭМ — соглашение по именованию в CSS

Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.

В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.

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

@frontend_school #статья #CSS