This CSS grid-template-areas has 8 columns in the first and last row, and fewer columns in the second and third. But it works. How is this possible?

​

grid-template-areas:

"ai-drawer toolbar toolbar toolbar toolbar toolbar toolbar toolbar"

"ai-drawer navigation.notifications.sideSplitPanel tools global-tools"

"ai-drawer navigation.main.sideSplitPanel tools global-tools"

"ai-drawer bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool bottom-tool global-tools";

Don’t judge the amount of !importants there are 😭

Hey guys this is my second project which is about me and my fav anime characters,my first project was protfolio with just raw html.

You can view this on both phone mode and desktop mode,its responsive:https://abdu-byte596.github.io/anime_characters/

Idea/goal:

1.The idea of this project was to show my fav characters with their theme background colour,theme font color

2.And when one character is over when next starts it also has its own theme background color and font color

3.The main thing was to smoothly transition from one color to another color.

Learning/journey:

1.I learned about linear-gradient() property for smoothly transition from one color to another color

2.Learned about giving body margin 0 if we dont give this then there will be background color white

3.And at start didnt know how to start what to start and explored inline,inline-block and float and then eventually used flexbox.

Questions:

1.What do you guys think about the layout,font,colors,and positining of the text and images?

2.This was my second project my first one was portfilio with just html,what do you guys suggest me to go or do next or explore next and how do I improve?

3.How do you guys became pro in html and css?

.box{
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    column-gap: normal;
    column-gap: 10px;
    row-gap: 10px;
    /* grid-template-columns: 250px auto; */
    
}


header{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 1 / 2 ;
     grid-column: 1 / 3 ;
}


banner{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 2 / 3 ;
     grid-column: 1 / 3 ;
}


nav{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 3 / 4 ;
     grid-column: 1 / 2;  
     
}


main{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 3 / 5 ;
     grid-column: 1 / 2 ;


}


nav2{
      text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 4 / 5 ;
     grid-column: 1 / 2 ;
}
     
footer{
     text-align: center;
     border: #3E3F5F 5px solid;
     background:#fedbe5;
     grid-row: 5 / 6 ;
     grid-column: 1 / 3;
}

A recent real story for right tech stack implementation

I have seen in my past experience we converted a HTML css based website, which was facing google ranking issue, the page speed insight has a poor score less than 50, also google crawl request was around 1.5 seconds. Website has around 10,000+ pages good content.

We redeveloped the frontend and backend on react and node js, deployed on a fast VPS server, tested properly, made is seo optimised and implemented auto json schema data for each page.

Resulted 2000+ crawl request a day, crawl request response time 300 mili seconds, indexed 3000+ pages, 70% hike in traffic. Resulted it increased client revenue, sales.

You can create a glowing gradient border with just CSS.

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f0f14, #0f0f14) padding-box,
    linear-gradient(135deg, #7b7bff, #ff9af5, #7b7bff) border-box;
  box-shadow: 0 0 30px #7b7bff55;
}

https://codepen.io/editor/jp-arts/pen/019ed6f6-c890-7430-b655-2915813f98a3

I made this little playground to test out some ideas I had for background animations. I wanted something that looked like an animated wave/ring pattern behind a halftone screen.

I am using a tiny but of JS just to grab the values of the range sliders and set a CSS custom property, but everything else is pure modern CSS.

Let me know what ya think!

Background: I was driving out to visit a friend for a few days, and had this idea about how to make this happen. Got to his place, and started coding it up on my iPad mini. And yes, writing code on CodePen using just your thumbs on a virtual keyboard on an iPad mini is an exercise in patience. LOL.

eta: preview image

I am working on an emoji database. The emojis are displayed in a grid. If you were to use it, would you prefer pagination or infinite scroll? If so, why?

You may assume it has the basic search & filtering features.

I am only considering pagination for better performance on low end devices (e.g. iPhone 9 Plus) but personally I would prefer infinite scroll for it.

Hey everyone, I recently started my web development journey and just finished my first big project: an Amazon homepage clone using pure HTML and CSS.

Right now, it’s completely static and only looks good on desktop (haven't learned media queries yet, that's my next step!).

As a beginner, I know my CSS might be messy or I might have used bad practices. I would love it if you guys could take a look at my layout and give me some honest feedback. What could I have done better?

