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

Content not showing

When i click on this tab"Giving Comedians " (check on left side) than in the content of that tab there is a text "Lance Armstrong " check the attached image(i have highlighted it ) when i click on it i move to the other tab which is working good but after that when i click on someother tab from and than when i click on this tab"Giving Comedians " than in the content of that tab there is a text "Lance Armstrong " i click on it my content hides why here is the link of my website"https://talhamu...
No description

put image in code pen

how can i put an image in code pen to show my example please?

my website kinda looks empty

Hey ! Not really a technical question but I made of custom portfolio website from scratch with vanilla html/CSS/Js and I feel like my website looks empty. Any recommendations/design choices I should make to make it feel better ? Thanks. https://antonycd.com/en/

Uniform Nav Bar

I'm trying to have 3 sections in my Nav which all have equal width's. What is the better / more optimal solution to achieve this? Thank you πŸ™‚ https://codepen.io/Matt-CopOffMatt/pen/MWLPEGq...

My margins are collapsing with this alternative to container and wrapper classes

Has anyone tried this yet? https://discord.com/channels/436251713830125568/551066863266693130/1172179877722595469 I'm kicking the wheels on it since yesterday on a new project and it's working great with a full-width with any content inside not imposing it's own layout. But as soon as I: 1. add a div with it's own flex/grid (like this H1 in the hero banner) it breaks out to full-width. I know the H1 is a block element and takes up 100% width by default but that should be 100% of the intrinsic container here I would think still. 2. try to put a breakout inside of a full-width and the same thing happens....
No description

Unresponsive transition

Hello all, I am having a problem with my transition duration working, I don't know what to do.
No description

Custom border

Hey guys does anyone have any idea about this type of border how can i make it with css ? #youtube-topic-suggestions...
No description

React passing props to children within parent component + TypeScript

Let's say I have Select component that manages state for event onChangeOption when option is checked/unchecked. Option can be component SimpleOption or CheckboxOption. Select.tsx ```js interface Props {...

background svg

i would like to know how i can do this backgroud for my project
No description

Burger menu JavaScript not working

Hi! I am trying to use a JavaScript function to toggle on and off my burger menu list, but for some reason is not working. I attached a video so you can see what's going on. You can also take a look at my code here: https://codepen.io/Abdiel-Peguero/pen/MWLPjej
Thanks in advance!!...

Can name be an h1?

Semantic question re html h1-h6 tags. I have a bunch of users and present their data/ statistics on separate pages which start with a user name. Is it correct to use user name as a title of such page? Like this: "<h1>username</h1>" #html #semantic

GSAP scrollTrigger always snaping to first element in React

Im looking for someone that has some experience with GSAP animation. Im working on my personal project, however i am encountering this problem with GSAP scrollTrigger and scrollSmoother. Problem is that my React app is always snaping to first element on the page , and im trying to achieve the whole page 'slider' effect where he can scroll through the slides but in very smooth way. I achieved all that except this last part where I want to make the scrolling smooth HTML is only 5 sections My react logic:...

Select a pseudo-element's "owner" (css nesting)

Hey! I just wanted to know, when nested in some pseudo-elements rule, is it possible to access its "owner" (select #owner:hover::after when in #owner::after, for instance)? That's more a question about CSS than a problem, I'm just curious.

help Γ§-Γ§

Tips for positioning these 12 elements?
No description

is it possible to get the values from browser console and display the result in browser UI?

Let say i created a 3 different function , when user enters
myFunc(5)
myFunc(5)
in browser console, the output of it should be displayed in the UI. Is it possible?

How to reproduce Apple’s clock text effect

This may not be possible, but I’d love to be able to reproduce this effect Apple uses on their clocks in their various OS’s. I think it’s a backdrop-filter of sorts but is clipped by the text with some sort of blend mode applied. Is this even possible with CSS?
No description

How i do thisss

Hi guys, I want to replicate this layout, any tips for positioning the beer and leaves? There is also this banner that is divided which I am unsure about.
No description

Canvas in flexbox not resizing properly

Any idea why the canvas in this example code takes the full width of the viewport? https://codepen.io/codecab/pen/abXaKJr?editors=1100 When I replace the canvas with a div it works as expected. I put the canvas in a wrapper element for now, which works, but I'd like to understand why its behaving as it does. Am I missing something?...

EM and REM scaling in different resolutions

Hello, i have a question about EM and REM and i don't found any answer, even chatgpt doesn't know. I understand how they work. For example 16px font size on the root, 2REM = 32px and EM the font-size of the parent element. What i don't understand is how they scale in different screen resolutions. Because if i set the font-size for example 16px and i use rems on my page. The page will look good on 1080p but on a 4k monitor would look tiny, because when i use REM in the end is still pixels. (and pixel is a fixed value) If i don't declare the font-size what will the browser consider as default font-size? I mean is something fixed to 16px? Or it varies on the screen resolution? Example if i am in 1080p will be 16px, 1440p 32px, 4k 64px? ...

Place a circle behind a DIV (CSS)

Hi. I have no problem creating the modal. My issue is how to get the circle behind it, and center both of them in the middle of the browser. I have included a screenshot of what I am trying replicate. Thanks for your help....
No description