Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/artempchela/code_for_youtube

catwebdev YouTube https://www.youtube.com/channel/UC2pGphugSZ0Qp2zuXSOPx0g the channel's primary focus is on front-end web development, and it caters to developers of all levels. Like share and subscribe.
https://github.com/artempchela/code_for_youtube

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/artempchela/code_for_youtube
Owner: ArtemPchela
Created: 2024-02-20T07:47:42.000Z (12 months ago)
Default Branch: master
Last Pushed: 2024-04-07T17:40:36.000Z (10 months ago)
Last Synced: 2024-04-07T18:38:18.387Z (10 months ago)
Language: HTML
Homepage:
Size: 1.87 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Hello and welcome

## In this repo we will keep all code from [@catwebdev](https://www.youtube.com/channel/UC2pGphugSZ0Qp2zuXSOPx0g) YouTube channel.

### share / like / subscribe

#### I put a lot of love and effort into everything I create. If you find value in my work and would like to give something back, consider supporting me. It’s simple, just click the link below to buy me a coffee! Every cup helps me keep creating and sharing more with you.







### Content

  CSS/HTML:

* [Flip card css](https://www.youtube.com/watch?v=81UNCWlS3pM)

* [Hover effect before /after vs box-shadow hover effect](https://youtu.be/038-IdftkOc)

* [Interactive icons on hover](https://youtu.be/KKhMwa8IdkU)

* [Interactive icons on hover](https://youtu.be/xgJSBSg-L9M)

* [Distortion Text Effect](https://youtu.be/EWyXai_AhN8)

* [Underline Text with 6 Techniques CSS/HTML](https://youtu.be/Gk6_vqUcvwg)

* [3D Cube Animation with HTML & CSS](https://youtu.be/IK2Qghy-ZZo)

* [SVG Animation Icons with CSS](https://youtu.be/5PShlCTE9j8)

  JavaScript:

* [Navigation bar with JavaScript](https://youtu.be/Iq77aQyx6cE)

* [Characters limit count with JavaScript](https://youtu.be/hEbBexkCqDg)

* [Progress bar JavaScript](https://www.youtube.com/watch?v=M6htw19gHJ0)

* [Scroll to top button with JavaScript](https://www.youtube.com/watch?v=q5OrVe0zBf8)

* [Multiple modal windows with JavaScript](https://www.youtube.com/watch?v=-AU_Y-73fyI)

* [Live Search on the fly with JavaScript](https://www.youtube.com/watch?v=-oS85d51Zy4)

* [Accordion with JavaScript](https://youtu.be/OGAQ2w3Ko34)

* [Weather Ticker with JavaScript](https://youtu.be/GdLRPmHLDFQ)

* [Random Color Generator](https://youtu.be/XAznr5Zp8Ko)

* [BMI Calculator with JavaScript](https://youtu.be/IFcI8PaWBH4)

* [Hamburger Menu Smooth Transition with JavaScript](https://youtu.be/iIadUGpuLDA)

* [Fixed Header on Scroll with Dynamic Background](https://youtu.be/OIyY1yHyyQ8)

* [CSS scroll animation vs scroll animation JavaScript](https://youtu.be/Fea300SL3zI)

* [Text Shadow on Mouse Event JavaScript/HTML/CSS](https://youtu.be/5dvLoLDBkVw)

* [Neumorphism Hover Effects | HTML, CSS, JavaScript](https://youtu.be/TiSlP6yeYQI)

* [Cursor with bubble effect JavaScript/CSS](https://youtu.be/qy6GNZfmrYo)

* [3D Parallax Hover Effect HTML/CSS/JavaScript](https://youtu.be/Pc5CKB5kJMw)

* [Neumorphism Hover Effect](https://youtu.be/WkdyvaH-dfs)

* [Emoji Cursor Effect with JavaScript/CSS 🌟](https://youtu.be/t8NGEvEaRjg)

* [Cursor with emoji/icons affects JavaScript/CSS](https://youtu.be/t8NGEvEaRjg)

* [How to Make Responsive Cards with Cool Hover Animations!](https://youtu.be/uiMAXmgXVZI)

  React:

* [Text analysis tool with React](https://youtu.be/oZTbl5b50H0)

* [Sticky Header in Table React](https://www.youtube.com/watch?v=kzMBEYAvoCc)

* [Modal window with React](https://www.youtube.com/watch?v=wXGjkH2OL8g)

* [Count Up React](https://www.youtube.com/watch?v=tFDq4wkgrHs)

* [Accordion React TypeScript](https://youtu.be/XQe_CNGqLgs)

* [Image slider with React/TypeScript](https://youtu.be/gZ-NPMupR0U)

* [Circular progress bar](https://youtu.be/k6Pq1CChokU)

* [Section switcher with React](https://www.youtube.com/watch?v=fnVBakt8Myo)

* [Multiple modal windows with React/TypeScript](https://youtu.be/_WEsT2rmZq4)

* [Words per-minute calculator with React/TypeScript](https://youtu.be/4deg5FEir8U)

* [Copy to clipboard React TypeScript](https://youtu.be/LWz88eCLn1k)

  jQuery:

* [Accordion with jQuery](https://youtu.be/dyBv4HDrMxI)

* [Hover Magic: Dynamic User Profile Cards with jQuery](https://youtu.be/FT3fvIwRPp4)

  Burger Buttons Animation:

* [Hamburger button fall effect with CSS/JavaScript](https://youtu.be/yGDPMNmC-ec)

* [Hamburger button goes away to the left](https://youtu.be/DQGQr6FLx2w)

* [Hamburger button two short lines](https://youtu.be/efcrATNhVpE)

* [Hamburger button, arrow left or right](https://youtu.be/7GejjruFpck)

* [Hamburger button, hide middle line](https://youtu.be/vvIYloY_DB8)

* [Hamburger button transforms into an exclamation mark](https://youtu.be/dSm-hSJbFGg)

summary {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 10px;

	background-color: #3B3B58;

	cursor: pointer;

    color: #16eefe;

	border-bottom: 1px solid #A96DA3;

}

details[open] {

	display: block;

}

summary::after {

	display: inline-block;

	content: '\21E9';

    color: #16eefe;

	transition: transform 0.3s;

}

details[open] > summary::after {

	transform: rotate(180deg);

}