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

I NEED HELP WITH CREATING CARDS WITH CSS(using flexbox or grids)

I NEED HELP WITH CREATING CARDS WITH CSS. Everytime i create cards, i find it hard for the layout to be same for all cards. ...

Why is my variable not Global ?

I have successfully fetched data from an API, and can console.log it in one function but not another. How do I make it globally accessible please? ``` let movieList let currentMovie = 0 getMovies()...

Coding responsive images the correct way

Hi there! I've always wondered what the correct is to code responsive images on a website, in containers and other elements. Either something that can fit different image sizes and still make sense layout wise or make the code clean and logical. I've tried learning the correct way as I never feel quite satisfied. Like having the image percentage wise of the container, having a set px size and other methods....

Frontend question

I just have a simple question about front end , If I created a website using html css bootstrap and js, does that mean after I host and publish my website, the website would be poor and not protected, or is it normal? And my other question is the speed of the website, how can I redce the lag and loading while scrolling throughout the website?...

need help

hi guys how do i code the pink background behind the pictures...
No description

Image Not Working

The image is not working, even tho the path is correct.
No description

is this some kind of combination

does anyone know how to implement this? is it a combination of some select drop down menu and a field like an input type? im using bootstrap so is there a way to do it using that or can it be done with pure html and css?
No description

Repeating-Linear-Gradient

Why is my gradient starting with the dark colour when i declare the pink colour first? For context I am trying to match the reference on the right side of the screen. https://codepen.io/Miss-Fox/pen/ZEZXgWd...
No description

Lenis animation

Hello everyone, does anyone know how I can find a tutorial on how to make this 'immersive section' animation? thanks...

CSS vs Tailwind

not sure which to use. I want more control of my code but also flexibility

How do I design something like this

I am trying to design this but I have been failing; the alignment of the triangle to the icons and also the way the rock paper scissor icons have depth have me confused. This is the best I could come up with
No description

CAPSTONE PROJECT/ NEED ADVICE

Guys our pre oral will be on next week maybe by monday but i havent even done any main features of our system. I really really need your guidance, please?
No description

create slides card

I want to create a slide like in the picture, when clicking the next or previous button it will switch to 3 other products May everyone help you...
No description

!important use case

Hey, if i would like to hide an element on mobile and use a utility class along the lines of: ```css .hide-mobile { display: none; }...

alignment issue with custom class

Hey, so i was recently playing around with Andy bell's auto-grid class which essentially makes it easier to manage responsive grids. I added the ability to change the align-items property in the class with a variable allied with a fallback, similar to some of the other properties already located in there, However this doesn't seem to function as expected and rather reads the fallback over the defined variable. The fallback of the align-items property is start, i'm aiming to change it to center via the variable --auto-grid-alignment-vertical. When i define this in the .hero__inner class whose items are affected by the grid by doing --auto-grid-alignment-vertical: center;, it doesn't seem to change, however when i change how it's defined in the auto-grid class either by doing align-items: var(--auto-grid-alignment-vertical, center); or align-items: center, it seems to work perfectly. I'd appreciate any help with this, thanks in advance. codepen link: https://codepen.io/deerCabin/pen/JjVrvGK...

Missing Stuff on Website

Some parts of my website are missing, including the h1 in my header div, and also the entire top-banner div. Help please. https://www.joni8829.com/file/vivaldi_xaQmtrvtQX.png https://www.joni8829.com/file/vivaldi_ysqJd39abu.png (Supposed to be over this) ...

Proper Navbar

Hey, I have a navbar which currently links to certain sections of my website. My navbar is always visible, hence why when you click on the sections in the navbar some get hidden, how do I resolve this issue? I will share a codepen below.The icons are probably broken, but they work for me (and I can't add on Codepen since I don't have premium). https://codepen.io/Joni8829/pen/BaEwJpO...

How can I stack a div on top of my main content without it rendering extra space on the bottom?

I have a dumbed down example of what I need below, but I basically want a floating sticky navigation bar based off the bottom of the view port. I tried a few basic things but it's my fundamental lack of experience in css that's stopping me from figuring it out. Usually I'm keen on getting things myself but I've been looking for a couple days now on and off on this issue but can't seem to resolve it. I am using react for this project but still vanilla js/css so that shouldn't change much.
Looking at the image, the "Some content" is 100vh and so the bottom bar is causing me to have to scroll a little. I want the bottom bar to be floating approx 5rem from the bottom and positioned on top (in terms of z axis) of the "some content" so that there would be no awkward extra little scroll. I am using react for this project but still vanilla js/css so that shouldn't change much. ...
No description

text on top of image

how do i make text on top of images like https://shopify.com/ (shopify uses a video but ig its the same as the image)