Готовый Код | Frontend

Задача: Напиши функцию, которая принимает на вход строку и возвращает эту строку в обратном порядке.

Давай решим задачу на поиск суммы элементов массива. У нас есть массив чисел: const numbers = [1, 2, 3, 4, 5]; Наша задача - найти сумму всех чисел в этом массиве. Решение по кнопке ниже))👇

Задача: Функция, которая генерирует все комбинации строки Уровень: Легкий Условие: Напишите функцию substrings(str), которая генерирует все комбинации строки. Пример строки: 'dog'. Ожидаемый результат: d, o, do, g, dg, og, dog. Решение: тут

На css и js можно делать крутые отзывчивые интерфейсы Если знать, как 💥 Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо Несколько сотен готовых решений для вдохновения и использования  Личный помощник фронтендеру прямо в мессенджере!

Задача: Проверьте, является ли переданная строка палиндромом или нет Уровень: Легкий Условие: Напишите функцию JavaScript, которая проверяет, является ли переданная строка палиндромом? Палиндром - это слово, фраза или последовательность, которые читаются так же, как вперед, назад, например, level. Решение: тут

Задача: Переверните число задом наперед Уровень: легкий Условия: Напишите функцию JavaScript, которая переворачивает число. Решение: по ссылке

Создание кнопок используя em Уровень: средний Условия: Создайте кнопки используя единицы измерения em в необходимых местах. Кнопки трех размеров: обычная, маленькая (sm) и большая (xl). За основу берите обычную кнопку Для разных размеров кнопок можно изменять только размер шрифта, остальное должно изменяться автоматически (внутренний отступ, скругление границ и тень) Кнопки должны быть стилизованы одинаково при использовании тегов как a так и button Решение: https://codepen.io/dmitryvalak/pen/GRgzdpZ

"У вас мало опыта"   Неприятно услышать такое после собеседования. "Как же мне решить эту проблему?"  Наполни свое портфолио качественными работами! Мы собрали для тебя коммерческие макеты работающих сайтов. Здесь ты сможешь найти вдохновение для своего портфолио.  Выбор за тобой: Подписаться и не тратить силы на поиски — или пропустить и продолжить тратить свое время в пустую. Подписывайся: Figma | Макеты и Дизайн

🔥Сделали более 2,5 млн посещений на сайте ежемесячно. Как? Кейс уже в канале Rotgar | SEO. (27.04.2023) Ребята продвигают сайты более 10 лет. В канале вы найдете только актуальные статьи и кейсы по SEO-продвижению. ➡️В канале нет рекламы. ➡️Вся информация бесплатна. ➡️Без воды и копипаста. Присоединяйся — @rotgarseo✅

Может добавить задач по JS?

Прекрати мечтать и стань мидлом за 50 дней Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке. CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак. Развивайся с нами, ведь так проще!

Создание стилизованных чекбоксов Уровень: средний Условие: Сделайте чекбоксы как на изображении. Можно использовать только HTML и CSS. Иконку галочки можете найти на сайте flaticon.com Решение: https://codepen.io/dmitryvalak/pen/zYxyVRa

Загляни в наш Telegram канал и расширь свои знания Front-End/Back-End! ⚡️ Закладки программиста⚡️ 🔥 У нас ты найдешь полезные темы, такие как: • Django - узнай, как преобразовать ссылку модели, связанной через models.ForeignKey, в сериализованный объект, а не только в id. • Управление Docker - научись останавливать, удалять контейнеры и избавляться от лишних Docker images с помощью простых команд. • Использование Mixins во Vue.js - узнай, как создавать и применять Mixins для повторного использования кода в нескольких компонентах. 🔗 Каждый пост сопровождается примерами кода и подробными объяснениями, чтобы у тебя была возможность легко освоить представленные концепции. Наш канал будет полезен:   • Начинающим и опытным верстальщикам   • Программистам   • Веб-дизайнерам

​​Создание формы регистрации Уровень: начинающий Условия: создайте форму регистрации используя HTML и CSS, как на указанном изображении Решение: https://codepen.io/dmitryvalak/pen/XWJOVqw Не забудь поставить лайк)

​​Создание "хлебных крошек" уровень: начинающий Задача: создайте "хлебные крошки" используя HTML и CSS На изображении показано как должны выглядеть "хлебные крошки" Используйте список для создания структуры хлебных крошек Стрелочки должны быть реализованы через псевдо-элемент after для всех элементов списка, кроме последнего В последнем элементе списка должен быть span, в остальных - ссылки Цвет ссылок #0b56ea, без подчеркивания, при наведении подчеркивать ссылки снизу Цвет текста в span #333; Решение: https://codepen.io/dmitryvalak/pen/VwYgdjW

​​Создание постраничной навигации уровень: начинающий Задача по HTML и CSS: создайте простую постраничную навигацию Элементы навигации должны быть по центру Размер элементов навигации 40х40 Фон элементов навигации #ddd, цвет текста #333, текст по центру по двум осям Фон элементов навигации при наведении #ccc Фон активного элемента навигации #d10953, цвет текста #fff Расстояние между элементами навигации 6px Для создание стрелок используйте специальные символы HTML Пример на картинке Решение: https://codepen.io/dmitryvalak/pen/WNbPzJG Ставь лайк)

Задача по HTML и CSS: создание HTML таблиц и работа с ними Выполните все пункты задания и сравните с результатом. 1.Создайте папку в удобном для вас месте на вашем компьютере 2. В этой папке создайте новый HTML документ - index.html 3. В index.html создайте HTML скелет документа 4. Создайте новый CSS файл - style.css 5. Подключите CSS файл к HTML файлу 6. Создайте таблицу состоящую из 5 строк и 5 столбцов, укажите таблице класс table 7. Первую строку оберните в тег thead и столбцы переделайте в заглавные столбцы (th) 8. Последнюю строку оберните в тег tfoot 9. Оставшиеся строки оберните в тег tbody 10. Обозначьте столбцы первой строки заголовками, прописав текст (первый - №, второй - Имя, третий - E-mail, четвертый - Пол, пятый - Дата) в тегах th 11. Заполните строки, которые находятся в tbody любыми произвольными данными 12. В последней строке, которая находится в tfoot, объедините все столбцы в один, используя соответствующий атрибут для td 13. В получившимся столбце напишите текст "Всего: 3" 14. В CSS файле создайте селектор .table td, .table th и создайте сплошную границу толщиной в 1 пиксель и цветом #ccc; и задайте внутренний отступ сверху и снизу по 5px, слева и справа по 10px 15. Создайте селектор .table и объедините границы ближайших столбцов при помощи специального свойства (ищите в поиске "поведение границ таблицы"), так же задайте таблице ширину 500px; 16. Создайте селектор .table thead и измените цвет фона на #f0f1f4; 17. Создайте селектор .table tfoot и измените цвет фона на #121212;, цвет текста на #fff; и текст прижать к правому краю Результат: https://codepen.io/dmitryvalak/pen/zYxMWoJ

Создание стилизованных радио-кнопок уровень: средний Задача по HTML и CSS: создайте стилизованные радио-кнопки используя HTML и CSS Сделайте radio-кнопки как на изображении Можно использовать только HTML и CSS. Решение: https://codepen.io/dmitryvalak/pen/jOEXjvL

А у нас тут Яндекс.Дзен появился) https://dzen.ru/id/649d3ac0d40e6d26525f1df1 - подписывайтесь)