https://github.com/yauhenkavalchuk/css3
Код учебного курса “CSS3” на YouTube-канале webDev (https://tinyurl.com/c52x3pna)
https://github.com/yauhenkavalchuk/css3
css css3
Last synced: 9 months ago
JSON representation
Код учебного курса “CSS3” на YouTube-канале webDev (https://tinyurl.com/c52x3pna)
- Host: GitHub
- URL: https://github.com/yauhenkavalchuk/css3
- Owner: YauhenKavalchuk
- Created: 2020-08-26T06:27:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-31T13:49:09.000Z (almost 2 years ago)
- Last Synced: 2025-04-03T08:25:06.447Z (about 1 year ago)
- Topics: css, css3
- Language: HTML
- Homepage: http://youtube.com/c/YauhenKavalchuk/
- Size: 178 KB
- Stars: 70
- Watchers: 4
- Forks: 69
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS3 Basics
### Описание курса:
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селктора, псевдоклассы и псевдоэлементы, похиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации и т.д. По окончанию курса вы получите всю необходимую теоретическую базу по стилизации любого элемента на странице включая курсор и скролл.
### Поддержать развитие канала:
[
][sponsor]
[
][patron]
---
### Используемые ресурсы и инструменты:
- [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 Felxbox](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)
---
### Связаться со мной:
[
][youtube]
[
][instagram]
[
][linkedin]
[
][twitter]
[
][vk]
[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[vk]: https://vk.com/YauhenKavalchuk
[twitter]: https://twitter.com/YauhenKavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join
[patron]: https://www.patreon.com/YauhenKavalchuk