Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.2K 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
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 #статья
Срочно! Как поставить Emmet на бумагу?!

@frontend_School #юмор
​​DevTools для «чайников»

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

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

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

@frontend_school #статья
This media is not supported in your browser
VIEW IN TELEGRAM
3D-самолёт

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

CodePen

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

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

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

@frontend_school #статья #HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка на Vue

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

CodePen

@frontend_school #интересное
​​БЭМ — соглашение по именованию в CSS

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

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

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

@frontend_school #статья #CSS
То, ради чего стоит стать фронтенд-разработчиком 😄

@frontend_school #юмор
10 полезных инструментов для фронтенд-разработчика

Разработчикам важно использовать ресурсы и инструменты, облегчающие жизнь и повышающие продуктивность при работе над проектами или изучении чего-то нового.

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

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

@frontend_school #статья
​​Что такое callback-функция в JavaScript?

В процессе обучения языку JavaScript каждый сталкивается с коллбеками. Это не самая простая тема и без действительно простого пошагового объяснения разобраться в ней может быть очень трудно.

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

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

@frontend_school #статья #JavaScript
Frontend_thoughts | Про фронтенд. Прост

Frontend_thoughts — канал о разработке, тимлидстве и саморазвитии. Здесь делятся полезными материалами и обмениваются мнениями о frontend-разработке.

На канале вы найдёте много всего интересного, например:
➡️ Современные возможности JS
➡️ Велосипеды. Когда стоит писать свое решение
➡️ Возраст в IT. Когда уже поздно начинать?

Подписывайтесь: @frontend_thoughts
​​Тернарный оператор в JavaScript: за, против, подводные камни

Все мы хотим писать чистый и краткий код. Но порой между этими характеристиками приходится выбирать. В целом принято считать, что ясность важнее краткости.

С учетом вышесказанного становится ясно, почему многие люди относятся к тернарному оператору с некоторой опаской. Да, конечно, он более краткий, чем if-предложение. Но вместе с тем тернарные операторы легко могут превратить код в нечитаемую абракадабру.

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

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

@frontend_school #статья #JavaScript
​​CSS-переменные: о чем вам не говорят

CSS-переменные — отличная вещь, но всё ли вы о них знаете? В этой статье вы узнаете о некоторых особенностях CSS-переменных, о которых многие не говорят. После этого вы уже не сможете воспринимать их, как прежде, но при этом, возможно, найдёте им новое применение.

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

@frontend_school #статья #CSS
​​Обработка текста поверх изображений в CSS

При вёрстке сайта часто возникает необходимость разместить текст поверх какого-то изображения. В таком случае текст может сливаться с частью изображения, если стили плохо прописаны. Чтобы сделать текст более читаемым, а общий вид привлекательным, существуют различные способы. Вот об этих способах вы узнаете в сегодняшней статье.

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

@frontend_school #статья #CSS
Налейтай, народ! Не вакансия, а мечта!

@frontend_school #юмор
​​Что лучше использовать: ссылки или кнопки

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

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

@frontend_school #статья #HTML