Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz
Created October 5, 2024 16:32
Show Gist options
  • Save kianurivzzz/b65212a32c53866dac080dde2fc06a66 to your computer and use it in GitHub Desktop.
Save kianurivzzz/b65212a32c53866dac080dde2fc06a66 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Карта навыков верстальщика</title>
</head>
<body>
<main class="container">
</main>
</body>
</html>
@font-face {
font-weight: normal;
font-family: Comfortaa;
src: url("../fonts/Comfortaa-Regular.ttf");
}
@font-face {
font-weight: bold;
font-family: Comfortaa;
src: url("../fonts/Comfortaa-Bold.ttf");
}
body {
margin: 0;
padding: 0;
color: #eee;
font: 18px/1.5 Comfortaa, sans-serif;
background: #222831;
}
h1,
h2,
h3,
h4 {
color: #fd7014;
}
h1 {
margin-top: 0;
}
.container {
width: 1280px;
margin: 0 auto;
padding: 50px 30px;
}
.definitions {
padding: 30px;
background: #393e46;
}
.definitions-term {
color: #fd7014;
font-weight: bold;
font-variant: small-caps;
}

Создайте разметку базового уровня карты навыков верстальщика.

Структура разметки:

Заголовок первого уровня: Карта навыков верстальщика

Заголовок второго уровня: Базовый уровень

Нумерованный список из трёх заголовков третьего уровня:

HTML

CSS

Инструменты

HTML

Раздел HTML содержит маркированный список из двух элементов:

Семантический HTML Доступность

Для более подробного описания используется список определений:

Семантический HTML — Разметка с помощью семантических тегов и Schema.org

Доступность — Разметка страницы для людей с ограниченными возможностями

Основной контейнер списка определений имеет класс .definitions. Название термина имеет класс .definitions-term.

CSS

Раздел CSS содержит маркированный список из двух заголовков четвёртого уровня:

Основы

Модули

Раздел «Основы» так же содержит маркированный список из следующих элементов:

Селекторы

Каскадность

Базовые правила для работы с текстом

Базовая адаптивность с использованием медиазапросов

Базовая анимация с использованием transition

Псевдоклассы

Псевдоэлементы

Элементы раздела «Модули»:

CSS Flexible Box Layout Module

CSS Grid Layout Module

CSS Multi-column Layout Module

Инструменты

Раздел «Инструменты» содержит маркированный список из трёх заголовков четвёртого уровня:

HTML

CSS

Другое

Инструменты раздела «HTML»:

PUG

Emmet

Инструменты раздела «CSS»:

SASS

PostCSS

Stylelint

Инструменты раздела «Другое»:

Bash

Git

NPM

DevTools

Code Editors. VSCode / Sublime Text/ Atom/ WebStorm

Gulp

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment