Екатерина Меркулова

Как задать уникальные стили для каждой плитки в таблице на GetCourse?

2023-04-13T09:41:31.298Z

Привет! Хочу поделиться с вами способом, как можно задать уникальные стили для каждой ячейки в таблице на GetCourse, используя CSS.

Для того чтобы узнать номер идентификатора (id) нужной ячейки, нужно ее выбрать и открыть инструменты разработчика в браузере.

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

Для примера, чтобы задать стиль для ячейки с id 727468667, нужно использовать следующий код:

.stream-table tr[data-training-id="727468667"] td { {
background-color: red;
color: white;
font-size: 16px;
height: 50px;
}

Этот код описывает стили для таблицы, которая имеет класс "stream-table". Он выбирает все строки (tr) в таблице, у которых есть атрибут "data-training-id" со значением "727468667", и устанавливает для ячеек (td) в этих строках определенный набор свойств стиля.

Конкретно, он устанавливает красный фон и белый цвет текста для ячеек, а также устанавливает высоту каждой ячейки 50 пикселей и размер шрифта 16 пикселей. Это может быть полезно, чтобы выделить конкретные строки или ячейки в таблице, связанные с определенным "data-training-id".

Точно также, можно установить уникальные стили для других ячеек в таблице, используя соответствующие номера id. Например, для ячейки с id 727468859 нужно использовать следующий код:

.stream-table tr[data-training-id="727468859"] td  {
background-color: blue;
color: white;
font-size: 20px;
height: 70px;
}

Этот код описывает стили для таблицы, которая имеет класс "stream-table". Он выбирает все строки (tr) в таблице, у которых есть атрибут "data-training-id" со значением "727468859", и устанавливает для ячеек (td) в этих строках определенный набор свойств стиля.

Конкретно, он устанавливает синий фон и белый цвет текста для ячеек, а также устанавливает высоту каждой ячейки 70 пикселей и размер шрифта 20 пикселей.

Таким образом, можно легко создать индивидуальный дизайн для каждой ячейки в таблице.

Как использовать медиа-запросы CSS для создания адаптивного дизайна на Getcourse?

2023-04-11T16:43:42.802Z

Привет! Мы сегодня поговорим о том, как сделать ваш курс на Getcourse удобным для просмотра на любом устройстве с помощью адаптивного дизайна и CSS медиа-запросов.

Что такое адаптивный дизайн? Это способ создания сайта, который позволяет ему автоматически изменяться, чтобы выглядеть и работать оптимально на всех устройствах. Например, если кто-то открывает ваш курс на своем смартфоне, сайт автоматически изменит размер шрифта и макет, чтобы сделать контент легче читаемым и доступным.

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

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

Чтобы добавить класс элементу на странице, необходимо перейти на вкладку "Настроить вид". Затем выбрать нужный элемент добавить ему класс, после чего сохранить настройки. Дальше следует перейти на вкладку "Стили" и ввести соответствующий код для скрытия элемента с классом "my-block" на мобильных устройствах.

Ниже пример CSS кода, который скроет кнопку с классом "my-block" на мобильных устройствах:

@media only screen and (max-width: 600px) { .my-block{ display: none; } }

Этот код говорит браузеру скрыть блок с классом "my-block" на всех устройствах, ширина экрана которых меньше или равна 600 пикселей. Таким образом, на маленьких экранах пользователи будут видеть только необходимый контент.

Другой пример, который мы можем использовать, это изменение размера текста в зависимости от размера экрана. Например, мы можем использовать следующий медиа-запрос для уменьшения размера текста на маленьких экранах:

@media only screen and (max-width: 600px) { .my-text { font-size: 14px; } }

В этом примере мы используем медиа-запрос, который уменьшает размер текста с классом ".my-text" на экранах, ширина которых меньше или равна 600 пикселей. Таким образом, текст будет лучше читаем на маленьких экранах и не будет выходить за пределы экрана.

Медиа-запросы могут быть применены не только к размеру экрана, но и к другим характеристикам устройства, таким как ориентация экрана (портретная или альбомная), плотность пикселей, цветность экрана и другим.

Допустим нужно адаптировать ваш сайт для устройств с небольшими и средними экранами в портретной ориентации.

/* Медиа-запрос для устройств */
@media screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
  body {
    font-size: 14px;
    background-color: lightyellow;
  }

  .my_navigation {
    display: flex;
    flex-direction: column;
  }

  .my_menu-item {
    margin-bottom: 5px;
  }
}

Этот медиа-запрос проверяет, является ли устройство экраном (например, смартфон, планшет, компьютер), имеет ли ширину экрана от 320 до 768 пикселей и вертикальную ориентацию. Если всё это соблюдается, то применяются стили: размер шрифта становится 14 пикселей, фон меняется на светло-желтый, а навигация располагается вертикально с отступами между пунктами меню.

Используя адаптивный дизайн и медиа-запросы на Getcourse, вы сможете создать более удобный и доступный курс для пользователей на всех устройствах.

✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!

⭐️Хотите, чтобы ваш проект на GetCourse выглядел профессионально и привлекал клиентов? Я помогу вам с дизайном и версткой. Свяжитесь со мной в Telegram

Адаптивная верстка vs мобильная версия: ключевые различия

2023-04-11T16:43:42.204Z

Привет! Сейчас все чаще люди сидят на сайтах с телефонов, и разработчикам приходится делать дизайн удобным и подстраивающимся под разные экраны. И тут возникает вопрос: что лучше - адаптивная верстка или мобильная версия? Счас я расскажу про основные отличия этих подходов, чтобы вы могли выбрать, что подходит для проекта.

Что такое адаптивная верстка? Адаптивная верстка - это подход, который позволяет создавать веб-сайты, которые автоматически подстраиваются под размер экрана устройства, на котором сайт просматривается. Это достигается за счет использования гибких сеток, медиа-запросов и других технологий, которые позволяют элементам веб-сайта изменять размер и позицию в зависимости от размера экрана.

Преимущества адаптивной верстки:

Один сайт, который выглядит хорошо на любом устройстве;
Улучшенная оптимизация для поисковых систем;
Более удобное использование сайта на мобильных устройствах;
Экономия времени и ресурсов на разработку и поддержку сайта.

Что такое мобильная версия? Мобильная версия (mobile version) - это отдельная версия веб-сайта, которая специально разработана для мобильных устройств. Обычно она имеет более простой дизайн и уменьшенный функционал по сравнению с полной версией сайта. Мобильные версии могут быть созданы с использованием различных подходов, например, с помощью отдельных поддоменов, подкаталогов или динамической адаптации контента.

Преимущества мобильной версии:

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

Ключевые различия между адаптивной версткой и мобильной версией

Гибкость: Адаптивная верстка более гибкая, чем мобильная версия. Она может адаптироваться к любому устройству и экрану, в то время как мобильная версия ограничена только мобильными устройствами.

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

Обновление контента: При использовании адаптивной верстки вы обновляете только одну версию сайта, которая отображается на любом устройстве, в то время как при использовании мобильной версии вам нужно обновлять две версии сайта - для мобильных и для стационарных устройств.

Удобство использования: Адаптивная верстка обеспечивает более удобное использование сайта на разных устройствах, так как пользователи могут получить доступ к всем функциям сайта, в то время как мобильная версия может иметь ограниченный функционал, что может снизить удобство использования для пользователей.

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

✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!

Готовое решение для изменения стиля боковой панели GetCourse с помощью CSS-кода

2023-04-09T13:05:29.521Z

Здравствуйте, друзья! Я хочу поделиться с вами готовым CSS-кодом для оформления боковой панели GetCourse. Этот код поможет вам сделать вашу панель более уникальной и привлекательной.

Для использования кода вам необходимо скопировать его и вставить в поле «Счетчики и прочие скрипты для BODY» в настройках вашего аккаунта GetCourse. Чтобы это сделать, просто войдите в свой аккаунт, перейдите в раздел «Настройки» -> «Настройки аккаунта»

Скопируйте код, приведенный ниже.
Вставьте его в поле «Счетчики и прочие скрипты для BODY».
Сохраните изменения.

<style>
/* Стили для боковой панели Getcourse */

/* Скрыть значки марафона и уведомлений */
.menu-item-marathon, .topNotitication-notice, .gc-account-leftbar .menu-item-label {
  display: none;
}

/* Установить цвет фона для меню */
.gc-account-leftbar, .gc-account-leftbar .gc-account-user-menu, .gc-account-leftbar .toggle-link, .gc-page-nav-items-menu a {
background: #F0F1F3;
width: 50px;
}

