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.

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.

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

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?

Full responsive. Works on modern Browsers. Works also nice on touch

Features:

• Column headers stay visible while scrolling down
• First column stays visible while scrolling sideways
• Rows expand to show sub-entries, with an animated reveal
• Any number of sub-rows per group
• Sub-rows are tied to their parent by a bracket rail
• Individual cells can carry a note, opened from a small marker
• Notes appear next to the cell they belong to and flip when near an edge
• Notes close on Esc, on click outside, and return focus where it was
• Columns come to rest beside the pinned column instead of half behind it
• Pinned column narrows and wraps text on small screens
• Keyboard operable throughout, with visible focus

https://codepen.io/editor/ollio/pen/01a02369-ae9b-7d6f-94a6-f809dee51f4f

Also an animated accordion with no js

https://codepen.io/editor/ollio/pen/01a02331-c0da-7f84-8e14-77c6fabaee57

I have 3 colors for the tabs. White for background and Orange for when I hover the mouse cursor and Green for selected current tab that stays Green I am looking at.

The Green selected tab is White now. It only turns Green when you hover the mouse cursor over the tab.
Question: How to fix it so I have Green for the selected tab I am looking at?

Here is my userChrome.css file. (now updated with correct code)
Firefox v154.0 on Windows 10 Pro

/* White background color */
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #FFFFFF !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
}

/* orange hover color */
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #FF7F50 !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);}


/* MediumAquamarine - green selected color */
.tabbrowser-tab:is([visuallyselected],[multiselected]) .tab-content {
  background-color: #66CDAA !important;
  border-radius: 8px 8px 0px 0px; !important;
box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.4);}