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

Pico CSS Help with a button targeting

I have a button inside a form and I can't get the border-radius to work properly. I've tried multiple ways of targeting from going by .layout .main .former .btn to .main .former .btn to .btn to .former .btn and none of these approaches work. Not sure if Pico is stopping it or not. Here is my code pen https://codepen.io/MD-2016/pen/PoxWwRL...

SASS/SCSS still worth learning?

With all the wonderful new things that have arrived and will arrive in CSS, I am wondering if SASS is still something worth recommending to beginners as a must have skill? (I'm inclining to yes cos a) legacy projects, and b) its a good tool for building your own "framework", (also my reason for saying learn and use BEM and then adapt your own version))....

Deployment Issue. All images are 404

So i made this website to practice filtering. On uploading the website to vercel/netlify all of my images (which are background-images) are all 404. Weird commit are me trying to debug (very badly ig) Link: https://entertainment-fawn.vercel.app/...

Responsive navbar

how can I manipulate the left-nav class when checkbox in responsive-nav class is checked. ```html <div class="nav-links"> <div class="brand">...

Is the TailwindCSS CDN Link not working?

Some UI websites are broken and no one is asking anything on twitter. I tried to use the cdn and the code was not working and on the Network Tab of Browser this was shown....

.jpg.webp images

I was looking for a photo of Keanu Reeves and notice that on his Wikipedia it has a 2019 photo. I copied this yet noticed it has a very strange double format, see attached. I know that .webp did have an issue in the past and .jpg was the fall back, yet cannot fathom how it has a double format? Is this new or an I missing something here (quite possible)...

Strange pixels showing up D:

Hello! I was doing a project by myself and something strange is going on with this code: HTML ``` <div class="card-top">...

JavaScript line effect as I scroll

Hello again, I'm just asking for some articles/resources I can read that would have an effect similar to the attached picture. My idea is to have a line that grows/shrinks along a fixed path as the user scrolls up/down the page and goes behind elements to "connect" them together. I have no idea what to really search for this 😅

Change color of css 'inline svg' dynamically

Hi! I've been tearing my hair out with this for a while now. I have an css inline svg which I want to change the fill color off dynamically in css. The codepen is here: https://codepen.io/stefanh-at/pen/QWJGZKd Some restrictions I have for this:...

How to optimise Parallel API call in the first render when site open ?

I want to call 5 at time of first render. How to optimise API call so that the user gets best experience?...

Search engine ranking question

Hey, I was wondering this: if I make a multipage static website, where I have a landing page and an about page, if I put most of my keywords on the about page, would that be worse than putting it on the landing page? I'm thinking that the landing page will have more important info like projects, quotes, services and the about page will show who I am and where I'm based out of (I'm trying to market towards a local audience to compete with keywords). I know this isn't exactly a frontend question but not sure where else to put it. Maybe we can add an SEO tag?...

JS: classes, factory functions, private fields

Hey all. I am learning JS at the moment and I have learned about classes and how all their fields are public by default. I have also learned that it is not always wanted so a past workarounds included: - adding "_" prefix to the key name for other developers to understand your intentions, - using factory functions Nowadays "#" is supported to be used for this....

Can I improve here something to make it more reponsive the good way

Hello, A long time ago I wrote this css (https://github.com/RoelofWobben/stats-card/blob/main/roelof.css)
But I wonder now im doing the CLR course what to improve to make the css better...

Any ideas on how to fix this behaviour?

im using mouseEnter and mouseLeave to add few features such as changing background to landscape, scale etc. and now its having this weird effect. Anyone knows how to fix it? https://scrimba.com/scrim/co3614b79bcbdf6f01044f8ef...

Deployment problem

What cause of javascript not working after deployment? I just deployed my portfolio in netlify and all of my javascript functionalities didn't work....

Date part to milliseconds.

I've this time 2023-05-25T11:18:45.752Z . How do I get only the date part and change it to milliseconds. I know I can change the whole datetime to seconds by
const date = new Date().getTime();
const date = new Date().getTime();
But this takes the full datetime....

I have to create a podcast website for someone, they have like 100+ episodes.

How can I create a separate page for each episode? I don't want to make 100s of pages manually. Is there any ez way?...

State setters for newbie ...

Hi! Again, this is taken from codecademys react intro course. I have the same issue as usual – reading syntax. This code snippet is simplified as follows:...

Create a multiselect in pure HTML CSS and JS

I want to create a multiselect I looked in HTML Reference and added the multiselect attribute but that requires the user to press ctrl which is not good UX. I have seen some codepen craeting the desired selectbox but either they are too comples or using JQuerry. Could you please suggest a simple pure HTML,CSS,JS solution if that exists? Need to build this https://codepen.io/etienne582/pen/xxOgwzX...

Anyone knows what causing this issue?

im mainly using tailwindcss, and i installed materialui for pagination and since then im getting this error. Anyone knows how to fix it?