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

Mask on photo with transparency

Hello, I have a problem with an html integration and I have no idea how to do it. ...
No description

Single Click Navigation and Swipe Animation for Custom Slider

code link : https://codepen.io/deepk2891/pen/wvLdZqR Hi everyone, I’ve created a custom slider using JavaScript for my website and I’m looking to address a couple of issues:...

AJAX or fetch()?

Hey everyone, I just finished learning HTML/CSS and a bit of DOM manipulation. I decided to learn jQuery because it seemed easier for tasks like hiding or showing a div with a button click and adding some animations. Recently, I came across an AJAX course on YouTube. After some research, I learned that AJAX is connected to jQuery and allows us to update data without reloading the page. I'm trying to understand the POST and GET methods and discovered that I can create things like chatbots with AJAX. However, I also found a video mentioning that there's a more modern and easier way to handle these tasks using the Fetch() function in JavaScript. Since I'm new to backend or server fetching concepts, I'm excited to learn something new. Can anyone give advice on whether I should stick with AJAX or start with the Fetch() function? Any tips or resources for beginners would be greatly appreciated!...

Can someone explain to me why this is happening?

Context: I'm performing the challenges, and when I tried to zoom in, I saw this! Problem: I'm confused on why my background color is not taking the whole screen when I minimized it? Could someone explain why this is occurring and how I can solve it? ...
No description

`1vmin` and `min(1vw, 1vh)` are the same.Change my mind...

1vmin and min(1vw, 1vh) are the same. Change my mind......

how to enable horizontal scrolling for a div wrapping a table with many columns

What I hope to achieve: a table within a container surrounded by padding but scrollable horizontally and vertically What I have done...

How to handle small screens in css ? Is small font good practise ? (shadcn-ui + tailwind)

This question is coming back regularly to my head when i deal with responsive design for small screen especially. I am using shadcn-ui and tailwind for design. Default font size is 16px (iirc). For desktop everything seems to be fit well but when I am doing responsive design its not so awesome. For example, iphone 16 and card component, seems like padding and text is too big, could be small i guess. ...

Really slow css

Is it even possible write css that make your page lagging? I have some animations and transitions but there isn't that much contect so that could lag. How to find what causing that lags?...

Idea on how to make it responsive

Hi guys, You might remember this page from some of my previous posts. I redesigned it using real code, avoiding position absolute on every element. Now, I need ideas for how the design should look on smaller screens. One idea is to make everything into a single column. Do you have any other suggestions that would be easy to implement? πŸ˜… Let me know if you'd like any further changes!...

How to create two aligned columns with unknown items size.

I have card like this: https://codepen.io/H4ds0n/pen/RwzVMKG What I want is two columns (i do not know the width of label and its percentage at build time). Two even grid column is bad because parent container is too big for its children....

Media Query Not Working

Hi, I have a custom cursor that I would like to disable for mobile devices. However, the media query display: none that I'm applying dosen't seem to work. ```<div class="media"> <div class="cursor"></div> </div>...

curve issue

Hello everyone new here, just had a quick question I'm struggling with something and I hope I could get some guidance. I'm trying to recreate this curve at the top here in the image.
No description

website translated

Hello!…this is my first time posting in here, hopefully someone can help me out with this, I just built a website with html and css, so far so good until I randomly translated the website from English to Spanish and a few things, specifically texts, got all messy, do you you how I can fix that? https://ui-designx.netlify.app...

Layout ideas

What would u fix it here?(Like in UI ) https://codepen.io/Anes039/pen/MWMaXJb here is a copy that i tried to make from my react app not the best version...
No description

flex vs grid for HTML forms and inputs?

Which one is recommended as of 2024? I see a lot of examples of laying out from elements, like this: https://www.starterapp.style/ where the flex box is the only one used. But I am afraid this is not where CSS is going... I have a feeling that grid/sub grid is the better way forward. Do you have any experiences one way or the other to share and...

Favicon Not Updating in Google Search Results

I recently published my website with Vercel and am using a Hostinger domain. The favicon is working on the site, but in Google search results, it still shows the default Vue favicon. Why? I published it a day ago my code:...

Why is blend mode not working?

I want to use mix-blend-mode: difference; for the logo but it is not working. Why is that? CodePen: https://codepen.io/FESODI/pen/LYKyZeG...

how would you approach this animation?

Specifically the big bubbles with the app icons pushing the smaller bubbles out of the way and then resetting themselves

Why it breaks?

Hey i am doing this simple scroll animation, but it breaks when is already finish, anyone have an idea about what would be the problem?

Shakey header on hamburger menu click

Hi everyone, I am working on a website, I have done the layout for desktop and mobile. The desktop header looks okay but on the mobile my nav list disappear on click and my header is Shakey ...