Hey guys! I am doing my master's degree in Computer Science, and like to develop web applications full stack. When it comes to FE, I normally use React with Tailwind CSS, because it even feels fun to style everything with it. I can visualize the structure of the web page I am styling better that way.

I started a hobby project, in which I planned to return to using the base version of CSS, without any extra, just like I learnt it in university. I know the basics pretty well, which was why I ultimately chose to move on to exclusively using Tailwind more than 1 year ago.

The problem is now, that I feel like suffering while I write basic CSS. Styling components take minimum 2x as much as I would normally spend on it. Every page I tried to style so far comes out ugly and it makes me question if I knew how to use CSS to begin with.

That being said, let's say for interviews, how important it is to be able to come up with base CSS code on spot? Should I stick with Tailwind or improving on base CSS code writing?

Does anyone have any ideas on what to do? I followed his instructions exactly and I’m getting different results.

Hi, I'm not good with coding what so ever just managed to change css code colors somewhat easily with my friends help, neither of us good are good at coding. If you could look at the code and tell me how I could make this be a legit thing with the colors id appreciate it!

I am not sure if it helps but the colors I used are:

.white-border {
    background: #faeeb7 !important;
    stroke: #faeeb7 !important;


.white-fill {
    fill: #faeeb7 !important;
}

    background: linear-gradient(to bottom, #f59454, #f8d17c);
    color: #faeeb7;
    border-radius: 16px;
    border: solid 4px #a56608;

.bottom-border .separator-1 {
    height: 4px;
    background: #a56608;
    border-radius: 10px;
    width: 100%;
}


.bottom-border .separator-2 {
    height: 4px;
    background: #a56608;
    border-radius: 10px;
    width: 100%;
    margin-right: 16px;
}

.username {
    padding: 6px 32px;
    background: #fff5de;
    border-radius: 64px;
    display: flex;
    color: #ffc549;

Just trying to give honey vibe ig :"D

(this is a f2u chat widget. Link: https://vtuber-nook.com/asset/1039/f2u-heart-shaped-chat-widget-for-streamelements/ I take no claim of this I simply just wanted to make it more customized to my own needs) (and I'm sorry if this is really dumb I just need help and I have no idea how to even look this issue)

AI agents are getting better at writing CSS, but debugging it is another story. What if they could inspect the browser, understand why a style isn't applying, and fix the actual problem instead of guessing?

I explored how we can give AI agents a better way to debug CSS using browser insights.

Read the article.

Buongiorno a tutti, mi è capitato che il codice content: "X" !important; su alcuni browser tipo firefox o chrome viene convertito in content: "✕" !important;, ho risolto mettendo content: "\00D7" !important; nel css custom.

I'm taking my first CSS/HTML course for my degree, and it's my first introduction to coding, so apologies if this seems like a silly question.

I've been trying to figure out how to style an element to be the same height/weight as another element when they aren't in a parent-child relationship. I'm thinking maybe there's a calc or var function that might work...?

For reference, I've included a photo of my Figma mockup as an example. My goal is to make the pink line the same size as the paragraph. This section is repeated on multiple pages, but the paragraph of text is different on each, so I'm hoping to save time by making it variable instead of creating a class or ID for each page.

Hoping any of this will make sense to someone so I can get some advice. Thanks for the help!

I've been exploring different ways to manage colors in CSS, especially when working with websites that have multiple sections and components.

One thing I've been thinking about is how to keep color palettes consistent without making the CSS difficult to maintain.

I know CSS custom properties are commonly used for this, but I'm curious about how others approach it in real projects.

Do you usually define all your colors using CSS variables in the selector, or do you prefer organizing them into separate groups like primary, secondary, background, text, and accent colors?

Also, do you use HSL, RGB, HEX, or newer color formats like OKLCH in your projects?

I'd be interested to hear how you organize your color systems and what has worked best for you.

In my process of relearning CSS I re-did my bootstrap site. I use grid and flex a bit of clamp and media(orientation). I generated gradient at cssgradient (not sure if the site use AI or not).

hs.fdh.pw

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.

Happy to answer questions here.

Aggressive use of ! important

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

Hey everyone!

I'm trying to improve the background design of my website and came across a design that I really liked.

I've attached two images:

• Image 1: The reference design I'm trying to achieve.

• Image 2: My website's current design.

I'm only interested in recreating the background aesthetic from the reference, not the actual UI elements.

Specifically, I'm trying to achieve:

• The dark/black gradient effect.

• Subtle blue glows or lighting coming from the sides.

• Smooth blending between black and blue shades.

• An overall ambient lighting effect that gives the background more depth.

I'm using React and CSS.

What's the best way to achieve something like this?

I'd appreciate any suggestions or CSS examples. 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.

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 !

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.

Demo and complete source:
https://systra-spotlight.pages.dev/

Would you keep the automatic movement, or leave the light still until someone interacts?

Disclosure: I co-run Systra Tools, where the component comes from. This example and its source are free.