This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Анимированное оформление заказа
Довольно необычный способ реализации, учитывая, что здесь в качестве языка разметки используется не HTML, а HAML. Вдобавок ко всему стили написаны с использование препроцессора SCSS. Проект интересен тем, кто уже изучает препроцессоры, как наглядное пособие. Попробуйте реализовать похожий проект для более точного понимания сути препроцессоров.
Анимированное оформление заказа
Довольно необычный способ реализации, учитывая, что здесь в качестве языка разметки используется не HTML, а HAML. Вдобавок ко всему стили написаны с использование препроцессора SCSS. Проект интересен тем, кто уже изучает препроцессоры, как наглядное пособие. Попробуйте реализовать похожий проект для более точного понимания сути препроцессоров.
@frontend_school #статья #JavaScript
Руководство по обработке ошибок в JavaScript
Сообщения об ошибках помогают нам улучшать код, они позволяют сообщать пользователям наших проектов о том, что что-то пошло не так, и, возможно, рассказывают пользователям о том, как нужно вести себя для того, чтобы ошибок больше не возникало.
Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части, поэтому рекомендую его читать с перерывом на переваривание информации. Приятного чтения!
Руководство по обработке ошибок в JavaScript
Сообщения об ошибках помогают нам улучшать код, они позволяют сообщать пользователям наших проектов о том, что что-то пошло не так, и, возможно, рассказывают пользователям о том, как нужно вести себя для того, чтобы ошибок больше не возникало.
Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части, поэтому рекомендую его читать с перерывом на переваривание информации. Приятного чтения!
Что будет выведено в консоль при выполнении кода, представленного на изображении выше?
Anonymous Quiz
33%
false true
32%
true false
21%
false false
14%
true true
@frontend_school #ответ_на_задачу
По ссылке ниже представлено решение задачи №28.
Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.
Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
По ссылке ниже представлено решение задачи №28.
Обращаю ваше внимание, что это только один из возможных вариантов решения. И если вы решили иначе, то это не значит, что ваш вариант неправильный.
Если вы не согласны с подобным решением или считаете, что ваш вариант лучше - делитесь ими в комментариях! Любые предложения приветствуются и помогают вам и другим подписчикам лучше понимать код!
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Чекбоксы пиццы
Стили написаны на SCSS. При переключении происходит CSS анимация. Отлично подойдёт в качестве наглядного пособия для изучения 😉
Чекбоксы пиццы
Стили написаны на SCSS. При переключении происходит CSS анимация. Отлично подойдёт в качестве наглядного пособия для изучения 😉
@frontend_school #статья #CSS
Современный CSS для динозавров
— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта
Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Приятного чтения!
Современный CSS для динозавров
— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта
Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Приятного чтения!
Какое значение будет присвоено переменной result?
Anonymous Quiz
37%
number
18%
ReferenceError
4%
95
3%
null
38%
undefined
@frontend_school #полезное
Топ-10 расширений VSCode в 2020 году
Visual Studio Code от Microsoft это один из самых популярных редакторов кода. Он и сам по себе обладает целым рядом достоинств, но помимо этого позволяет расширять функционал и таким образом увеличивать продуктивность. VSCode это результат работы Microsoft в сфере открытого исходного кода: редактор в готовой сборке доступен бесплатно, а его исходный код открыт.
Расширяемость за счет плагинов и расширений — одна из причин популярности VSCode. Благодаря этим расширениям можно существенно улучшить базовый функционал редактора и сделать процесс разработки более эффективным и удобным.
Топ-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 человек уже проголосовал.
VSCode - 97
👍👍👍👍👍👍👍👍 69%
Atom - 5
👍 4%
Sublime Text - 19
👍👍 13%
Brackets - 4
👍 3%
Другой (напишу в чате) - 16
👍👍 11%
👥 141 человек уже проголосовал.
@frontend_school #интересное
Бутылка острого соуса
Эта бутылка ничего не умеет. Это просто бутылка. Но примечательно в ней то, что она сделана из одного-единственного блока <div> и CSS. Рекомендую изучить всем, кто хочет лучше научиться работать со стилями и найти интересные приёмы.
Бутылка острого соуса
Эта бутылка ничего не умеет. Это просто бутылка. Но примечательно в ней то, что она сделана из одного-единственного блока <div> и CSS. Рекомендую изучить всем, кто хочет лучше научиться работать со стилями и найти интересные приёмы.
@frontend_school #статья #CSS
7 примеров использования CSS переменных
Кастомные свойства (также известные как CSS переменные) позволяют нам хранить значения различных CSS свойств для их дальнейшего переиспользования. Если вы сравнительно недавно про них узнали, то возможно вы удивитесь тому, насколько они круче переменных в известных CSS препроцессорах. В этой статье собраны несколько примеров их использования.
7 примеров использования CSS переменных
Кастомные свойства (также известные как CSS переменные) позволяют нам хранить значения различных CSS свойств для их дальнейшего переиспользования. Если вы сравнительно недавно про них узнали, то возможно вы удивитесь тому, насколько они круче переменных в известных CSS препроцессорах. В этой статье собраны несколько примеров их использования.
@frontend_school #задача №29
Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в Star Wars. Ну что, справитесь? 😉
Присылайте свои варианты решения в чат! Если решение длинное, то разместите его в онлайн-редакторе, например jsbin или codepen и присылайте ссылку на результат!
Сегодня предлагаю вашему вниманию задачу на вёрстку и стилизацию. Необходимо сделать так, чтобы текст был со смещением, как на картинке выше. Будет ещё круче, если сможете сделать его, как бы уходящим вдаль, как в 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 сек)
Это 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? Там же всего одна страничка!"
"- А сколько будет стоить сделать сайт, как гугл? Тысяч 5? Там же всего одна страничка!"
This media is not supported in your browser
VIEW IN TELEGRAM
@frontend_school #интересное
Фабрика панд
Интерактивная фабрика панд выполнена на стандартном стеке - HTML, CSS, JavaScript.
Фабрика панд
Интерактивная фабрика панд выполнена на стандартном стеке - HTML, CSS, JavaScript.
@frontend_school #статья #CSS
Полное руководство по медиа-запросам в CSS
Без медиа-запросов невозможно представить сейчас полностью адаптивный сайт. В данной статье рассматриваются возможности этих запросов, их различные недостатки, а также нюансы при работе. Статья на английском языке, поэтому рекомендую вам изучать её постепенно для лучшего усваивания информации и для практики английского языка, без которого в IT никак. Приятного чтения!
Полное руководство по медиа-запросам в CSS
Без медиа-запросов невозможно представить сейчас полностью адаптивный сайт. В данной статье рассматриваются возможности этих запросов, их различные недостатки, а также нюансы при работе. Статья на английском языке, поэтому рекомендую вам изучать её постепенно для лучшего усваивания информации и для практики английского языка, без которого в IT никак. Приятного чтения!