Библиотека верстальщика
2.48K subscribers
475 photos
3 videos
1 file
211 links
Полезные материалы.

Группа Вк: vk.com/web_structure
Верстка сайтов: @web_structure
Веб Дизайн: @dev_design
Работа: @web_fl

Реклама: @M_Boroda
Download Telegram
Buttons. CSS Hover

codepen.io
Card Hover

codepen.io
Pop-Out Effect

codepen.io
Хотим поделиться ценной информацией!
Гайд по производительности Виталия Фридмана теперь на русском языке 🔥

Полный гайд по производительности фронтенда каждый год публикует Виталий Фридман на своём проекте smashingmagazine.com. Организаторы FrontendConf перевели руководство на русский язык и скомпоновали его в 12 статей. Это наш вклад в развитие сообщества фронтендеров. Подробнее по ссылке 👉 https://clck.ru/WWiWC

Одна неделя — одно письмо. Плюс списки полезной литературы и материалов в конце каждой статьи.
Чтобы получить доступ, нужно только оставить свою почту 👉 https://clck.ru/WWXeR

#реклама
Menu Button

codepen.io
Начните курс «Я — веб-разработчик PRO» сейчас и получите первый заказ уже через два месяца!
Бонус для всех студентов - 6 месяцев бесплатного обучения!
Что вас ждет на курсе в Skillbox?

- Онлайн-уроки и воркшопы.
- Преподаватели-практики.
- Реальные проекты.

По завершении у вас уже будет крутое портфолио на GitHub, а мы поможем с трудоустройством!

Готовы начать карьеру в IT? Переходите по ссылке: https://clc.am/_nnl-Q и регистрируйтесь прямо сейчас!

#реклама
Slider | GSAP

codepen.io
SVG Hamburger Menu

codepen.io
💻 Полезные сервисы для веб-разработчиков

1️⃣ HTML Template Generator — генератор базовой HTML-разметки документа

2️⃣ CSS Triggers — подробная информация обо всех CSS-свойствах

3️⃣ PX to EM — удобный конвертер из PX в EM и обратно

4️⃣ SnazzyMaps — различные цветовые схемы для Google Maps

5️⃣ Bounce.JS — сервис/JS-библиотека для быстрого создания и редактирования CSS - анимаций

#сервисы #верстка
Card Hover Effect

codepen.io
💻 Полезные сервисы для веб-разработчиков

1️⃣ Fontawesome — Сервис является лучшим иконочным шрифтом. Его без проблем можно подключить на любом сайте.

2️⃣ Flaticon — Иконки для сайта

3️⃣ Glyphter — Cоздание своего иконочного шрифта

4️⃣ Tinypng — Cжатие изображений

5️⃣ Browsershots — Тестируем сайт в самых различных браузерах

#сервисы #верстка
Полезные инструменты для фронтенда

1️⃣ Fontsquirrel — Генератор веб-шрифтов

2️⃣ Sprite — Простой способ сделать из множества картинок одну

3️⃣ git — Система контроля версий

4️⃣ gulp — Сборщик проектов

5️⃣ Box shadows — Добавляет элементу тень

6️⃣ Favicon generator — Генератор FAV-иконок под любые разрешения

7️⃣ VirtualBox — виртуальная машина от Microsoft, возможность протестировать проект на Windows, если работаешь на Mac
Полезные библиотеки для фронтенда

1️⃣ jQuery FancyBox — плагин для создания фотогалерей и вывода изображений в модальных окнах.

2️⃣ Snap svg — JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах.

3️⃣ jQuery Form Styler — плагин для стилизации формы обратной связи.

4️⃣ Barba.js — библиотека делает «приложение одной страницы», иными словами — страница без перезагрузки. (пример).

5️⃣ Lettering.js — используется для анимации текста. С помощью плагина слово разбивается на буквы и с каждой можно работать отдельно.

6️⃣ Swiper.js — слайдер, гибкий, имеет множество настроек.

7️⃣ PickMeUp.js — плагин jQuery datepicker. Простой и одновременно мощный календарь событий.
Animated Slider
This media is not supported in your browser
VIEW IN TELEGRAM
Блок прайс на чистом css

#html #css #price
This media is not supported in your browser
VIEW IN TELEGRAM
CSS hover эффект на кнопку

#html #css #hover
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект наведения карточки профиля

#html #css #hover #card
Онлайн-курс «Frontend-разработчик с нуля до PRO» — ваш проводник в мир IT.

По окончании обучения вы сможете стать middle-разработчиком и устроиться на высокооплачиваемую работу, даже если вы никогда раньше не программировали.

На курсе вы научитесь:
- верстать веб-страницы;
- создавать интерактивные веб-приложения;
- работать в системе контроля версий GIT и командной строке Bash;
- применять основные алгоритмы и структуры данных в реальных проектах;
- работать с макетами в Photoshop и Figma;
- создавать серверные приложения с использованием Node.js и многому другому.

А ещё у вас будет 4 дипломных проекта для вашего портфолио — они повысят шансы получить должность в одной из компаний, которые подберет наш Центр карьеры.
Переходите по ссылке: https://clc.to/pYdLcg, чтобы зарегистрироваться на курс

#реклама