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

Designed a handoff guide for UX and now I'm planning a similar document for developers

I’m sure this happens everywhere but at work we have this issue that no website we develop ends up looking like the original design. So I was tasked with doing a guide to close that gap between design and development. So the designer guide was focused on how to better communicate some of the details or concepts. Provided components for base variables such as color or typography. But that’s finished so it’s all good. Now, I’m doing the same, but for front end developers. And I’m struggling with how to tackle this. This is the outline I have....

Centering

Hi guys i want to center something like this, especially the pictures. What is the best way to do it. I gues with cols? Any ideas. Would love to hear it
No description

React

Hi all, I have just learned React, and I would like to ask for any useful platform or channel that can help me dive deeper into React, If there is anyone who knows please give me links or names of them. Thank you 🙏

Repeat HTML code among pages of a project

Hey I am just wondering, is there any way that when I create the header for a project, it will be repeated to every page then without copy/paste. And when I change the initial header all of them will be adjusted. I am refering to the HTML code of the header 🙂 Thank you!...

How do you reset a state on certain breakpoint?

Im trying to set the navMenu to false when i reached sm:(640px above) im wondering if where can i put a code that when sm:(reset NavMenu to false) ```export default function Home() { const [navMenu, setNavMenu] = useState(false); const handleNavMenu = () => {...

Styling / Getting rid of Scrollbars in Chrome on "Card Design"

I have an Issue that I do not seem to be able to change or remove those random ugly scrollbars showing up. None of the Scrollbar styles seemed to work. In Dev Tools mode they automatically appear as smooth slim gray bars just like they would on mobile sites but regularly they look like the screenshot. I have added a Codepen https://codepen.io/Zen-Gheist/pen/KKbryRX ...
No description

defaut Value of width in certain div

can anyone tell me what is the default width of a certain div? because i want to use
w-full
w-full
className on my <ul> below 640px and set it to default above 640px, im using tailwind btw...

Need explanation: Why .reduce() returns wrongly ordered object

Hi im currently working on a project where i want to store and order ids in groups, which can also be sorted. So my datastructure looks like this: ```ts // Key is group id and value is an array of item ids that belong to that group const itemGroups = { "1": [10, 11, 12],...

Grid / Flex solution

Hi frontenders, how would you solve this? 😁
No description

How to put Images or divs on top of another in html

In an HTML for my school website for an admission page, I was struggling to put the forms for admission or pictures of the forms on top of one another. Not literally on top but almost like line-by-line. here is a picture of the problem. And I want it to be central, what should I do?
No description

Disable css filter effects on pseudo elements

Hi, So I work in Wordpress using the Divi theme: I'd like to have a hovereffect with some filters ( brightness, blur etc) on my module, but not have effect on my before and after. Look at the provided images, one is on hover, one is when i'm not hovering The text is my before and after...
No description

How can I disable image animations that run when a web page reloads?

I'm building a webapplication and have run into a problem. I'm trying to recreate the logo which is displayed on Disney+ (https://www.disneyplus.com/en-se) in the upper left corner. The logo appears when the user is scrolling down and disappears when the user is scrolling up. My logo is appearing/disappearing when I scroll down/up. The only problem with my logo is that it will shortly appear and disappear everytime I reload the page. Is there a way to get rid of this? I've tried to solve it on my own, with ChatGPT and with YouTube (https://www.youtube.com/watch?v=4prVdA7_6u0&ab_channel=KevinPowell) but it didn't work. ```html <a href="#header">...
No description

How can i achieve this gradient effect

I am struggling to create this linear background color effect using linear gradient. Any help would be very thankful❤️
No description

Adding a scroll bar within a div element in a nested Grid

Hello all, I am struggling to get my grid boxes to scroll properly. I have my page divided into different grids and I'd like to be able to add a scrollbar to grids with info that extends beyond the bounds of the box they're in. For instance, the grid in the highlighted section of the image should be scrolling to show all the "content" boxes. However, that scrollbar doesn't function and instead a scrollbar for the entire page is created. Can anyone help me figure this out? Also, if it is relevant, I have the html and body set to height: 100%. Here is the Codepen I made with all the stuff if you want to see the whole thing: https://codepen.io/AJandRoses/pen/RwEeeOm...
No description

Help with menu Overlay problem

Hi, ya'll o/ Please help me with this problem. So, on mobile, when you click on the hamburger buttom, the overlay should show up. I'm trying to do this through a css rule. Basically when the .header__menu receives the .open class the overlay get visibility: visible. I'm probable doing something wrong with this css rule, but can't understand where is the mistake u.u...

Best Practice NavBar?

Is this a good practice when creating a responsive navBar? Im creating another nav inside a nav for mobile screens. ``` <div> <nav> {/* Logo */}...

UseState() and useEffect()

why countdown example in useState() doesnt need useEffect()? but when it comes to like changing a textcolor you need both useState() and useEffect()?

Not Responsive My Text Here In Mobile Device

Help Me Guys I Can't Solve It In Responsive.
No description

formData in web-components

Hello, I made a web component: ``js class Toggle extends HTMLElement { #toggle = /*html*/ <input type="checkbox" ${this.checked ? 'checked' : ''} />...

Is it wrong to use the mask-image property? Is it obsolete?

I've been learning how to use the mask-image property but without the -webkit- prefix it doesn't work in Chrome.
No description