стек front-end
html 5
css (и Sass (Официальный сайт sass))
JavaScript
Это минимум самый минимум для Фронтэнда
JSON, XML
Макеты
Viewport — это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.
Media Queries — Использование медиавыражений.
flexbox новый атрибут css
Grids — HTML-grid (официальный сайт grid)
Bootstrap
Sass (Официальный сайт sass)
————————————————————————————————
Viewport — это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке.
Media Queries — Использование медиавыражений.
Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.
flexbox новый атрибут css
Інший спосіб – використання нового атрибута CSS, відомого як flexbox. Це дозволяє нам легко перенести елементи до наступного рядка, якщо вони не вміщуються горизонтально. Ми робимо це, розміщуючи всі наші елементи у div, який ми будемо називати своїм контейнером. Потім ми додаємо певний стиль до цього div, вказуючи, що ми хочемо використовувати відображення flexbox для елементів всередині нього. Ми також додали кілька додаткових стилів до внутрішніх div, щоб краще проілюструвати, як цей перенос відбувається.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Screen Size</title>
<style>
#container {
display: flex;
flex-wrap: wrap;
}
#container > div {
background-color: green;
font-size: 20px;
margin: 20px;
padding: 20px;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div>Some text 1!</div>
<div>Some text 2!</div>
<div>Some text 3!</div>
<div>Some text 4!</div>
<div>Some text 5!</div>
<div>Some text 6!</div>
<div>Some text 7!</div>
<div>Some text 8!</div>
<div>Some text 9!</div>
<div>Some text 10!</div>
<div>Some text 11!</div>
<div>Some text 12!</div>
</div>
</body>
</html>
HTML grid
HTML grid — таблица (при изменении размера окна элементы в колонках могут передвигаться вниз так чтобы все поместилось на экране)
Іншим популярним способом стилізації сторінки є використання сітки HTML grid. У цій сітці ми можемо вказати такі атрибути стилю, як ширина стовпців та пробіли між стовпцями та рядками, як показано нижче. Зверніть увагу, що коли ми вказуємо ширину стовпців, ми говоримо, що третій має автоматичну ширину, тобто він повинен заповнити решту сторінки.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.grid {
background-color: green;
display: grid;
padding: 20px;
grid-column-gap: 20px;
grid-row-gap: 10px;
grid-template-columns: 200px 200px auto;
}
.grid-item {
background-color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
</body>
</html>
Bootstrap — это популярная библиотека на основе JS, CSS, HTML
- Виявляється, існує безліч бібліотек, їх вже створили інші люди. Ці бібліотеки можуть зробити стилізування вебсторінки ще простішим. Одна популярна бібліотека, якою ми будемо користуватися протягом курсу, відома як bootstrap.
- Ми можемо додати Bootstrap до нашого коду за допомогою одного рядка в заголовку нашого HTML-файлу:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"
Sass (Синтаксично дивовижні таблиці стилів) — это язык посредством которого можно улучшить написание CSS стилей для HTML. ВНИМАНИЕ, но поскольку браузер ничего не знает о Sass, то работает это так: Сперва нужно скомпилировать файл Sass в файл CSS. Sass позволяет это делать автоматически, как только изменился файл «название_файла.Sass». Плюс например в том что можно использовать переменные(константы), что позволит внести изменение в одно место, а не во многие как в случае с CSS.
Для розв’язку цієї задачі ми повинні завантажити програму під назвою Sass на наші комп’ютери. Потім у нашому терміналі ми пишемо sass variables.scss:variables.css Ця команда скомпілює файл .scss з назвою variables.scss у файл .css з назвою variables.css, tдо якого ви можете надати посилання на своїй HTML-сторінці.
Щоб пришвидшити цей процес, ми можемо використовувати команду sass --watch variables.scss:variables.css, яка автоматично змінює файл .css щоразу, коли у файлі .scss виявляється зміна.
Використовуючи Sass, ми також можемо робити вкладені стилі, а не використовувати селектори CSS, про які ми говорили раніше. Наприклад, якщо ми хочемо застосувати деякий стиль лише до абзаців та невпорядкованих списків у div, ми можемо написати щось подібне до наведеного нижче:
- Sass – це мова, яка дозволяє нам ефективніше писати CSS кількома способами, одним із яких є створення змінних, як у наведеному прикладі.
- Під час написання на Sass ми створюємо новий файл із розширенням
назва_файлу.scss. У цьому файлі ми можемо створити нову змінну, додавши$перед іменем, потім двокрапку та значення. Наприклад, ми б написали$color: red, щоб встановити для змінної color значення red або «червоний». Потім ми отримуємо доступ до цієї змінної за допомогою$color.
Вот пример нашого файлу variables.scss:
$color: red;
ul {
font-size: 14px;
color: $color;
}
ol {
font-size: 18px;
color: $color;
}
TypeScript
фреймворки
webassembly — возможно
и в продолжении JavaScript для стека back-end
jQuery; Node.js;
также скорее всего нужно будет разобраться с
Git — Системы контроля версий