КодВеб | Дизайн База

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

TargetADs - Биржа для успешной рекламы в Telegram Почему именно мы? • Сеть каналов для любого рынка • Точный охват целевой аудитории • Гибкие условия и низкие цены на продвижение TargetADs позволит найти формулу вашего успеха! Связь для рекламодателей Связь для владельцев каналов

👨‍💻 Shadow text effect Стильный текст с тенью для сайта Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как сделать красивое вертикальное меню с иконками? HTML:

<div class="widget">
  <h3>Категории</h3>
  <ul>
    <li><a href="">Дизайн</a></li>
    <li><a href="">Фотошоп</a></li>
    <li><a href="">Типографика</a></li>
    <li><a href="">Музыка</a></li>
    <li><a href="">Видео</a></li>
  </ul>
</div>

CSS:

* {box-sizing: border-box; margin: 0;}
.widget {
  padding: 20px;
  border: 5px solid #f1f1f1;
  background: #fff;
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
}
.widget h3 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  color:  #424949;
}
.widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 250px;
}
.widget li {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.widget li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.widget a {
  text-decoration: none;
  color:  #616a6b;
  display: inline-block;
}
.widget li:before {
  font-family: FontAwesome;
  font-size: 20px;
  vertical-align:bottom;
  color: #dd3333; 
  margin-right: 14px;
}
.widget li:nth-child(1):before {content:"\f1fc";}
.widget li:nth-child(2):before {content:"\f0d0";}
.widget li:nth-child(3):before {content:"\f0cd";}
.widget li:nth-child(4):before {content:"\f028";}
.widget li:nth-child(5):before {content:"\f03d";}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Кто также делает? 😁 @codewebx | #мемы

#️⃣ Что такое сборщик Webpack

Webpack — это инструмент для объединения данных из разных источников, например JS, TS, CSS, фреймворков и библиотек. Webpack берёт их, настраивает и объединяет в один итоговый файл — пакет ресурсов сайта. Этот файл можно оптимизировать разными способами, например для уменьшения размера, отложенной загрузки и так далее. Файл собирается на компьютере разработчика, а не на стороне сервера или браузера — они работают только с результатом: сервер отправляет файл браузеру, а тот отображает страницу или веб-приложение. @codewebx | #Прочее

В это сложно поверить, но мы нашли бесплатный курс, где за 7 дней ты освоишь такие темы, как: 1. Основы верстки Изучаешь основы HTML, CSS и верстаешь первую страницу. 2. Программирование на JavaScript Изучаешь принцип работы JavaScript и оживляешь страницу с его помощью. 3. Фреймворк Angular Переносишь функционал во фронтенд-проект и пишешь код на TypeScript. 4. Деплой на продакшн Подключаешь реальный Backend и загружаешь сайт на хостинг. 5. Адаптив сайта Адаптируешь сайт под разные устройства. Но самое главное — это общение с опытными фронтенд-разработчиками, которые покажут слабые места в твоём проекте, подскажут как их пофиксить и помогут составить план построения успешной карьеры во фронтенд-разработке Всё темы можно освоить бесплатно с поддержкой куратора по ссылке: https://vk.cc/ctMzU6 Приходи на бесплатное обучение и бери с собой товарищей.

👩‍💻 MULTI CINEMA Многостраничный сайт с фильмами. 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Присоединяйтесь к нашему бесплатному курсу и начните увлекательное путешествие в мир Java! Изучайте основы, создавайте программы, разбирайтесь с методами и анализируйте ошибки в коде. Практика, упражнения и проверочные тесты помогут вам освоить навыки программирования. 🎓 Чему вы научитесь: — Создавать программы с использованием основных конструкций языка.  — Разделять код на методы для повторного использования.  — Анализировать ошибки в коде с использованием отладочной печати. 💼 Включено в курс: 29 уроков (видео и/или текст), 35 упражнений в тренажере, 95 проверочных тестов + дополнительные материалы. Вы с нами?😉 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670.

👨‍💻 Card hover effect Карточки с красивым эффектом при наведении. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Новичок в дизайне и плутаешь в темноте?🤔 Знакомьтесь 👋Это Катя, практикующий middle+ UI/UX дизайнер. И она может помочь новичкам не остаться один на один с собой без портфолио после прохождения дорогущего обучения. Наставит на путь и расскажет, куда двигаться дальше. На канале есть комьюнити, где: ➖препарируют учебные и реальные кейсы ➖обсуждают тренды и пути развития в диджитал мире ➖делятся рекомендациями и обратной связью Только польза и забота о каждом, кто начинает дизайнить 👉 https://t.me/kkprodesign

👨‍💻 Movie card with hover effect Красивая карточка фильма с анимацией. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Позвольте себе работать, не вставая с кровати! Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты! Регистрируйтесь: https://epic.st/ek4m- Вы научитесь: — создавать веб-страницы, используя язык разметки HTML и технологию CSS; — реализовывать серверную часть (backend) веб-приложений на языке PHP; — работать с базой данных MySQL при помощи языка запросов SQL; — создавать приложения на языке программирования JavaScript; — размещать сайты в интернете. 📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. 🎁Подарки: — сертификат на скидку 10 000 рублей на любой курс; — доступ к изучению английского языка на год; — 5 полезных подборок материала; — персональная карьерная консультация. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

❔Как сделать простой дизайн карточки товара для интернет-магазина? HTML:

<div class="product-item">
  <img src="image.jpg">
  <div class="product-list">
    <h3>Маленькое черное платье</h3>
      <span class="price">₽ 1999</span>
      <a href="" class="button">В корзину</a>
  </div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.product-item {
   width: 300px;
   text-align: center;
   margin: 0 auto;
   border-bottom: 2px solid #F5F5F5;
   background: white;
   font-family: "Open Sans";
   transition: .3s ease-in;
}
.product-item:hover {
   border-bottom: 2px solid #fc5a5a;
}
.product-item img {
   display: block;
   width: 100%;
}
.product-list {
   background: #fafafa;
   padding: 15px 0;
}
.product-list h3 {
   font-size: 18px;
   font-weight: 400;
   color: #444444;
   margin: 0 0 10px 0;
}
.price {
   font-size: 16px;
   color: #fc5a5a;
   display: block;
   margin-bottom: 12px;
}
.button {
   text-decoration: none;
   display: inline-block;
   padding: 0 12px;
   background: #cccccc;
   color: white;
   text-transform: uppercase;
   font-size: 12px;
   line-height: 28px;
   transition: .3s ease-in;
}
.product-item:hover .button {
   background: #fc5a5a;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Канал опытного фронтенд разработчика который разработал интерактивный учебник для изучения фреймворка Vue.js На своем канале "Frontend для взрослых" делится знаниями и материалами по разработке полноценных масштабируемых систем используя - Node, JavaScript, TypeScript, Vue.js, Docker и прочие инструменты. Если вы давно хотели найти канал с продвинутой информацией по фронтенду и выйти на новый уровень то подписывайтесь!

👩‍💻Cyberpunk 2077 Лендинг о компьютерной игре 🟠 Сложность: Легкий 🟠 Адаптивность: Есть Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Белый хакер - программное обеспечение, утилиты, OSINT, инструменты, полезная литература и много другое. Совершенно новый формат непохожий на другие каналы. Белый хакер P. S Уютное место сталкеры

👨‍💻 Changing background colour with CSS Ползунок с изменением заднего фона сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы