@frontend_school #викторина_недели
Это 12-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.
А вот топ-10 прошлой викторины:
🥇 @redd08 – 7 (49 сек)
🥈 @nikolay696 – 6 (55.7 сек)
🥉 @Elena_mariupol – 6 (59.8 сек)
4. @Anton_Kiylo – 6 (1 мин 17 сек)
5. Kseniia – 5 (49.5 сек)
6. @AlexeyKii – 5 (39.8 сек)
7. @Marianakukhar – 5 (1 мин 1 сек)
8. @maxguitarman – 5 (1 мин 16 сек)
9. Azat R – 4 (1 мин 12 сек)
10. @noachase – 4 (1 мин 14 сек)
Проверьте свои навыки и знания!
Это 12-я еженедельная викторина, основанная на вопросах, публиковавшихся в течении недели. Вы можете закрепить, полученные знания, ответив на несколько вопросов. Для ответа на каждый вопрос даётся 30 секунд.
А вот топ-10 прошлой викторины:
🥇 @redd08 – 7 (49 сек)
🥈 @nikolay696 – 6 (55.7 сек)
🥉 @Elena_mariupol – 6 (59.8 сек)
4. @Anton_Kiylo – 6 (1 мин 17 сек)
5. Kseniia – 5 (49.5 сек)
6. @AlexeyKii – 5 (39.8 сек)
7. @Marianakukhar – 5 (1 мин 1 сек)
8. @maxguitarman – 5 (1 мин 16 сек)
9. Azat R – 4 (1 мин 12 сек)
10. @noachase – 4 (1 мин 14 сек)
Проверьте свои навыки и знания!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Выпадающий список
Вот такой выпадающий список вы можете сделать самостоятельно, используя JQuery. Можно использовать и в меню, и в других элементах сайта.
Выпадающий список
Вот такой выпадающий список вы можете сделать самостоятельно, используя JQuery. Можно использовать и в меню, и в других элементах сайта.
@frontend_school #задача №40
Ищем опечатки
Не так страшен чёрт, как его малюют и не так страшны опечатки, как их несвоевременное обнаружение.
Условие:
Необходимо написать функцию, которая принимает в качестве аргументов две строки, сравнивает их и возвращает true или false в том случае, если вторая строка отличается от первой одним символом или лишним символом в начале или конце строки.
Примеры:
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
Ищем опечатки
Не так страшен чёрт, как его малюют и не так страшны опечатки, как их несвоевременное обнаружение.
Условие:
Необходимо написать функцию, которая принимает в качестве аргументов две строки, сравнивает их и возвращает true или false в том случае, если вторая строка отличается от первой одним символом или лишним символом в начале или конце строки.
Примеры:
mispelled('versed', 'xersed');
// returns truemispelled('versed', 'applb');
// returns falsemispelled('versed', 'v5rsed');
// returns truemispelled('1versed', 'versed');
// returns trueПрисылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
И не стесняйтесь задавать вопрос, если зашли в тупик!
@frontend_school #статья #HTML #CSS
Краш-тест вёрстки
Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.
Краш-тест вёрстки
Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
43%
[0, 1, 2, 3, 1, 2]
8%
[6, 1, 2]
4%
[1, 2, 6]
45%
[1, 2, 0, 1, 2, 3]
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Драм машина
Полноценная, работающая и издающая звуки драм машина. Приятный дизайн и несложная реализация.
Драм машина
Полноценная, работающая и издающая звуки драм машина. Приятный дизайн и несложная реализация.
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
32%
["J", "o", "h", "n"]
41%
["John"]
16%
[[], "John"]
11%
[["J", "o", "h", "n"]]
@frontend_school #ответ_на_задачу
По ссылке ниже представлено решение задачи №40 «Ищем опечатки».
Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.
Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
По ссылке ниже представлено решение задачи №40 «Ищем опечатки».
Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.
Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Почти Minecraft
Сделан с помощью языка разметки Haml и SCSS, JavaScript тут не используется.
Почему "почти"? Ну, тут можно менять блоки, вращать объект и менять положение блоков, но вот монстров бить не выйдет 🤷♂️
В любом случае результат классный.
Почти Minecraft
Сделан с помощью языка разметки Haml и SCSS, JavaScript тут не используется.
Почему "почти"? Ну, тут можно менять блоки, вращать объект и менять положение блоков, но вот монстров бить не выйдет 🤷♂️
В любом случае результат классный.
@frontend_school #статья #CSS
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
Что такое CSS-спрайт?
Anonymous Quiz
4%
Изображение, отображающееся на вкладке сайте слева от имени вкладки
9%
Изображение с низкой детализацией, используемое для снижения нагрузки на браузер
61%
Несколько изображений, объединённых в одно, для уменьшения количества запросов на сервер
25%
Анимация, создаваемая посредством возможностей CSS