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

Курсы

Программирование
Highload Architect Node.js Developer React.js Developer Java Developer. Professional Android Developer. Basic Microservice Architecture HTML/CSS Специализация C++ Developer C++ Developer. Professional Android Developer. Professional PostgreSQL для администраторов баз данных и разработчиков Framework Laravel Алгоритмы и структуры данных Специализация PHP Developer C# Developer. Professional C# Developer. Basic Буткемп Frontend Developer Golang Developer. Professional iOS Developer. Basic Специализация Python Developer Архитектура и шаблоны проектирования MS SQL Server Developer Software Architect Rust Developer Базы данных Разработчик на Spring Framework Vue.js разработчик Разработчик IoT Подготовка к сертификации Oracle Java Programmer (OCAJP) Unity Game Developer. Professional PostgreSQL Cloud Solutions VR/AR - разработчик
Специализации Курсы в разработке Подготовительные курсы Подписка
+7 499 938-92-02
Посты
Анимируем SVG средствами CSS

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

В каких случаях используют SMIL вместо CSS?

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

Flexbox и Flex-контейнер

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

Grid Layout и Grid Container

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

Выбор формата изображений

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

Элемент aside в HTML

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

Textarea в HTML

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

Выравниваем HTML-элемент вертикально и горизонтально

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

Отзыв выпускницы курса «Web-разработчик на Python»

WebDev_feedback_20.2-5020-173099.png

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

Отзыв выпускника курса «Web-разработчик на Python»

Webdev_Feedpback_19.12-5020-88023e.png

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