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

Анимированное оформление заказа

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

@frontend_school #статья #JavaScript

Руководство по обработке ошибок в JavaScript

Сообщения об ошибках помогают нам улучшать код, они позволяют сообщать пользователям наших проектов о том, что что-то пошло не так, и, возможно, рассказывают пользователям о том, как нужно вести себя для того, чтобы ошибок больше не возникало.
Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части, поэтому рекомендую его читать с перерывом на переваривание информации. Приятного чтения!

@frontend_school #викторина

@frontend_school #ответ_на_задачу

По ссылке ниже представлено решение задачи №28.

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

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

@frontend_school #юмор

Пятничное видео вам в ленту 😉

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

Чекбоксы пиццы

Стили написаны на SCSS. При переключении происходит CSS анимация. Отлично подойдёт в качестве наглядного пособия для изучения 😉

@frontend_school #статья #CSS

Современный CSS для динозавров

— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта

Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Приятного чтения!

@frontend_school #викторина

@frontend_school #полезное

Топ-10 расширений VSCode в 2020 году

Visual Studio Code от Microsoft это один из самых популярных редакторов кода. Он и сам по себе обладает целым рядом достоинств, но помимо этого позволяет расширять функционал и таким образом увеличивать продуктивность. VSCode это результат работы Microsoft в сфере открытого исходного кода: редактор в готовой сборке доступен бесплатно, а его исходный код открыт.
Расширяемость за счет плагинов и расширений — одна из причин популярности VSCode. Благодаря этим расширениям можно существенно улучшить базовый функционал редактора и сделать процесс разработки более эффективным и удобным.

А каким редактором кода пользуетесь вы?

VSCode - 97
👍👍👍👍👍👍👍👍 69%
Atom - 5
👍 4%
Sublime Text - 19
👍👍 13%
Brackets - 4
👍 3%
Другой (напишу в чате) - 16
👍👍 11%
👥 141 человек уже проголосовал.

@frontend_school #юмор

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

Бутылка острого соуса

Эта бутылка ничего не умеет. Это просто бутылка. Но примечательно в ней то, что она сделана из одного-единственного блока <div> и CSS. Рекомендую изучить всем, кто хочет лучше научиться работать со стилями и найти интересные приёмы.

@frontend_school #статья #CSS

7 примеров использования CSS переменных

Кастомные свойства (также известные как CSS переменные) позволяют нам хранить значения различных CSS свойств для их дальнейшего переиспользования. Если вы сравнительно недавно про них узнали, то возможно вы удивитесь тому, насколько они круче переменных в известных CSS препроцессорах. В этой статье собраны несколько примеров их использования.

@frontend_school #задача №29

Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в Star Wars. Ну что, справитесь? 😉

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

@frontend_school #викторина_недели

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

А вот топ-10 прошлой викторины:
🥇 @olehi – 6 (1 мин 47 сек)
🥈 @Viktoriia_Maxy – 5 (56.7 сек)
🥉 @rat6666 – 5 (1 мин 8 сек)
 4. @Anton_Kiilo – 5 (1 мин 21 сек)
 5. @walerong – 5 (2 мин 9 сек)
 6. @driver055 – 4 (1 мин 9 сек)
 7. @disheg – 4 (1 мин 22 сек)
 8. @Sash_Lesotho – 4 (1 мин 49 сек)
 9. @Luidgy_K – 3 (1 мин)
 10. @zhenina_nadin – 3 (1 мин 7 сек)

@frontend_school #юмор

"- А сколько будет стоить сделать сайт, как гугл? Тысяч 5? Там же всего одна страничка!"

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

Фабрика панд

Интерактивная фабрика панд выполнена на стандартном стеке - HTML, CSS, JavaScript.

@frontend_school #статья #CSS

Полное руководство по медиа-запросам в CSS

Без медиа-запросов невозможно представить сейчас полностью адаптивный сайт. В данной статье рассматриваются возможности этих запросов, их различные недостатки, а также нюансы при работе. Статья на английском языке, поэтому рекомендую вам изучать её постепенно для лучшего усваивания информации и для практики английского языка, без которого в IT никак. Приятного чтения!

@frontend_school #викторина