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

Buttons "jump" after hover animation

So the title itself is pretty explanatory. I'm trying to give my buttons a hover effect that makes them bigger when hovering but somehow when you stop hovering and it goes back to its normal size, it does a little jump. I've made a codepen with the code of the buttons so you can easily check it, but I'm leaving a video too. PS: It happens with logos too. https://codepen.io/Tekyo/pen/vYvdrNg...

Advanced Css and GSAP intro

hey guys im trying to recreate the intro from this website where the images come in from 5 columns and then the middle image gets bigger : https://camillemormal.com/ so far i have achieved this : https://codepen.io/alisa-khodadadi/pen/RwEQzZe ...

Layout issues

When I am hovering over a button, it pushes the button next to it as I have applied some styles when hovered. Here is my code html <div id="header">...

fetch error

guys how to debug these kinds of errors i got this while fetching a url ``` node:internal/deps/undici/undici:11576 Error.captureStackTrace(err, this); ^...

Body tag not working

I tried selecting the body tag, to change the background color when the button is checked, I couldn't figure out why the body tag doesn't change. When I added a div, it worked on the div. https://codepen.io/aldous-waites/pen/RwEQqQE...

CSS Help for vertical "FIXED" layout.

Hi there, im having issues due to lack of CSS knowledge. Im trying to build a webapp using wordpress and want to have like a Kiosk feel. Wherby the user cannot scroll, the header needs to be fixed as does the footer. always in view, but the main section just fills up the vertical space. I want to do this without pixel heights etc as different screen sizes etc. So need a fluid solution. Am I able to send links as a newbie without being banned?...

responsive online web editor

is there any online live webpage editor like codepen , jsfiddle etc where after typing the code i can check for responsiveness for different screen sizes...

FEM TODO APP

I've just completed a front-end coding challenge from @frontendmentor! 🎉 You can see my solution here: https://www.frontendmentor.io/solutions/todoapp-using-scss-gsap-and-sortablejs-kf8dVZ6o71 Any suggestions on how I can improve are welcome!...

overflow not working

can someone help me remove horizontal scroll bar
No description

Special kind of "inputs"

I was wandering around in my imagination palace thinking about things I can't do actually with frontend technologies. Then, I opened the door and there were the gmail special kinds of input
No description

SvelteKit and Sass setup?

Hi! I am setting up a new project that uses Sass in SvelteKit, and I am trying to find examples of config setup and file organization. I've only used Sass with vanilla JavaScript, TypeScript and React projects, nothing full-stack. If anybody knows of any helpful walkthroughs or projects I could look through on GitHub I would love that advice. There's so many plugins and config files I'm worried I'll get stuck and not be able to debug otherwise. Thanks!

Search bar Trouble

I'm having trouble with website search bar moving over store logo when screen size shrinks, any help on how to solve this issue would be greatly appreciated.
No description

random error on console

k so i was coding and things were fine but all the sudden console started showing the following errors ``` Failed to load resource: net::ERR_CONNECTION_RESET WebSocket connection to 'ws://127.0.0.1:5500//ws' failed: (anonymous) @ (index):34...

Fetch API returning undefined?

I'm attempting to get the product title from running this short sample code. The console.log returns this data (see attached image). How do I reference the title from the object? I've tried data.title & data[0].title and can't seem to log anything besides undefined. ``` const api = "https://95northboutique.store/collections/new-arrivals/products/san-francisco-giants-2000-inaugural-season.json"; ...
No description

<fieldset> instead of <div>?

Can I use the <fieldset> element to group, align and style <form> elements in place of a <div>? Removing the default style (border) and not using <legend>?

How do I get HEIGHT or MAX-HEIGHT to work dynamically with TRANSITION in CSS?

I have an accordion menu, which I would like to open and close smoothly Although this appears fairly smooth, what in fact is happening is the transition is working over the full 1000px of the max-height and not the actual height. If you open all the sub-menus of section 5 and then open and close the main section, and then compare that to opening and closing section 1, you will see the apparent latency as you catch the tail-end of the transitions....

How to achieve image fixed to certain background position?

The title might be confusing, because I don't know how to exactly explain this. On this website there are semicircle images: https://luxana.peerduck.com/ Each image is inside of a semicircle frame (which is background?). And each image has a golden leaf attached to it. How would you make something like this? Any tips will be appreciated. 😊

Tabbed view with challenging CSS

I need to implement the tabbed view in the attached screenshot. The thing that's hanging me up is how to do the shadow effect. The current design, which is being replaced by this one, has a shadow around the tabs and the tab content that I implemented with the drop-shadow filter (the tabs are actually contained within the content div, and positioned so that they stick up above the div). But the new design only has a shadow around the current tab. Other tabs just appear as text. So I need to figu...
No description