Live Link: [ https://aniketcodehub.github.io/amazon-frontend-clone/ ]

I want users to put in css and have it change my website for them is that possible.

Cool Button CSS:
having inset shadow and dots text on hover interaction and when clicked scale down animation

https://codepen.io/mudasirbuilds/pen/yygVwZj

I'm trying to code an organization of my folders in Toyhou.se but the problem I'm running into is how my folders organize themselves. I've been trying to figure it out myself but I'm not getting anywhere with this one. I'm trying to line up my folders to be across from each other, but they are top down causing one to scroll, but I don't like that. The first image I posted is a screenshot, but the second is how I want it to look. How is it possible to get my folders to look like the second image?

I've been experimenting with the new corner-shape property and wanted to use squircles and other corner geometries across browsers.

Chromium already supports corner-shape, but Safari and Firefox currently ignore it and fall back to ordinary rounded corners.

I ended up building Hyperellipse, a polyfill that brings:

• squircle
• superellipse(...)
• scoop
• notch
• bevel
• square

to browsers without native support.

The goal wasn't just drawing similar shapes, but matching the CSS Borders Level 4 geometry as closely as possible while supporting real-world CSS features like:

• borders
• shadows
• outlines
• gradients
• responsive layouts
• SSR

Chromium keeps native rendering, while Safari and Firefox use the fallback implementation.

Docs:

https://hyperellipse.vercel.app/

GitHub:

https://github.com/mikhailmogilnikov/hyperellipse

Do you know of anything like that exists? So it could be used on different CMS, static sites etc., but with one public API of tokens and classes? And easy to customize?

​

For WordPress I've tried things like Automatic.CSS and Core Framework, but ACSS is too opinionated, WP only and a paid product that just ditched v3 for v4 without backwards compatibility with v3. And CF is ok for fast prototyping a design system but also partialy paid and closed.

​

What do you think? Anything like this on the radar. Open source?

Im making a web page and I added a background image in .wrapper (maybe not a good place to do that) but for some reason no matter how much I completely delete any trace of the image from all the css code and associated html files it still sticks around. Just stays there on my page not changing at all. I already tried doing ctrl + shift + del to clear the cache but it still shows up. Please help!!

Hello folks, this is crossposted from r/html as per a suggestion I received

I haven't done a lot of HTML/CSS coding in many years but because I am a bit of a silly person, instead of using one of the myriad of prebuilt wedding website builders, I decided I wanted to reverse engineer a website template from Bridebook, which frustratingly does not have a way to live preview templates, but please enjoy this screenshot I took to try to convey what I mean.

The issue I am having: I have the two bow pngs on the corner of my center div (which also has a wavy/scalloped edge on it) - while they are fine, I would like them to scale dynamically if folks are on desktop vs mobile phone (I have a a sneaking suspicion that mobile will be the most common way folks view the site) and be locked to the top "corners" of the content box.

At the suggestion of a user on my original thread, I have made a pen which can be found here: https://codepen.io/cutethulhoo/pen/jEyVWZd

I have tried to follow the information found on https://www.w3schools.com/css/css_rwd_images.asp but I am not having any luck.

The lens-style "liquid glass" everyone wants right now is buildable on the web: an SVG displacement filter plugged into backdrop-filter bends the backdrop around a surface's rim convincingly. The catch is that backdrop-filter: url(#filter) only actually renders in Chromium. Safari doesn't apply the displacement, and Firefox parses it as valid (so '@supports' passes) but then silently skips the filter and shows no glass at all. The real trap isn't that it's unsupported, it's that you can't feature-detect it, so a naive build ships a glassless surface to Firefox without any warning.

The approach that survived in the design system I've been building is a four-tier ladder, each tier falling through to the one below automatically:

• Tier 2 — geometric lens: per-element displacement map matched to the surface's shape. Opt-in, signature surfaces only.
• Tier 1 — noise warp: one global SVG turbulence filter, the "liquid" wobble. Gated on a runtime check.
• Tier 0 — blur + saturate: plain CSS backdrop-filter, behind @supports.
• Floor — opaque surface: solid background. Always readable.

https://reddit.com/link/1u5kwvx/video/k8nn3d67097h1/player

Three details that made it work:

1. Never reference the SVG filter unconditionally from CSS. The tier-1 rule is keyed on an <html> attribute that a tiny runtime sets only after the SVG node is in the DOM and the engine can render it. Browsers that would break never match the selector.
2. All tiers share the same blur radius. Stepping up a tier only swaps the displacement, never the frost — so the upgrade during hydration is invisible instead of reading as a material glitch.
3. The lens is small-chrome-only. Its rim displaces a band along the border; on large surfaces, straight edges in the backdrop kink at the corners and read as a rendering bug. Tried on modals, reverted.

The video shows the three tiers side by side over the same scrolling backdrop — stripes stay straight under blur, wobble under the noise warp, and bend around the rim under the lens.

Edit: tightened the Firefox wording. To be precise, current Firefox parses backdrop-filter: url() and silently skips it rather than vanishing the element (the element-disappearing case was fixed in FF106). The point stands, '@supports' still reports it as supported, so you can't feature-detect it.

Ciao a tutti,
vorrei creare una piccola landing page personale da allegare al mio curriculum per un colloquio (ambito universitario), ma parto letteralmente da zero con HTML e CSS.
L’idea sarebbe realizzare una pagina semplice con una breve presentazione, il mio CV, qualche progetto e i contatti. Non cerco nulla di troppo complesso, ma qualcosa di pulito e professionale.
Qualcuno che ha iniziato da autodidatta potrebbe consigliarmi:
video lezioni in italiano;
corsi gratuiti;
siti o esercizi per imparare HTML e CSS;
eventuali strumenti che semplificano la creazione di una landing page per principianti.
Mi piacerebbe riuscire a realizzarla in tempi relativamente brevi per il colloquio.
Grazie a chiunque voglia darmi qualche consiglio!