Damian Ponce

Newbie in programming HTML5️⃣, CSS3️⃣ and JS, I'm also a 🐕 trainer and 🐶 walker. 😁

[Miguel Ángel Durán @midudev]

La mejor herramienta para crear diagramas de software.
¡Encima gratuita y compatible con GitHub!

Perfecta para UML, flujos y procesos.
Exporta como imagen, PDF, HTML y más.

→ https://t.co/GvthWp5qgl

[Abraham John 🦄🦓 @Abmankendrick]

UI/UX Designers, this might be one of the cleanest color palette generators I’ve seen lately.

Kigen is a color generator that helps you quickly create beautiful palettes for your UI projects, making it easier to pick colors that actually work well together instead of guessing.

Bookmark it for later 💜

[• nanou • @NanouuSymeon]

🚀 Insanely Useful Websites for Developers

🌐 https://t.co/13JboBq4KS
The best documentation for web development.

🌐 https://t.co/ddK8ja6iKO
All developer documentation in one place.

🌐 https://t.co/rFWC9HffqX
Step-by-step roadmaps for becoming a developer.

🌐 https://t.co/Ogl3WimqRE
Learn programming completely free.

🌐 https://t.co/X7WYFDwVzo
Full-stack development curriculum.

[Manu Arora @mannupaaji]

One of my favourites latest CSS property is 𝚊𝚗𝚌𝚑𝚘𝚛 𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗𝚒𝚗𝚐

.𝚝𝚛𝚒𝚐𝚐𝚎𝚛 {
𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚒𝚙;
}

.𝚝𝚘𝚘𝚕𝚝𝚒𝚙 {
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚏𝚒𝚡𝚎𝚍;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚒𝚙;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚛𝚎𝚊: 𝚝𝚘𝚙 𝚌𝚎𝚗𝚝𝚎𝚛;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚝𝚛𝚢-𝚏𝚊𝚕𝚕𝚋𝚊𝚌𝚔𝚜: 𝚏𝚕𝚒𝚙-𝚋𝚕𝚘𝚌𝚔;
}

Eliminates complex javascript logic or positioning, improved performance.

Best part is the smart repositioning to avoid overflow

Simple, clean solution!

[• nanou • @NanouuSymeon]

The leaf 🌿 and the code:

.leaf {
width: 200px;
height: 200px;
border-radius: 0 100%;
background-image: linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147));
}

[Damian Ponce @dmponcez]

@mannupaaji Cool

[Manu Arora @mannupaaji]

Create image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑

.𝚛𝚎𝚟𝚎𝚊𝚕 {
𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟷𝟶𝟶% 𝟶 𝟶);
𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 𝟷𝚜 𝚏𝚘𝚛𝚠𝚊𝚛𝚍𝚜 𝚕𝚒𝚗𝚎𝚊𝚛;
}

@𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 {
𝚝𝚘 {
𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟶 𝟶);
}
}

Perfect for reveal effects, easy to implement

[Damian Ponce @dmponcez]

@NanouuSymeon The (nav) element can remain inside the (header) element as part of its structure as well; in addition, within the (section) element , we can place an (article) element and within the (main) container we can place an (aside) element to improve the HTML structure.

[Swapna Kumar Panda @swapnakpanda]

3000+ Programming Interview Questions:

❯ Python
https://t.co/vErW1vAbIs

❯ Java
https://t.co/prAPr7sGMk

❯ SQL
https://t.co/NlXFywoZGI

❯ JavaScript
https://t.co/Uq2zg0gZkU

❯ DSA
https://t.co/n8bgWijke8

❯ OOPs
https://t.co/XNHtDl3PkF

❯ HTML/CSS
https://t.co/aMvZF0kD5I

❯ React
https://t.co/2CnJmAqA0l

❯ Git
https://t.co/24ZbOl8fev

❯ Practice Questions
https://t.co/FuC6Y8aChW

[Code Geek @codek_tv]

Math😍😍😍

[Abraham John 🦄🦓 @Abmankendrick]

UI/UX Design Tips on Color Usage:

Don't use pure white (#FFFFFF) on a pure black background. It will eventually make your designs feel overwhelming to look at.

Here are some neutral colors to use for your design project instead:

[• nanou • @NanouuSymeon]

How to Master JavaScript 👇

✨ Learn a bit of HTML & CSS
🧩 Variables & Data Types
➕ Operators
🔧 Functions
🔀 Conditionals (if/else)
🔁 Loops
📦 Arrays
🧱 Objects
🖱️ DOM Manipulation
🎯 Events
🚀 ES6+ Features
⏳ Async JavaScript (Promises, async/await)
🌐 Fetch & APIs
⚠️ Error Handling
📁 Modules
🐞 Debugging
💾 Browser Storage (localStorage, sessionStorage)
🏗️ OOP Basics
⚛️ Frameworks (React, Vue, etc.)
🛠️ Build Projects 🚀

[• nanou • @NanouuSymeon]

How to Master CSS 👇

- Learn a bit of HTML
- Box Model
- Position
- Background
- Display
- Images
- Colouring
- Fonts
- Flexbox
- Grid
- Pseudo-classes
- Responsive Designs
- Debugging
- Media Queries
- Animations
- Preprocessors
- Frameworks

[• nanou • @NanouuSymeon]

Most Important CSS Properties to help you build a website 👇

🖌 Background-color
📝 Margin
📝 Padding
🐁 Cursor
🆗 Font-size
🆗 Font-family
🖱 :hover
🎨 Color
🔥 Display
🌠 Opacity
📏 Width
📏 Height
🔳 Border
⏺ Border-radius
🚀 Float
🔠 Letter-spacing
🎚 Line-height

[Haz @diegohaz]

I’m experimenting with a high-level, styled Button component API.

Yes or no?

[Haz @diegohaz]

https://t.co/9XHiFAW0bD

[• nanou • @NanouuSymeon]

https://t.co/HbUhYFrWQz

[UI/UX Savior @UiSavior]

Loading inspiration 🤗

[Soren @sorenblank]

you can achieve this using the @tailwindcss `group` class on parent and `group-hover` variant on target.

<div class="group">
<div class="group-hover:translate-y-6"/>
</div>

here is a breakdown of the target element within an exaggerated oversized parent wrapper.

[Visual Studio Code @code]

Do you know these 8 VS Code UI tricks?
Watch here 👇