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

in next.js

which is better method to optimize fonts ? 1-use in css file 2-by this...
No description

¿How to debug calc() in browsers?

Hello, I would like to know if you know of any tool or technique to evaluate or debug CSS calc() expressions. When these become complicated, it's difficult to trace what's happening. Best regards and thank you very much....

mix-blend-mode is not working

I want it to change to white background and black text when I hover my mouse over it using mix-blend-mode but it doesn't work , can anyone help me ?
No description

<video> sometimes doesn't start

Hey everyone, I have this simple line of code ```html <video class="background" loop autoplay muted playsinline> <source src="../../assets/img/restaurant/background.mp4" type="video/mp4"> </video>...

Slider pagination animation

Hey everyone!! Can someone advice how to recreate slider pagination bullets animation like on video or maybe someone has code example

Aligning content in web pgae

I have a page and its header & footer are sticky , I have to display an image at botton of content and always stick to footer in all resolution. what css should I follow ," header { ......
No description

Love calculator for Valentine's day.

I created a website love calculator using html, css and vanilla JavaScript. "💖 Happy Valentine's Day! 💖 Looking for a fun way to celebrate love today? Check out my new Love Calculator website! Whether you're with your special someone or flying solo, this playful tool will give you a peek into your love compatibility. Give it a try and share your results with me! Spread the love and laughter this Valentine's Day with a little help from the Love Calculator. 💑💕 ...

javascript functions

if i declare a variable with the name "xyz" globally ( outside a function ) and give it a value... and then i declare another variable with the same name "xyz" inside a function and give it a different value.. then m i editing the original variable or im declaring a completely different variable?

Responsive Card Layout (CSS)

Trying to re-create this card layout. I'd like the cards to wrap when screen size is shrunk. However, I can't seem to get the cards to do so with Flex. (Styling isn't exactly the same, just want to get the responsiveness to work). I tried to use a width of 33% or flex: 33%. How can I achieve this without using media queries or fixed widths? https://codepen.io/Matt-CopOffMatt/pen/eYXbNdX...
No description

I got to call 4 api calls using useQuery - 4 different query Key

const { data1, isLoading } = useQuery('posts1', fetchPosts); const { data2, isLoading } = useQuery('posts2', fetchPosts); const { data3, isLoading } = useQuery('posts3', fetchPosts); const { data4, isLoading } = useQuery('posts4', fetchPosts); - I need to refetch this 4 at once on click of the button. How can I do that using useQuery option only....

When screen decreases in size background move's oddly

Hey there, So I had help creating this calculator to be a bit more responsive but I ran into an issue so when I decrease the size of the space around the calculator the background coloring moves with it how can I fix this?
No description

I'm making an accordion pattern and I'm having trouble with changing the icon of the active state

I'm making an accordion and I already have everything ready. It's responsive and it behaves the way I want it to. But I'm still looking for a way to change the icon next to the button. I have tried a bunch of stuff and just can't find a way to do it (and it isn't that relevant but does somebody know why when my accordion opens or closes the background moves? I would appreciate if somebody knows. If not, no biggie.) Here's what's happening, how it should be looking, the codepen, and the repository (because all the images are local and it looks weird on codepen. There's a GitHub page on the repository). Thanks in advance. norwyx.github.io/faq-accordion/...

Help with finishing touches on this "FrontEndMentor" project? Few small bugs.

https://snazzy-tiramisu-4033f2.netlify.app/ 1. Strange line on the left when Night-time desktop Background Image is loaded(BG applies between 18:00-05:00) 2. Refresh Quote button dips few pixels down on being pressed 3. "More" section is supposed to have this strange blur effect that I don't know how to make (Figma pictures included)...
No description

Zooming into an image

How can i make the image zoom into itself when hovering over it but without changing its size on the website, basically zooming while keeping its width and height. Here is my code: .sec4{ box-sizing: border-box; max-width: 100%; display: flex;...

Using article or main for solo components on page

Hi, this is a bit of a perfectionist question, so apologies! When designing a single component or widget on the page (eg for a coding challenge) that matches the description for using an article element, but it is the only content on the page, should you still use the article element, or only use the main element? The HTML specs have an example of only using article for single components, but I received conflicting advice that I should actually only use the main element. ...

Need help regarding CSS Grid and specificity

https://codepen.io/Depayan-M-the-flexboxer/pen/dyrQgBz I'm using grid and In this layout I want ".story-5" to take 2fr width. Also despite using two classes I couldn't make right border of ".story-3" 0px; doesn't using 2 classes make it's specificity higher?...
No description

CSS color theme and pallets

Hey folks, Hope this is the right place for this . I am looking for suggestions on color pallet generators that generate complementary dark and light theme colours . All the usual ones doesn't seem to offer what I am searching for apart from one which is behind a paywall. Any suggestions would be greatly appreciated....

Links do not have descriptive text - Aria Labels don't work ?

CodePen: https://codepen.io/Smgy94/pen/LYaXBJr Hey Guys, Im getting the "Links do not have descriptive text" error in my Lighthouse report. I don't want to change the copy in the CTA "Learn more"...
No description

is it good practice to use h1 for logo of a web page?

What do you think about h1 being using as the logo of a webpage. I still see a lot of websites where it is used this way but I also read that it's not a good practice for SEO. What are your thoughts about it?