ColorZilla - быстро и точно узнаем цвет элемента на веб странице

Расширение ColorZilla показывает HTML, RGB, HSL код выбранного цвета или всей палитры цветов используемых на веб странице. История выбранных цветов сохраняется, поэтому можно в любой момент вернуться к ним.

Кроме того,  расширение позволяет создавать сложные градиенты в цветовых форматах HEX, RGB, RGBA, HSL и HSLA. Показывает коды используемых цветов и то, как они будут отображаться в других браузерах. Можно даже экспортировать градиент в виде изображения или CSS кода.

Расширение СolorZilla доступно для Chrome и Firefox.

#расширение #web

CSS Gradient

cssgradient.io — это небольшой веб-сайт и бесплатный инструмент, который позволяет создавать градиентный фон для веб-сайтов. Помимо того, что он является генератором градиентов CSS, сайт также полон красочного контента о градиентах от технических статей до реальных примеров градиентов, таких как Stripe и Instagram.

#сервис #css #web

HTML-CSS-JS

html-css-js.com — онлайн-редактор HTML, CSS и JS с мгновенным предварительным просмотром. Трио HTML-CSS-JS — это части всех веб-сайтов, с которыми взаимодействуют пользователи. Повысьте эффективность вёрстки и обеспечьте максимальное удобство для пользователей с помощью коллекции бесплатных онлайн-инструментов! Больше подробностей на сайте.

#сервис #html #css #js #web

📺 Уроки по Flask с нуля

1. Что это такое? Простое WSGI-приложение [YouTube]
2. Использование шаблонов страниц сайта [YouTube]
3. Контекст приложения и контекст запроса [YouTube]
4. Функция url_for и переменные URL-адреса [YouTube]
5. Подключение внешних ресурсов [YouTube]
6. Мгновенные сообщения [YouTube]
7. Декоратор errorhandler, функции redirect и abort [YouTube]
8. Создание БД, установление и разрыв соединения при запросах [YouTube]
9. Добавление и отображение статей из БД [YouTube]
10. Способ представления полноценных HTML-страниц на сервере [YouTube]

Продолжение в плейлисте на YouTube.

#Видео #python #flask #web

Chart.js

www.chartjs.org — простые, понятные и привлекательные диаграммы JavaScript на основе HTML5. Chart.js — это простой способ бесплатно добавить анимированные интерактивные графики на ваш сайт.

#сервис #js #web

📺 Создание блога на Flask

1. Демка проекта [YouTube]
2. Подготовка к работе [YouTube]
3. Cоздание приложения, HTML шаблоны [YouTube]
4. Наследование шаблонов [YouTube]
5. Blueprints [YouTube]
6. Cоздание постов (модели) и SQLAlchemy [YouTube]
7. Миграции, теги, связь тегов и постов [YouTube]
8. Поиск и форма создания поста [YouTube]
9. Добавление постраничной навигации [YouTube]
10. Форма редактирования постов и админка [YouTube]

Продолжение в плейлисте на YouTube.

#Видео #python #flask #web

Cloudflare Pages

pages.cloudflare.com — бесплатный веб-хостинг (платформа JAMstack) с простой интеграцией с Git, предназначенный для совместной работы фронтенд разработчиков.

Неограниченное количество сайтов, неограниченное количество запросов, неограниченная пропускная способность.

#сервис #frontend #web

📺 Уроки Bootstrap 5

1. Введение и установка [YouTube]
2. Адаптивное меню [YouTube]
3. Делаем слайдер [YouTube]
4. Система сетки [YouTube]
5. Модальное окно верстка [YouTube]
6. Форма регистрации компонент [YouTube]
7. Аккордеон на сайт [YouTube]
8. Flexbox на практике [YouTube]
9. Классы MX, MY,PX, PY зачем нужны [YouTube]
10. Footer, заканчиваем курс [YouTube]

#Видео #Bootstrap #web #rus

freeCodeCamp

github.com/freeCodeCamp/freeCodeCamp — это дружелюбное сообщество, где вы можете бесплатно научиться программировать. Их полнофункциональная учебная программа по веб-разработке и машинному обучению абсолютно бесплатна и рассчитана на самостоятельный курс. Есть тысячи интерактивных задач по программированию, которые помогут вам расширить свои навыки.

#репозиторий #web #MachineLearning

Browserling

browserling.com — позволяет просматривать сайты в различных браузерах. Например — в Opera, Chrome и Firefox. Оно, кроме того, позволяет выбирать операционную систему, в которой работает интересующий нас браузер, в частности — разные версии Windows и Android.