/* Стили для меню кнопок */
.gc-account-leftbar .gc-account-user-menu li a {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-bottom: 3px solid #AAB9C1;
  border-radius: 10px;
  transition: background-color 0.3s, border 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Стили для наведения курсора на кнопки */
.gc-account-leftbar .gc-account-user-menu li:not(.active):not(.selected) a:hover {
  background-color: #fff;
  border: 1px solid #74C0FC;
  border-width: 1px 1px 5px 1px;
  border-radius: 10px;
}

/* Скрыть все иконки */
.menu-item-notifications_button_small img.menu-item-icon,
.menu-item-cms img.menu-item-icon,
.menu-item-user img.menu-item-icon,
.menu-item-tasks img.menu-item-icon,
.menu-item-teach img.menu-item-icon,
.menu-item-notifications img.menu-item-icon,
.menu-item-sales img.menu-item-icon,
.menu-item-chatium img.menu-item-icon {
  display: none;
}

/* Удалить разделители между кнопками */
.gc-account-leftbar .gc-account-user-menu li {
  border-bottom: 0;
}

/* Стили для виджета в мобильной версии */
.talks-widget-button {
  background: #74C0FC;
  transition: background-color 0.3s;
}

.talks-widget-button:hover {
  background-color: #4a9ef0;
}

/* Заменить изображение для меню */
li.menu-item.menu-item-cms a::after {
  content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/225/h/b400c315dfddb340b926b602f9902fcd.png");
}

li.menu-item.menu-item-teach a:after {
  content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/62/h/e15ce14e13933609f16fe3976c03984c.png");
}

li.menu-item.menu-item-user a:after {
  content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/441/h/2c811799c5477533f576216740467dfe.png");
}

li.menu-item.menu-item-tasks a:after {
  content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/50/h/19108d14b8bc5135f7c6ca72a9249166.png");
}

li.menu-item.menu-item-notifications a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/324/h/9cead92a2a5ea617b5d17bf4820a1ea5.png");
}

li.menu-item.menu-item-sales a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/374/h/4c84e00a10e9a6fad37ebca6b7e55b2e.png");
}

li.menu-item.menu-item-chatium a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/205/h/5f8cad22696cfd4e4f1e315c4951d763.png");
}

li.menu-item.menu-item-notifications_button_small a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/336/h/0d9666e702fdfaad2f34108db2dc49cf.png");
}

/* Стили для активного и выделенного состояния кнопок */
.gc-account-leftbar .gc-account-user-menu li.active a,
.gc-account-leftbar .gc-account-user-menu li.selected a {
background-color: #fff;
border: 1px solid #74C0FC;
border-width: 1px 1px 5px 1px;
}

/* Цвет текста выпадающего меню */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
color: #171754;
text-transform: none;
font-weight: normal;
}

/* Стили для заголовка в подменю */
.gc-account-user-submenu-bar h3 {
color: #171754;
font-size: 20px;
font-weight: 600;
}

