Вёрстка сайтов | HTML, CSS, JS

Вёрстка сайтов | HTML, CSS, JS

Public

Просмотреть канал

Не можете присоединиться? @free_html_lessons

0

4.7k Участники

Обновлено: May 15, 2026 at 2:47 PM

Вёрстка сайтов | HTML, CSS, JS

👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963

@free_html_lessons offers specialized information about tigran1963 for subscribers interested in Курсы и Обучение

Рейтинг

Глобальный рейтинг

#456

+2

Рейтинг по языку

#45

+1

Рейтинг по категории

#23

-1

Рост участников (Последние 7 дней)

Всего: 4.7K

Рост за 24ч: +0 0%

Loading...

Рейтинг

Требуется вход

Loading...

Loading recommended channels...

Последние посты

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

TypeScript: почему не стоит злоупотреблять as

В TypeScript есть удобный инструмент – type assertion, или приведение типа через as.

Например:

const user = getData() as User;


На первый взгляд может показаться, что мы “преобразовали” данные в тип User. Но на самом деле это не так.

as не меняет данные и не проверяет их структуру во время выполнения программы. Он только сообщает TypeScript, что мы хотим рассматривать значение как определённый тип.

Иными словами, мы говорим компилятору:
> “Считай, что это User. Я беру ответственность на себя”.

Из-за этого as может скрыть реальную ошибку.

Например:

type User = {
name: string;
age: number;
};
const data = JSON.parse('{"name": "Aram"}') as User;

console.log(data.age.toFixed());


TypeScript не покажет ошибку, потому что мы явно указали тип User. Но в реальных данных поля age нет, поэтому код упадёт во время выполнения.

Поэтому важно помнить: as не делает код безопаснее. Он лишь отключает часть проверки типов в конкретном месте.

Особенно осторожно стоит использовать as, когда данные приходят извне: с сервера, из localStorage, из JSON.parse или из сторонних библиотек.

Более надёжный подход — сначала проверить структуру данных, а уже потом работать с ними как с нужным типом:

function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'name' in value &&
'age' in value
);
}
const data: unknown = JSON.parse(json);
if (isUser(data)) {
console.log(data.age);
}


В этом случае TypeScript понимает, что внутри блока if значение действительно можно считать User.

Использовать его можно, но лучше делать это осознанно. Особенно там, где данные приходят из внешнего источника и могут не соответствовать ожидаемой структуре.

428

1

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

📷 Photo

Подборка лучших постов за прошлую неделю

Лучшие статьи :
1.
2.
3.

Лучшие фронтенд вакансии https://t.me/job_webdev:
1. https://t.me/job_webdev
2. https://t.me/job_webdev
3. https://t.me/job_webdev

Лучшие дизайн вакансии https://t.me/job_webdesign:
1. https://t.me/job_webdesign https://t.me/job_webdesign2 https://t.me/job_webdesign https://t.me/job_webdesign
3. https://t.me/job_webdesign

#лучшеезанеделю

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

[poll]

558

0

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

[poll]

502

0

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

CSS Range Slider

https://codepen.io/seanstopnik/pen/nKjmPX#практика

657

1

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

📷 Photo

Макет для тренировки (Сбер конструктор)

https://www.figma.com/file/y8IG3kjpCrDBbyxukpluaY/111-СбЕР-КОНСТРУКТОР-2.0-(Copy)?type=design&node-id=0-1&mode=design&t=L9Hx7yKHYthT1YSk-0 🧑‍💻

#практика | #макет

556

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

Задача на js: Интерактивный калькулятор BMI

https://telegra.ph/Zadacha-na-js-Interaktivnyj-kalkulyator-BMI-10-04 👨‍💻

#домашка

534

0

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

📷 Photo

Практическое руководство по JSON в JavaScript

https://telegra.ph/Prakticheskoe-rukovodstvo-po-JSON-v-JavaScript-10-31 👨‍💻

#js | #полезности

554

4

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

auto-fill против auto-fit

https://telegra.ph/auto-fill-protiv-auto-fit-06-16 👨‍💻

#полезности | #css

566

3

0

Вёрстка сайтов | HTML, CSS, JS

22 мая 2026 г., 21:47

GSAP 3

https://telegra.ph/GSAP-3-veb-animacii-06-16 👨‍💻

#js | #полезности

588

2

0

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Подборка лучших постов за прошлую неделю

Лучшие статьи :
1.
2.
3.

Лучшие фронтенд вакансии https://t.me/job_webdev:
1. https://t.me/job_webdev
2. https://t.me/job_webdev
3. https://t.me/job_webdev

