@frontend_school #статья #HTML #CSS

10 современных раскладок в одну строку CSS-кода

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

@frontend_school #статья #CSS

Псевдоэлементы, которых не может быть

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

@frontend_school #статья #CSS

Вредные советы по CSS

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

@frontend_school #статья #CSS

Чего я не знал о CSS, а стоило бы

«Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность.
Когда пришла пора CSS, мой подход к обучению не изменился. Но сейчас мне действительно жаль, что тогда я не уделил CSS должного внимания и упустил из виду столько принципиально важных вещей. Я расскажу о том, о чём мне следовало бы узнать раньше.»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@frontend_school #статья #CSS

10 полезных инструментов для создания роскошного CSS

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

@frontend_school #статья #HTML #CSS

Краш-тест вёрстки

Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.

@frontend_school #статья #CSS

CSS-спрайты: что это, почему это полезно и как их использовать?

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

@frontend_school #статья #CSS

Вёрстка на Grid в CSS. Полное руководство и справочник

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

Читать статью

@frontend_school #статья #CSS

5 приемов CSS3 с псевдоэлементами ::before и ::after

Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.
Мы все знаем, что эти классы и элементы используются как часть CSS3. Данные псевдоэлементы были определены в CSS3.
В этой статье вы узнаете как можно использоваться эти псевдоэлементы.

Читать статью

@frontend_school #видео #CSS

​Видеокурс по CSS Flexbox

Чтобы лучше понять материал, его нужно увидеть.
В этом видеокурсе вы сможете разобраться в том, как пользоваться Flexbox, чем он отличается от Grid многое другое.

Смотреть видео

@frontend_school #статья #CSS

​Режимы наложения в CSS

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

Читать статью

@frontend_school #статья #CSS

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Эта статья примечательна тем, что в ней все примеры выполнены в виде gif. Это позволяет более детально взглянуть на материал и лучше его усвоить.

Читать статью

@frontend_school #статья #CSS

Динамические размеры липкой боковой панели с HTML и CSS

Cоздание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.

Читать статью