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

quick question regarding making li focusable using tabindex

looking at the image i attached, is there any issue making a li element focusable using tabindex of 0? i AM adding aria-label to it so i hope not. but would like to know from experienced people ^^ if there is no issue, then what else do i have to consider apart from aria-label? thank you!!...
No description

SASS configuration for vite 5.4.11

Hey guys, I am migrating from vite 4.5.5 to 5.4.11 and upgraded SASS package to 1.81.0. I am following SASS 7-1 folder structure and partials in those folders are interdependent and must use content in one partial in other. I am also providing preprocessorOptions as preprocessorOptions: { scss: {...

What is replacing Javascript keyCode?

how are we writing the following, to see if a letter of the alphabet is being pressed, now keyCode is deprecated?
if (e.keyCode > 64 && e.keyCode < 91) {
console.log('alphabet letter pressed')
}
if (e.keyCode > 64 && e.keyCode < 91) {
console.log('alphabet letter pressed')
}
...

Why having li element of image where they are all centered shows them misaligned?

``` <ul className="flex gap-4 items-center"> <li className="justify-center items-center"> <img src='logo.svg' alt='logo' /> </li>...
No description

how did the font changed automatically ?

i used the same font in figma and on my website but somehow the number 1 doesn't have line under it ? how can i solve it ? first image that number 1 doesn't have underline is website. second image has underline is a figma. third image of font book.app shows that it has two characters of number 1 with and without underline....
No description

Next JS Caching Doubts

I am trying to get familiar with next js by following one of the projects in the youtube. Using next js v15, I have a postgres db with drizzle ORM, Using server actions to fetch the data. So I have a home page which lists the data by fetching from the server. in the dev mode, the data is fetching dynamically for every render where as when i try to build for production. the home page is prerendered and its giving the same data everytime. I want it to be specific for each user when they authentic...

Guidance

Hi everyone , I'm currently front end beginner who is trying to build front end mentor challenges to learn and practice front-end skills. When doing some of the challenges i face a lot of things that i know nothing about. So basically seeing tutorials and reading a +10 different solutions or asking AI has drained my soul , the job is done but the learning value is 0. Take opening and closing navigation bar for mobile devices as an example, I've done it 4 times and still can't build one on my own without repeating everything everytime. ...

how to adjust this space around my table?

i have this table with text in a div, i have it in a div that puts a border around it and holds the title above it. there is some space around the table for some reason though, i didn't put any padding or margins to add it. how can i adjust it to make it smaller?
No description

Issues when building my main-content column for a social media website

Hello guys, sorry to disturb you all; on smaller screen, my create new post button appears in an awfull way (see my codepen). Is it possible to make the sentence appears on a single line or in a more beautiful way? Also, is it possible to is it possible to only make the feeds part of my website scrollable please (the sidebars remain fixed, only where we create posts is scrollable, the search button etc is also fixed). Last thing, when I create a post (see the picture uploaded), the image doesn't take the full width of the container, why is that please. (would appreciate if someone can give me some feedback about my post section, the outline is it correct to put it or it makes the post old-fashioned? Are the buttons design correct or they can be improved please)...
No description

Help Needed: Modularizing Admin Dashboard with Shared Header, Sidebar, and Footer

Hi everyone, I’m working on an admin dashboard built with Bootstrap, and the project contains multiple HTML pages. Each page has a header, sidebar, and footer coded separately within the same file, making it challenging to maintain consistency across all pages. I want to refactor the structure so that header.html, sidebar.html, and footer.html can be created as standalone files and included in all other pages. This way, I can make updates to these components in one place, and the changes will reflect across the entire project....

Border radius

I need some help. I thought of several ways on how to do this with just CSS and I don't know how to. Does anyone have any idea how to do this with CSS?...
No description

Navbar Overflowing with the padding

Guys, I need some help with my CSS code. I'm new ro CSS and have been trying to develop a website for a client. At first, as a designer, my job was to get it done in figma, but he decided to have me build it and learn html/css in the proccess. I'm now doing the navbar, here is the code: ```css...
No description

How to correctly import fonts

Hey, if I have some @font-face declarations inside of a css file and import the css file in the html, I understand that this shouldn’t cause a problem because the assets wouldn’t load sequentially since they’re being imported through the html, thus not blocking the page render if it takes too long, but should I be importing fonts using a different method? Perhaps a link tag if that exists for this? If so, how do i still get the benefits of @font-face? Thanks in advance...

dialog questions

Hey, I have a couple questions regarding the dialogue element- 1) mdn recommends to avoid toggling the open attribute to enable the dialogue and to instead use .show() or .showModal() in js. Why is this? 2) I’ve seen that .show() makes the dialogue “non modal” and .showModal() makes the dialogue “modal”. What’s the key differences? ...

How to position order list correctly

Numbers on the left and the text content are positioned differently, how can I fix it?
No description

Overlay content method

Hey, given an example like so, where there’s content overlaying the site, would this typically be done with dialogue or a a div with z-index and a controlled display etc? I’m not sure if dialogue is meant for heavy content or not. Thanks in advance....
No description

Job offer

Responsibilities: Develop and maintain responsive websites using HTML and CSS 💻 Create pixel-perfect, mobile-friendly layouts 📱 Work closely with the design team to implement visual elements and user interface components 🎨...

Aligning two diagonal gradients of separate elements

I have an HTML-header with background-image containing a linear-gradient, that wants to be vertically followed by another gradient. See the visual. Now I wonder if it's mathematically possible to align both gradients diagonal divisions, so it scales equally when the viewport changes – my guess is that the unequal height is the "issue". I've got full control over adding elements, embedding it in pseudo or extending the gradient rule which I all tried but failed....
No description

Review my css & tell me how can i do responsive better

hey uhh i know it's too much to ask but can you check the sandbox my issue is about too many css breakpoints the design is rigid or probably i'm the one who doesn't know how to do it https://codesandbox.io/p/sandbox/fnlkxd ...
No description

multi-menu modal

I have a main site with mutlitple buttons. each one will open a popup modal that has options for that specific section. i have a modal component. i'm thinking how i should structure it...