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
@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №33 «Пятница 13-е».

Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.

Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
@frontend_school #юмор

Изучаем машинное обучение за 30 минут бесплатно и без смс.
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Кошачье пианино

Пианино не только интерактивно, но ещё и полностью функционально - оно воспроизводит звук в зависимости от нажатой клавиши. Реализовано на HTML, SCSS и JavaScript.
@frontend_school #статья #JavaScript

Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src

С добавлением в JavaScript ES-модулей появилось не менее 24 способов подгрузить скрипты: с атрибутом src и без него; с async или без; defer или нет; type=module и nomodule. Все они немножко отличаются друг от друга.
В этой статье сравним, как встроенные в HTML тэги <script> обрабатываются в зависимости от набора атрибутов.
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
13%
1 2 2
54%
0 2 2
4%
0 2 3
20%
1 2 0
9%
0 2 0
@frontend_school #задача №34

Сортируем поезда

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

Условие:
Необходимо написать функцию sortTrains, которая будет принимать массив чисел и возвращать его отсортированным следующим образом - в массиве сортируются по возрастанию нечётные числа, а чётные при этом остаются на своих местах, не меняя при этом свой индекс в массиве.

Например:
sortTrains([5, 3, 2, 8, 1, 4]) // [1, 3, 2, 8, 5, 4]

Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!

И не стесняйтесь задавать вопросы в чате, если что-то непонятно!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

26 дней в Перу

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

Чего я не знал о CSS, а стоило бы

«Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность.
Когда пришла пора CSS, мой подход к обучению не изменился. Но сейчас мне действительно жаль, что тогда я не уделил CSS должного внимания и упустил из виду столько принципиально важных вещей. Я расскажу о том, о чём мне следовало бы узнать раньше.»
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
49%
Ты взрослый!
13%
Ты по-прежнему взрослый.
21%
Хм... Кажется, у тебя нет возраста.
17%
undefined
@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №34 «Сортируем поезда».

Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.

Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Карусель-плёнка

Автор использует популярную библиотеку Three.js.
Крути колёсико и смотри, как движется плёнка.
@frontend_school #статья #JavaScript

Event Bubbling и Event Capturing в Javascript

Event Bubbling и Event Capturing — это две фазы распространения событий в Javascript. Поток событий — это в основном порядок, в котором события обрабатываются на веб-странице. В Javascript поток событий происходит в три этапа, об этом в статье.
@frontend_school #полезное

CSSPlay

На сайте CSSPlay представлено огромное множество любопытных приёмов вёрстки, причём большинство CSS-стилей можно использовать без разрешения автора. Но чтобы ими воспользоваться вам придётся залезть в меню разработчиков — такова политика местной партии.