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

What Figma says

Hello, guys! I want to know what figma says here. For me it says that there is an image with background color of lightgrey 50%, but the designer says he's not puted any background color on it
No description

Running into an issue while messing with the allow-discrete for animation feature

I'm need to build a collapsable alert message and thought I would try to mess with transition-behavior: allow-discrete; to switch the alert message to display none when it's collapsed. The issue I'm running into is going back from display none to display block. I want to delay that animation a few milliseconds but it seems like the delay is ignored for display. Does anyone know if delay doesn't work with allow-discrete? I've tried using @starting-style to set it's display to none but that seems to be preventing it from going back to display block. Here is an example of what I'm doing. It looks fine when it collapses but switching back to the default state causes the text to wrap before the animation ends because it is immediately switching back to display block instead of being delayed until the alert grows to full width....

Making transition to new screen smoother

I'm making a todo app and I've designed it so that when I press the add button a new screen appears. Like this (https://gyazo.com/cb7d487262c55342077216c52b830407). But the transition is too 'blunt'. How do I make it smoother? For reference, I'm using React + Tailwind; this is the relevant code that adds the screen....

Is adding max-width to a text a good way for a line break design in css?

i was trying to copy kevin powell's challenge 3, at first i was trying to figure out how to add a line break just like in the challenge 3 video, "Response layouts don't have <linebreak> to be a struggle" and came up by adding a max-width of 650px for that, same goes for the paragraph, i added a max-width of 520px .container { width: 100%; background: #23424a;...
challenge 3

What would be the best approach for my React Resume Builder?

As you can see in the screenshot, I want my user to be able to add the education he had and experience, but let's say he has multiple fields of study/multiple jobs he worked at, I'd need some guidance to understand how I could build it, because each field would require to duplicate every item inside my useState, so basically if he worked at 2 jobs, how would I code it in a way so there are multiple "companyName, positionTitle, etc." ? Thank you!
No description

WELP!

i can make this layout using flexbox and wrap it? BUT how do i write on the images like "soccerVR" its written on the image
No description

On focus border changing component size

https://gyazo.com/90ba846f18909e47d3112f2ff377c829 When I focus on the input, the border is added, but for some reason, the other components change their size accordingly. Is there a way to prevent this from happening? Here is the code for that particular element. Its parent is a flex container, for context....

restrain image height

Hey, I have a grid layout with an image and text. There's two rows, 100px and auto. I'd like the image to span the first row and the second, being the combined height of 100px and the height of the text, but i suspect since the row is auto it's using the images default height and being taller than i'd like, how would i get around this? Thanks in advance. https://codepen.io/deerCabin/pen/WNqGmGq...

Rendering Patterns

If you'd like to learn more about React Server Components, I've written a series of articles exploring rendering patterns. This is one of them, specifically focusing on React Server Components. I'd love to hear your feedback! If you find any errors, have suggestions for improvement, or a different perspective, please let me know. I'm always eager to learn and grow. https://www.miloudamar.com/blogs/server-component...

Help creating a Curved header

Hi everyone, I have been asked to investigate how possible it is to re-create our current bland header into something like one provided in the picture here. I've tried playing around with border-radius and even clip-path cause I've seen that suggested, but to no luck yet. It's just that part that bothers me, rest of it I have from previous design, but that top border that moves into curved shape is out of my league right now. I was wondering if anybody has a good solution to a design like this? I've never encountered it before....
No description

Your Opinion

Hi guys I was wondering how do make these two divs responsive on ipad/wide screens as they are moved using position relative everyones opinion matters so drop it...
No description

Portfolio Website

I'm currently working on creating a portfolio website to showcase my projects and was wondering if you know of any good portfolio websites that I can use as inspiration. Any recommendations would be greatly appreciated!

em scope in @media and @container

Am I remembering correctly that in an @media query, using ems or rems e.g. @media (min-width: 50rem) or @media (min-width: 50em) is referring the browsers font-size, even if you've changed your html font-size to something like 62.5% , its still using 1rem = 16px and 1em=16px? ```css :root {font-size: 62.5%; /dont do this/} .parent { font-size: 32px; /never use px for font-sizes!/} @media (min-width: 50rem) { ...

How to align 0..N items to start and 1 to end, with flex?

I want an item always aligned to the end, while any previous item should be aligned to the start. How can I do that, with flex?...
No description

How to avoid text to wrap when there's space, using flex or grid?

I want the author to be on the left, the category on the right. If the container is wide enough, the text should not wrap. The two elements (author and category) may wrap on small screens (flex-flow: row wrap I guess?)....
No description

Scale animation with CSS Grid causes pixel gap issues

I have a weird one for you all... it seems that animating the scale while using CSS grid, causes the browser not to calculate the widths quite properly and if you have a 1px gap between the grid items the gap will come in and out as you resize the window You can see it in action here: https://codepen.io/LanFeusT/pen/RwzGVWK try resizing the browser window and you'll see the grid at the top which has the entrance animation will have the gap: 1px come in and out whereas the bottom one the gap is always visible Outside of animating something else than scale (translate for example) I don't really see another solution?...
No description

How to make a child element fixed but in the same time relative

Hello, I have one very big problem. I have nav in a div and should make it sticky when scroll trough the page, but the nav should not leave its parent div, but the div should stays in place. ​​The div is a parent of some children, the nav is one of them. I want to keep the functionality where the nav is positioned based on the parent div styles, but also want when I scroll, only the navmove

Overlay on a div with a certain cutout in the middle.

Actually this is on top of a video stream but for simplicity sake lets just say its over a div. I am trying to create a verification system where the user can verify themselves using facial verification. For the design part I need to display a face cutout overlay on my video stream essentially telling the user to place their face in the cutout to verify themselves. What is the best possible approach to this? I have provided an image of what I am trying to achieve but for web. ...
No description

How can i apply overlay for the design at bigger screen sizes ?

Hello, I did apply the overlay for the design at mobile screen sizes, but when it comes to bigger screens i can't, i searched Chatgpt, reddit, stackoverflow, and found nothing, repository: https://github.com/WaelBenseghir/stat-page demo Url:...
No description
Next