Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Вопросы по css на собеседовании
2. SEO фишки
3. Полезные расширения chrome
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Стажер HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Стажер веб дизайнер
2. Web дизайнер
3. UX/UI дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Вопросы по css на собеседовании
2. SEO фишки
3. Полезные расширения chrome
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Стажер HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Стажер веб дизайнер
2. Web дизайнер
3. UX/UI дизайнер
#лучшеезанеделю
С Новым годом, друзья! 🎉
Пусть 2025 год принесёт вам счастье, вдохновение и яркие моменты! Впереди множество новых идей, знаний и свершений — будем расти вместе!
Успехов, радости и тепла вам в этом году!🔴
Пусть 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 уже сегодня!
#полезнаястатья
В мире современных технологий пользователи ожидают быстрые, удобные и надежные приложения. Здесь на помощь приходит концепция 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
Задача: Фиксация блока при скролле (CSS + HTML)
Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.
Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?
#домашка
Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.
Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?
#домашка
❤5👍1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Что такое PWA
2. Макет для тренировки (Natitanic)
3. Ссылки mailto: и tel:
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Junior Frontend developer
Лучшие дизайн вакансии @job_webdesign:
1. Product дизайнер
2. Младший Web дизайнер
3. Web дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Что такое PWA
2. Макет для тренировки (Natitanic)
3. Ссылки mailto: и tel:
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Junior Frontend developer
Лучшие дизайн вакансии @job_webdesign:
1. Product дизайнер
2. Младший Web дизайнер
3. Web дизайнер
#лучшеезанеделю
👍3
Какой метод используется для добавления нового элемента в DOM?
Anonymous Quiz
30%
appendChild()
3%
insertBefore()
41%
createElement()
25%
Все вышеперечисленные
👎11👍1
Какое значение свойства position позволяет фиксировать элемент относительно окна браузера?
Anonymous Quiz
60%
Fixed
15%
Sticky
18%
Absolute
7%
Relative
👏4👍1
Задача на html и css: Grid и адаптив
Создайте сетку из трёх колонок, которая:
- На экранах шириной менее 768px становится одноколоночной.
- На экранах от 768px до 1200px отображается в две колонки.
- На экранах шире 1200px отображается в три колонки.
Подсказка: Используйте grid-template-columns и медиазапросы.
#домашка
Создайте сетку из трёх колонок, которая:
- На экранах шириной менее 768px становится одноколоночной.
- На экранах от 768px до 1200px отображается в две колонки.
- На экранах шире 1200px отображается в три колонки.
Подсказка: Используйте grid-template-columns и медиазапросы.
#домашка
👍3
Какой селектор используется для выбора элементов с атрибутом data-id, значение которого начинается с "abc"?
Anonymous Quiz
21%
[data-id*="abc"]
47%
[data-id="abc"]
12%
[data-id$="abc"]
20%
[data-id^="abc"]
👍2👎2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Методологии управления проектами
2. PostCSS
3. Progressive Enhancement
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Frontend разработчик
3. HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер
2. Веб-дизайнер
3. UX-UI дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Методологии управления проектами
2. PostCSS
3. Progressive Enhancement
Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Frontend разработчик
3. HTML верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер
2. Веб-дизайнер
3. UX-UI дизайнер
#лучшеезанеделю
Как создаются переменные в css?
Anonymous Quiz
54%
--mainColor: #000;
13%
$mainColor: #000;
25%
var(mainColor): #000;
7%
mainColor: #000;
👍4
Атрибут disabled
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.
#html | #полезности
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
button, input, option, select, textarea, optgroup, filedset
Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.
#html | #полезности
👍3😍1