#сервис #web

📺 Panda Tetris. Сайт от верстки до хостинга

1. Введение [YouTube]
2. Верстаем макет [YouTube]
3. Javascript - пишем игру [YouTube]
4. Javascript - пишем игру #2 [YouTube]
5. PHP - сохраняем данные в базу [YouTube]
6. Выкладываем на хостинг [YouTube]

#курс #web #rus

Roadmap для React в 2022 году

Все, что можно узнать о React и экосистеме в 2022 году. Цель этого руководства — дать вам представление об экосистеме React и помочь вам в обучении, если вы запутались.

🔎 Смотреть

#roadmap #web #React #js

📺 Верстка сайта с нуля

В данном плейлисте показывается процесс верстки сайта с нуля. Верстка будет по макету и адаптивно, каждый начинающий сможет попробовать сверстать свой сайт по примеру. Если вы никогда не верстали сайты то этот курс для вас!

1. Начинаем верстку. Введение [YouTube]
2. Адаптивное меню [YouTube]
3. Верстаем блоки [YouTube]
4. Flexbox азы [YouTube]
5. CSS Grid на практике [YouTube]
6. компании и отзывы [YouTube]
7. Галерея изображений [YouTube]
8. Форма обратной связи [YouTube]
9. Footer. Закончили сайт [YouTube]

#курс #web #rus

Верстка сайта - Как ускорить сайт 6 простых шагов

Каждый хоть раз задумывался как оптимизировать и ускорить сайт. В этом видео показываются 6 простых шагов как ускорить сайт, даже если вы начинающий у вас получится сделать эти действия. Верстка сайта иногда получается очень громоздкой с большим количеством лишних стилей и JavaScript кода. Это все мешает сайту загружаться быстро и качественно, поэтому момент скорости сайта нужно также прорабатывать и не забывать о нем. Скорость загрузки сайта очень влияет на отображение сайта в поисковой выдаче ближе к первым местам.

📺 Смотреть

#видео #web

Формы для входа на сайт: best practices

Это, безусловно, не исчерпывающий список хороших практик. Автор стремился создать общее руководство из простых и полезных советов. Считайте его своего рода отправной точкой.

📖 Читать

#статья #web

📺 Разработка сайтов

1. Разработка мультиязычных сайтов на Wordpress [YouTube]
2. Праздничный сайт-открытка! Часть 1. [YouTube]
3. Праздничный сайт-открытка! Часть 2. [YouTube]
4. Секреты создания продающего лендинга [YouTube]
5. Основы разработки сайтов [YouTube]
6. Архитектура современных SPA сайтов [YouTube]
7. Вёрстка сайтов на примере Landing Page [YouTube]
8. Разработка сайта на Drupal 7 для новичков [YouTube]
9. Оптимизация вёрстки сайта [YouTube]
10. Адаптивный сайт изображения, видео [YouTube]

Продолжение в плейлисте на YouTube.

#курс #web #rus

Дорожная карта для Rust веб разработчиков

Вы найдёте диаграмму, показывающую путь, по которому вы можете пойти, и библиотеки, которые вам могут понадобиться, чтобы стать веб-разработчиком Rust.

🔎 Смотреть

#roadmap #Rust #web

📺 Подборки полезных ресурсов

1. ТОП 15 Технических сайтов для разработчиков [YouTube]
2. Экосистема React: Компоненты, Библиотеки [YouTube]
3. ТОП 20 JavaScript плагинов для веб-разработчика [YouTube]
4. ТОП 20 JavaScript плагинов для веб-разработчика [YouTube]
5. ТОП 25 инструментов React разработчика [YouTube]
6. ТОП-25 сервисов для веб-разработчика [YouTube]
7. ТОП-16 Плагинов для VS Code [YouTube]

#курс #web #rus

Опыт внедрения SDK VK Звонков

JUG Ru Group — это организаторы профессиональных технических конференций. Они внедрили видеосвязь на свою онлайн-платформу с помощью технологий VK Звонков, которые могут получить сторонние разработчики. Почему они остановили свой выбор на них, а не на P2P или SDK от Voximplant, читайте в статье на Хабре.

📖 Читать

#статья #web

Web Tests

github.com/web-platform-tests/wpt — кросс-браузерный набор тестов для стека веб-платформ. Написание тестов таким образом, чтобы их можно было запускать во всех браузерах, дает браузерным проектам уверенность в том, что они выпускают программное обеспечение, совместимое с другими реализациями, и что более поздние реализации будут совместимы с их реализациями.

#репозиторий #web