Вы разрабатываете интерфейсы и хотите быть в курсе последних технологий в области фронтенд-разработки? Тогда канал 'Frontend разработчик' (@frontend_1) именно для вас! Здесь вы найдете полезные материалы по HTML, CSS, JS, React.js, Angular.js, Vue.js, TypeScript, Redux, MobX, JavaScript, NodeJS. Мы предоставляем самые актуальные статьи, уроки, и руководства, которые помогут вам улучшить свои навыки и быть в тренде. Наш канал создан для тех, кто стремится к профессиональному росту в сфере веб-разработки. Если у вас возникли вопросы или вы хотите поделиться своими знаниями, обращайтесь к администратору @evgenycarter. Присоединяйтесь к нам и станьте частью активного сообщества фронтенд-разработчиков!
14 Feb, 06:52
11 Feb, 10:25
08 Feb, 10:17
Object.groupBy() или Map.groupBy() 🤩04 Feb, 20:33
04 Feb, 08:57
03 Feb, 11:03
shape-outside, чтобы обтекать текст вокруг фигур. Это позволяет тексту обтекать не только прямоугольные блоки, но и более сложные формы, такие как круги, многоугольники или даже изображения с прозрачным фоном.
.column--left .shape {
float: right;
shape-outside: circle(100px at 100% 50%);
}
01 Feb, 09:04
31 Jan, 13:01
31 Jan, 12:01
pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}
31 Jan, 10:01
31 Jan, 08:08
.character {
transition-delay:
calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}
29 Jan, 20:55
turn`? 🤩28 Jan, 09:03
28 Jan, 08:05
switch (документация MDN), но для тех, кто только начинает изучать язык, давайте кратко разберём, как он работает.switch позволяет сравнить выражение с одним из нескольких возможных случаев (case):
city = "London";
const getCountryByCity = () => {
switch (city) {
case "Edinburgh":
return "Edinburgh is the capital city of Scotland";
case "Madrid":
return "Madrid is the capital city of Spain";
case "London":
return "London is the capital city of England";
default:
return "Cannot find which country this city is the capital of.";
}
};
27 Jan, 14:07
25 Jan, 06:36
23 Jan, 19:32
23 Jan, 09:03
23 Jan, 07:26
22 Jan, 08:38
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru 21 Jan, 11:08
::before и ::after для создания треугольников, имитирующих указатели. 17 Jan, 09:27
shape-outside в CSS? 16 Jan, 11:32
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 16 Jan, 08:17
14 Jan, 21:08
06 Jan, 07:44
30 Dec, 10:07
28 Dec, 09:22
28 Dec, 08:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loaders</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top-bar">
<div class="profile-wrapper">
<img
class="profile"
src="assets/profile_new.jpg"
alt="profile picture"
/>
<p>@davidm_ai</p>
</div>
</div>
<h1>CSS <span class="emph">Loaders</span></h1>
<div class="loaders">
<div class="loader-wrapper">
<div>1</div>
<div class="loader-1"></div>
</div>
<div class="loader-wrapper">
<div>2</div>
<div class="loader-2"></div>
</div>
<div class="loader-wrapper">
<div>3</div>
<div class="loader-3"></div>
</div>
<div class="loader-wrapper">
<div>4</div>
<div class="loader-4"></div>
</div>
<div class="loader-wrapper">
<div>5</div>
<div class="loader-5"></div>
</div>
<div class="loader-wrapper">
<div>6</div>
<div class="cube-wrapper">
<div class="cube">
<div class="sides">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
<p class="code-comments">
Code In The Comments 👨💻
</p>
<p class="bottom-bar">
<span class="modern-frontend-developer">
<span class="emph">Modern Frontend Developer</span>: <span class="emph">HTML</span> and <span class="emph">CSS</span> (55% off)
</span>
<span class="learning-link">
<img src="assets/atheros-learning.png" alt="arrow icon" />
learning.atheros.ai
</span>
</p>
</div>
</body>
</html>26 Dec, 07:51
24 Dec, 08:36
18 Dec, 11:59
16 Dec, 08:30
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 14 Dec, 15:37
13 Dec, 10:44
OR в javascript 🤩11 Dec, 09:50
10 Dec, 08:54
08 Dec, 09:28
04 Dec, 10:58
02 Dec, 11:36
02 Dec, 09:00
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 01 Dec, 17:00
30 Nov, 11:04
29 Nov, 11:25
<hr> внутри <select>27 Nov, 13:08
25 Nov, 13:01
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru 25 Nov, 12:00
defer сообщает браузеру, что он должен продолжать обрабатывать страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт, когда DOM дерево будет полностью построено.25 Nov, 11:02
25 Nov, 07:56
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 25 Nov, 05:21
24 Nov, 05:21
23 Nov, 05:19
22 Nov, 05:17
20 Nov, 15:12
20 Nov, 13:00
20 Nov, 12:00
20 Nov, 11:10
20 Nov, 09:02
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 20 Nov, 08:38
18 Nov, 08:24
::marker, чтобы изменить стиль маркера/номера списка. 🤩15 Nov, 07:01
14 Nov, 08:02
13 Nov, 12:35
13 Nov, 07:05
13 Nov, 05:00
dynamicIO11 Nov, 12:52
:where() 🤩11 Nov, 09:02
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru 10 Nov, 18:28
09 Nov, 08:34
06 Nov, 13:35
type, который вы используете 👨💻.04 Nov, 07:50
01 Nov, 09:06
min-width, так и width всего одной строкой кода? 🤩31 Oct, 08:45
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 30 Oct, 10:01
30 Oct, 08:01
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 30 Oct, 07:21
28 Oct, 21:33
26 Oct, 11:36
26 Oct, 10:32
experimental.typedRoutes в вашем файле next.config.js следующим образом:
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
typedRoutes: true,
},
}
module.exports = nextConfig
25 Oct, 09:41
24 Oct, 21:19
24 Oct, 12:49
23 Oct, 08:47
20 Oct, 09:15
19 Oct, 16:00
19 Oct, 15:39
17 Oct, 09:19
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru 16 Oct, 20:57
16 Oct, 06:30
15 Oct, 07:18
14 Oct, 04:58
red, blue, green.#ff0000 — красный цвет.rgb(255, 0, 0) — красный цвет.rgba(255, 0, 0, 0.5) — красный цвет с 50% прозрачностью.
body {
background-color: #f0f0f0;
color: rgb(0, 128, 0);
}
body {
font-family: 'Arial', sans-serif;
}
p {
font-size: 16px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
p {
line-height: 1.5;
text-align: center;
}
body {
background-color: #e0e0e0; /* Цвет фона */
background-image: url('image.jpg'); /* Изображение фона */
background-repeat: no-repeat; /* Изображение не повторяется */
background-size: cover; /* Изображение растягивается по всему фону */
}
.container {
display: flex;
justify-content: center; /* Выравнивание по горизонтали */
align-items: center; /* Выравнивание по вертикали */
}
.item {
flex-grow: 1; /* Элемент занимает все доступное пространство */
flex-shrink: 0; /* Элемент не сжимается */
flex-basis: 200px; /* Начальный размер элемента */
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три колонки одинаковой ширины */
grid-gap: 10px; /* Отступы между элементами */
}
.item {
grid-column: 1 / span 2; /* Элемент занимает две колонки */
grid-row: 1 / 2; /* Элемент на первой строке */
}
a {
transition: color 0.3s ease;
}
a:hover {
color: red;
}
@keyframes example {
0% { background-color: red; }
100% { background-color: yellow; }
}
div {
animation: example 5s infinite;
}
13 Oct, 08:52
13 Oct, 07:56
селектор {
свойство: значение;
}
p {
color: blue;
font-size: 16px;
}
h1 {
color: red;
}
class. Класс можно использовать для множества элементов.
.class-name {
color: green;
}
<p class="class-name">Текст</p>
id.
#id-name {
background-color: yellow;
}
<div id="id-name">Контент</div>
h1, h2, p {
color: blue;
}
div p {
color: orange;
}
p, находящимся внутри div.
a:link { color: blue; } /* Непосещенная ссылка */
a:visited { color: purple; } /* Посещенная ссылка */
a:hover { color: red; } /* Наведение мыши */
a:active { color: green; } /* Активная ссылка */
p:first-child { color: green; } /* Первый дочерний элемент */
li:nth-child(odd) { background-color: #f0f0f0; } /* Нечетные элементы списка */
p::before { content: "Привет, "; } /* Добавляет текст перед содержимым */
p::after { content: "!" } /* Добавляет текст после содержимого */
p::first-letter {
font-size: 200%;
color: red;
}
content (содержимое),padding (внутренние отступы),border (граница),margin (внешние отступы).
div {
margin: 10px;
padding: 20px;
border: 1px solid black;
}
px — пиксели.% — проценты от родительского элемента.em — относительный размер шрифта от родительского элемента.rem — относительный размер шрифта от корневого элемента (`html`).vw и vh — проценты от ширины и высоты окна браузера.
p {
width: 50%; /* 50% ширины родителя */
font-size: 1.5em; /* 150% от родительского шрифта */
}
11 Oct, 07:00
11 Oct, 05:25
10 Oct, 20:53
10 Oct, 11:30
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 10 Oct, 11:00
10 Oct, 10:48
10 Oct, 06:01
07 Oct, 18:35
04 Oct, 05:12
01 Oct, 08:57
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
