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

CSS selectors

I have this piece of html right here ```html <section class="how-help"> <div>How can we help?</div> <div>...

SVG filter to "flip" the image?

essentially, small tweak that displaces the image to go the opposite way. kind of scaleX(-1) my research so far: it should be possible, by creating linear gradient and using it as a displacement for the source graphic, it should be able to flip it. ...
No description

Smooth animation for website

Hello. Does anyone know how I can make a smooth animation when a section is clicked on the navigation bar. All of my content is on the home screen but it's split into different sections. So can you guys help me make it so when I click the option on the navigation bar, it make a nice scroll animation to that section

I'm having trouble with a library project

So I'm doing a library project and I've been tackling it step by step. All the apps need to do is create book cards from user input and display them in a grid but I haven't been able to add them to my array. Here's the codepen: https://codepen.io/norwyx/pen/rNbZOmE?editors=0011 A little bit of context: all the functions at the bottom are pure UI stuff so not that important. But at the top I have things like the Book object that has some default values inside the constructor and then the properties. The Library object with the books constructor (the array Im having problems with) and the helper functions suck as addBook, getBook, inLibrary, and removeBook. ...

Issues with grid template area.

Its not overlapping properly. As you can see from the image . The grid-column and grid-row are not being applied Here's the pen link...
No description

grid column/row methods

Hey, is it better to define the size of grid columns/rows by setting either a min-width or min-height (depending on which one), on the parent and using the fr unit, or to define them using set sizes such as 10rem for example? Thanks in advance.

help with responsive design and images.

I have two websites I am currently working on/have completed in the past that I'm trying to move from desktop sites, to mobile friendly design, and I'm struggling on how, and where to start, or where I am doing things wrong with sizing my elements as I've been told multiple different things. (specifically with 'sections/containers' I've been told to use rems, use %s, use vh, vw, for setting heights/widths and frequently run into issues with using those and getting different effects on smaller screens) and its been causing a significant amount of anxiety, and mental turmoil / imposer syndrome and self doubt. https://limitbreakmma.netlify.app/ https://shaytestingcafe.netlify.app/...

Need hel tp create below sidenav

Hi guys i am working on a angular project and i am stuck on creating the sidenav for small sizes...can anyone help how can i achieve this #front-end #archived-html-and-css #angular #archived-javascript...
No description

Test-Driven Development (TDD) for CSS

Would someone point me in the direction of these techniques?

vite + React not reporting error

Hey everyone, I recently developed a React app using Vite. Everything was going smoothly until I encountered a problem where my pages suddenly started displaying a blank white screen without any content. Strangely, I'm not receiving any error messages even though I intentionally introduced some errors. Any insights on what might be causing this issue would be greatly appreciated...

CSS Best Practices: classes vs target tag elements?

Hey everyone! I have been wondering if 1) is it better to target html elements with their names on css or 2) preferably work with classes on them? Or 3) maybe a combination of the two? I normally mix the two - add some classes on my html but mostly enjoy targeting the elements by their names. Especially now that css has nesting, :nth-child(), :has(), and other newer pseudo classes, etc. In addition, I also use CSS modules at work where (if I understand correctly) this encapsulates css to specific components/pages....

Problem with GSAP animation(?)

When i first time load the page on mobile, it does this weird page shifting (gsap animation). When you refresh the page, GSAP scrolltrigger animation is working just fine, but not when you first time open it.... https://batman4ever87.github.io/jt/ import "./song.scss";...

input range

Hello guys.., I have this input range, and i am trying to make the box shadow of the thumb starting from rtl instead of ltr as shown in the image. ...
No description

margin auto query

Hey, in this example, i'm aligning the button on the card to the right side. I have a few questions regarding the methods to do so. 1) On the first card, a simple margin-left: auto; wont work, however when flex or grid is applied to the parent as seen on the second card it does, why is this the case? 2) By using a method other than applying flex or grid to the parent, as seen on the third card, the text wraps, what causes this behaviour? ...

this scrolling won't stop.

i'm trying to make a personal site. as you can see in video the scrolling won't stop. but in figma image this is not the case i tried giving position absolute but it made it worse. i have this codepen where you can see the whole code. https://codepen.io/samgon/pen/LYvBbrY
No description

the a tag is not appearing

in the javascript code before i added text.innerHTML = "Hello world and welcome"; the username.innerHTML = name was working normally and now it does not. it just disappears unless i remove text.innerHTML = "Hello world and welcome";

Text Filling Parent's Width

Hey everyone, I am trying to achieve something making the text filling the whole width available from their parent element, but i cannot find what ia m doing wrong here : https://codepen.io/Astrosmos/pen/zYXagxw Thanks for the help in advance !...

input range problem

Hello guys.., I have this input range, and i am trying to make the box shadow of the thumb starting from rtl instead of ltr as shown in the image. ...
No description

Grid gap having uneven gaps

So this is this grid wrapper:
<div className={styles.boxWrapper}> {boxElements && boxElements.map((box) => box)} </div> ...
No description

"declaration or statement excepted." problem

when i put an another else statement after a another else statement i get this issue. whats causing this and how can i fix it?
No description