Верстка и CSS таблицы - IsuiGit/borodaedu GitHub Wiki

Типы верстки HTML документов

  1. Фиксированная верстка - верстка в абсолютных размер без соблюдения параметров адаптивности, медийности и гибкости интерфейсов.
  2. Резиновая верстка - верстка процентных масштабах (т.е. контейнеры и элементы получают размер в % относительно родительского) и всегда растягиваются/уменьшаются относительно размера окна.
  3. Табличная верстка - верстка с разграничением элементов в табличном стиле (типа Excel), с включением media запросов, для расположения контента относительно размеров "таблицы".
  4. Блочная верстка (контейнерная верстка) - верстка в формате разбиения контента на блоки, с целью повторного использования стилей, и оптимизации процесса рендеринга данных на интерфейса.
  5. Адаптивная верстка - верстка с использованием технологий media-запросов, автоматически выгружаемого контента, обработки стилей "на лету" с целью создания интерфейса, одновременно подходящего под различные виды устройств.
  6. Гибкая верстка (flexible) - верстка гибкими блоками в относительных единицах с механизмами переполнения и перемещения контента в реальном времени относительно реального размера области отображения.

Подключение внешних css файлов в html документ

<html>
    <head>
        <link rel="stylesheet" href="style.css"> <!-- если файл находится в той же папке, что и файл index.html -->
        <link rel="stylesheet" href="./static/css/style.css"> <!-- если файл находится в папке "ваш_проект/static/css" -->
    <head>
    ...
</html>

Подключение шрифтов

  • Зайдите на ресурс Google Fonts
  • Выберите понравившийся шрифт
  • Нажмите Get font на странице шрифта
  • Выберите Get embeded code
  • Скопируйте строку подключения из раздела @import в ваш css файл (прим.: @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'));
  • Добавьте в стиль вашего тега body строку подключения шрифта (прим.: font-family: "JetBrains Mono", monospace;)

Структура landing page

  • Заголовок (главный экран) + навигационная панель
  • Инфографика/преимущества
  • Описания/пиктограммы возможностей
  • Цены и описания
  • О компании (о нас) / кейсы
  • Подвал
⚠️ **GitHub.com Fallback** ⚠️