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

How do you makes "emoji as a letter" accessible?

I have some logo text that includes the word "💡dea" - what would be the best way to write this?

Can't make image and card have equal height

this is what my current design looks like and i want to the rights images to be equal in height with themself and in equal height with the cards on the left i am currently using bootstraps grid system and mainly its own classes but i did try it using CSS grid but wasn't able to have equal height, so what will be the solution here?
No description

how can i create this live art for my portfolio website ?

so mac os sonoma came with new Macintosh wallpaper and it's kinda awesome and i want to create it as a live background of my portfolio website. something like this in video and every time someone refresh the website the colors will get changed. so the question is which language i will have to use to develop this....

AOS library creating space on mobile (even with overflow:x-hidden on body tag)

Hello, everyone! So I'm creating my personal portfolio (with Tailwind - a CSS framework) and 2 days ago I decided to add the AOS (Animate On Scroll) library bc the animations look very cool. However, yesterday, when I applied the actual library onto my site, it created a space, which in the Internet said that it can be fixed with the shown in the title CSS property. However, this didn't work on mobile, but only on desktop. I'd really appreciate any help (and a little explanation, if possible)!...

link with ID is reloading the page instead of scrolling to the section

I've given IDs to the sections and linked them to the top, I'm not understanding why it's reloading on each click. Can you please help https://leucine-new-website.webflow.io/fda-investigator-glossary-a-t...
No description

Need help for cloning an animation

https://www.y.uno/ i would like to replicate this animation.(hero section) i did some work but that's isn't good enough. need help....

Using :not() & nonexistent ID to create specificity for targeted unique elements (Hackity hack)

While simplifying my CSS I began playing with specificity as it applies to unique elements/objects "trapped" within a library or framework. I found using the ":not" selector on an element with a non-existent id (such as "ordinary" used in the codepen) allowed for very targeted css without using "id" . This feels evil but thought it would be better to ask a community for a second opinion. Is this technique to increase specificity for specific unique elements a devilishly good idea or just pure evil? 🤔 ...
No description

Masking Effect

Someone has an idea how to make this effect? I think this can be make be creating to copies of the hero section and using a mask. But I want to know what would be your approach

Isolation Issue

Hello, greetings from Colombia, I have this issue, even tho i used isolate, my card::after is not shown behind my card, I want it to be behind and also to be affected by the blur from the backdrop filter, any ideas?
No description

flex-group issue or heading text is too long

I am facing issue that my heading text is too long. it is taking too much space to the right I want to place them in two columns in design. I am using starter template from Kevin's course Beyond Css in module 3 after the chefs project. Here is the html```html <main> <section class="hero | bg-neutral-300"> <div class="container | flex-group"> <header class="section-header">...
No description

css cards

Can anyone help me styles this numbers properly because i fixed them but in other screens they are not good
No description

CLR navigation problem

Can anyone help me a better way to get the logo and the menu some space. I use now margin-left: 90px but that feels not the right choice. Second question ...

Overlapping Scroll (how to do)?

Hey everyone, I’m trying to replicate an overlapping scroll effect (similar to the one in the video I’ve attached) using CSS and JavaScript without any external libraries. Could you suggest the best way to implement this? Here’s my CodePen for reference: https://codepen.io/Ibrahim-AbuFarha/pen/LYwpdgz...

function reference vs function call

Hello guys, can someone explain why when we use the method addEventListener in javascript, the function being passed as argument is a function reference and not a function call as below: ```js const button = document.querySelector("button");...

Looking for junior Japanese developer.

ロナルドと申します。 私はウェブ開発チームのリーダーです。 日本でのビジネス展開を考えています。 だから、日本語を勉強したいです。...

Help: How to: Flip element on hover, keep end state, then reverse on next hover

What the title says ☝️ I have tried to make a pen, I don't understand why it does not work: https://codepen.io/ingvild/pen/OJKyzBy I think this is a pretty "fair" request, and it should be easier to solve in CSS, so anyone wants to contribute? ...

me help in css just fix this img

it's not working the icon in nav! ```html <body> <nav class="navbar"> <img src="./images/frieren-icon.png" alt="frieren-icon">...
No description

Javascript not changing P element

I'm having issues trying to understand why my javascript code is not updating the paragraph in my html. When i type the age number in the input field and submit its supposed to display a message on the paragraph. I've tried to look at the id for both and noticed they are the same. If anyone could help me understand why its messing up i would appreciate it. https://codepen.io/Jwfrank3/pen/mdNeMro...

help vite proxy running in a container

I used docker compose for frontend and backend, and i tried connecting to http://backend:5500, which works, but in my vite proxy i tried setting it to that, and it didnt work. Its probably because the request is made on the browser, not in the container, so I put http://localhost:5500 as the proxy but that doesnt work. If I directly do fetch ("localhost:5500 / ") there is no problem, so im thinking vite tries to check if the proxy is valid. heres is my vite config...