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

Shrink Header on scroll

Hi guys, I'm new to this server. I"d be glad if you help me create this animation. I've been struggling to do it for long but couldn't succeed. I Tried doing it with this code. .hero-shrink {...

struggling with a shape in a site

how to make this blue shape in the beckground and make it responsive https://www.paypal.com/us/webapps/mpp/home...

Help with accessibility: Possible heading

I'm using Pa11y and a Chrome extension called Wave Evaluation Tool to check for accessibility issues. I fixed all the errors for one of my portfolio projects but I have some 5 alerts that I don't know how to fix:
Possible heading Text appears to be a heading but is not a heading element.
...

Struggling to generate new password when user clicks on button.

Hi everyone! I have my code running properly, but I'm stuck on how to generate a NEW password when once the user clicks generate password the second time. Currently everytime a user clicks generate password it increments each times and messes up the format. I'm missing the next step of the logic to correct this. https://codepen.io/ezekielswanson/pen/ExegrxB...

how to enable a div from a set of divs when corresponding button is clicked, without JS?

i have a parent div with 3 buttons and a child div with another 3 div inside child. the button 1 is active and the child div displays 3 div, when button 2 is active, child div should replace the existing 3 divs with another sets of 4 divs, etc. How should i proceed this? i used zindex but its not working as intended.

Some feedback/suggestions to improve the look

I am open to any advices anyone has to make the UI look better 🙂

if i were to recreate how should i do?

how to plot values and make a graph?

How can I get the gap between my grid elements smaller?

I'm working on a project for college and I have an article and an aside which are in a grid so they appear next to each other like the reference provided (see image 1). However there is a massive gap between my elements and I can't figure out how to reduce it down to about 1 rem (see image 2). I have provided my code in this JSFiddle: https://jsfiddle.net/64huL0wa/ How can I fix this? Thanks...
image 1 (reference)

Creating timeslots on timeline with CSS

Im trying to figure out what is the best way to create timeslots on a timeline. Currently Im using a linear gradient that is transparent in certain places. Im thinking its a stupid solution. What version of these two would be best?...

Best practice for setting up spacing?

Hi, I'm a UI designer that's learning a bit of front-end work. On www.ohvaz.ro, the mobile version, there was a huge padding set to 143 px (as shown in the screenshot). This is clashing with some other place so I had to reduce it to 103px but the handwritten headline is being hidden. My question is - does this large padding make sense? For a newbie like me it seems quite odd. If it's not a best practice, how could I achieve the same result without too much work? 2nd question - the | dividers in the blue menu aren't spaced correctly. How can I fix those? Thank you!...

Prevent from white scroll bar

Here is small white scroll bar and i want to remove it

Learning Front-End Website Development. Should I Learn HTML, CSS & JavaScript All At The Same Time?

Hello! I'm currently learning front-end website development. I wanted to ask if it is a good idea to learn all 3 languages (HTML, CSS and JavaScript) at the same time? I currently know the basics of all 3 languages at the moment, but I am aware that CSS and JavaScript are going to get a whole lot more complex. With that being said, what advice do any of you guys have? Should I focus on 1 of them at a time for a few months or, learn them at the same time? Any help would be greatly appreciated....

Start freelancing

hello every one I was thinking to try freelancing as a frontend but I got some questions that I'd like anyone to answer or share their opinions and ways to improve of course, 1. if I want to provide frontend websites what hosting and domain providers should I choose for hosting I was thinking about netlify because they provide free hosting till your site gets a lot of traffic so I thought of it as an option and I'd like ur opinions for domain providers 2. SEO what is the best way to optimize sites for SEO if you have tips and sites like HTML tags and tutorials that are working I'd love to know more about...

How to filter products in react based on search input in real time from the local state ?

I am trying to make real-time search functionality with the product stores in the local state. For that, I have created a function that takes queries from the search input and storing in a q variable of the handle search function. query and setQuery are context states. this working perfectly but when I remove some letters, then the function is not filtering products based on the remaining letters. Let's say I have two products called belt and bolt, and when I type bolt it shows the bolt product...

grid span unknown column count

Hi i am not even sure if this is possible. But i was wondering if its possible to use like grid-column:span 3; but you dont actually know the column count. So for example. Let's say i have this html code ```html <div class="parent">...

:checked deep dive

Hello everyone.
I am a first year front end student that is getting used to html and css before moving on to js etc. Does anyone have tips about using custom variables to set display, etc and then changing those custom variables inside of a :checked declaration? ...

Canvas question.

For a test for a possible new job I have to do animations which I've never done. It's a car on a road, if you press a button the wheels will slightly move causing the car to speed up. These wheels are 11 images, which have to be shown in about 150ms and it has to look fluid with no hiccups. Now they obviously did advice me to google and I've been searching my ass off for 3 days, found a few solutions but none of them really work. I'm having a few issues which I just can't find or figure out a fix for......

Navigating using react-router-v6

Hii everyone! I want to use react-router v6 but there is some problem and the flow is 1. if user click on the go to home page button then the home page should open 2. if user click on the go to contact page link then the search will change and i want to trigger the useEffect to check if search contains contact url then the contact page should open with the link to go back. ...

Font not loading in mobile

I've deployed the website. Fonts are loading in desktop but not in mobile. I'm using local fonts, tailwind. This is how my input.css looks like. ```css @layer base {...