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

McMarty
McMarty
View on Discord
12/23/2024

Tips for writing clean, maintainable CSS

I am getting back into web development after like 8 years off. In the past, I created a fairly elaborate website, but the code-base was a bird's nest and unmaintainable. Am currently building a responsive. mobile-first replacement for the aforementioned website, and I want to learn how to code like a professional front-end developer, and write code that is CLEAN, CLEAR, CONCISE, SCALABLE, and EASY-TO-MAINTAIN. For now I am coding PURE HTML5 and CSS3 and want to stay away from frameworks as that won't help me to become a better developer....
Rultar
Rultar
View on Discord
12/22/2024

Button with inverted rounded corners + border

I am trying to recreate the attached button in CSS. This button has inverted rounded corners with also a border on the whole button (also on the corners). I am able to create the rounded corners but I am with the borders. You can see what I have here: https://codepen.io/Rultar/pen/emOWqBx...
No description
Nick
Nick
View on Discord
12/22/2024

Animating clip path with gsap?

Anyone know why animating this clip-path isn't working? It's just jumping from the initial to end state, and I'm not sure why :/ https://codepen.io/nwoodward/pen/bNbWJKK?editors=1010 ```...
usama
usama
View on Discord
12/21/2024

Complex Figma gradient bgCSS

Hey good folks, hope y'all enjoying family time. Ok so I have this complex gradient made up with all different kind of vectors and shapes (image attached and youtube video attached as it wouldn't let me upload it here due to size limitations) https://youtu.be/PcZ7Zpruz7Y...
No description
Daniel
Daniel
View on Discord
12/21/2024

Nesting grid / flex elements

I'm experiencing difficulties using flexboxes or grids inside a grid container. What are the key considerations and potential conflicts between grid and flexbox layouts that I should be aware of?plz
No description
Tabletop
Tabletop
View on Discord
12/21/2024

access Pinia variable dynamically

//can I do this??
const store = useStore()
const { ${my_dynamic_var } from storeToRefs(store);
//can I do this??
const store = useStore()
const { ${my_dynamic_var } from storeToRefs(store);
...
Helgi
Helgi
View on Discord
12/21/2024

hover effect

https://codepen.io/etrbbr/pen/pvzPapj hey guys. i need little bit help, so what i am trying to do: on hover effect block still remain opacity, but text need to be clear without opacity and black. how i can do it?...
Mr_Unik
Mr_Unik
View on Discord
12/21/2024

How to learn JavaScript?

Hello Everyone! I'm Learning Frontend development, I just completed HTML and CSS and started learning JAVASCRIPT but I am kind of confused about whether I learn JS in-depth like to first follow NAMASTE JAVASCRIPT youtube series by akshay saini first or learn just some basics and move to the DOM.
Can anyone please tell me how I should learn JS and what I should do next after JS? Some sort of Roadmap? ...
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasm
View on Discord
12/21/2024

does image size matter when creating grid galleries? right now I dont see uniformness

```html <div class="container"> <div class="grid"> <div class="image-block small-image"> <img src="img" alt="Placeholder Image">...
No description
𝗯𝗼𝗷𝗼.
𝗯𝗼𝗷𝗼.
View on Discord
12/21/2024

horizontal overflow as soon as page is scrollable

hello, I have an issue where I get overflow-x on the page as soon as there's enought elements to scroll on Y axis. instead of just being Y scroll? this happens when I minimize the tab too, content becomes Y-scrollable, and X too?
No description
Dev_HK
Dev_HK
View on Discord
12/20/2024

How to debug css for different mobile browsers (iphone/android)

so i deployed my website & one thing that i saw was how different an element was painted in iphone devices vs android & web the first two images are on an iphone (first in safari & the second on chrome) meanwhile the last two were taken from an android phone (one on chrome & the other on brave) ...
No description
ilyes
ilyes
View on Discord
12/20/2024

cannot set properties of null innerHTML

hi i have 2 problems in script.js of todo app which i learned from freecodecamp . the first one is when pressing (add) button while the input is empty it supposed to change the text of label of input via a (validation) simple if else statememnt combined with innerHTML but for some reason it consoled (cannot set properties of null innerHTML) . second when you enter a task and press add it appears but when you add the second task 2 tasks will appear . https://codepen.io/ilyas-draissia/pen/ogvWBZO...
TheBugCoder
TheBugCoder
View on Discord
12/20/2024

Images shrinking instead of text

I have a div with basically three columns: text, an image and a div with two images. Right now, the div with two images is looking like the first image, they are pretty small. I want them to take up the full height (2nd image) at the cost of the width of the text. I've tried a lot of things, but still couldn't figure it out :) Thanks ` <section id="about"...
No description
NIMA
NIMA
View on Discord
12/20/2024

Image overlay effect

hello anyone know who make this border for overlay ?
No description
noob
noob
View on Discord
12/20/2024

how to close a dialog when click on backdrop

Hi guys, I'm learning about dialog element. I wonder how can I close the dialog when I click on backdrop?
MC23
MC23
View on Discord
12/20/2024

Card "flip animation" without position absolute

I was looking for a way to have a flip-on-hover card without using position absolute. So far this solution with absolute is working: https://codepen.io/n00bCod3r/pen/azoJYJP and could be used to provide me some insights on how to achieve what I want I tried using background image on the --front element but unfortunately that didn't work. Please ping on replies πŸ™πŸ» ...
cubiq
cubiq
View on Discord
12/19/2024

🀏Even less elements?

Heya, i'm trying to make this effect with the least amount of elements possible, pseudos included. Second thing, mind giving me some tips for fixing the antialiasing for these? i tried everything from offsetting to filters but there are still hair thin lines. Still quite proud of my solution, defo not anything to prod tho lol...
No description
R a ][ n
R a ][ n
View on Discord
12/19/2024

Creating Responsive Layouts

Hi guys, I've just started this course from Kevin here https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts I was wondering where I can check Kevin's answers from, as the videos say the answer will be available in 2 days, but I don't seem to locate where I may find them. Thanks!...
your_averageVimmer
your_averageVimmer
View on Discord
12/19/2024

Landing pages

Hey! I need to hone my skills by making some interactive, highly skilled landing pages, from where i can clone those? like in a figma file or so? which have both interactivity and elegant style??? Please help!!
syedmubarish
syedmubarish
View on Discord
12/19/2024

Failed to load resource: net::ERR_FILE_NOT_FOUND. Even though the file is present

I cloned crocs home page. But when i open the index file all images are not loaded. Console saying "Failed to load resource: net::ERR_FILE_NOT_FOUND". But on live preview it works fine. What is the reason for this behaviour ? Help me out.
Next