@frontend_school #полезное

CSSmatic

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

@frontend_school #полезное

​Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку последние являются замещаемыми (replaced) элементами. Суть в том, что такие элементы замещаются содержанием, указанным в них. Например на месте <img> появляется изображение из атрибута src. А вот ::before и ::after дословно означают before и after content. У замещаемых элементов нет контента, поэтому псевдоэлементы с ними не работают.

@frontend_school #полезное

В дополнение к сегодняшней статье представляю вашему вниманию шпаргалку по приоритетам загрузки JavaScript в Chrome. Эта шпаргалка поможет вам лучше понимать как отрабатывается код в браузере. Подробнее по ссылке ниже.

Обращаю внимание, что статья на английском!

@frontend_school #полезное

Как быстро создать Bootstrap-сайт для бизнеса: 6 полезных инструментов

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

@frontend_school #полезное

Опознаём плохие условия работы по текстам вакансий

Рано или поздно, но наступает этап, когда ты готов применять свои знания на практике и монетизировать их. Но как не наткнуться на вакансию, которая превратит твою жизнь в пытку и нежелание работать с тем, чему ты так долго учился? Эта статья поможет вам ещё на стадии поиска работы отсеять плохие вакансии. Ну и потом всегда забавно почитать какую ерунду пишут не разбирающиеся в вопросе HR'ы при поиске кандидатов. Приятного чтения!

@frontend_school #полезное

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

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

@frontend_school #полезное

6 лучших браузеров для разработчиков в 2020 году

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

@frontend_school #полезное

Build a Better Mobile Input

С помощью данного инструмента можно наглядно посмотреть как будет вести себя тег input в мобильной версии сайта.

@frontend_school #полезное #Git

Learning Git Branching

Сегодня хочу представить вашему вниманию интерактивный сервис, который поможет вам научиться пользоваться Git.

@frontend_school #полезное

Стильные индикаторы выполнения на CSS

В этом руководстве авторы объясняют, как создать простые индикаторы выполнения процесса без использования сложных скриптов. Градиенты, полоски, эффектные отблески: вот это всё сделано с помощью CSS-техник.

@frontend_school #полезное

CSSPlay

На сайте CSSPlay представлено огромное множество любопытных приёмов вёрстки, причём большинство CSS-стилей можно использовать без разрешения автора. Но чтобы ими воспользоваться вам придётся залезть в меню разработчиков — такова политика местной партии.

@frontend_school #навигация

Навигация на канале

Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:

#интересное - интересные проекты и заметки.

#статья - полезные статьи.

#викторина - ежедневные викторины.

#викторина_недели - еженедельные викторины с несколькими вопросами на время.

#задача - задачи на различные темы и по разным технологиям.

#ответ_на_задачу - способ решения ранее заданной задачи.

#туториал - туториалы и пошаговые инструкции применения различных технологий.

#видео - видео с лекциями и уроками.

#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.

#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.

#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.

Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.

@frontend_school #полезное

Прижатый футер

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

Существуют разные способы прижать подвал:
- абсолютное позиционирование 
- минимальная высота контента
- табличная верстка
- css flex
- css grid

Сегодня будут рассмотрены два варианта, как наиболее актуальные - с помощью flex и с помощью grid.
В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

@frontend_school #полезное

CSSBattle

Полезный сайт для тренировки навыков вёрстки. Ваша задача сверстать рисунок, используя только html и css. Размер рисунков фиксированный - 400х300.

С помощью этого сервиса вы сможете играючи прокачать свой скилл и показать другим игрокам чего вы стоите!

Перейти

@frontend_school #полезное

CSS filter Editor

Этот codepen-проект поможет вам правильно подобрать и настроить фильтры для изображения. Если вам лень самим подбирать, то вы можете воспользоваться пресетами и посмотреть как они будут выглядеть.

CodePen