Лучшие дизайн вакансии https://t.me/job_webdesign:
1. https://t.me/job_webdesign
2. https://t.me/job_webdesign https://t.me/job_webdesign
3. https://t.me/job_webdesign

#лучшеезанеделю

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

Winter CMS
Удобная и приятная cms для небольших проектов.

https://telegra.ph/Winter-CMS-01-03 👨‍💻

#полезности

492

3

0

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Макет для тренировки (technolabs)

https://www.figma.com/design/NCquB8pzPxRrAaXwu9hdm8/TechnoLabs?node-id=187-459&p=f&t=xZ6yH3vSDead38JT-0 https://www.figma.com/file/GTMunzCaGdOI1IInpdN9g7/Двери-новые-(Copy)?type=design&node-id=0-1&mode=design&t=F72eBUvmeUuSFhIh-0 https://www.figma.com/file/TTNC3jJnksA8uRTqNJinPZ/Hederson?type=design&node-id=0-1&mode=design&t=7Bm4GfdoNLFUCEhE-0#практика | #макет

461

1

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Задача: Сделать тип, который делает все свойства объекта необязательными, кроме одного

Есть тип пользователя:

id: number
name: string
email: string
}

Нужно создать тип UpdateUser, который:
• делает все поля необязательными
• но поле id остаётся обязательным

Результат должен быть таким:

id: number
name?: string
email?: string
}

Условие:
Нельзя писать тип вручную.
Нужно использовать утилиты типов TypeScript.

Подсказка:
используй Partial и пересечение типов &

Почему эти задачи полезны:
1. Они встречаются в реальных проектах
например при работе с API или формами
2. Они учат использовать ключевые инструменты TypeScript
keyof, Partial, пересечение типов
3. Это уровень middle-разработчика
не синтаксис, а мышление типами


#домашка

479

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

For...in

https://telegra.ph/forin-11-15 👨‍💻

#js | #теория

502

5

0

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

Яндекс вебмастер. Зачем нужен?

https://telegra.ph/YAndeks-vebmaster-Zachem-nuzhen-01-08 👨‍💻

#полезности

601

3

0

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Анимация скролла с Grid

https://codepen.io/KevinGutowski/pen/QwNZYzL

#практика

563

4

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Что такое type и зачем он нужен

type это способ задать тип данных в TypeScript.
Если говорить просто, type позволяет дать имя любому типу: объекту, строке, числу, объединению типов и даже функции.

Начнём с самого базового примера:

name: string
isAdmin: boolean
}

