Блог Web-разработчик

Подготовка документа для анимации -- важный этап, к которому нельзя относиться пренебрежительно, так как это может обернуться весьма неприятными последствиями. Давайте рассмотрим, какие существуют особенности экспорта SVG в Adobe Illustrator.

SVG-элемент можно анимировать таким же образом, как это происходит с HTML. Для создания анимаций используется @keyframes. В принципе, в сети множество руководств на тему CSS-анимации при этом всё, что там описывается, по сути, применимо и к SVG-формату. Но давайте всё же приведем несколько примеров.

Применение SVG для стилизации web-сайтов открывает широкие возможности для веб-разработки. Речь идет о масштабируемой векторной графике (Scalable Vector Graphics — SVG), основанной на XML-формате. SVG позволяет создавать изображение с помощью определенных тегов и атрибутов: написанный вами код сгенерирует изображение, которое можно будет менять непосредственно в текстовом редакторе.

Flexbox представляет собой общее название модуля Flexible Box Layout, существующего в CSS. Это модуль, который определяет режим компоновки либо верстки пользовательского интерфейса, именуемого flex layout. В этом отношении Flexbox -- это, по сути, другой подход к созданию пользовательского интерфейса, который заметно отличается от классической блочной либо табличной верстки.

Grid Layout -- специальный модуль CSS3, позволяющий позиционировать элементы в виде таблицы либо сетки. По сути, Grid Layout -- это гибкий подход к компоновке элементов, однако если тот же flexbox размещает вложенные элементы по горизонтали в виде столбиков либо по вертикали в виде строк (то есть в одном направлении), то Grid позиционирует элементы одновременно в 2-х направлениях -- в качестве столбцов и строк, образуя таким образом таблицу.

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

В стандартизированном языке разметки HTML существует элемент под названием aside. Он представляет контент, косвенно связанный с остальным содержимым web-станицы, причем этот контент может рассматриваться независимо.

В HTML существует элемент <input type="text" />, позволяющий создавать простое текстовое поле из одной строки. Но на практике возможностей одного этого элемента бывает недостаточно. Проблема решается путем использования многострочного текстового поля, который представлен элементом textarea:

Если вы работаете с HTML и CSS, то вы можете столкнуться с проблемой горизонтального и вертикального выравнивания элемента. Вариантов решить проблему — множество. Мы, конечно, понимаем, что настоящий IT-специалист должен иметь черный пояс по гуглению, однако все же рекомендуем сэкономить время в будущем и ознакомиться с самыми популярными подходами к выравниванию.

Мы в OTUS постоянно интересуемся мнением наших студентов о том, насколько им интересно учиться, что именно они узнают, чем запоминаются занятия, с какими проблемами сталкиваются. Специально для этого была внедрена опросная система, цель которой — улучшить качество образования и оперативно устранять возникающие проблемы. И конечно, мы всегда радуемся, когда студенты готовы дать фидбек не только в формате опроса, но и ответить на конкретные вопросы лично. Так мы связались с Еленой Макаровой, выпускницей курса «Web-разработчик на Python».