Первый урок
Третий урок
Презентация
Четвертый урок
Пятый урок
Шрифт
подключение шрифта на страницу
Инструкция
(скрыть)
Я использую такой способ подключения для того, чтобы можно было сделать много сайтов в рамках одного. Что дает возможность не расширять слоты до бесконечности.

  1. Загрузи файл шрифта (woff2) на свой сервер, скопируй ссылку.
  2. Скопируй код и вставь в HEAD страницы (не сайта) или в блок T123.
  3. Замени в коде слово "ссылка" на свою, напиши свое название шрифта, укажи жирность.
  4. Если ты хочешь использовать шрифт на всем сайте — используй стили со звездочкой.
  5.  Если хочется задать шрифт отдельным заголовкам или абзацам текста — задай класс тексту в зеро блоке и используй "стили 2"
<style>
@font-face {
    font-family: Arial;
    src: url(ссылка на шрифт) format(woff2);
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-variant: normal;
}

/* Для всего текста на странице */
* {
 font-family: Arial;
}

/* Стили 2 для текста в зеро блоке */
.class * {
  font-family: Arial;
}
</style>
Преподключение
к какому-то ресурсу
Инструкция
(скрыть)
Используем preconnect для подключения к сторонним ресурсам: к своему хостингу, dropbox, cdnjs и другим местам, чтобы ресурсы с них загрузились быстрее. Указываем для одного проекта не больше двух-трех ресурсов.

  1. Скопируй код и вставь в HEAD всего сайта или страницы
  2. Замени ссылку на свою и проследи, чтобы она заканчивалась доменным именем (com или ru)
  3. Преконнект для fonts google можно взять на сайте после выбора шрифта.

Обрати внимание, что ссылка на dl.dropbox уже внутри ;)
<link rel="preconnect" href="https://dl.dropboxusercontent.com" />
Предварительная загрузка
для самого большого изображения
Инструкция
(скрыть)
Используем preload для загрузки самого большого ресурса на странице (это подскажет lighthouse, не определяем самостоятельно), либо вставляем в консоль код, который выведет в нее ссылку на этот ресурс. Важно уточнить, что в некоторых случаях lighthouse отметит совсем не тот ресурс, который покажет скрипт. В таком случае работает метод: доверяй, но проверяй.

  1. Скопируй код 1, вставь его в блок T123 на странице, опубликуйте ее. Откройте консоль, в ней будет ссылка на самое большое изображение. Либо запусти анализ в Lighthouse, чтобы найти изображение.
  2. После проверки удали код 1 со страницы. Передавать клиенту сайт с ним не нужно.
  3. Скопируй код 2, вставь в HEAD на странице или в настройках целого сайта.
  4. Замени ссылку на ресурс/изображение

Пример:
<link rel="preload" href="https://static.tildacdn.com/tild6437-3332-4131-b662-306663343461/J7Aw.gif" as="image" crossorigin />
<script>
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
</script>
<link rel="preload" href="ссылка на изображение" as="image" crossorigin />
Описание ссылок
aria-label вместо title
Инструкция
(скрыть)
Этот код используем, если при анализе сайта Lighthouse обнаружим пункт "Текст ссылок неразличим для программ чтения с экрана". Делаем это для того, чтобы повысить рейтинг сайта в Lighthouse и для поисковика.

  1. Скопируй код и вставь в один из существующих блоков T123 на странице
  2. Напиши свое описание для всех ссылок
  3. Найди через инструменты разработчика одну из ссылок и проверь, появился ли у нее атрибут aria-label
<script>
    document.addEventListener('DOMContentLoaded', () => {
        function addAria() {
            let links = document.querySelectorAll('a').forEach((e) => {
                e.setAttribute('aria-label', 'read more about my project');
            });
        }
        addAria();
    });
</script>
Переадресация
на мобильную версию
Инструкция
(скрыть)
Этот код используется для открытия на экранах меньше 700px другую версию страницы. Внутри медизапроса можно указать свое значение.

