Для того чтобы узнать номер идентификатора (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 пикселей.

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

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

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

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

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

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

Этот код говорит браузеру скрыть блок с классом "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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

<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" делают следующее:

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

<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;}