Теперь этот тип можно использовать в любом месте кода:
```const user: User = {
name: 'Tigran',
isAdmin: false
}

По сути, type работает похоже на interface, когда речь идёт об объектах.
Но у type есть возможности, которых нет у interface.
1. Можно создавать объединения типов (union types)

type Status = 'loading' | 'success' | 'error'

Теперь переменная может принимать только одно из этих значений:

let status: Status

status = 'loading' // OK
status = 'done' // Ошибка

Это очень удобно для состояний, ролей, типов уведомлений и других фиксированных значений.
2. Можно объединять типы

type User = {
name: string
}

type Admin = {
permissions: string[]
}

type AdminUser = User & Admin

Здесь используется оператор & — он объединяет типы.

const admin: AdminUser = {
name: 'Tigran',
permissions: ['read', 'write']
}

3. Можно описывать примитивные типы

type ID = string | number

Теперь ID может быть строкой или числом:

let userId: ID

userId = 123
userId = 'abc-123'

4. Можно описывать функции

type Calculate = (a: number, b: number) => number

И использовать:

const sum: Calculate = (a, b) => {
return a + b
}

Когда использовать type:
• когда нужны union или intersection типы
• когда нужно дать имя примитивному типу
• когда описываешь сложные типы данных
• когда работаешь с утилитами типов (Partial, Pick, Omit и т.д.)

Важно понимать:
как и interface, type существует только во время разработки.
В итоговый JavaScript он не попадает.

Частый вопрос:
в чём разница между type и interface?

Коротко:
• interface лучше подходит для описания объектов и их расширения
• type более гибкий и подходит для сложных типов

На практике в большинстве проектов используют оба.

Для закрепления:
попробуй описать тип Theme, который может принимать только значения 'light' или 'dark'.

#ts

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Задача: Сделать объект строго
типизированным по ключам

Есть объект с переводами:

en: 'Hello',
ru: 'Привет',
hy: 'Բարև'
}

Нужно создать тип Language, который будет автоматически содержать только ключи этого объекта.

То есть:
type Language = ??? // 'en' | 'ru' | 'hy'

И затем использовать его:

return translations[lang]
}
translate('en') // OK
translate('de') // Ошибка

Условие:
Тип должен обновляться автоматически, если добавить новый язык в объект.

Подсказка:
используй keyof

#домашка

513

1

Вёрстка сайтов | HTML, CSS, JS

8 мая 2026 г., 11:49

📷 Photo

Подборка лучших постов за прошлую неделю

Лучшие статьи :
1.
2.
3.

Лучшие фронтенд вакансии https://t.me/job_webdev:
1. https://t.me/job_webdev
2. https://t.me/job_webdev
3. https://t.me/job_webdev

Лучшие дизайн вакансии https://t.me/job_webdesign:
1. https://t.me/job_webdesign
2. https://t.me/job_webdesign https://t.me/job_webdesign
3. https://t.me/job_webdesign

#лучшеезанеделю

Вёрстка сайтов | HTML, CSS, JS

1 мая 2026 г., 21:27

📷 Photo

TypeScript: что такое interface и зачем он нужен

Когда начинаешь изучать TypeScript, одним из первых важных понятий становится interface.

interface нужен для описания структуры объекта. То есть он говорит не о том, какие именно данные лежат внутри сейчас, а о том, какой формы эти данные должны быть.

Простой пример:

name: string
age: number
isAdmin: boolean
}

Теперь если создать объект пользователя, TypeScript будет проверять, соответствует ли он этой структуре:

name: 'Tigran',
isAdmin: true
}

Если какого-то свойства не хватит, или тип будет неправильным, TypeScript сразу покажет ошибку.

Почему это удобно:
1. Код становится понятнее
Когда видишь User, уже не нужно гадать, какие поля должны быть у объекта.
2. Меньше ошибок
TypeScript не даст случайно передать строку вместо числа или забыть важное поле.
3. Удобно типизировать параметры функций


name: string
age: number
}

function printUser(user: User) {
console.log(`${user.name}, ${user.age}`)
}

4. Можно описывать не только объекты, но и методы

brand: string
year: number
startEngine: () => void
}

Также в interface можно делать необязательные свойства через ?
```interface Product {
title: string
price: number
discount?: number
}

Это значит, что discount может быть, а может и не быть.

Важно понимать:
interface не создаёт объект и не добавляет логику в JavaScript. Он нужен только для проверки типов во время разработки.

Когда использовать interface:
когда нужно описать структуру объекта, который будет использоваться в разных местах проекта: пользователи, товары, ответы от API, параметры функций, props компонентов и так далее.

Итог:
interface в TypeScript нужен, чтобы задавать понятную и строгую форму данных. Это делает код чище, безопаснее и удобнее в поддержке.

#ts

Вёрстка сайтов | HTML, CSS, JS

1 мая 2026 г., 21:27

📷 Photo

Скролл с выделением слова

https://codepen.io/danielhaim/pen/azmBEPL 👨‍💻

#пратика

633

1

Вёрстка сайтов | HTML, CSS, JS

1 мая 2026 г., 21:27

📷 Photo

Макет для тренировки (ломать не строить)

https://www.figma.com/design/OLvt8xmhqlpLxZdW3GIv7l/сайт-Рамазан?node-id=0-1&p=f&t=ZIxlsPRoRcsxHH6C-0 https://www.figma.com/file/GTMunzCaGdOI1IInpdN9g7/Двери-новые-(Copy)?type=design&node-id=0-1&mode=design&t=F72eBUvmeUuSFhIh-0 https://www.figma.com/file/TTNC3jJnksA8uRTqNJinPZ/Hederson?type=design&node-id=0-1&mode=design&t=7Bm4GfdoNLFUCEhE-0#практика | #макет

513

2

Вёрстка сайтов | HTML, CSS, JS

1 мая 2026 г., 21:27

Как корректно измерять производительность JavaScript-кода

При оценке скорости выполнения кода часто допускается одна и та же ошибка — измерение времени одной операции:

const start = performance.now();

"the sky is blue".split(' ').reverse().join(' ');

const end = performance.now();
console.log('Время выполнения =', end - start);

Такой подход даёт неточный и практически бесполезный результат. Разберёмся, почему.

Во-первых, операция слишком мала. Современные JavaScript-движки выполняют подобные выражения за доли микросекунд, и на итоговое значение начинают влиять посторонние факторы: планировщик задач, загрузка процессора, работа других вкладок.

