Вёрстка сайтов | HTML, CSS, JS
4.79K subscribers
650 photos
3 videos
4 files
1.1K links
👋 Привет, друг!

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

Связь: @Tigran1963
Download Telegram
С Новым годом, друзья! 🎉

Пусть 2025 год принесёт вам счастье, вдохновение и яркие моменты! Впереди множество новых идей, знаний и свершений — будем расти вместе!

Успехов, радости и тепла вам в этом году! 🔴
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥6
Что такое PWA и почему это важно для современного веба?

В мире современных технологий пользователи ожидают быстрые, удобные и надежные приложения. Здесь на помощь приходит концепция Progressive Web Apps (PWA) — прогрессивных веб-приложений.

Что такое PWA?
PWA — это веб-приложения, которые работают как нативные мобильные приложения. Они разрабатываются с использованием веб-технологий, таких как HTML, CSS и JavaScript, но обладают возможностями, которые раньше были доступны только нативным приложениям.

Основные характеристики PWA:
- Установка: PWA можно добавить на главный экран устройства без необходимости загрузки из магазина приложений.
- Высокая производительность: Кэширование позволяет сократить время загрузки.
- Обновления в реальном времени: Приложение всегда актуально, так как оно обновляется прямо с сервера.

Ключевые преимущества PWA
- Кросс-платформенность: Одно приложение работает на всех устройствах — компьютерах, планшетах и смартфонах.
- Экономия ресурсов: PWA занимают меньше места, чем нативные приложения, и не требуют установки через App Store или Google Play.
- Повышение вовлеченности: Благодаря push-уведомлениям и возможности работы офлайн, пользователи остаются дольше на сайте.
- Простая разработка: Нет необходимости писать код отдельно для Android и iOS.
Как PWA изменяет бизнес?
Компании, которые внедряют PWA, часто отмечают рост конверсий и снижение отказов. Примером может служить компания AliExpress: после перехода на PWA время, проводимое пользователями на сайте, увеличилось на 74%, а конверсии — на 104%.

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

#полезнаястатья
👍8
Макет для тренировки (Natitanic)
Лендинг - портфолио

Перейти к макету 🧑‍💻

#практика | #макет
👎1
Задача: Фиксация блока при скролле (CSS + HTML)

Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.

Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?

#домашка
5👍1
Что такое Progressive Enhancement и как его внедрить в проект?

Читать 👨‍💻

#полезнаястатья
👍3
Красивый шаблон для портфолио

Смотреть на codepen 👨‍💻

#какэтосделать
👍3👎2
Что такое PostCSS и зачем он нужен?

Читать 👨‍💻

#полезности | #css
👍4
Какой метод используется для добавления нового элемента в DOM?
Anonymous Quiz
30%
appendChild()
3%
insertBefore()
41%
createElement()
25%
Все вышеперечисленные
👎11👍1
Основные методологии управления проектами: от Agile до Waterfall

Читать 👨‍💻

#полезнаястатья
👍2
Какое значение свойства position позволяет фиксировать элемент относительно окна браузера?
Anonymous Quiz
60%
Fixed
15%
Sticky
18%
Absolute
7%
Relative
👏4👍1
Макет для тренировки (superpeer)

Перейти к макету 🧑‍💻

#практика | #макет
👏1
Задача на html и css: Grid и адаптив

Создайте сетку из трёх колонок, которая:
- На экранах шириной менее 768px становится одноколоночной.
- На экранах от 768px до 1200px отображается в две колонки.
- На экранах шире 1200px отображается в три колонки.

Подсказка: Используйте grid-template-columns и медиазапросы.

#домашка
👍3