/* Стили при наведении курсора на элементы подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background-color: inherit;
color: #171754;
font-weight: bold;
transition: all 0.3s;
}

/* Стили для фона подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
background: #fff;
width: 220px;
margin-left: -20px;
}

</style>

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

Этот CSS-код предоставляет готовое решение для изменения стиля боковой панели GetCourse. Вы можете настроить его, меняя цвета, размеры шрифтов и другие параметры. Код включает следующие действия:

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

Теперь ваша боковая панель GetCourse будет иметь обновленный дизайн, соответствующий предоставленному скриншоту. Если вы захотите внести дополнительные изменения в код или вернуться к первоначальному дизайну боковой панели, вы всегда можете отредактировать или удалить код в поле «Счетчики и прочие скрипты для BODY» в настройках аккаунта.

✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!

Flexbox и CSS Grid: мой опыт и советы по использованию

2023-04-08T12:33:17.383Z

Привет! Работая над адаптивными дизайнами, я часто использую такие замечательные инструменты, как Flexbox и CSS Grid. Они помогают мне без проблем создавать сложные макеты благодаря своей гибкости и мощным функциям. Я хочу рассказать о своем опыте использования Flexbox и CSS Grid и обсудить основные отличия между ними.

Flexbox

Flexbox - это одномерная модель макета, которая позволяет размещать элементы в контейнере вдоль главной оси (горизонтальной или вертикальной). Я часто использую Flexbox для управления размерами, выравниванием и порядком элементов, что делает его идеальным для создания макетов, в которых элементы должны адаптироваться к разным размерам экрана и ориентациям.

Основные свойства Flexbox, с которыми я работаю

display: flex; или display: inline-flex;: превращает контейнер в flex-контейнер.
flex-direction: определяет направление главной оси (row, column, row-reverse, column-reverse).
flex-wrap: определяет, могут ли flex-элементы переноситься на следующую строку (nowrap, wrap, wrap-reverse).
justify-content: определяет выравнивание элементов вдоль главной оси (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: определяет выравнивание элементов вдоль поперечной оси (flex-start, flex-end, center, baseline, stretch).
align-content: определяет выравнивание строк flex-контейнера вдоль поперечной оси (flex-start, flex-end, center, space-between, space-around, space-evenly, stretch).

CSS Grid

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

Основные свойства CSS Grid, с которыми я работаю

display: grid; или display: inline-grid;: превращает контейнер в grid-контейнер.

grid-template-columns и grid-template-rows: определяют структуру сетки с помощью размеров колонок и строк.
grid-template-areas: определяет структуру сетки с помощью именованных областей.
grid-column и grid-row: определяют позиционирование элемента в сетке с использованием номеров колонок и строк или именованных областей.
grid-gap (или row-gap и column-gap): определяет размер промежутков между колонками и строками.
justify-items: определяет выравнивание элементов вдоль главной оси внутри их ячеек сетки (start, end, center, stretch).
align-items: определяет выравнивание элементов вдоль поперечной оси внутри их ячеек сетки (start, end, center, stretch).
justify-content: определяет выравнивание сетки в контейнере вдоль главной оси (start, end, center, space-between, space-around, space-evenly).
align-content: определяет выравнивание сетки в контейнере вдоль поперечной оси (start, end, center, space-between, space-around, space-evenly).

Сравнение Flexbox и CSS Grid с моей точки зрения

Сравнивая Flexbox и CSS Grid с моей точки зрения, я замечаю, что обе технологии предлагают мощные инструменты для создания адаптивных макетов. Я активно использую их для управления позиционированием, выравниванием и размерами элементов на веб-странице. Отмечу, что оба способа поддерживаются всеми современными браузерами, что позволяет мне создавать сложные макеты без использования сторонних библиотек или фреймворков.

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

Когда я использую Flexbox и CSS Grid

Выбор между Flexbox и CSS Grid определяется конкретным проектом и моими предпочтениями. Основываясь на моем опыте, я могу предложить следующие рекомендации:

Для создания макета с простой линейной структурой, такой как навигационное меню или список элементов, я предпочитаю использовать Flexbox. В случае необходимости создания макета с более сложной двумерной структурой, например, с несколькими колонками и строками, я выбираю CSS Grid. При этом я не стесняюсь комбинировать Flexbox и CSS Grid, если это улучшает мой макет и делает его более гибким и адаптивным.

Примеры использования Flexbox и CSS Grid

Flexbox

<nav class="nav">    <a class="nav-item" href="#">Home</a>    <a class="nav-item" href="#">About</a>    <a class="nav-item" href="#">Services</a>    <a class="nav-item" href="#">Contact</a>  </nav>

.nav {  display: flex;  justify-content: space-between;  background-color: #333;  padding: 10px;}
.nav-item {  color: white;  text-decoration: none;}
.nav-item:hover {  color: #FFC107;}

Стили для класса "nav" делают следующее:

Устанавливают значение display в "flex", что позволяет элементам внутри навигационного меню располагаться горизонтально в строку.
Устанавливают значение justify-content в "space-between", что обеспечивает равномерное распределение свободного пространства между ссылками навигационного меню.

CSS GRID

<section class="article-grid">      <article class="article-card">        <img src="https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/197/h/e1653ada491cff63286610c875d8bd2c.png" alt="Статья 1">        <h3>Заголовок статьи 1</h3>        <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>      </article>
            <article class="article-card">              <img src="https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/197/h/e1653ada491cff63286610c875d8bd2c.png"                alt="Статья 2">              <h3>Заголовок статьи 2</h3>              <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>            </article>
                  <article class="article-card">                    <img src="https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/197/h/e1653ada491cff63286610c875d8bd2c.png"                      alt="Статья 3">                    <h3>Заголовок статьи 3</h3>                    <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>                  </article>    </section>

body {    font-family: Arial, sans-serif;    margin: 0;    padding: 0;}
.article-grid {    display: grid;    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));    grid-gap: 20px;    padding: 20px;}
.article-card {    background-color: #f9f9f9;    padding: 20px;    border-radius: 4px;    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}
.article-card img {    width: 100%;    height: auto;    object-fit: cover;    border-radius: 4px;}
.article-card h3 {    font-size: 20px;    margin-top: 15px;}
.article-card p {    font-size: 16px;    margin-top: 10px;    color: #333;}

Стили для класса "article-grid" делают следующее:

Устанавливают значение display в "grid" для создания сетки на основе CSS Grid.
Устанавливают значение grid-template-columns в "repeat(auto-fill, minmax(300px, 1fr))", что позволяет автоматически создавать колонки в сетке с минимальной шириной 300 пикселей и максимальной шириной, равной одной доле доступного пространства.
Устанавливают значение grid-gap в "20px" для обеспечения равномерного расстояния между элементами сетки.

Flexbox и CSS Grid - мощные инструменты для создания адаптивных макетов, которые значительно упрощают разработку и позволяют создавать сложные компоновки без использования сторонних библиотек или фреймворков.

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

✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!