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

.this() and .catch()

fetch("https://pokeapi.co/api/v2/pokemon/pikachu");// to fetch third party API's .then((data)=>console.log(data)); .catch((error)=>console.error(error)); so in vs code .then() or .catch() methods says . is unexpected token...

How to implement responsive layout that's height dependent?

hey, how would you implement a website layout whose layout is dependent/responsive on height(e.g 100vh)? For example, the content grows its size as the height of the screen grows. What unit would you use for paddings, margins, and font sizes?

Vertical Carousel Animation

Hi, how to create a scrollable box area with content that scrolls from bottom to top, includes a gradient blur effect at the bottom, and loops back to the first box after reaching the last one. (infinite scroll)

Centering HTML form

Im trying to display my login form in the middle of the page instead of the top, but i cant figure out how to. I have tried giving the form an id, a class n applying css to those. I have also tried wrapping the form in a div but it dint work. login.html code: ```html {% extends "layout.html" %} ...

Anyone know how the gradient mixing works why color mixing is not uniform?

linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)
linear-gradient(45deg, #ff2a51, cyan, #ff97a0, #00bfff, blue)
there is a visible line patch of cyan...

how to achieve this design.

Hey, would anyone be able to give me some insight on how to achieve the purple backdrop in this frontend mentor project? I assume it would be done with a pseudo element or position absolute but due to where it ends perhaps it somehow living on the hero grid would be more appropriate? i'm not entirely sure. Thank you in advance.

How do I recreate this using CSS?

the green and the gray background specifically

NAV Position Absolute of parent

I have a NAV bar with buttons on it. Each button is inside a container class. The container has position relative and as well as the button I have a box DIV which has 0 opacity until clicked. Once click it has opacity and position absolute. The issue I have is my position absolute flows over and off the right of my screen giving me a overflow-x scrollbar or white space. How can I force is to flow left of the parent not outwards to the right?...

Line Number Alignment in Text Wrapping

As you can see in the video, when line wrapping is enabled, line numbers do not represent the corresponding lines. On the other hand, in the screenshot, the way lines wrap around and create space between the line numbers positions the line numbers with the corresponding lines. I asked ChatGPT for help but he wasn't that helpful :(...

animation to make List Items, "LI", float to the top like a bubble

Where could I look up lessons to do this or does anyone know how could this be done easy or easier

tabindex on the main tag

Hey, i sometimes see people applying tabindex="-1" to the main tag on their sites, what does this achieve? Thanks in advance.

Still a lot of trial and error after 6 months, what am I missing?

Hi guys,Although i've been doing css for a while now i still struggle to get things right in the first place like.. there's still a lot of back and forth after all this time. which makes me question if i know what am i doing? Is there a method or structure i should be following that i don't know of or does it really takes a long time to get there? Thanks in advance.

responsive login form with flex

I am trying to create a login form for my university project. But unfortunately when I try it in dev-tools it looks fine, but when I try to open it on my phone, it does not look like it should. Any ideas? You can look at the site here: https://32chnb9g-4200.euw.devtunnels.ms/#/login Why is my form overflowing when it does not need to?...

Div opacity affecting the content in it

i lowered opacity of an div and now the image in the div also got opacity, i have used z-index: too but im still stuck on the same problem https://codepen.io/SirYido/pen/gOJPgxZ

Height Adjustment for StPageFlip

Hello everyone, I'm working on a Vue 3 project where I'm using the StPageFlip https://nodlik.github.io/StPageFlip/ library to create a flipbook interface. The content of each page will vary in height, and I'm struggling to dynamically adjust the height of the PageFlip container to fit the content. The goal is to make sure the height of the flipbook adjusts to fit its content without any overflow or fixed height. I've tried a few approaches, but the container height doesn't seem to adjust correctly. The height either remains fixed or doesn't fully fit the content....

Stumped on typewriter effect

I have some JavaScript where I need to create a typewriter effect that types and then backspaces. I've gotten something to work on this codepen: https://codepen.io/vince1444/pen/xxNZKQE?editors=1111 The problem is, I need to do this for an array of words, and this is really stumping me. It seems like promises are key here, but I can't get my promises to work correctly. ...

How to update the content in google search results

Hey, how can I add/edit pages, and descriptions here?

Trying to solve mysterious problem with Display: Grid

okay so this is my current page and distrubition with my sections, since I want to be rem perfect with the gaps, I made that logical distribution, but take a close attention to section 3 where I had to put all these 3 elements together because the gaps between them is smaller than the gap between each section:
No description

Parallax container somewhere in the page

I have recreated the stunning parallax effect from @Kevin s youtube video "true parallax with css-only is now possible". And, what should I say. it looks great. But, it is just working on top of the page properly. I was wondering if I can create a container within this parallax effect, to bring it anywhere I want in my page. But I wasn't able to find a solution. Is it possible, and if it is, how?...