Фронтенд Гайд

Макет Figma простого лендинга. 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ❌ 📄 Страницы макета: Главная #Макет

CSS Filter Cards Интересный ховер эффект размытия карточек при наведении. Собрано на чистом CSS. #CodePen

Макет Figma очень сложного многостраничного сайта услуг финансовой организации с личным кабинетом. 🗂 Категория: Сайт услуг 💵 Сложность: Очень сложный 📱 Адаптив: ✅ 📄 Страницы макета (28): - Главная - Контакты - Ответы на вопросы - О компании - 404 - 5 страницы с Документами - 3 Информационных страницы - 5 Страниц оформления заявки - 10 Страниц личного кабинета #Макет

Menu "Hamburger" Icon Animations 4 варианта анимации бургер меню при нажатии на него. Собрано на чистом CSS, с минимальным применением JavaScript. #CodePen

Макет Figma несложного каталога сертифицированных ножей. 🗂 Категория: Каталог 💵 Сложность: Умеренный 📱 Адаптив: ✅ 📄 Страницы макета (3): - Главная - Страница Каталога - Детальная страница товара #Макет

Анимированная карточка товара Интересный вариант оформления карточки товара. Собрана на SCSS #CodePen

Макет Figma простого лендинга в тематике инвестиций. 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ✅ 📄 Страницы макета: Главная #Макет

Animated Tab Bar Анимированная панель вкладок. Собрана на CSS и JavaScript. #CodePen

Макет Figma простого лендинга сайта о правильном питании котов и кошек. 🗂 Категория: Лендинг 💵 Сложность: Очень простой 📱 Адаптив: ✅ 📄 Страницы макета: Главная #Макет

Check Micro Animation Анимированный чекбокс. Собрано на CSS c применением JavaScript. #CodePen

Figma макет лендинга компании. 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ❌ 📄 Страницы макета: Главная #Макет

CheckBoxes Плавная смена фона, а так же цвета кнопок. Выполнено в одном стиле. Собрано на чистом на СSS. #CodePen

Макет Figma информационно сайта умеренной сложности на тему поставки нефти и топлива. 🗂 Категория: Инфо. сайт 💵 Сложность: Умеренный 📱 Адаптив: ✅ 📄 Страницы макета (8): - Главная - Блог - Детальная блога - Контакты - 4 контентных страниц #Макет

Чтобы ты не терялся среди своих подписок и кучи материалов по веб-разработке, Джун Джунович собирает самые важные новости и лайфхаки из мира FrontEnd.  О том, что полезно знать фронту, почему сайт должен весить меньше 14 КБ или как применять любопытные фишки из CSS, узнавай из одного канала. А не открывая сто первую вкладку с той статьей, которую ты никогда не дочитаешь. Переходи к Джун Джуновичу и выбери полезное для себя и своего дела.

Jumping Gooey Navigation Красивая прыгающая навигация. Анимация собрана с помощью GSAP. #CodePen

Макет Figma простого лендинга ресторанного комплекса "Летний Дворец". 🗂 Категория: Лендинг 💵 Сложность: Очень простой 📱 Адаптив: ❌ 📄 Страницы макета: Главная #Макет

📝 Найдена пошаговая инструкция, как учиться веб-разработке бесплатно 1️⃣ Заходим в канал Бесплатные уроки по вебу, там выкладывают курсы от профессиональных авторов по разным темам: HTML, CSS, Javascript, Wordpress, React, PHP, Webflow, Figma и т.д. 2️⃣ Потом идём в самый крупный канал с реальными дизайн-макетами сайтов. Там берем шаблоны и тренируем навыки верстки и JS. 3️⃣ Чтобы найти анимации и крутые UX-UI решения, идем на Codepen.js и смотрим лучшие практики по вебу, пытаемся повторить и разобрать код. Профит.

Neumorphism and toggles Переключатели в стиле неоморфизма, собраны с помощью SCSS и JavaScript #CodePen

Макет Figma простого лендинга для застройщика 🗂 Категория: Лендинг 💵 Сложность: Простой 📱 Адаптив: ❌ 📄 Страницы макета: Главная #Макет

Сколько времени нужно, чтобы стать востребованным фронтенд-разработчиком? Всего 10 месяцев! Вы сможете совмещать обучение с любыми другими занятиями. Главное условие - ваше желание учиться. В Xeкслете вы можете пройти онлайн-курс по профессии "Фронтенд-разработчик". Во время программы вы: ✔️ Изучите JavaScript в связке с HTML и CSS. ✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️ Решите более 310 задач в браузере. ✔️ Создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров. ✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах. В процессе обучения вы не просто будете писать код, а научитесь самостоятельно находить лучшие решения. 🎁 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !