Lunes 00:00 - 18:00 Martes 00:00 - 18:00 Miércoles 00:00 - 18:00 Jueves 00:00 - 18:00 Viernes 00:00 - 18:00

¿Qué es el sitio web?

https://www.facebook.com/2187178868019822/

Ashraf mag dev

Casa
Peru
Lima
Ashraf mag dev

Html and css developer.

this is just my page for sharing my articles and knowledge that i learn and provide my service as freelancer this page is not agency or company.

16/03/2026

AI is not here to replace developers — it’s here to accelerate us. 🚀

If you are a web designer or developer, learning how to use AI with the right prompts can dramatically improve your workflow.

The key point many people miss:
AI works best when you already understand the technology. If you know PHP, JavaScript, HTML, and CSS, you can guide AI to produce the exact code you need.

Instead of fighting AI, embrace it as a development tool.

Recently I built a full WordPress theme using PHP and JavaScript with AI assistance. Because I understood the structure of WordPress themes and how the code should work, I was able to prompt AI correctly and refine the results.

The result:
• Faster development
• Cleaner workflow
• No need to buy premium themes

I saved around $45–$60 that I would normally spend on a theme.

AI doesn’t replace skills — it amplifies them.
The better developer you are, the better results you will get from AI.

💡 Don’t compete with AI.
🤝 Work with AI.

23/02/2026

🚀 Native CSS Nesting Is Here — A Big Step for Modern CSS

The World Wide Web Consortium (W3C) has released a Working Draft of CSS Nesting Module Level 1, introducing native nesting directly in CSS—something developers previously relied on preprocessors for.

What’s new?

You can now nest selectors inside other selectors without repeating long class chains.

A new & nesting selector lets you reference the parent selector easily.

Works naturally with media queries and modern CSS features.

Makes stylesheets cleaner, more readable, and easier to maintain.

Example
card {
padding: 1rem;

&:hover {
box-shadow: 0 10px 20px rgba(0,0,0,.1);
}

.title {
font-weight: bold;
}
}

This reduces repetition and improves structure—bringing native CSS closer to the workflow many developers already use.

💡 With browser support continuing to grow, you may never need to work with Sass anymore for basic nesting features.

05/11/2025

🔥 CSS just got smarter!

A new CSS draft (Conditional Rules Level 5) introduces features that make responsive design way easier:

You can now use and to write CSS that behaves like logical conditions.

Container Queries are improved — meaning elements can change style based on the size of their parent, not the whole screen!

More powerful checks (like fonts and browser features).

New container-based sizing units like cqw, cqh, cqmin etc.

This means better layouts, more reusable components, and fewer CSS hacks.
It's still in draft, but it's the future of responsive CSS. 🚀

14/10/2025

How Subgrid Solves a Super Common Layout Issue 👇

Ever built cards or lists where the content just doesn’t line up?

Like pricing cards, blog cards, or product grids.

You try Flexbox. Looks fine... until you realize:

One card is taller than another

Columns don’t align

Everything feels messy

Why? Because Flexbox doesn’t let one card “know” what’s inside another.

Subgrid fixes that.

🧱 Step 1: Define the parent grid
blog-grid {
display: grid;
grid-template-rows: 200px repeat(4, auto);
}

Or whatever structure you'd like all the items to follow.

📦 Step 2: Make each item span the parent
blog-card {
grid-row: 1 / -1;
}

So each item stretches across all the rows.

🧩 Step 3: Use subgrid inside
blog-card{
grid-template-rows: subgrid;
grid-row: 1 / -1;
}

Now each child item inherits the parent’s rows. Same tracks, same rules, perfect alignment.

🎯 Bonus

You can even change the gap inside:
blog-card {
grid-template-columns: subgrid;
gap: 15px;
}

✅ And that’s it.

Subgrid gives shared awareness between grids. Cleaner, simpler layouts.

📊 Browser support: about 90%. So unless you’re using Internet Explorer, you’re good.

07/10/2025

Difference between :nth-child and :nth-of-type in CSS

(Explained with an example):

Imagine a container like this:

heading
card
card
heading
card
card
card

You have headings with cards underneath them. The number of cards under each heading may vary.

Now, you want the cards to alternate their content layout like this:

image-text
text-image
image-text

You can use flexbox to change the direction:
card {
display: flex;
flex-direction: row-reverse;
}

But this applies to all cards.

You might try:
card:nth-child(2n) {}

This selects all even children: 2, 4, 6, …

Problem? Headings are also counted. So the pattern breaks whenever a heading appears.

Here comes the hero: :nth-of-type
card:nth-of-type(2n)

This counts only elements of the same type as .card (like div) and applies the rule only to them.

So even cards are selected correctly, no matter what else is in the container.

The difference:
card:nth-child → counts all children and checks the class.card:nth-of-type → counts only elements of the same type (tag) with the class.

This keeps your alternating pattern perfect.

07/10/2025

Website Design Structure.
🌈 ✅ 🧑‍💻 ✨

07/10/2025

Type Of Web Design Layout. 🌈 ✨

Dirección

Lima

Horario de Apertura

Lunes	00:00 - 18:00
Martes	00:00 - 18:00
Miércoles	00:00 - 18:00
Jueves	00:00 - 18:00
Viernes	00:00 - 18:00

Página web

facebook.com

Notificaciones

Sé el primero en enterarse y déjanos enviarle un correo electrónico cuando Ashraf mag dev publique noticias y promociones. Su dirección de correo electrónico no se utilizará para ningún otro fin, y puede darse de baja en cualquier momento.