Как часто вы пользуетесь HTML-блоками в Геткурсе? 🤨

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

Если знать некоторые особенности Геткурса и Bootstrap (в частности 3.3.5 версии), на котором сделан сам Геткурс, можно эту адаптацию частично привить к вашим самописным блокам. Если поставить HTML-блок на лендинг, то зайдя в него мы увидим, что там уже стоит <div class="container text-center"></div>. Исходя из названий классов мы уже можем понять, что этот див вполне себе можно использовать как обёртку для наших блоков, которые мы будем делать внутри. Класс container ограничит нам ширину контейнера, подгоняя его под формат многих блоков ГК, ведь эти контейнеры так же есть внутри них. Класс text-center даст нам центрированный текст внутри этого контейнера.

К примеру, если мы делаем какие-то свои роскошные карточки в HTML-блоке, то можно всем карточкам задать класс lt-tsr-block, что в свою очередь задаст минимальный размер данным блокам (min-width: 250px). Даже если вы поставите больше, при сужении экрана ваши блоки будут сжиматься до ширины 250px, не ниже. Так же этот класс даст относительное позиционирование (position: relative) для расположения своих псевдоэлементов внутри блока.

Всё это пища для размышления над тем, что изучив классы Геткурса и Bootstrap достаточно хорошо (инспектируя элементы на странице), можно не отодвигать HTML-блок на последний план, а превратить его в мощный инструмент для реализации ваших задумок ☺️

#размышления_пост #лайфхак

Какой же лендинг без кнопок?

На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо" 🤨

Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить div или span, а может и дополнительную большую вёрстку.

В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например: <i class="fa fa-envelope-open" aria-hidden="true"></i>

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

P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке 😎

.btn {
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 20px;
    transition: 0.3s;
}

.btn:hover {
    font-size: 1.2em;
}

P.P.S. Вставлять в "Стили" блока в "Подробные настройки"

#лайфхак #лёгкая_кастомизация

Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏

Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".

Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.

Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":

<script>
$(function() {
    if(window.location.href.indexOf('/teach/control/answers/unanswered') > -1) {
        $('.container').append(`
            <button class="btn btn-success accept-all" style="position: fixed; top: 20px; right: 20px;">Принять всё</button>
        `);
        
        $(function() {
            var acceptBtns = document.querySelectorAll('.btn[value="accepted"]');
    
            $('.accept-all').on('click', function() {
                acceptBtns.forEach(e => e.click());
            });
        });
    }
})
</script>

Кнопочка появится в вашей Ленте ответов справа сверху, примерно через 10 минут (зависит от загруженности сервера ГК, на котором располагается ваш проект) ✔️

#лайфхак #полезная_фишка