css3

KO | EN

gitlite — search

#python #php #dotfiles #javascript #java #hacktoberfest #unmaintained #ruby #css #c #shell #magento

★ 69 Open GitHub ↗

Код учебного курса “CSS3” на YouTube-канале webDev (https://tinyurl.com/c52x3pna)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# CSS3 Basics

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

### Поддержать развитие канала:
[<img alt="webDev | YouTube Sponsor" src="https://img.shields.io/badge/Стать спонсором-F70000.svg?&style=for-the-badge&logo=youtube&logoColor=fff" />][sponsor]

---

### Используемые ресурсы и инструменты:
- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)

### Полезные курсы и видео:
- [HTML5 Basics](https://www.youtube.com/playlist?list=PLNkWIWHIRwMFtHHg0amAgocYP-kZypbY7)
- [CSS Grid](https://www.youtube.com/playlist?list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21)
- [CSS Flexbox](https://www.youtube.com/playlist?list=PLNkWIWHIRwMG0EUBS8rvTRVNL9IcxcawW)
- [CSS Inspiration](https://www.youtube.com/playlist?list=PLNkWIWHIRwMEosiVP_3B-h4fE7CIfZ7pI)

### Полезные ссылки:
- [Can I Use](https://caniuse.com)
- [Normalize CSS or CSS Reset?!](https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e)
- [Browser Internals](https://developers.google.com/web/updates/2012/04/Round-up-of-Web-Browser-Internals-Resources)
- [Color Scheme](https://colorscheme.ru/html-colors.html)
- [Transition Timing Functions](https://codepen.io/YauhenKavalchuk/pen/wvGNLwe)
- [Cubic-Bezier animation tool](https://matthewlein.com/tools/ceaser)
- [Cursors collection](https://csscursor.info/)
- [JS & CSS Date pickers](https://www.cssscript.com/tag/date-picker/)

---

### Быстрый старт:
- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/css3-basics.git`
- Перейдите в папку с проектом `cd css3-basics`
- Перейдите в нужную ветку соответствующую уроку:
  - `git checkout lesson_01`
  - `git checkout lesson_02`
  - `git checkout lesson_10` и т.д.

---

### Список уроков:
- [#0 Введение (Introduction)](https://youtu.be/8pQKDVRc0T8)
- [#1 Базовый синтаксис и применение стилей (Base Syntax & CSS Applying)](https://youtu.be/qxAnaoPI8cE)
- [#2 Простые селекторы (Simple Selectors)](https://youtu.be/vnmfn31G988)
- [#3 Составные селекторы (Composite Selectors)](https://youtu.be/fyI_K_Oya74)
- [#4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)](https://youtu.be/C40ePbYJxmM)
- [#5 Каскадность и наследование (Cascading & Inheritance)](https://youtu.be/Y8UFzOoKkvQ)
- [#6 Блочная модель и отступы (Box Model, Padding & Margin)](https://youtu.be/1jvIi039-i4)
- [#7 Позиционирование и размеры (Positioning & Sizing)](https://youtu.be/iydD985acAc)
- [#8 Единицы, переполнение и уровни элементов (Units, Overflow & z-index)](https://youtu.be/pEdt0afL2-o)
- [#9 Плавающие элементы и очистка потока (Floating Elements & Clearfix)](https://youtu.be/1kZ9FTp2IiE)
- [#10 Шрифты и текст (CSS Font & Text styles)](https://youtu.be/TAB8pVUKiI4)
- [#11 Границы и тени (Borders & Shadows)](https://youtu.be/dAHu16pgBrg)
- [#12 Скругление углов, списки и цвета (Border Radius, Lists & Colors)](https://youtu.be/zaJh6CymejM)
- [#13 Отображение элементов и вендорные префиксы (Display vs. Visibility, Vendor Prefixes)](https://youtu.be/pyBjcMRLMoQ)
- [#14 Фон (Background)](https://youtu.be/5k-x7FUnDuE)
- [#15 Градиенты (Gradients)](https://youtu.be/8mzap9y6ECE)
- [#16 Фильтры (Filters)](https://youtu.be/k-qqZ7rcy-E)
- [#17 Трансформации (Transform)](https://youtu.be/vbdw3iHzkFo)
- [#18 Плавные переходы (Transition)](https://youtu.be/hwWIm6DSSoE)
- [#19 Анимации (Animations)](https://youtu.be/XG5JulRHSV8)
- [#20 Таблицы и курсор (Tables & Cursor)](https://youtu.be/Y5MwssNWetI)
- [#21 Текстовые эффекты и многоколоночный текст (Text Effects & Multi Columns Text)](https://youtu.be/6sc-gmz_MYQ)
- [#22 Медиазапросы (Media queries)](https://youtu.be/lv47xClJolw)
- [#23 Стилизация плейсхолдера и скролла, CSS-спрайты (Placeholder, Scrollbar & Sprites)](https://youtu.be/_eO1urQ71Lw)

---

### Связаться со мной:
[<img alt="webDev | YouTube" src="https://img.shields.io/badge/youtube-FF0000.svg?&style=for-the-badge&logo=youtube&logoColor=white" />][youtube]
[<img alt="webDev | Instagram" src="https://img.shields.io/badge/instagram-E4405F.svg?&style=for-the-badge&logo=instagram&logoColor=white" />][instagram]
[<img alt="webDev | LinkedIn" src="https://img.shields.io/badge/linkedin-0077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" />][linkedin]
[<img alt="webDev | X" src="https://img.shields.io/badge/x-000000.svg?&style=for-the-badge&logo=x&logoColor=white" />][x]
[<img alt="webDev | Threads" src="https://img.shields.io/badge/threads-ffffff.svg?&style=for-the-badge&logo=threads&logoColor=black" />][threads]
[<img alt="webDev | Telegram" src="https://img.shields.io/badge/telegram-229ED9.svg?&style=for-the-badge&logo=Telegram&logoColor=white" />][telegram]

[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[x]: https://x.com/YauhenKavalchuk
[threads]: https://www.threads.com/YauhenKavalchuk
[telegram]: http://t.me/yauhenkavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join

css3

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README