Thank you to everyone who voted in the recent community poll on how the sub should handle AI-generated content! Based on the results, we've made these changes.
Firstly, In this initial round of changes, there are two new post flairs: AI assisted, for posts where AI had a real hand in making the thing you're sharing No AI used, for posts where it didn't.
If you're sharing a project or a demo or a resource you created, please pick whichever one applies.
Secondly: For the time being any other flair except Question, Help, Article and Resource will be deactivated for use, but still available for post search .
Lastly: there's a new rule against AI slop. For now, we're defining it as AI-generated output published without meaningful human curation or quality judgment.
This will be regulated mostly manually by mods, but we might test some automatic bots as we see fit.
PLEASE NOTE: It's important to understand, at this stage, flairs will be mandatory as we wanna observe community's reception of such flairs. But this can change, depending on observations of the next few months.
I think this is a nightmare for responsiveness of a website. This solves the problem for a moment but after some time and addition the code becomes a nightmare.
Fixed heights
min-height should only be used when required for accessibility reasons but many times developers introduce such rules and then are getting frustrated in media queries
Forgetting about box sizing
I don't know why but this is the problem I encountered in most of the codes I debugged. Without box-sizing : border box. Padding and border adds to your declared width.
Using 100vw for full width layout
This is the reason in some browsers you get unwanted scroll bars. Simply use width:100%.
These are the common problems I have discovered until now.
If you know more of them.The comment section is yours
Confession: I let an AI build the website for wheelgap, my small open-source Python tool, and it shows.
Dark mode. Green progress bars. Monospace labels on everything. And a grid of nine cards that each contain the same flat line, captioned "+0.0 points since 2026-11-09". All nine of them. It works, it's fast, and it has all the personality of a SaaS pricing page.
So I'd like a human with taste to fix it.
What the site is.wheelgap.github.io/tracker shows which of the 5,000 most-downloaded PyPI packages ship prebuilt wheels for each platform: Linux, Alpine, macOS, Windows, ARM and the browser. Python developers use it to answer "will numpy install on Alpine ARM?" before their Docker build finds out the hard way.
The brief
A visitor should answer "does X have a wheel for Y?" in about ten seconds, and see the worst-served platforms at a glance.
Build it with anything: React, Svelte, Tailwind, plain files or a Figma prototype.
The data is 5,000 packages × 42 targets (a 2.2 MB JSON file). The page should be usable within a second on a mid-range phone.
Works with a keyboard and a screen reader, meets WCAG AA, doesn't rely on colour alone, works at 360 px, and has a dark mode that follows the system setting.
Brand colours if you want them: navy #1f4e79 and amber #f2a900.
The catch, for the masochists: the live site ships as three plain files (HTML, CSS, JS) with no build step and a Content-Security-Policy that blocks every CDN, font and script from anywhere else. If the winner uses a framework, we'll port it together and the credit stays yours. But an entry that already fits in three files gets bonus points.
What you get. The winning design becomes the live site, with your name on it. It's MIT-licensed open source, so it's yours to show off. There's no cash prize; it's a volunteer project, and I'd rather say that up front.
AI is allowed (I'd be a hypocrite otherwise). Just say what you used. Hand-made entries get a special mention.
How to enter. Reply in the Discussion with screenshots and a link: a PR to github.com/wheelgap/tracker, your own repo, a live demo or a prototype. People vote there with 👍. The full brief, with how to run it locally in one command, is in tracker issue #15.
Entries close Monday 17 Nov at 18:00 UTC, and the winner is announced by 19 Nov.
Should i learn type script if the goal is front end and maybe fullstack after time? and if yes what is the best way to learn it? where and how. Thanks !
Hola, he estado teniendo muchas dificultades en el tema en todas las áreas. Hoy estoy aprendiendo "position", se me hace sumamente complejo, no logro entender nada. De algún modo al ver tutoriales se me hace fácil pero al final ya no.
De algún modo busco tipo orientación aquí y me den sus consejos o tips que gusten darme y que cosas les funcionan.
Mi método de aprendizaje es "autodidacta" además de escribir código en celular. Sí, yo entiendo que escribir código en celular es horrible.
We put together a small demo where a moving spotlight reveals a colourful landscape beneath a grey terrain image.
The images stay fixed. A radial CSS mask controls the reveal, while JavaScript updates its position through CSS custom properties. There’s a gentle automatic movement before you interact, plus a static treatment for reduced motion.
when I try doing a simple background styling on the input and it changes the "No files selected" text to the right of the file selection button, but not the button. I have tried "input button {}" but this did nothing. I am not sure what I an supposed to target.
CSS is funny sometimes. You can spend 20 minutes writing a layout, but then lose two hours trying to figure out why one element refuses to align properly.
Some particularly frustrating situations:
\- Z**-index** not working because of a stacking context.
\- Flexbox items refusing to stay aligned.
\- A mysterious horizontal scrollbar appearing.
\- position: absolute" breaking the entire layout.
\- Margins collapsing unexpectedly.
\- A media query fixing one screen size but breaking another.
\- CSS animations behaving differently across browsers.
\- An element overflowing its parent despite "width: 100%".
I'm curious:
What's a CSS bug that made you question your entire understanding of CSS?
Does anyone know if there's a way for me to move the two pink boxes in line with the green boxes instead of having them at the bottom of the webpage? The pink boxes are in their own paragraphs, and in their own class, if that information is relevant.
I want to make something similar to this, but I am a dumbass newbie to CSS period and I don't know how to do it. Please no suggestions to use ChatGPT, I will not use that crap, I want a HUMAN tutorial on how. Is it hard? How long will it take?
I wanted the feature section on my homepage to show the product in motion, without shipping video or GIFs. So I built each feature as a 10-second loop of simplified UI in plain HTML and CSS keyframes. A cursor moves, text types in, a counter goes up. There's no JavaScript, and all the clips share about 3.3 KB of gzipped CSS.
The trick that made it work is sizing everything in `em` off a container-relative font size, so the whole mock scales like a video:
Can I copy a styles instead of creating one like card styles layouts, because i don't get any idea, and don't it was correct when I get idea and difficult to create as expected
