{"id":19486023,"url":"https://github.com/yauhenkavalchuk/css3","last_synced_at":"2025-10-09T20:32:11.589Z","repository":{"id":41129732,"uuid":"290414354","full_name":"YauhenKavalchuk/css3","owner":"YauhenKavalchuk","description":"Код учебного курса “CSS3” на YouTube-канале webDev (https://tinyurl.com/c52x3pna)","archived":false,"fork":false,"pushed_at":"2024-07-31T13:49:09.000Z","size":182,"stargazers_count":70,"open_issues_count":2,"forks_count":69,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-03T08:25:06.447Z","etag":null,"topics":["css","css3"],"latest_commit_sha":null,"homepage":"http://youtube.com/c/YauhenKavalchuk/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YauhenKavalchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-26T06:27:00.000Z","updated_at":"2025-02-04T03:53:09.000Z","dependencies_parsed_at":"2024-12-29T19:33:18.154Z","dependency_job_id":"6a22762d-2e04-412f-8efe-8ac74829f29f","html_url":"https://github.com/YauhenKavalchuk/css3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/YauhenKavalchuk/css3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YauhenKavalchuk","download_url":"https://codeload.github.com/YauhenKavalchuk/css3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YauhenKavalchuk%2Fcss3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002000,"owners_count":26083258,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3"],"created_at":"2024-11-10T20:33:02.317Z","updated_at":"2025-10-09T20:32:11.319Z","avatar_url":"https://github.com/YauhenKavalchuk.png","language":"HTML","funding_links":["https://www.patreon.com/YauhenKavalchuk"],"categories":[],"sub_categories":[],"readme":"# CSS3 Basics\n\n### Описание курса:\nВ данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селктора, псевдоклассы и псевдоэлементы, похиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации и т.д. По окончанию курса вы получите всю необходимую теоретическую базу по стилизации любого элемента на странице включая курсор и скролл.\n\n### Поддержать развитие канала:\n[\u003cimg alt=\"webDev | YouTube Sponsor\" src=\"https://img.shields.io/badge/Become a sponsor-F70000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=fff\" /\u003e][sponsor]\n[\u003cimg alt=\"webDev | Patreon\" src=\"https://img.shields.io/badge/Become a patron-EF6451.svg?\u0026style=for-the-badge\u0026logo=patreon\u0026logoColor=fff\" /\u003e][patron]\n\n---\n\n### Используемые ресурсы и инструменты:\n- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)\n\n### Полезные курсы и видео:\n- [HTML5 Basics](https://www.youtube.com/playlist?list=PLNkWIWHIRwMFtHHg0amAgocYP-kZypbY7)\n- [CSS Grid](https://www.youtube.com/playlist?list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21)\n- [CSS Felxbox](https://www.youtube.com/playlist?list=PLNkWIWHIRwMG0EUBS8rvTRVNL9IcxcawW)\n- [CSS Inspiration](https://www.youtube.com/playlist?list=PLNkWIWHIRwMEosiVP_3B-h4fE7CIfZ7pI)\n\n### Полезные ссылки:\n- [Can I Use](https://caniuse.com)\n- [Normalize CSS or CSS Reset?!](https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e)\n- [Browser Internals](https://developers.google.com/web/updates/2012/04/Round-up-of-Web-Browser-Internals-Resources)\n- [Color Scheme](https://colorscheme.ru/html-colors.html)\n- [Transition Timing Functions](https://codepen.io/YauhenKavalchuk/pen/wvGNLwe)\n- [Cubic-Bezier animation tool](https://matthewlein.com/tools/ceaser)\n- [Cursors collection](https://csscursor.info/)\n- [JS \u0026 CSS Date pickers](https://www.cssscript.com/tag/date-picker/)\n\n---\n\n### Быстрый старт:\n- Клонируйте репозиторий: `git clone https://github.com/YauhenKavalchuk/css3-basics.git`\n- Перейдите в папку с проектом `cd css3-basics`\n- Перейдите в нужную ветку соответствующую уроку:\n  - `git checkout lesson_01`\n  - `git checkout lesson_02`\n  - `git checkout lesson_10` и т.д.\n\n---\n\n### Список уроков:\n- [#0 Введение (Introduction)](https://youtu.be/8pQKDVRc0T8)\n- [#1 Базовый синтаксис и применение стилей (Base Syntax \u0026 CSS Applying)](https://youtu.be/qxAnaoPI8cE)\n- [#2 Простые селекторы (Simple Selectors)](https://youtu.be/vnmfn31G988)\n- [#3 Составные селекторы (Composite Selectors)](https://youtu.be/fyI_K_Oya74)\n- [#4 Псевдоэлементы и псевдоклассы (Pseudo-elements \u0026 Pseudo-classes)](https://youtu.be/C40ePbYJxmM)\n- [#5 Каскадность и наследование (Cascading \u0026 Inheritance)](https://youtu.be/Y8UFzOoKkvQ)\n- [#6 Блочная модель и отступы (Box Model, Padding \u0026 Margin)](https://youtu.be/1jvIi039-i4)\n- [#7 Позиционирование и размеры (Positioning \u0026 Sizing)](https://youtu.be/iydD985acAc)\n- [#8 Единицы, переполнение и уровни элементов (Units, Overflow \u0026 z-index)](https://youtu.be/pEdt0afL2-o)\n- [#9 Плавающие элементы и очистка потока (Floating Elements \u0026 Clearfix)](https://youtu.be/1kZ9FTp2IiE)\n- [#10 Шрифты и текст (CSS Font \u0026 Text styles)](https://youtu.be/TAB8pVUKiI4)\n- [#11 Границы и тени (Borders \u0026 Shadows)](https://youtu.be/dAHu16pgBrg)\n- [#12 Скругление углов, списки и цвета (Border Radius, Lists \u0026 Colors)](https://youtu.be/zaJh6CymejM)\n- [#13 Отображение элементов и вендорные префиксы (Display vs. Visibility, Vendor Prefixes)](https://youtu.be/pyBjcMRLMoQ)\n- [#14 Фон (Background)](https://youtu.be/5k-x7FUnDuE)\n- [#15 Градиенты (Gradients)](https://youtu.be/8mzap9y6ECE)\n- [#16 Фильтры (Filters)](https://youtu.be/k-qqZ7rcy-E)\n- [#17 Трансформации (Transform)](https://youtu.be/vbdw3iHzkFo)\n- [#18 Плавные переходы (Transition)](https://youtu.be/hwWIm6DSSoE)\n- [#19 Анимации (Animations)](https://youtu.be/XG5JulRHSV8)\n- [#20 Таблицы и курсор (Tables \u0026 Cursor)](https://youtu.be/Y5MwssNWetI)\n- [#21 Текстовые эффекты и многоколоночный текст (Text Effects \u0026 Multi Columns Text)](https://youtu.be/6sc-gmz_MYQ)\n- [#22 Медиазапросы (Media queries)](https://youtu.be/lv47xClJolw)\n- [#23 Стилизация плейсхолдера и скролла, CSS-спрайты (Placeholder, Scrollbar \u0026 Sprites)](https://youtu.be/_eO1urQ71Lw)\n\n---\n\n### Связаться со мной:\n[\u003cimg alt=\"webDev | YouTube\" src=\"https://img.shields.io/badge/youtube-FF0000.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][youtube]\n[\u003cimg alt=\"webDev | Instagram\" src=\"https://img.shields.io/badge/instagram-E4405F.svg?\u0026style=for-the-badge\u0026logo=Instagram\u0026logoColor=white\" /\u003e][instagram]\n[\u003cimg alt=\"webDev | LinkedIn\" src=\"https://img.shields.io/badge/linkedin-0077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" /\u003e][linkedin]\n[\u003cimg alt=\"webDev | Twitter\" src=\"https://img.shields.io/badge/twitter-1DA1F2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][twitter]\n[\u003cimg alt=\"webDev | VK\" src=\"https://img.shields.io/badge/vk-4680C2.svg?\u0026style=for-the-badge\u0026logo=Twitter\u0026logoColor=white\" /\u003e][vk]\n\n[youtube]: https://youtube.com/YauhenKavalchuk\n[instagram]: https://instagram.com/YauhenKavalchuk\n[linkedin]: https://linkedin.com/in/YauhenKavalchuk\n[vk]: https://vk.com/YauhenKavalchuk\n[twitter]: https://twitter.com/YauhenKavalchuk\n[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join\n[patron]: https://www.patreon.com/YauhenKavalchuk\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyauhenkavalchuk%2Fcss3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyauhenkavalchuk%2Fcss3/lists"}