Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
1.29K subscribers
524 photos
64 videos
1 file
212 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 #интересное

Диммерный выключатель

Сегодня предлагаем вам ознакомиться с кодом следующего проекта, а именно диммерного выключателя света. Каждый раз перезагружая страницу вы получите разный цвет освещения, а поворот выключателя меняет степень освещения. Посмотрите, как он реализован с использование Pug - Stylus - JS.

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Дизайнерская чаша

Чаша, может, и не блещет дизайном, но зато она может помочь вам в создании уникального и приятного дизайна вашего сайта! С помощью HTML-препроцессора Pug, CSS-препроцессора Stylus, JS библиотеки Jquery и толики магии эта чаша по клику выдаст вам пару цветов.

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Kill The King

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

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Диско-куб

Диско-шар уже не модно! Теперь в моде диско-куб. Приятный дизайн, забавная анимация и простая реализация - что ещё нужно для качественного CodePen проекта?! Выполнен на HTML и CSS с использованием препроцессоров Pug и Stylus соответственно.

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Лабиринт

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

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

3D Pokedex

Выполненный в виде 3D объекта покедекс из вселенной Pokemon. На него можно не только смотреть, но и открыть и посмотреть, что внутри!

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Monument Valley 2

Автор этого проекта перенёс анимацию популярной игры в HTML и CSS. Здесь нет JS, поэтому только смотри, но не трогай. Проект также интересен с точки зрения реализации.

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

Мини-квест «Найди подарки»

Скоро Новый год и на CodePen начали появляться тематические проекты. Пройдите этот несложный квест и найди, спрятанные подарки. Приятная графика и код, как дополнительный бонус 😉

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное #Vue

Калейдоскоп

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

CodePen
Screen Recording 2021-01-16 at 22.13.51.mov
2.3 MB
@frontend_school #интересное

Внимательный мишка

Сегодня предлагаем вашему вниманию CodePen проект, который показывает, как вы можете настроить отображение курсора на странице, а также, как можно создать эффект слежения за ним.

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

Спичка в микроволновке

Вы знаете, как ведёт себя зажённая спичка в микроволной печи? Очень интересный эффект! В этом CodePen проекте вы можете наглядно увидеть, что происходит в случае горения спички в работающей микроволновке. Так что, если вам интересно понаблюдать этот эффект или хотите посмотреть, как реализован сам проект, то, как обычно, ссылка ниже!

CodePen

P.S. Пожалуйста, не повторяйте этот эксперимент дома! На YouTube полно роликов с этим эффектом, если вам не хватило того, что предлагает этот проект 😊
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Форма ввода пароля

Посмотрите какая интересная форма для ввода пароля! Здесь и приятная анимация, и проверка на секьюрность имеется благодаря наличию регулярок. Полезно к изучению всем, особенно тем, кто хочет разобраться с SVG и регулярными выражениями.

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное

Форма ввода электронной почты

У этой формы не только приятный дизайн, но ещё и валидация текста. То есть, если вы напишете что-то непохожее на email, то форма даст вам об этом знать.

CodePen
This media is not supported in your browser
VIEW IN TELEGRAM
3D-самолёт

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

CodePen

@frontend_school #интересное
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка на Vue

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

CodePen

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