1. Скопируй код и вставь его в блок T123 на основную (не мобильную страницу) страницу.
2. Укажи свое число в медиазапросе (принцип работы медизапросов был описанан в первом уроке), если это нужно.
3. Замени ссылку на свою страницу, на которую будет осуществляться переадресация

Сложный пример на всякий:
Нужно сделать переадресацию на две мобильные версии: до 480px и от 480px до 700, а также загрузить отдельную версию для экранов шириной от 1920px

<script>
if (window.matchMedia ("(max-width: 480px)").matches) {
window.location.href = "ссылка на страницу до 480";
} else if (window.matchMedia ("(min-width: 480px) and (max-width: 700px)").matches) {
window.location.href = "ссылка на страницу от 480 до 700";
} else if (window.matchMedia ("(min-width: 1920px)").matches) {
window.location.href = "ссылка на страницу от 1920";
}
</script>
<script>
if (window.matchMedia("(max-width: 700px)").matches) {
    window.location.href = "ссылка";
}
</script>
Переадресация
для firefox
Инструкция
(скрыть)
Этот код используется для открытия в браузере firefox другой версии страницы (без автоскейла или каких-то анимаций).

  1. Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для лисы)
  2. Замени ссылку на свою страницу, на которую будет осуществляться переадресация
  3. Если тебе нужно показать блок в firefox, то удали первую часть кода и раскоментируй вторую
<script>
    // Перевая часть кода для переадресации
let sBrowser, sUsrAg = navigator.userAgent;
    
if (sUsrAg.indexOf("Firefox") > -1) {
    window.location.href = "ссылка на страницу";
}

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код и удали тот, что выше

// let sBrowser, sUsrAg = navigator.userAgent;
    
// if (sUsrAg.indexOf("Firefox") > -1) {
//     document.querySelector('.uc-firefox').style.display = "block";
// } else {
//     document.querySelector('.uc-firefox').style.display = "none";
// }
</script>
Переадресация
для firefox и opera
Инструкция
(скрыть)
Этот код используется для открытия в браузере firefox и opera другой версии страницы (без автоскейла или каких-то анимаций).

  1. Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для лисы и оперы)
  2. Замени ссылку на свою страницу, на которую будет осуществляться переадресация
  3. Если тебе нужно показать блок в firefox, то удали первую часть кода и раскоментируй вторую
<script>
 // Перевая часть кода для переадресации
 let sBrowser, sUsrAg = navigator.userAgent;
 let Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);
 if (sUsrAg.indexOf("Firefox") > -1) {
     window.location.href = "ссылка на сайт для лисы";
 } else if (Opera) {
   window.location.href = "ссылка на сайт для оперы";
 }

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код и удали тот, что выше

// let sBrowser, sUsrAg = navigator.userAgent;
// let Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);
// if (sUsrAg.indexOf("Firefox") > -1) {
//     document.querySelector('.uc-firefox').style.display = "block";
//     document.querySelector('.uc-opera').style.display = "none";
// } else if (Opera) {
//     document.querySelector('.uc-firefox').style.display = "none";
//     document.querySelector('.uc-opera').style.display = "block";
// } else {
//     document.querySelector('.uc-firefox').style.display = "none";
//     document.querySelector('.uc-opera').style.display = "none";
// }
</script>
Переадресация
для safari
Инструкция
(скрыть)
Этот код используется для открытия в браузере safari другой версии страницы (без автоскейла или каких-то анимаций).

  1. Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для сафари)
  2. Замени ссылку на свою страницу, на которую будет осуществляться переадресация
  3. Если тебе нужно показать блок в firefox, то удали первую часть кода и раскоментируй второй
<script>
    // Перевая часть кода для переадресации
let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if (isSafari) {
    window.location.href = "ссылка на сайт";
}

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код и удали тот, что выше

// let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

// if (isSafari) {
//     document.querySelector('.uc-safari').style.display = "block";
// } else {
//     document.querySelector('.uc-safari').style.display = "none";
// }
</script>
Связаться
Made on
Tilda