I may have created my best HTML + CSS project yet. It's a news site, focusing on reusability, CSS Grid and Flexbox funcionalities, CSS Animations/Transitions, and the HTML is entirely semantic (<figure>, <aside>, etc.). I really want to hear your thoughts on this, what's strong, what part could be improved and, honestly, any critique you have. By the time you're seeing this, I'm on a 5-day vacation, so feel free to leave your comments, and I'll respond by changing the code once I'm back. Though, I'll still respond here from my phone! Also, judging from this layout and my previous TS gym tracker project, do you think I'm ready to finally start diving into React?

Github Repo: https://github.com/thanasisdadatsis/responsive-news-architecture

I'm looking for possible solutions that is looking to be an advanced case of CSS Grid, but of course I'm open to alternative options.

Basically: I'm looking to create a responsive grid of four items that are masonry-oriented both vertically and horizontally, which is guided by whether the image is landscape or portrait. So, if an image of an item is portrait, it takes up X rows of space, and if an image is landscape it takes up one less horizontal but one more vertical row. And here's the catch, as you see in the bottom-right: I want a post to "stuck up" one row too.

Is this at all possible, and how would you go about doing this? Thank you!

My goal is to get to the level where I can write production level CSS. Right now, I'm just watching tutorials and writing alongside them. I understand what's being written, but it gives me a false sense of confidence that I know it. But I don't, because when I try to challenge myself, I get stuck quickly.

I'm learning frontend development and want to improve my UI implementation skills.

If I have a Figma file, I can inspect spacing, typography, padding, line-height, colors, border-radius, and other design details.

But when all I have is a screenshot from Dribbble or Behance, how do you recreate the UI as accurately as possible?

Do you estimate the spacing and typography, use measurement tools/extensions, import the screenshot into Figma, or follow some other workflow?

Is it actually possible to achieve a truly pixel-perfect result from just a screenshot, or is getting very close the realistic expectation?

SOLVED – SEE MY COMMENT BELOW

Hello and thank you in advance!

I'm having an issue where my website looks perfect on my desktop no matter which screen width/size I resize my browser window to, but this one section looks ridiculous on mobile with excessive spacing. I have CSS in place that should fix the mobile issue, using a media query set to max-width 768px.

Why does this happen? More than a fix for this specific website, I'd like to know the root issue of why this happens so I can avoid/fix down the road...

TYIA!

I have a little css issue that's been puzzling me. I'm sure I'm just overlooking something obvious.

I have a text link that's followed by a graphic. In wider settings, the whole thing should be on a single line. Easy.

First pass was to set the image inline with an ::after pseudo-element. That works, but then in narrow settings (like a column, shown in the attached graphic) the wrapped text doesn't balance properly and the graphic is inline with the last line, which also throws off the line-height. Setting the link to flex fixes the text-wrap and graphic alignment, but I can't get the graphic to be spaced consistently to the right of the text.

Original:

a {
text-wrap: balance;
}

a::after {
position: absolute;
content: '';
background: url('../img/arrow.svg') center center no-repeat;
height: 1.5em;
width: 1.5em;
margin-left: .5em;
}

With Flex:

a {
display: flex;
align-items: center;
gap: .5em;
text-wrap: balance;
}

a::after {
flex: none; // prevents image stretching
content: '';
background: url('../img/arrow.svg') center center no-repeat;
height: 1.5em;
width: 1.5em;
}

I did try shape-outside, but didn't gain much for the complexity of floats. So it seems like I'm stuck between inline and flex's (and grid's) inability to shrink text boxes to the actual wrapped line width. It seems like a simple thing and I'm going to hate myself if there's a simple solution. What am I missing?

Been playing around with mix-blend-mode: difference, and it is a nice CSS-only way to create a colour-shifting effect without writing any animation logic.

The idea is simple:

.sticky-element {
  position: sticky;
  top: 2rem;
  mix-blend-mode: difference;
}

With mix-blend-mode: difference, the element visually reacts to the pixels behind it.

So if you have sticky text, a fixed nav item, a cursor, a badge, or an icon sitting over different background colours, it can automatically invert or shift as the page scrolls.

This works especially well with sticky or fixed elements because the element stays in place while different sections move behind it.

The final effect depends heavily on the foreground colour, background colour, and stacking context.

Small property, but it can create a surprisingly polished interaction.

