https://github.com/wiazeph/html-css-js-studies
Here you can find my works where I applied what I learned about HTML, CSS, SCSS, Tailwind CSS and JavaScript.
https://github.com/wiazeph/html-css-js-studies
css css3 flex flexbox flexbox-css html html5 javascript js resource sass scss tailwind tailwind-css tailwindcss
Last synced: 6 months ago
JSON representation
Here you can find my works where I applied what I learned about HTML, CSS, SCSS, Tailwind CSS and JavaScript.
- Host: GitHub
- URL: https://github.com/wiazeph/html-css-js-studies
- Owner: Wiazeph
- Created: 2022-08-10T23:34:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-14T19:02:42.000Z (almost 2 years ago)
- Last Synced: 2025-04-11T03:16:36.869Z (6 months ago)
- Topics: css, css3, flex, flexbox, flexbox-css, html, html5, javascript, js, resource, sass, scss, tailwind, tailwind-css, tailwindcss
- Language: HTML
- Homepage: https://codepen.io/Wiazeph
- Size: 2.7 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Here you can find my works where I applied what I learned about HTML, CSS, SCSS, Tailwind CSS and JavaScript.
If you like this repository, you can follow my accounts and support it by giving a star ⭐
LinkedIn - Twitter - Instagram - Codepen
| | Title | | Technologies |
| :-- | :-------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[display-flex](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/display-flex)** | [Codepen](https://codepen.io/Wiazeph/pen/mdXbYMB) | `HTML-CSS-SCSS` |
| `2` | **[flex flex-wrap](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-wrap)** | [Codepen](https://codepen.io/Wiazeph/pen/YzYjqbB) | `HTML-CSS-SCSS` |
| `3` | **[flex align-items](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20align-items)** | [Codepen](https://codepen.io/Wiazeph/pen/PoEBgBO) | `HTML-CSS-SCSS` |
| `4` | **[flex justify-content](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20justify-content)** | [Codepen](https://codepen.io/Wiazeph/pen/VwyBrEZ) | `HTML-CSS-SCSS` |
| `5` | **[flex flex-direction](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-direction)** | [Codepen](https://codepen.io/Wiazeph/pen/XWVBeaN) | `HTML-CSS-SCSS` |
| `6` | **[flex flex-grow](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20flex-grow)** | [Codepen](https://codepen.io/Wiazeph/pen/oNpPvry) | `HTML-CSS-SCSS` |
| `7` | **[flex row-column-gap](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/FLEX/flex%20row-column-gap)** | [Codepen](https://codepen.io/Wiazeph/pen/KKZBjRq) | `HTML-CSS-SCSS` |
| | Title | | Technologies |
| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[typewriter-effect-pure-css](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/typewriter-effect-pure-css)** | [Codepen](https://codepen.io/Wiazeph/pen/yLprzrp) | `HTML-CSS` |
| `2` | **[shaking-input](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/shaking-input)** | [Codepen](https://codepen.io/Wiazeph/pen/wvywgvb) | `HTML-CSS-SCSS` |
| `3` | **[css-cursor-property](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-cursor-property)** | [Codepen](https://codepen.io/Wiazeph/pen/ExQJOzX) | `HTML-CSS-SCSS` |
| `4` | **[css-selector-child](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-selector-child)** | [Codepen](https://codepen.io/Wiazeph/pen/JjpbPpW) | `HTML-CSS-SCSS` |
| `5` | **[css-shapes-border-radius](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-shapes-border-radius)** | [Codepen](https://codepen.io/Wiazeph/pen/BaYBNzx) | `HTML-CSS-SCSS` |
| `6` | **[css-hover-scale-rotate](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/css-hover-scale-rotate)** | [Codepen](https://codepen.io/Wiazeph/pen/MWQwqvb) | `HTML-CSS` |
| `7` | **[scroll-snapping](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/scroll-snapping)** | [Codepen](https://codepen.io/Wiazeph/pen/yLvqeJY) | `HTML-CSS` |
| `8` | **[banner-text](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/banner-text)** | [Codepen](https://codepen.io/Wiazeph/pen/bGvNVBp) | `HTML-CSS` |
| `9` | **[gradient-text](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-text)** | [Codepen](https://codepen.io/Wiazeph/pen/wvyjXqr) | `HTML-CSS-SCSS` |
| `10` | **[gradient-background-animation](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-background-animation)** | [Codepen](https://codepen.io/Wiazeph/pen/eYVOBRY) | `HTML-CSS` |
| `11` | **[gradient-shadow](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/gradient-shadow)** | [Codepen](https://codepen.io/Wiazeph/pen/vYdLvMa) | `HTML-CSS` |
| `12` | **[multiple-shadows](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/multiple-shadows)** | [Codepen](https://codepen.io/Wiazeph/pen/jOZNoEp) | `HTML-CSS-SCSS` |
| `13` | **[sticky-header](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/sticky-header)** | [Codepen](https://codepen.io/Wiazeph/pen/zYRQOaV) | `HTML-CSS-SCSS` |
| `14` | **[resizeable-container](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/resizeable-container)** | [Codepen](https://codepen.io/Wiazeph/pen/abYzvya) | `HTML-CSS-SCSS` |
| `15` | **[text-rotating](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/text-rotating)** | [Codepen](https://codepen.io/Wiazeph/pen/oNEbJzZ) | `HTML-CSS` |
| `16` | **[easy-way-to-saparator](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/easy-way-to-separator)** | [Codepen](https://codepen.io/Wiazeph/pen/eYVoymW) | `HTML-CSS` |
| | Title | | Technologies |
| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[scroll-to-top](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/scroll-to-top)** | [Codepen](https://codepen.io/Wiazeph/pen/MWQeeRq) | `HTML-CSS-JavaScript` |
| `2` | **[remove-to-add-class](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/remove-to-add-class)** | [Codepen](https://codepen.io/Wiazeph/pen/gOjgqjV) | `HTML-CSS-JavaScript` |
| | Title | | Technologies |
| :-- | :----------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[glassmorphism-calendar](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/glassmorphism-calendar)** | [Codepen](https://codepen.io/Wiazeph/pen/zYRVWOX) | `HTML-CSS-SCSS` |
| `2` | **[skill-cards](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/skill-cards)** | [Codepen](https://codepen.io/Wiazeph/pen/bGajrQx) | `HTML-CSS-SCSS` |
| `3` | **[login-signup-cards](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/login-signup-cards)** | [Codepen](https://codepen.io/Wiazeph/pen/xxpzQYB) | `HTML-CSS-SCSS` |
| `4` | **[profile-card-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/profile-card-1)** | [Codepen](https://codepen.io/Wiazeph/pen/YzeGeEe) | `HTML-CSS-SCSS` |
| `5` | **[profile-card-2](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/profile-card-2)** | [Codepen](https://codepen.io/Wiazeph/pen/poabBKG) | `HTML-CSS-SCSS` |
| `6` | **[social-media-icons](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/social-media-icons)** | [Codepen](https://codepen.io/Wiazeph/pen/bGLJxZg) | `HTML-CSS-SCSS` |
| `7` | **[expanding-gallery](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/expanding-gallery)** | [Codepen](https://codepen.io/Wiazeph/pen/vYdVaYo) | `HTML-CSS-SCSS` |
| `8` | **[card-hover-effect-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/card-hover-effect-1)** | [Codepen](https://codepen.io/Wiazeph/pen/abKZLqq) | `HTML-CSS-SCSS` |
| | Title | | Technologies |
| :-- | :--------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[Firefox-New-Tab-Page (Clone)](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/Firefox-New-Tab-Page)** | [Codepen](https://codepen.io/Wiazeph/pen/XWoBoZN) | `HTML-CSS-SCSS` |
| `2` | **[Spotify-Website (Clone)](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/Spotify-Website)** | [Codepen](https://codepen.io/Wiazeph/pen/NWeBeyZ?editors=1100) | `HTML-CSS-SCSS` |
| | Title | | Technologies |
| :-- | :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :------------------ |
| `1` | **[landing-page-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/landing-page-1)** | [Vercel](https://landing-page-1-eight.vercel.app/) | `HTML-Tailwind CSS` |
| `2` | **[footer-template-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/footer-template-1)** | [Codepen](https://codepen.io/Wiazeph/pen/rNdZXzY) | `HTML-Tailwind CSS` |
| `3` | **[pricing-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/pricing-section-1)** | [Codepen](https://codepen.io/Wiazeph/pen/WNzawrE) | `HTML-Tailwind CSS` |
| `4` | **[newsletter-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/newsletter-section-1)** | [Codepen](https://codepen.io/Wiazeph/pen/JjLxmyv) | `HTML-Tailwind CSS` |
| `5` | **[newsletter-section-2](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/newsletter-section-2)** | [Codepen](https://codepen.io/Wiazeph/pen/gOeqBxN) | `HTML-Tailwind CSS` |
| `6` | **[team-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/team-section-1)** | [Codepen](https://codepen.io/Wiazeph/pen/NWMxmOz) | `HTML-Tailwind CSS` |
| `7` | **[faq-section-1](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/faq-section-1)** | [Codepen](https://codepen.io/Wiazeph/pen/LYrLawj) | `HTML-Tailwind CSS` |
| | Title | | Technologies |
| :--- | :------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------- | :-------------- |
| `1` | **[neumorphism-calculator](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/neumorphism-calculator)** | [Codepen](https://codepen.io/Wiazeph/pen/OJrrmXw) | `HTML-Tailwind CSS-JavaScript` |
| `2` | **[password-strength-checker](https://github.com/Wiazeph/HTML-CSS-JS-Studies/tree/master/Studies/password-strength-checker)** | [Codepen](https://codepen.io/Wiazeph/pen/QWzzvEo) | `HTML-Tailwind CSS-JavaScript` |