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

Add marquee effect over image

What I'd like to achieve: https://bennadel-cdn.com/resources/uploads/2023/creating-marquee-effect-with-css-animation@2x.gif Attempt so far: https://codepen.io/n00bCod3r/pen/gOjNvge Where the left and right border are the image's ones (with the whole title being shown and scrolling)...

Is it legible?

hello, everyone i am working in a simple age calculator (i havent finished) and i want some advices about the javascript part, am i structuring it correctly? can you understand it? or what resources do you recommend me to improve the quality of the code. All advices al helpfull

Unable to render the Post page in NextJS

The array of an object is listed as follows just to give you an idea.. { id : 1, image: "/image" title: dfdhfdjfh description: dfhdkfhd ...
No description

Issue with Thin Gray Border Appearing on Button Hover

Hello everyone, I’m experiencing an issue where a very thin gray border appears around a button when I hover over it. The button itself does not have any border set, so I’m unsure why this is happening. Can anyone help me figure out what might be causing this? Here you can see, what I mean: https://ibb.co/hCB12Vj...

Need help on this component design

```jsx <div className='flex h-[569px] gap-[6px] border border-green-500'> <div className='h-[] w-[264.88px] skew-x-[-21deg] bg-red-500'></div>...
No description

How do I make background transparent for only specific parts

For this design, I'm trying to make the semicircles transparent. How do I approach this design? anything related to blend mode?...
No description

can anyone help me make a login page with html?

i want it to look like this? could you send me a source to use or any tips?
No description

How do I remove browser/auto padding on h-tags?

I allready tried setting h1,h2 and h3 to padding: 0 and margin: 0, but without success.

NOT FETCHING YOUTUBE VIDEOS

the code it's not fetching youtube videos, actually it did like 3hours ago, didn't change nothing, but now randomly just doesn't fetch and i'm having this problem and this is the code ```Javascript...
No description

increment, decrement multiple elements of an elements in reactjs

So I have 10 divs rendered through map function but I want to increment/decrement the respective element value and display on a element Code : ```js let arr= ["item1","item2","item3"...,"item10"]...

How to Make Font Size,Margin,Line-Height and Letter-Spacing Responsive for <p> and <h1-h6> Elements?

I want to create responsive styles for the following properties: font-size, margin-bottom, line-height, and letter-spacing for both <p> and all heading elements <h1-h6>. Are there formulas or best practices for these properties so that they look good across both very small and very large screens? Looking for guidelines or CSS solutions to handle these style properties in a way that ensures readability and good spacing on different screen sizes....

Css, divs gets squeezed when used margin

https://codepen.io/SirYido/pen/WNqLjGK | when i use margin on the class of divs (.barBtns) they get squeezed up. why is that happening and how can i stop this, am i doing something wrong?
No description

Vertically align characters in different elements

i have 4 buttons each with 1 unicode character right next to eachother. The problem is that i want to make them all the same size and have the same alignment. So basically i want to have all the characters have the same height and position. is there anyway to archive this without having to manually fiddle around with font-sizes, positions, margins etc. ...
No description

Using semantic tags

Love your work Kevin, but I do have a query about the use of semantic tags. Whenever i see examples and people demonstrating HTML they always use the <div> tag for everything and I know that it's perfectly legitimate and useful. I teach HTML to uni students and am always encouraging them to use HTML5 structural tags. Section, article, aside etc and all they see is people demonstrating using <div>s everywhere. Maybe the demonstrations should use semantic tags as that's what we should be using, right? If we teach with the right tags then they can see that the <div> tag has a purpose, but defining semantic content isn't one of them, just an observation 🙂 @Kevin...

CallBack Functions

What are callback functions in js and when do we use it ? Can anyone explain in brief with an example.

need help with framer motion on reactjs

Code : ```js import { motion } from 'framer-motion'; ...

Navigation indicator using scroll-driven animations?

Hi! Does anyone have an example of a scroll-driven animation to indicate an active element in a side navigation? I found this example from Bramus (https://scroll-driven-animations.style/demos/carousel-with-markers/css/#carousel_03), and it's very close to what I need, but I'm more looking for something like the attached image, where the indicator moves down as you scroll the page.
No description

How to make image slider skip intermediate steps when jumping between slides?

Hello everyone, I have implemented an image slider in my Angular application, and it is working fine. However, I would like to modify its behavior when jumping directly between non-adjacent slides using the round navigation buttons below the slider. Currently, when I move from one image to another (e.g., from the 4th image to the 2nd image), the slider shows all intermediate images as it transitions. I would like the slider to skip these intermediate steps and smoothly glide directly from the current image to the target image, displaying only the two images involved in the transition (the starting and ending images)....

how to center grid item horizontally

I'm using grid to create 3 columns. I want to center grid items of last row horrizontally if there is no enough items for the row. How can I solve this problem? I tried justify-content:center but it not work
No description