📺 Верстка сайта на CSS и HTML

В этом видеокурсе вы с нуля научитесь верстать сайт на CSS и HTML. Видеокурс рассчитан на начинающих: в нём нет препроцессоров, сборщиков и каких-либо инструментов — только HTML и CSS!

1. Подготовка к работе [YouTube]
2. Работа с трансформацией [YouTube]
3. Продолжение верстки сайта [YouTube]
4. Верстка блока аккордеона [YouTube]
5. Подключение Fontawesome [YouTube]
6. Структура новых блоков [YouTube]
7. Верстка блога и подвала сайта [YouTube]
8. Адаптивная верстка [YouTube]
9. Адаптация сайта под разные устройства [YouTube]
10. Мобильная навигация и бургер-меню [YouTube]
11. JQuery-скрипты [YouTube]
12. Хостинг и домен [YouTube]

#css #rus

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

Online Transform CSS Generator

По данной ссылке вы можете перейти на онлайн-генератор transform в CSS, в котором доступны следующие параметры: масштабирование, поворот, преобразование и наклон.

Данный инструмент является одним из разделов ранее упоминаемого HTML-CSS-JS.

#сервис #css

CSS Layout

csslayout.io — отличная шпаргалка, которая поможет вам быстро настроить популярные макеты пользовательского интерфейса и страниц. Существует также множество предварительно стилизованных элементов, таких как формы для ввода, виджеты и другие компоненты, которые вы можете быстро скопировать и использовать в своих проектах.

#сервис #css

📺 Профессиональная верстка сайта

1. Адаптивное меню на чистом html css [YouTube]
2. Flexbox для каждого [YouTube]
3. Адаптивный макет [YouTube]
4. CSS Grid простыми словами [YouTube]
5. JavaScript подключаем [YouTube]
6. Быстро на flexbox [YouTube]
7. Flexbox блоки [YouTube]
8. Адаптивность под экран iphone X [YouTube]
9. Footer, заканчиваем сайт [YouTube]
10. Как загрузить сайт на хостинг [YouTube]

#Видео #html #css #rus

📺 CSS Basics

1. Введение [YouTube]
2. Базовый синтаксис и применение стилей [YouTube]
3. Простые селекторы [YouTube]
4. Составные селекторы [YouTube]
5. Псевдоэлементы и псевдоклассы [YouTube]
6. Каскадность и наследование [YouTube]
7. Блочная модель и отступы [YouTube]
8. Позиционирование и размеры [YouTube]
9. Единицы, переполнение и уровни элементов [YouTube]
10. Плавающие элементы и очистка потока [YouTube]

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

#Видео #CSS #rus

📺 Современная верстка сайта с нуля

1. Начинаем с нуля [YouTube]
2. Адаптивное меню на CSS [YouTube]
3. FlexBox верстка карточки [YouTube]
4. jQuery категории [YouTube]
5. Адаптируем сайт под мобильные [YouTube]
6. Слайдер jQuery [YouTube]
7. Css Grid, grid-template-columns [YouTube]

#Видео #html #css #js #rus

Charts.css

chartscss.org — CSS-фреймворк с открытым исходным кодом для визуализации данных помогает разработчикам интерфейсов превращать данные в красивые диаграммы и графики при помощи простых классов CSS.

#сервис #css

Halfmoon

gethalfmoon.com — интерфейсный фреймворк со встроенным тёмным режимом и полной настраиваемостью с использованием переменных CSS; отлично подходит для панелей мониторинга и инструментов.

#сервис #css

​​Разработка веб-приложений.
Полуэктова Н.Р.
2022

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

Среди них: принципы организации сети Интернет; базовый язык разметки web-страниц HTML, технологии описания стилей этих страниц СSS; технологии браузерного программирования на основе языка jаvascript, современные средства адаптивной верстки сайтов; основные принципы, технологии и инструментальные средства серверной обработки запросов и хранения информации web-приложений.

💾 Скачать

#rus #html #css #javascript

Стилизация плейсхолдера и скролла, CSS-спрайты

В данном видео рассматривается CSS с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 Смотреть

#видео #css

📺 Уроки Materialize CSS

1. Введение и установка фреймворка [YouTube]
2. Адаптивное меню [YouTube]
3. Система сетки. Сравнение с Bootstrap [YouTube]
4. Делаем слайдер [YouTube]
5. Делаем Parallax [YouTube]
6. Форма регистрации [YouTube]
7. Делаем модальные окна [YouTube]
8. Вывод постов для блога [YouTube]
9. Анимации фреймворка [YouTube]
10. Верстаем footer [YouTube]

#курс #css #rus

Основы CSS3. Полный курс

В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.

📺 Смотреть

#видео #css

📺 CSS Grid

В данном видео-курсе рассматриваются все особенности CSS Grid. Её использование для вёрстки, а так же сравнивается с существующими способами построения лэйаута.

1. Введение в курс (Introduction) [YouTube]
2. Применение сетки к контейнеру [YouTube]
3. Создание 3х колоночного макета [YouTube]
4. Управление размерами и позицией grid-элемента [YouTube]
5. Именование grid-линий, создание сетки, позиционирование элементов [YouTube]
6. Выравнивания grid-элементов [YouTube]
7. Выравнивания grid-контейнера [YouTube]
8. Управлять порядком элементов grid-контейнера [YouTube]
9. Вложенность grid-элементов (Grid Nesting) [YouTube]
10. Гибкость grid-элеменов при изменении размеров экрана (Auto-fill & Auto-fit) [YouTube]

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

#курс #css #rus

Эффект фрагментации изображений при помощи CSS Paint API

Эффект фрагментации можно сделать используя CSS-маску и пользовательские свойства. Он получится красивый, но у него будет один недостаток: слишком много CSS-кода (сгенерированного при помощи Sass).

В данной статье рассматривается такой же эффект, но при помощи Paint API. Это разительно уменьшит количество CSS-кода и полностью устранит потребность в Sass.

📖 Читать

#статья #HTML #CSS #JavaScript

​​Bootstrap и CSS-препроцессор Sass. Самое необходимое.
Н.А. Прохоренок
2022

Рассмотрено стилевое оформление стандартных элементов и большое количество готовых компонентов Bootstrap: адаптивная панель навигации, карточки, панели с вкладками, карусель, всплывающие подсказки и уведомления, модальные диалоговые окна и др.

Описана сборка SCSS-файлов библиотеки Bootstrap под свой проект с использованием CSS-препроцессора Sass, а также создание собственного проекта без участия Bootstrap. Большое количество практических примеров помогает начать работу самостоятельно.

💾 Скачать

#ru #css

CSS Flexbox. Полный курс

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

📺 Смотреть

#видео #css

Electron

github.com/electron/electron — фреймворк для написания кроссплатформенных десктопных приложений с использованием JavaScript, HTML и CSS.

#репозиторий #HTML #CSS #JavaScript

CSS за 100 секунд

Cascading Style Sheets или CSS — это язык, на котором веб-сайты HTML выглядят красиво. Узнайте, как такие концепции, как каскад, специфичность, наследование и блочная модель, влияют на внешний вид веб-страницы.

📺 Смотреть

#видео #css