Web Lab | Программирование
6.31K subscribers
118 photos
11 videos
313 links
Лучший бесплатный материал для начинающих программистов

Сотрудничество: @AmerigoVes

- Всё самое лучшее для разработчика
- Python, Spark, базы данных (Greenplum, Oracle и т.д.), Hadoop, Airflow
- IT инструменты, хитрости и секреты
- Новости из мира IT
Download Telegram
🧮 Использование CSS-селектора :has() на примерах

Итак, :has() — это CSS-псевдокласс родительского селектора. Другими словами, с помощью :has() можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним.

В этой статье автор показал, как работает этот псевдокласс на наглядном примере, создав аналог Dock из MacOS.

#учись #css
📑 Создание сайдбара с помощью HTML, CSS и JavaScript

Этот гайд позволит Вам создать с нуля боковую панель и настроить её по своему усмотрению.

#javascript #css #html #учись
🎹 100 CSS-кнопок для Вашего проекта

На этом сайте находятся различные варианты кнопок, которые Вы можете использовать в своём следующем проекте. Достаточно нажать на понравившуюся кнопку и откроется окно с кодом, который нужно просто скопировать в проект.

#полезныйресурс #css
This media is not supported in your browser
VIEW IN TELEGRAM
🏔 ScrollTrigger – красивый эффект перемотки экрана с подвижными элементами. Во время прокрутки горы и облака смещаются не целиком, а по отдельным слоям.

#сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
🖼 3D Scrolling Gallery – галерея с прокручивающимися изображениями, которые появляются из центра экрана при скролле мышки. Подойдет для сайтов, где важна динамика.

#сниппет #css #javascript
This media is not supported in your browser
VIEW IN TELEGRAM
🐝 Honeycomb – необычная галерея для изображений, которая выглядит как медовые соты. При наведении мышки появляется текст на полупрозрачном фоне.

#сниппет #css
📒Шпаргалка по CSS CSSReference.io

Это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций.

#css #полезныйресурс
📌 ​​12 важнейших сайтов для освоения CSS в 2023 году

Авторы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут Вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки.

#учись #полезныйресурс #css
🗄 Сокращения в CSS / Минимизируем CSS код

Сокращенные свойства - это свойства CSS, которые позволяют одновременно устанавливать значения нескольких других свойств CSS. Используя сокращенное свойство, Вы можете писать более краткие (и часто более читаемые) таблицы стилей, экономя время и энергию.

#учись #полезныйресурс #css
🗃 Шпаргалка по всем свойствам CSS Flexbox

В этой статье, Вы рассмотрите основы CSS Flexbox. Поймёте, как работает каждое из свойств Flexbox, и получите шпаргалку к каждому свойству. В шпаргалках описано всё, что можно сделать с помощью Flexbox. 

#учись #полезныйресурс #css
🐹 Все значения свойства cursor в CSS

С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.

.button { cursor: pointer; }

Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor: pointer, чтобы пользователь точно понял, что с элементом можно взаимодействовать.

#учись #html #css
🗂 Интерактивная шпаргалка по HTML, CSS и JavaScript

Содержит полезные примеры кода HTML, CSS, JS и инструменты веб-разработчика. Для каждого примера есть объяснение. Например: CSS-градиент, генератор кнопок или теней для блоков, код для циклов или переменных JS.

#учись #полезныйресурс #шпаргалки #html #css #javascript
🖥 Code Basics. Бесплатная платформа для изучения основ программирования с нуля

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

#учись #полезныйресурс #html #css #javascript #python
📒Шпаргалка по CSS CSSReference.io

Это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций.

#учись #css #полезныйресурс #шпаргалки
🗃 Самоучитель по программированию для начинающих

Сайт на котором можно найти бесплатные онлайн-учебники для изучения вёрстки (HTML, CSS), программирования на Java или Python, и многое другое.

#учись #полезныйресурс #python #html #css
🎲10 захватывающих игр для освоения CSS

Они превратят процесс изучения CSS в увлекательное приключение. Игры от «Flexbox froggy», где Вы помогаете лягушке найти свой путь, до «CSS Diner», где Вы учитесь применять селекторы.

#учись #игры #css
📌 Наглядная шпаргалка по Flexbox CSS

Flexbox (от англ. flex — гибкий) — это модуль CSS, который позволяет удобно управлять расположением, порядком, размерами и отступами между элементами веб-страницы.

Сайты, свёрстанные «флексами», получаются адаптивными, то есть выглядят хорошо на разных устройствах: ПК, ноутбуках, планшетах и смартфонах.

До появления Flexbox разработчики верстали веб-страницы с помощью таблиц, CSS-свойств position, float и прочих инструментов, которые на самом деле для этого не предназначены. Сегодня Flexbox, как и CSS Grid, является частью стандарта CSS3 и его не нужно подключать отдельно.

#учись #шпаргалки #css
🖥 Code Basics. Бесплатная платформа для изучения основ программирования с нуля

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

#учись #полезныйресурс #html #css #javascript #python
🖇Doka. Документация для веб-разработчиков

Это опенсорсный проект, который содержит практически всю необходимую информацию для веб-разработчиков. Здесь и объяснение HTML-тегов, и примеры работы с CSS-стилями, и обучение JavaScript, а также полезные инструменты и статьи.

#полезныйресурс #html #css #javascript #учись