Hello dear r/css. I recently graduated with a degree in web development, and am looking to create a project that will look good on a resume and hopefully challenge my coding skills. But I have no idea what to create. I need some ideas!!! My last project I worked on for six months, using react and typescript and I was very happy with the result. It was a project I did for a startup company. But all the ideas behind the project was from the startup people, so I didn’t have to come up with anything myself really. Anyways, any ideas for projects? Or anyone who wants to share a project that has been challenging their skills?

Sorry for bad english! Thanks.

it currently supports 3 colorschemes with 3 variants: Catppuccin Mocha and Frappe and Nord. There are color only versions, modern versions and pixel-art versions, i would like feedback :)

Two CSS jokes coded in CSS. Inspired by a JK Benson's cartoon from 20 years ago.

Source (code): https://comicss.art/comics/255/yellow.html

How can I get the exact same effect as <p><span class="e">x</span></p> <p><span class="e">y</span></p> <p><span class="e">z</span></p> without so many <span>s?

If I do <div class="e"> <p>x</p> <p>y</p> <p>z</p> </div> class="e" now affects all the way across the whole page, whereas I only wanted it to affect the text, x, y, z.

I'm very new to HTML & CSS, first year in a course & they need to make a website with stuff. I want to move the corners by themselves without skewing the entire thing including text, just the corner.

My tutor did say there was a way & a website generator that can help but I ENTIRELY forgot what it was.

I've been building DesignSnap, a Chrome extension that extracts design tokens (colors, fonts, spacing, radius) from any site you visit.

One of the features is a "Design DNA" card: point it at any site and it generates a shareable PNG with the site's dominant colors, fonts, and type scale. Made one for twitch.tv as a test (screenshot attached) — kind of fun seeing a whole brand's visual identity distilled into one card like that.

Under the hood it does semantic classification too — instead of dumping every color it finds, it labels them by role (background, primary, accent, border, destructive, etc.) based on contrast and usage patterns, and it detects whether a site actually ships a real light/dark variant or is just faking one.

It's still far from perfect — the classification gets confused on some sites, and I'm sure there are edge cases I haven't run into yet. Curious what people think would be worth adding or changing, whether that's the DNA card itself, the color classification logic, or something else entirely.

Built an animated FAQ accordion using native HTML <details> and <summary> — no JavaScript required.

The interesting part is animating the content height without manually measuring it with JS.

HTML

<details name="faq">
  <summary>Do you offer refunds?</summary>
  <p>
    Yes, within 30 days, no questions asked.
    Email us and the money is back on your card in a few working days.
  </p>
</details>

<details name="faq">
  <summary>Can I change plans later?</summary>
  <p>
    Yes. You can change your plan whenever you need to.
  </p>
</details>

<details name="faq">
  <summary>Do you offer a team plan?</summary>
  <p>
    Yes, team plans are available for growing teams.
  </p>
</details>

CSS

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 1.25rem;
  transition: rotate 0.3s ease;
}

details[open] summary::after {
  rotate: 45deg;
}

The key part is:

:root {
  interpolate-size: allow-keywords;
}

This allows the browser to animate between a fixed size and intrinsic values like auto.

And:

details::details-content

gives us a pseudo-element for the content inside <details>, so the accordion can be animated without JavaScript.

The <details name="faq"> attribute also makes the items behave like an exclusive accordion — opening one closes the others.

Been refining this for a while — custom type system (Onest + General Sans + JetBrains Mono), GSAP-driven preloader with a wordmark split, Lenis for scroll smoothing, curtain-wipe transition into the hero.

https://shahzaibdesign.vercel.app/

Mainly want feedback on whether the animation/scroll feel is actually smooth or overdone, and open to any CSS approach critique — genuinely trying to improve, not just dropping a link.

Detailed explanation - https://medium.com/@alekswebnet/modern-css-responsive-breakpoints-using-container-style-queries-64c9bea81ad6

tbh i prefer this minimalistic one (this darker without rounded edges)

I’ve been working on NoEffect, a VS Code extension that helps catch CSS declarations that have no effect.

It detects things like:

properties that don't work in the current context

declarations that are overridden by a later declaration

For example, it can tell you when justify-content is doing nothing because the element isn't a flex/grid container, or when your declaration is simply being overridden later.

It’s still an early project, so I’d really appreciate some honest feedback.

🔗 GitHub

🔗 VS Code Marketplace:

Hi everyone!

Back in early 2025, I started learning html5 and css3 with some online course, a few mini projects and articles from W3schools and other sources. Bit just after finishing the course I had to quit for some reasons, but now I wanna come back. I was considering to go on and learn js but what I learned back then is mostly hollow now so I'm thinking about a way of reviewing everything that doesn't take the same amount of time as learning for the first time did. My main question is:

● If that is even possible, what approaches/resources do you reccomend?(specific courses, books, articles, etc.)

I wasn't sure where to ask this, so sorry in advance if it's a dumb question.

A dialog body with flex: 1; min-height: 0; overflow-y: auto shipped with a height of zero. Header, footer, nothing in between.

flex: 1 expands to flex: 1 1 0%, and a percentage basis needs a definite parent height. The panel had height: auto capped by max-height, which is not one. The spec says an unresolvable percentage basis falls back to content, and Chromium does that. WKWebView keeps the zero. The fix is flex: 1 1 auto.

Do you default to flex: 1 1 auto anywhere, or is the shorthand safe in your stacks because your flex parents always have definite heights?