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

Following "infinite horizontal scroll animation" tutorial from Kevin on Youtube; not working (help!)

So, I was following everything in this video: https://www.youtube.com/watch?v=iLmBy-HKIAw&t=530s&ab_channel=KevinPowell And everything was working right until the javascript part came in, where for some reason the "data-animated" attribute isn't being added. Here's screenshots of my code as I followed it from the tutorial:...
No description

Issue in playing the video.

Hey guys, so today i enrolled in the 21 days long Responsive Layout course but i am stuck in one video . The video is not playing , it has two resolutions set 240 and 1080. My internet is working properly. But the video is not playing . How can i watch the video. TITLE OF THE VIDEO : " Why it's a good idea to avoid height ". This is the 3rd video of day1. Can anyone please help.

Event bubbling in JS

Hello guys, sorry to disturb you all; in order to stop an event from propagating to its parent element, we can use the following code: ```js const container = document.querySelector('#container');...

Event listener question

https://codepen.io/Adhurim-Gashi/pen/eYqZzRo - Hey guys, I am building a little calculator project with a tutorial for the (js) so in my js code whenever i click a button i get the console.log of the characters or numbers inside the calculator, and can someone decipher how those lines of code for me, cause i don't understand it that much, thanks....

Event listeners acting as infinite loop

When we add an event listener, the thing is even though it's only a single line and not within an infinite loop, it works like it is within an infinite loop though, because it keeps track of the event every time. Can someone explain what happens internally when we add an event listener please

how to performance of react

So I made an mern website and use page insights to check the analysis so it shows 55% performance on mobile and 73 on desktop So I reduced the quality compression of images and add lazy components with lazy componentimg using LazyComponentmg Library and Removed that unused dependcies , can anyone give me suggestions how can I improve it , I can send that website link , i was thinking about input fields onChange event to use useRef hook ? https://food-order-c58e.onrender.com/delivery...

Site freezes when reaching particular section

Can someone help me with my website? I'm experiencing an issue where when I get to one particular section, the scroll just freezes and I don't know what to do. Here's a link to the source code and the site itself: -source code -> https://github.com/GeorgeDash/georgedash.github.io/blob/main/index.html (HTML file); -website -> https://georgedash.github.io/....

const keyword vs let keyword in JavaScript

Hello guys, sorry to disturb you all; I've just started to learn JavaScript and the use of the const keyword and let keyword seems confusing, like I don't really know when to use which.... can't I always use the let keyword ? Is that a bad idea? If so, can someone just clarify when we should use the const keyword and when we should use the let keyword please

an expensive question for me.

we've seen so many portfolio websites from designers from apple, instagram, google, meta, discord. you name it. but they're DESIGNERS and their websites looks like out of this world like either they have build it like a traditional way HTML CSS JAVASCRIPT and spending hours to develop it or they're using some builder like webflow or webstudio. here are some portfolios (mine is somewhat similar to their's so do let me know how should i develop it ?)...

Striped table

Hello there, are there any better way of doing a striped table? this works but I feel like I have overcomplicated it https://codepen.io/Etsi0/pen/XWvXoeM...

zindex not workig as i want

```<!DOCTYPE html> <html lang="en"> <head></head> <style> button{...

CSS boilerplate/reset/reboot (interpolate-size: allow-keywords) question

Hi everyone. Just watched the live stream yesterday. I do have one question. With interpolate-size: allow-keywords; should this go within a prefers-reduced-motion: no-preference media query as it is a transition? Thanks...

Javascript questions

Hey, i have a few questions about javascript: 1) Why do people not recommend onclick but rather adding an event listener? What are the differences? 2) Given the example in the codepen, the code increments a counter when a button is clicked. Why is it that inside of the event listener, i have to wrap calling incrementCount() in an arrow function, like so: incrementButton.addEventListener("click", () => incrementCount()), rather than incrementButton.addEventListener("click", incrementCount()) for it to work? If i don't the button doesn't do anything and the count variable is automatically upped to 1 upon page load? https://codepen.io/deerCabin/pen/mdNVBGE...

Using visibility and :focus to cause an HTML element to lose focus

I'm experimenting with preventing DOM elements (specifically input/textarea/button/a HTML elements) from getting focus. After some playtime, I stumbled on a strange and unique solution. element:focus { visibility: hidden; }...

Dealing with pseudo elements and background color

Hello, I have an issue with one of my pseudo elements. I have a pseudo element of ::before which is a "wave image" (the wave image is part of the component with the Heading and paragraph you can see ) you can see it in the image. The CSS of this component is : ```flynt-component[name='BlockWysiwyg'] { background-color: var(--background-color); position: relative;...
No description

Small issues creating a dropdown menu from a nav bar

Hello guys, in the following codepen, I tried to create a dropdown menu from a navigation bar... I was able to do it but while doing so, I encounter some issues... with the element having the class dropdown-content, see that I have listed the anchor tag elements as separate element.... <a>..</a> The thing is if I try to do that: <li> <a>..</a></li>... everything breaks... I don't understand why... also, we can't use separate li container for each anchor tags https://codepen.io/Fakeur/pen/dyxGWjP...

modern Layout

Hey guys, do have an idea how we can achieve such a layout, it looks like a grid but the "div" with the plant picture has more than 4 corners ans all corners have a nice border radius. I solved it with a svg as a mask element but i feel like there must be a simple css solution I would be grateful about any idea or help...
No description

Problem with the container background

I'm using a ternary operator, and transparent is not working, but "#343964" is working. I was able to hide the content of the container, but not the background. ```import React from "react"; import Questions from "./Questions"; import QuizResults from "./QuizResults";...
No description

How do you makes "emoji as a letter" accessible?

I have some logo text that includes the word "πŸ’‘dea" - what would be the best way to write this?