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

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

CSS/Formatting changed after Deploying on Netlify

Hi all, So I've been working on a React site recently and after deploying it on Netlify to check non-local functionality, all of the CSS seems switched up. Everything is enlarged and not formatted correctly. When I view the local version while working on the code everything is formatted correctly and looks great. I'll include screenshots of both the local version and netlify-hosted version and see what your thoughts are. If you want the Netlify URL, DM me, because you have to sign up and create an account to access the site and I don't want a bunch of random accounts created by people trying to troubleshoot 😰 ...
No description

JS – Calling a PHP public function with vanilla javascript

A HTML <ul>list is being built with PHP and filled from the database. I am supposed to add a search-filtering function on the Frontend side. But I'm unsure about where and how the connection between the user interface and content processing happens. I feel like I have very basic(stupid) questions.
Can I assume ajax anywhere as in baseline JS or does it need to be introduced to a project like a framework?
...
No description

creating svg photo with a element

how would u approach creating something like this elements with svg photos
No description

width of anchor tag of a vertical navigation bar not being set properly

Hello guys, sorry to disturb you all; each time, I build a horizontal navigation bar; to change I wanted to build a vertical one this time. But it seems I'm having some issues with the width of the anchor tag, like I wanted extra spaces to the right of the anchor tags but this isn't being achieved; I try to modify the paddings to the right and left, nothings seems to happen.... can someone explain what I'm I doing wrong please. https://codepen.io/Fakeur/pen/KKOjgaN...

how to style for nested item

Hi guys, I wonder how to style for nested items like the image. There may be a lot of nested item. Thank you
No description

svgs aren't responsive as i thought

so i 've put the svgs seperately in their own files and use them as images, the issue is when i hover even out of bounds of the images i still keep getting the url (check bottom left) i don't know how to deal with this issue should i take the svgs and implement them directly in the dom...
No description

Trying to get rid of whitespace

Trying to get rid of whitesapce beween two divs
No description

how to remove gap of text align end.

i'm trying to align text center and when i do with full width of that heading i see that text has some padding or margin to the end but all the elements that are related to h1 in hero section has margin and padding 0 but it has some gap and when i align text to start it doesn't have gap and when i align text to end or center it has a gap how can i solve it ? i'm working on this project after 5 to 6 days i think so i'm kind of lost already like where is what from html to css so i apologize for that....

Content going upwards and out of viewport when adding new things below

When i add new content below ,the existing upper content goes out of the viewport from the top. I am not suing absolute positioning , using flex-column in the main container ```html return ( ...

Creating an inverted border-radius with CSS

Hello guys, I can't realize the variables that Kevin created on YouTube: https://www.youtube.com/watch?v=khjVPkO35F0&t=312s We have access to the copenpen code, but there are variables inserted that represent the css properties which we don't know exactly what they are. Does anyone know? Thanks

Why does child element cause parent to overflow

I don't understand why setting overflow hidden on the page info section causes the section to properly fit within the bottoms section container. Without that, the long website link causes the content to overflow the container. I have a solution but I just want to know why it works and also if there's a different way to do this because this feels hacky idk? I was trying to think of a way to set the width of the section containing the title to fit within the container but couldn't come up with a solution. ```javascript <div className="">...
No description

Counter.js not working on live site (Vercel)

So I just deployed my newest project with Vercel and I'm using the Counter.js library, but I come to an issue, where if I'm viewing the project with Live Server (VS Code), it works, and the live site (Vercel) doesn't work. Here's the link to the source code - https://github.com/GeorgeDash/xurya (I left the node_modules visible on purpose, bc the issue might be from there) - and here's a video with the issue seen:...

i wanna know if i'm doing css responsive wrong

this number scares me a bit; like i only have like 7 breakpoints, from 1920 to 1280 so far, i'm not planning to do tablet i'll jump right through mobile [430 => 360] the whole css file will end up being 3000 ish lines ...
No description
Next