Kevin Powell - Community

KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

front-end

resources

back-end

ui-ux

os-and-tools

help

How does negative margins work

I want half the grey column to be in the blue area and want the column to also extend beyond the bottom boundary of the grid. I used margin-block: -50% but it doesn't work. Why is it not working and what's the right way to do it? https://codepen.io/ksblupzi-the-solid/pen/qEbNQVN

Element in DOM with display none Vs Element not in DOM

Hello, just wondering, what can be a use case of element being in DOM but with display none vs element not being in DOM.

doubly linked list

Doubly linked list insertAt: ```js node.next = curr; node.prev = curr.prev; curr.prev = node;...

HI, I want to learn JS, what ressource do you recommend

I know that kevin is really good to learn but is there others really good choices, like, what do you think of bro code JS tutorial for exemple? Ty for responding

Designing an optimal CSS "contract" for rendering arbitrary web components in different contexts

Hello front end friends! I am building a product that generates overlays/widgets for streamers. Basically just arbitrary bundles of JS and CSS that can respond to events from streaming platform APIs and plugs into OBS or other broadcasting software. The challenge I'm facing is that the overlays created can be rendered in all kinds of different contexts (eg. a small card in a gallery, a half-screen design page, a full-screen browser-source plugin to OBS, etc.). Additionally, the overlays are completely arbitrary dimensions. It could be super wide (like a scoreboard or a scrolling marquee), square (chessboard, chats) or tall (vertical bar graph, top scores). To render overlays attractively, there are 2 important considerations: ...

How to make a column extend beyond the grid

How can I make the column taller than the grid, like the photo? Screenshot from here https://www.csszengarden.com/221/
No description

What’s next?

Completed this entire course: https://youtu.be/1L2YiWdaUDM?si=_h_228i8rHRGQ10o I have worked quite a bit on building websites from everything I’ve learnt. Some say “Dive into CSS more till you are brilliant at it” and some say “Get started with the basics of Javascript” I wanna know what others think might be the best!...

Grid Layout - Dependency of Rows Height

Hi everybody I have a grid layout on desktop which are 2 rows and 2 columns. I want The second column that has overflow and span 2 rows have a height dependent on the items in the first column and the first and second rows. Is this possible? I don't want explicitly add max-h-[value]. ...

Is there a recording of Kevin's Discord live stream from Sept 5, 2025?

Really appreciate it if anyone has a link to this, thanks!

React queuing state updates inside useEffect with strict mode

this isn't really practical but I have this code ```js function App() { const [count, setCount] = useState(0);...

Sideway text is getting out of the container

This code shows my problem https://codepen.io/ksblupzi-the-solid/pen/vENppgK I don't know why the text is out of the box or how to get rid of the white area above the text....

PWA Install Button?

I know that in Chrome-based browsers I can use the beforeInstallPrompt event to capture the prompt and tie it to a button, but on Safari am I limited to "here's a pic of how to install the webapp"? I can't find anything online through MDN or internet searching for non-Chrome so I just want to make sure I'm not missing anything....

How do I achieve this? Is this a clip-path, a mask or what?

Good day. Trying to recreate this in CSS but I am completely lost. The red part should be an Image, and I am lost about how to actually handle the borders in that way. Does anybody perhaps know how to deal with this or have any resource that actually teach it?...
No description

Can SSG and CSR exist together

Suppose you have a site that is mostly static content like articles. With only interactive content being mark as read for the article and user profile icons. Then you have some pages like user profile that is fully dynamic. Can you have these coexist?...

What do you guys use to actually put your websites together?

The company I work for uses Wordpress, which I struggle with. (Thanks Kevin for the very timely podcast episode, which I'm in the process of devouring!) So once we've all become CSS geniuses, what are people using to build your websites? VSCode and FTP'ing it to a server? Astro (intriguing!!)? A headless CMS? Headless Wordpress? Just looking for some ideas - I've been creating some great landing page ideas but it's super hard to put those designs into our company's existing Wordpress sites (one...

Using 100dvh and 100dvw makes the body scrollable

I want the body to take all the available space on the screen. But I don't why it becomes scrollable instead of just stopping the edges. I'm I doing something wrong ?...
No description

Need help with ToC's indentation [Hugo]

Hello, everyone! How can I reduce the indentation of Table of Content? It's for a personal blog with Hugo engine. The primary goal is to move the indentation of the first level to align with ToC's title, while the second level is visibly indented. I want to keep using list just in case I need it in the future, so I'd like to avoid the option to turn it off (if it's even possible with just CSS). What I'd like to achieve is something like this....

Purpose of "reactivity" in JS frameworks

Hello, can someone explain what is the purpose of "reactivity" in frameworks like vue or react pls. For e.g, consider this piece of code: ...

Is vue cli just a bundler like vite or there is more to that?

Hello, can someone explain what vue cli is please, from what I've understood, before introduction of vite, we were using vue cli which basically is built on top of webpack, so long story short, is vue cli just another bundler?

help with first backend project

im gonna be doing my first backend project, im already familar with frontend, and i just finished a 4 hour mysql tutorial the project that i picked is called "personal blogging platform api", and these are the tasks that im given:- Return a list of articles. You can add filters such as publishing date, or tags....