Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.26K 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 #интересное

Тыква-загрузчик

Анимация сделана на HTML и CSS, сама тыква представляет из себя svg-картинку.
@frontend_school #статья #JavaScript

Метод создания DRAG and DROP эффекта

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.
@frontend_school #навигация

Навигация на канале

Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:

#интересное - интересные проекты и заметки.

#статья - полезные статьи.

#викторина - ежедневные викторины.

#викторина_недели - еженедельные викторины с несколькими вопросами на время.

#задача - задачи на различные темы и по разным технологиям.

#ответ_на_задачу - способ решения ранее заданной задачи.

#туториал - туториалы и пошаговые инструкции применения различных технологий.

#видео - видео с лекциями и уроками.

#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.

#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.

#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.

Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.
@frontend_school #викторина_недели

Это 10-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.

А вот топ-10 прошлой викторины:
🥇 @alex_r1036 (1 мин 7 сек)
🥈 @Viktoriia_Maxy6 (1 мин 25 сек)
🥉 @natalia_koshevaya5 (1 мин 12 сек)
 4. @panamanap5 (1 мин 21 сек)
 5. Александр Владимирович – 5 (2 мин 24 сек)
 6. @eiforiaa14 (59.2 сек)
 7. @Camrado4 (1 мин 10 сек)
 8. @hamatullin4 (1 мин 23 сек)
 9. @AlexeyKii4 (1 мин 11 сек)
 10. @driver0554 (1 мин 37 сек)

Проверьте свои навыки и знания!
@frontend_school #интересное

Игра на чистом CSS

Очень интересный проект, в котором игра реализована без использования JavaScript - только HTML и CSS.
@frontend_school #статья

Советы начинающим фрилансерам

Эта статья написана человеком, который уже работает во фрилансе. У него уже есть чёткое и ясное представление о работе в этой сфере. Поэтому эти несколько советов очень важны для тех, кто только собирается уйти на вольные хлеба.
Какое имя у корневого объекта в браузерном окружении JavaScript?
Anonymous Quiz
18%
object
11%
root
7%
global
49%
window
15%
document
@frontend_school #задача №35

Убить Ахиллеса

Число Ахиллеса - это такое положительное целое число, которое не может быть представлено как m в степени k, но может как m^k • n^a, где k и a больше 1. Например, 108 - число Ахиллеса. Его разложение на простые множители равно 2^2 · 3^3, и, следовательно, его простые множители равны 2 и 3. Оба 2^2 = 4 и 3^2 = 9 являются делителями 108. Однако 108 не может быть представлено как m^k, где m и k положительные целые числа > 1, поэтому 108 - число Ахиллеса. Подробнее тут.

Условие:
Написать функцию, которая принимает в качестве аргумента массив чисел и возвращает массив уже с убранными числами Ахиллеса из массива.

Например:
array = [108, 99, 100, 64, 72] //
array = [99, 100, 64]

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

И не стесняйтесь задавать вопрос, если зашли в тупик!
@frontend_school #юмор

А пока будешь рассказывать почини холодильник.
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Дом мечты

Данный проект позволяет выбрать сколько комнат будет в доме и сразу показывает как он будет выглядеть.
@frontend_school #статья

Фриланс для программистов: подборка лучших сайтов

Вчера мы предложили вам ознакомиться с советами начинающим фрилансерам - как вести себя и что делать для успешной удалённой работы. Сегодняшняя статья посвящена конкретным сервисам, где вы можете найти интересный вам проект для реализации своих возможностей и заработка. Не fl.ru единым, как говорится.
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
33%
number
33%
array
19%
object
7%
NaN
8%
undefined
@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №35 «Убить Ахиллеса».

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

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

2048

Реализация известной многим игры с помощью JavaScript. Управление осуществляется стрелками.
@frontend_school #статья

Разработка анимированных фавиконов

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