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

Best strategy for light/dark theme using light-dark() function

I'm experimenting with the new light-dark() function and I was looking for ideas on how to better implement the various colours. This is my current implementation: ```css :root { /* text */ --l-text-color: #1a1c20;...

desktop/mobile reactive website

i'm using svelte. I'm trying to make an accessible website avialable on desktop and mobile. (i've only made desktop styling before) ...
No description

Cache error message

I want to follow along Kevin's YouTube video: "Turn static HTML/CSS into a blog with CMS using the JAMStack". When I run the "npm start" command, I get the following error messages: ``` [23040:1122/181852.630:ERROR:cache_util_win.cc(20)] Unable to move the cache: Access denied. (0x5) [23040:1122/181852.630:ERROR:disk_cache.cc(208)] Unable to create cache...

list of classes in html / css

Hi, Is there any way to get a list of all the classes (and IDs) in VS code? I have found an extension CSS selector generator [CSG], but it seems does nothing. I have one main css file(marking colours, etc, ), and sepearate ones for coding the actual pages. I would like to cross check them, for any duplications... Any idea? I am looking for some kind of view of all the classes & IDs. thank you!...

`<details>` element with `display:contents` broken in Chrome 131?

I've been playing around with Chrome 131's latest release and noticed some interesting changes with <details> and <summary> elements. I wanted to share my findings and see if anyone else has encountered similar behaviour. Two significant changes in how <details> elements work: 1. The <details> element can now accept display:flex and display:grid properties. 2. You can now target the details contents using this new pseudo selector: ::details-content. No more wrapper divs needed....

preview app feature to open link in same tab

i have three cards when i hover on them top div shows image of that card but when i click on it it opens the url assigned to it in new tab. BUT i have a new idea when i tap on it, it should open url assigned to it like "preview" just like macos does when we use spacebar to preview, so the link won't open in new tab....

title attribute | tooltips

Hey, I’m aware that if you add the title attribute to an element it adds a tooltip with that text on hover. What is the reason you may want to add this? Thanks in advance...

Review on login form and problems

Hello guys, sorry to disturb you all; I'm trying to build a login form (see the picture with the instagram logo). The other uploaded pictures is how far I was able to go :c . I wanted some feedbacks, what is wrong and what can be improved... I have some questions also: On the img tag, we add the following: ```CSS...
No description

Need Help understanding this picture cut off effect

in the box where it says "manage multiple accounts" and "schedule to social media" the pictures are cut off or past the box itself so i was wondering how I can achieve this affect? Would i use transform or pos relative/abs and overflow hidden?
No description

solving overlapping stacking contexts.

Hey, In this example i have two divs that are containers. they both each create a new stacking context. The red box overlaps the text, however if i'd like the text to overlap the red box, i can't do that unless i add something like position: relative and z-index to the text. It makes sense to do so but since the text element doesn't use position: relative i'm adding it for the sake of overlapping content which doesn't feel right? I assumed the z-index: -99 on the red box would have solved it but since they're their own individual stacking contexts it has no effect. https://codepen.io/deerCabin/pen/OJKexQj Is there a more appropriate way to solve this sort of thing? Thanks in advance....

Error trying to change src of image using javascript

`` function changeImage(index) { console.log(${index+1}`); var image1 = document.getElementById("img1");...

Weird 100vh issue on firefox

I'm working on this site: https://natasha-macvoy.netlify.app and when I checked on firefox the nav is all wrong. It's working fine on all other browsers. The nav has a top bar and a bottom bar, the bottom bar should be fixed to the bottom of the page, with the whole nav staying fixed on scroll. The nav is set to 100vh. I've tried it with the children set to relative/absolute positioning and it fixes the positioning of the bottom bar but the nav parent still doesn't stay fixed on scroll. I found...

Parsed Content is different

Hey! All was working well until I tried to import a lib from Wanikani that converts a roma character into a japanese character. I ran this command
npx parcel main.html
npx parcel main.html
and it worked. It translates what I entered realtime. but my other functionalities got rekted, all because the csv that I wanted to parse is being read as the content of my main.html. Compare the one from the left which is the correct content to be parse which is from just running locally, to the one when I ran
npx parcel main.html
npx parcel main.html
, it became my main.html, like what?...
No description

Is event object and window.event object the same ?

Hello guys, sorry to disturb you, can someone explain what is the difference between an event object passed by an event handler and an a window event please. I just read that the window.event was used for backward compatibility like this: event = event || window.event ...

responsive problem

Hi guys, I do not know how to handle this layout (the image). I try to use grid-template-areas. But I don't know how to make the C block just take the space of its height and the A block take the rest height of the left column. I'm not farmiliar with grid layout. Can anyone help me? Thank you
No description

How to parse through images in a folder and display each image on the webpage?

I'd assume to use document.createElement() in a for loop for each file in the folder. How can I go around making that for loop though? How can I use javascript to read what's inside the folder?

Trying to get a custom div to follow the cursor. Gives me error "cursorDot.style is undefined"

Here's the code I used in my javascript file: ```javascript const cursorDot = document.querySelectorAll(".cursor-dot"); window.addEventListener("mousemove", function (e) {...

color opacity is not matching even tho value is same.

in figma and css the values are same but in browser it is showing totally different for better understanding i have attached half cut image of pc and first image that shows micro is figma design. blue : rgba(48, 122, 193, 0.2)...
No description

How to load content in a single page web app

Hello guys, sorry to disturb you all. I need to load content in a single page web app. From what I have read and seen, there are 2 ways of doing it (using vanilla JS)... one way is to inject the html content directly into div containers while the other is just to shift from display block to display none when needed. I don't understand, is there a difference here? I need to use history API, to keep track of the changes, like pages we are navigating through, it's more appropriate to inject html content directly here rather than div element?...

i'm very close but flex grow is not working.

i have put luxury text and line and year in one container and gave display flex and the outer container gave display flex and direction column but seems like there's an problem causing flex grow to not work on line and even tho i gave space between to first container still it stays together. codepen : https://codepen.io/kev00690/pen/zYgpNVV...
No description