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 i select the content

newBook.children[0] contains ```<div class="bookTitle"> <h3>Title:</h3> <span>Think and grow rich</span> </div>...

How to prevent Flickering caused by backdrop-filter:blur() when transforming/moving on ChromeBrowser

For some reason there is no flickering on codepen. Here is my codepen: https://codepen.io/noobcoder137/pen/WNBRMPx Also it works fine on mozilla firefox and OperaGX. I am using Chrome Browser on Mac. Don't know if it's same on windows Chrome.:raisedbrow:...

space travel frontend challenge not able to implement universal selector

I am following the scrimba kevin powell course for space travel website challenge I am in initial stage only but i am stuck on universal selector issue What exactly is the issue the nav bar that have active , hovered , idle state i am unable to add the hover using universal selector as kevin has directed the hover is supposed to add a border bottom to the elements I tried using li selector instead and it works fine ...

“collapsing margins in action” section

In the “collapsing margins in action” of CSS Demystified, Kevin adds a padding top & a padding bottom & that brings the hero image into view where prior to that, it was partially covered. I think I am somehow not understanding where the part is that explains why the lack of padding prevents the image from being in full view. ...

need help to turn my ugly routes to dynamic routes

i didn't read the doc because i don't have time this is an assignment have to be completed before an 1h routes:...

i need help with aray

hello how can i all item in aray Random with no reapeat ? in java script ! what is the simplest way to this

My TranslateZ not working at all in Chrome or Edge

I've been trying to translate a Javascript example from a YT video of a animated card with both rotation and translateZ effects. I thought most of the original code done in Javascript could be handled in CSS with just the mouse tracking done in javascript. However, niether th original code's 'translateZ' or my CSS version actually do anything, I read another post here about a solution to translateZ issues being something to do with : "backdrop-filter: blur()". Net being sure what this was, I tried commenting out some box-shadow blur css lines, but that didn't help. I've had to upload the coide as it makes the post too long if anyone can help me narrow down the problem...

Using RollUp, trying to import images

I have shared module that is bundled as a library and then installed in another MFE. The shared module is bundled using rollup, I tried different plugins for importing image the build is sucessful, But then I use the component which had images from shared module in MFE the other content loads but images doesn't load for that component that had images....

Grid system

Anyone know if this is possible? I want to make a grid system. Now it is not possible to get them right. Photo 1 is what it currently looks like, but it. should be like photo 2. So everything should fit together...
No description

displaying something in table problem

I was practicing php CRUD, I figured it out that it was the css fault when I try to configure it here is the html structure ```<tr> <th>id</th>...
No description

Data from API is displaying in the console but not in the DOM, why?

Hey, I wanna display in the page the data from the api, but for some reasone, it is not be rendering. api.jsx file ```js import axios from 'axios';...
No description

filter the tpe using stimulus

hi guys maybe some of you here have experience this and some of you might say this is easy for you, but can you please help me how to create a stimulus code to filter a specific type when i click one of this button <div class="job-button"> <a class="job-headline" data-action="click->jobs#vollzeit" data-type="Vollzeit">vollzeit</a> <a class="job-headline" data-action="click->jobs#filterJobsFromButton" data-type="Teilzeit">teilzeit</a> <a class="job-headline" data-action="click->jobs#filterJobsFromButton" data-type="Praktikum">praktikum</a>...
No description

Grid styling

I want to create a tile with specific size and after clicking + plus sign it should create another one in 2nd image i am experimenting grids but somehow cant get them proper they arent suppose to be far apart...
No description

split border on inline element

Hi! Does anyone have an idea why the border appears split on the h1 element in this code? <div class="one"> </div> ...
No description

Why does everything goes bad when I resize my window size?

I've just begun to learn html and css, and I created a layout which looks good in a normal computer screen, but I tried resizing it to a lower screen and it looks bad, everything start's getting out of the container. here's my code: https://glitch.com/edit/#!/techcrunch-layout-chakdekhan here's the live site: https://techcrunch-layout-chakdekhan.glitch.me...

What is a build tool and why do we need it?

Although google does hold it's answers, it still confuses me and i couldn't find a simple explanation, What is a Build tool for example (Vite) and why do we need it?

need help with react pagination

Always shows page 1 although, I'm able to switch to next pages Just want to update the page number as well Btw I'm using material ui...

How to prevent a div going under a sticky div?

I want the text messages to not go under the sticky input.
No description