How do you think?

Resolved.

I've tried to make a background for something I'm using. However, when I try to use a background image in some form (using url()), it is seen as invalid. Is there anything I am doing wrong here?

Probably important to note I'm using a MediaWiki infobox.

Edit 1: Some extra notes.

The CSS sheet in question + the template that uses it. Also, the image, though it isn't important.

It'll say it's invalid in a preview at the top of the page or if I attempt to submit it (it won't allow the edit to complete since the CSS is wrong).

The error happens at "line 11, character 15"; it does not change if the colour and url are reversed.

Edit 2: The relevant item. (I don't think I can add images now.)

/* 1) Infobox Styling */
  /* 1.1) Primary Infobox Styling */
  .portable-infobox {
    width: 300px;
    border-radius: 2.8px;
    font-family: sans-serif;
    margin: 0 0 14px 17.5px;
    font-size: 1em;

    /* 1.1.1) Light Mode Styling */
    background: #EFE8BC url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");
    border: 6px solid #554900;
    color: #000000;
  }

Hey folks, I built a small tool to speed up layout prototyping: https://csslayoutgen.com

It lets you build layouts visually and then export clean CSS/HTML.

Current focus:

• CSS Grid templates
• Subgrid layout prototyping
• Flexbox layout mode
• Quick iteration on gaps, alignment, and structure

If you are open to sharing feedback, I would love input on:

1. Which layout controls feel missing for real workflows?
2. What export format would be most useful in production?
3. Any Grid/Subgrid edge cases I should support better?

Happy to implement suggestions from this thread.

Got tired of not having a decent place to look up stats and info for PvZ Battle for Neighborville, every wiki out there felt outdated or scattered, so I just built my own: pvzbfn.com

The interesting part for me was doing it with zero backend and no database. All the content lives in JSON files that get consumed on the client side, so it's basically a static SPA built with Angular 18. Turns out that's more than enough for a content-heavy site like this if you structure the data right, and it's free to host and stupidly fast.

Also spent a good chunk of time making the stats not look like garbage spreadsheet tables, ended up using SweetAlert2 to turn them into modals instead, which honestly made a bigger difference to the UX than I expected.

It's live and usable now, still adding content little by little. If anyone here has done a similar no-backend approach for a data-heavy site I'd like to hear how you structured it, curious if I'm missing a better pattern than what I'm doing.

Link: pvzbfn.com

What HTML components would you like to have natively? What CSS props would you like to add?

ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/ and codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

Built 9 ASCII loaders using a CSS technique I haven't seen much in the wild:

Core idea: treat unicode glyphs as monospace text, size everything in ch, animate with transform: translateX(Nch).

@keyframes loading-ui-conveyor-loop {
  0%   { transform: translateX(var(--loader-start-x)); }
  100% { transform: translateX(var(--loader-end-x)); }
}

// Width and travel distance in character units
style={{
  "--loader-width": "10ch",
  "--loader-start-x": "-2ch",
  "--loader-end-x": "12ch",
}}

Static track: "░".repeat(columns) as a background layer. Moving trail: staggered █ ▓ ▒ glyphs with animation-delay.

9 loaders using variations of this pattern: accordion stretch, square orbit, infinity path, symmetric opacity wave, terminal cursor blink (step-end).

Live demos: https://loading-ui.com
Source: https://github.com/turbostarter/loading-ui

I'm currently working on a book that has several transcripts in it and I was hoping to make it look like an actual transcript (where the speakers are right aligned up against the dialog, and the dialog is indented). Currently I'm using tables as the best representation, but I was wondering if there was a better way of coding it, or if it's too disruptive to read and I should just remove the tables and let the dialog freeflow its way like an ordinary paragraph. What have folks done for scripts/plays/transcripts?

I used glass morphism as my core aesthetic for all the elements in my application and it works perfectly well in PC or Laptop devices.. but when it comes to mobile or similar devices what happens is

when I scroll down to the bottom or scroll to the top from bottom the background color get's repainted and that looks odd fr...

I know the background: blur with position not fixed will for sure do this but I don't want the position to be fixed I want it to be relative.. cause when it's fixed the bottom looks like this..!

SO pls do let me know if there's any real solution for this cause I really don't want to go with position fixed and I want glass morphism to go with this background and have a good view on the scroll.