KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

onkelA

10/14/2023

Dynamic amount of columns depending on children size

Hi all, I have been working on a Frontend Mentor challenge (https://www.frontendmentor.io/challenges/github-user-search-app-Q09YOgaH6) where I encountered a problem. The idea of the challenge is that a user can search for GitHub profiles by name and then display some profile information on the page if the searched username exists. So we have some dynamically entered content, which can have varying lengths....

rnkwill

10/14/2023

How to check if an element contains a class using JavaScript?

Hi all! Another question in regards to my stat module from before. I am trying to use JavaScript to check if the container contains the class "dark-bg" and then do something else. I have tried .matches() and classList.has() it keeps giving me an error. Any help would be grealy appreciated! https://codepen.io/rnkwill/pen/OJrzroj...

Harun

10/14/2023

How to achieve this Grid Spotlight effect on cursor?

https://cruuunchify.com/

Anurag Gupta

10/14/2023

Z-index problem in setting the background

Hello everyone! I am working on a small assignment based on HTML/CSS which involves coding a information card. Here is the link to the codepen: https://codepen.io/anurag1989/pen/bGOybYr Now, the main problem is: ...

Will45

10/14/2023

how to make images display on site when deployed on github

Hello, I uploaded my html, css and js files on github as well as my image folder, but when I deployed, the images werent displaying. I only saw empty boxes. The link to the site is below. willndaji.github.io/willGives-SDG-Website/ ...

Abrar

10/14/2023

@font-palette-value css

Is font-palette-value only used to change the color of a custom font, Can't font-palette-value be used to set other values such as setting the size of a custom font. I've tried it and it doesn't work, but on the other hand there are those who say it can I don't understand....

Jus Sus || 💀

10/14/2023

Best practices to make a React website faster.

Hi, I have been working in a early startup as a intern. I was given charge to building the frontend part of it. So the website is e-commerce and is getting more and more complex as we are building also the load time is increasing. Currently avg load time is around 3-4s. I wanted to know all the best practices and if you could point me to any resource that has helped you in your carrier i would be very thankful❤️. I just want to learn more and more no matter how complex it can get.

snxxwyy

10/14/2023

aspect-ratio working cases

Hey, I was messing around with something earlier and noticed that if an image for example had a max-width on it, aspect-ratio doesn’t work, but if it has a width, it does, could anyone explain why this happens? Thanks in advance

half_baked_life

10/13/2023

Need help in implementing scroll animations

Hi everyone, can you please help me decode this site https://fold7.com/, I have been trying hard to replicate it's scroll animations and parallax effect on cards, but I am still struggling to do so, can you guys please help? I am using framer motion for animations.

Jus Sus || 💀

10/13/2023

How to make this animation have infinite loop

https://codepen.io/stressunfit/pen/QWzPOMR Right now this animation is rolling back after a iteration. i want it to keep going up without rolling back down....

JaisonJ

10/13/2023

Combining multiple images into one image using CSS

I need to combine multiple parts of an image join and form the complete image using CSS animation. Please help. Thanks in advance. So each part is a separate image.

fluffy bacon

10/13/2023

Place-items:center not having the desired effect for grid elements

Trying to get better at css and got stuck on some grid funk. I have a grid that has 8 columns. The grid can contain any number of grid items, all which span 2 columns. If there are 4n grid items, they fill out the grid nicely. But if there are less than that, say 2, the grid items arrange themselves starting at the left most side. Looking for a clean solution as place-items:center wasn't the solution. ```css...

snxxwyy

10/13/2023

visually hidden layout & text in div choice

Hey, i was recently looking at something Andy bell did in a site example and i've got a few questions, i'd appreciate any help with understanding this 👍 - In the code below he uses an h1 for the page title but visually hides it, then has another section with the same title which is the one he styles and adds color to etc. Why do people opt to do this sort of thing/layout? - What is the benefit of putting text between div tags? Is it something people do when working with visually hidden elements or a different thing perhaps? ```html...

Chaves

10/13/2023

How does this accessible navigation work?

Guys, is this accessible navigation "button" difficult to make? It works as follows, when you scroll with TAB, it presents other sections for you to navigate such as, Go to main menu, Go to page content, go to footer

TerranceMagickman

10/12/2023

Sticky flickering on Chrome Mobile View

Hello everyone, is there any way to prevent this flickering from occurring when scrolling down using position: sticky? This doesn't happen if I use position: fixed; It doesn't seem to occur on Firefox's mobile view, is this something I should be worried about? Thanks in advance, here is all the css:...

V3X4TI0US

10/12/2023

Need FrontEnd Advice

I need some advice, i am working on a frontend of a project, i am using html, css and js for it. The thing is its my first project which involves layouts, responsiveness and js functionality. I am able to design and layout things as required. But the thing is , my css is not the best, in terms of extensibility. I have used flexbox for layouting stuff. I am able to complete a design, but then if i make some changes, multiple things break, so i need to be very careful while changing things....

Chaves

10/12/2023

What is the difference between align-content and align-items?

Jonny

10/12/2023

Advanced background coloring help

My designer gave me a landing page in Figma, and as you can see in the picture, there are seemingly random opaque/blurred purple blob elements scattered throughout the white background. Any ideas on how to accomplish this with responsiveness in mind? Thanks 🙂...

Dev_zxc

10/12/2023

can you have an if else statement inside this ```style={{ }}```

i was wondering if you can do an if else statement inside

style={{ }}

style={{ }}

, like do this static color in when this happens and do this color when this happens etc

Aemro11

10/12/2023

I am stuck on this challenge help me

I have attached event handler to the noOfPeople input and in the event handler I call another function which is called validate field which calls validator on each input and from the validators whcih the validateField calls in the validatorSelectTip function the this keyword refers to undefined. why is that because I have attached the bind keyword when I call the event handler on the "noOfPeople" input. this is the live-site url: https://aemrobe.github.io/Tip-calculator-app-main/ this is the git repo: https://github.com/aemrobe/Tip-calculator-app-main.git...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.