Во-вторых, влияет JIT-компиляция. Движки, такие как V8 JavaScript engine, сначала исполняют код в базовом режиме, а затем оптимизируют его. Поэтому первый запуск не отражает реальную производительность.

В-третьих, возможны оптимизации со стороны движка: повторяющиеся вычисления могут кэшироваться или упрощаться, что искажает измерение.

Как измерять корректно
1. Выполняйте операцию многократно

const ITERATIONS = 1_000_000;

const start = performance.now();

for (let i = 0; i < ITERATIONS; i++) {
"the sky is blue".split(' ').reverse().join(' ');
}

const end = performance.now();

console.log('Среднее время:', (end - start) / ITERATIONS);

Это позволяет получить усреднённое значение и снизить влияние случайных факторов.

2. Используйте «прогрев» (warm-up)

for (let i = 0; i < 10000; i++) {
"test string".split(' ').reverse().join(' ');
}

Перед измерением стоит выполнить код несколько тысяч раз, чтобы движок успел применить оптимизации.

3. Сравнивайте функции изолированно

Каждый тест должен выполняться отдельно, в одинаковых условиях. Нельзя делать выводы, измеряя несколько вариантов подряд без контроля среды.

4. Используйте специализированные инструменты

Для более точного анализа подойдут:

* performance.now()
* console.time()
* библиотеки вроде Benchmark.js

#js

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

📷 Photo

Подборка лучших постов за прошлую неделю

Лучшие статьи :
1.
2.
3.

Лучшие фронтенд вакансии https://t.me/job_webdev:
1. https://t.me/job_webdev
2. https://t.me/job_webdev
3. https://t.me/job_webdev

Лучшие дизайн вакансии https://t.me/job_webdesign:
1. https://t.me/job_webdesign
2. https://t.me/job_webdesign https://t.me/job_webdesign
3. https://t.me/job_webdesign

#лучшеезанеделю

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

Типы шрифтов

https://telegra.ph/Tipy-shriftov-12-11 👨‍💻

#полезнаястатья

479

1

0

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

Как создать простую галерею изображений с увеличением по клику

https://telegra.ph/Kak-sozdat-prostuyu-galereyu-izobrazhenij-s-uvelicheniem-po-kliku-06-12 👨‍💻

#какэтосделать

507

3

0

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

📷 Photo

Макет для тренировки (new doors)

https://www.figma.com/file/GTMunzCaGdOI1IInpdN9g7/Двери-новые-(Copy)?type=design&node-id=0-1&mode=design&t=F72eBUvmeUuSFhIh-0 https://www.figma.com/file/TTNC3jJnksA8uRTqNJinPZ/Hederson?type=design&node-id=0-1&mode=design&t=7Bm4GfdoNLFUCEhE-0#практика | #макет

441

0

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

📷 Photo

Задача: Реализовать функцию для "сворачивания" массива

Представьте, что вам нужно реализовать функцию, которая "сворачивает" массив, объединяя элементы с одинаковыми значениями и подсчитывая их количество. На вход подается массив значений, а на выходе ожидается объект, где ключами будут уникальные значения массива, а значениями — количество их вхождений.

Пример:
const input = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const result = countOccurrences(input);
console.log(result);
// Ожидаемый вывод:
// {
// apple: 3,
// banana: 2,
// orange: 1
// }
Условия:
Функция должна корректно работать с массивами любых типов данных, например, строк, чисел, или даже объектов, если в них используется одинаковая ссылка.
Постарайтесь реализовать решение с минимальным количеством проходов по массиву.

Вопросы для обсуждения на собеседовании:
Как функция будет обрабатывать массив с большим количеством элементов?
Как можно оптимизировать использование памяти при работе с крупными массивами?
Как можно адаптировать функцию для обработки массивов, содержащих объекты с одинаковыми значениями, но разными ссылками?

#домашка

Вёрстка сайтов | HTML, CSS, JS

21 апр. 2026 г., 22:01

📷 Photo

Подборка лучших постов за прошлую неделю

Лучшие статьи :
1.
2.
3.

Лучшие фронтенд вакансии https://t.me/job_webdev:
1. https://t.me/job_webdev
2. https://t.me/job_webdev
3. https://t.me/job_webdev

Лучшие дизайн вакансии https://t.me/job_webdesign:
1. https://t.me/job_webdesign
2. https://t.me/job_webdesign https://t.me/job_webdesign
3. https://t.me/job_webdesign

#лучшеезанеделю

Showing 30 of 44 posts