HTML + CSS – Слайдер-карточка
Условие:
Сверстай компонент карточки, в которой:
- есть фото (например, 300x200),
- поверх фото затемнение при ховере,
- и стрелки по бокам (влево / вправо),
- при клике на стрелку — карточка меняется (слайд).
Усложнение: Сделай без JS, только на CSS (используй :checked, label, input[type=radio], position: absolute и т.п.).
#домашка
Условие:
Сверстай компонент карточки, в которой:
- есть фото (например, 300x200),
- поверх фото затемнение при ховере,
- и стрелки по бокам (влево / вправо),
- при клике на стрелку — карточка меняется (слайд).
Усложнение: Сделай без JS, только на CSS (используй :checked, label, input[type=radio], position: absolute и т.п.).
#домашка
👍4❤1
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. inverse text-sizing with attr
2. Атрибут novalidate
3. Как валидировать формы на JavaScript
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer (React)
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UX/UI дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. inverse text-sizing with attr
2. Атрибут novalidate
3. Как валидировать формы на JavaScript
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer (React)
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UX/UI дизайнер
#лучшеезанеделю
👍2
Какой псевдокласс сработает при установке курсора в текстовое поле?
Anonymous Quiz
25%
:hover
16%
:active
1%
:not(:disabled)
50%
:focus
2%
:visited
5%
Посмотреть ответы
👎4🌭4👍3
TypeScript – Типизация query-параметров
Условие:
Есть функция parseQuery, которая принимает строку вроде ?name=John&age=20&admin=true и возвращает объект.
Задача:
Напиши типизацию этой функции в TS так, чтобы результат автоматически имел корректные типы:
#домашка
Условие:
Есть функция parseQuery, которая принимает строку вроде ?name=John&age=20&admin=true и возвращает объект.
Задача:
Напиши типизацию этой функции в TS так, чтобы результат автоматически имел корректные типы:
const result = parseQuery('?name=John&age=20&admin=true');
/*
typeof result должно быть:
{
name: string;
age: number;
admin: boolean;
}
*/#домашка
👍2
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Стилизация селектов
2. Minecraft на чистом css
3. Javascript:void(0)
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Разработка
3. Junior / Middle Frontend Developer
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UX/UI дизайнер
3. Продуктовый мобильный дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Стилизация селектов
2. Minecraft на чистом css
3. Javascript:void(0)
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Разработка
3. Junior / Middle Frontend Developer
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UX/UI дизайнер
3. Продуктовый мобильный дизайнер
#лучшеезанеделю
👍3
Как сделать сравнение паролей на js
<form class="form" action="address.txt" method="get" >
<input id="password" name="password" type="password" placeholder="Пароль" >
<input id="password-check" name="password-check" type="password" placeholder="Подтверждение пароля" title="" >
<input id="submit" name="submit" type="submit" value="Создать аккаунт">
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('.form'),
pas = form.querySelectorAll('#password, #password-check');
form.addEventListener('submit', function(e) {
var err = !(pas[0].value && (pas[0].value == pas[1].value))
pas[1].setAttribute("title", err ? 'err' : '');
err && e.preventDefault();
}, false);
pas[1].addEventListener('input', function(e) {
var err = !(pas[0].value == pas[1].value)
pas[1].setAttribute("title", err ? 'err' : '');
}, false);
});
</script>
#практика👍5
CSS – Адаптивная сетка карточек с auto-fit
Условие:
Сделай сетку карточек (например, .card), которая:
- вмещает как можно больше карточек в ряд,
- карточки имеют минимальную ширину 200px,
- автоматически переносятся на новую строку при нехватке места,
- равномерно распределяются по ширине контейнера.
Ограничения:
- Используй только CSS Grid.
- Без медиа-запросов.
Подсказка: Используй grid-template-columns: repeat(auto-fit, minmax(...)).
#домашка
Условие:
Сделай сетку карточек (например, .card), которая:
- вмещает как можно больше карточек в ряд,
- карточки имеют минимальную ширину 200px,
- автоматически переносятся на новую строку при нехватке места,
- равномерно распределяются по ширине контейнера.
Ограничения:
- Используй только CSS Grid.
- Без медиа-запросов.
Подсказка: Используй grid-template-columns: repeat(auto-fit, minmax(...)).
#домашка
👍4
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Push-уведомления через браузер
2. Как сделать сравнение паролей на js
3. Вариативные шрифты
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтэнд Разработчик
3. Верстальщик на React.js / Middle
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Push-уведомления через браузер
2. Как сделать сравнение паролей на js
3. Вариативные шрифты
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтэнд Разработчик
3. Верстальщик на React.js / Middle
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
👍3