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 #интересное

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 #интересное