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

Vertically align characters in different elements

i have 4 buttons each with 1 unicode character right next to eachother. The problem is that i want to make them all the same size and have the same alignment. So basically i want to have all the characters have the same height and position. is there anyway to archive this without having to manually fiddle around with font-sizes, positions, margins etc. ...
No description

Using semantic tags

Love your work Kevin, but I do have a query about the use of semantic tags. Whenever i see examples and people demonstrating HTML they always use the <div> tag for everything and I know that it's perfectly legitimate and useful. I teach HTML to uni students and am always encouraging them to use HTML5 structural tags. Section, article, aside etc and all they see is people demonstrating using <div>s everywhere. Maybe the demonstrations should use semantic tags as that's what we should be using, right? If we teach with the right tags then they can see that the <div> tag has a purpose, but defining semantic content isn't one of them, just an observation 🙂 @Kevin...

CallBack Functions

What are callback functions in js and when do we use it ? Can anyone explain in brief with an example.

need help with framer motion on reactjs

Code : ```js import { motion } from 'framer-motion'; ...

Navigation indicator using scroll-driven animations?

Hi! Does anyone have an example of a scroll-driven animation to indicate an active element in a side navigation? I found this example from Bramus (https://scroll-driven-animations.style/demos/carousel-with-markers/css/#carousel_03), and it's very close to what I need, but I'm more looking for something like the attached image, where the indicator moves down as you scroll the page.
No description

How to make image slider skip intermediate steps when jumping between slides?

Hello everyone, I have implemented an image slider in my Angular application, and it is working fine. However, I would like to modify its behavior when jumping directly between non-adjacent slides using the round navigation buttons below the slider. Currently, when I move from one image to another (e.g., from the 4th image to the 2nd image), the slider shows all intermediate images as it transitions. I would like the slider to skip these intermediate steps and smoothly glide directly from the current image to the target image, displaying only the two images involved in the transition (the starting and ending images)....

how to center grid item horizontally

I'm using grid to create 3 columns. I want to center grid items of last row horrizontally if there is no enough items for the row. How can I solve this problem? I tried justify-content:center but it not work
No description

Youtube Api

I have been using fetch since I created my fishing channel site and added new videos. I don't seem to find anything on how many videos from a certain playlist the fetch will receive. I currently have 10 videos on that one playlist. I am only getting 8 on the call is this normal I can't find any documentation implementing only 8 returns max

Working with Vertical Headers

I know they're a bit 'old-hat', but I working on a site that needs a lot of vertical space, and it's probably back in the 90's when I last used a vertical header, so a bit of nostalgia isn't so bad! I'm trying to make my workflow as normal as possible, so I set my <main> element to have a left margin the same width as the header, hoping that from then on, any elements I add will automatically be shifted right and things like percentages etc will all work. But some things aren't so good, some elements look better aligned centre across the full page including the header, others need to be centred in the page excluding the header. What advice would you give for a setup like this? Is it a candidate for container queries/units?...

Add a Scrollbar to a Container When Content Exceeds 100% Height Without Setting a Fixed Height?

Hello everyone, I'm working on a responsive layout where I want the .status container to have a scrollbar if its content exceeds the available space. However, I don't want to set a fixed height for the .status container since the layout needs to be flexible and responsive. I'm looking for a solution primarily using HTML and CSS, but I'm open to JavaScript, TypeScript, or Angular solutions if necessary. In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height....

Painful CSS rule grid issue

👋 Hi All,

This has been a tedious problem I’ve been trying to figure out for days and I would be most grateful to anyone who can figure out what to do.. 
My Challenge… After watching Kevins fantastic ruled grid video, I had the idea to create a fully boarded grid of cards in CSS that looks like a grid table. Unlike the example Kevin gave here…. https://www.youtube.com/watch?v=EQYft7JPKto&t=730s I used nth-child selectors and outlines to try to get the boarders all the way around the edges. I also used an :empty pseudo-class to remove the outline if there are no child elements, so to stop empty children becoming blank areas when content wraps uneven numbers of columns. ...
No description

sticky position is not working in reactjs

So I make like this
css
position:sticky;
top:5%;
css
position:sticky;
top:5%;
...

Blend Mode Issue

Hi, I am working on this challenge, it is now perfect for small, medium and large screens, but issue is on large screen when I apply the blend mode difference on h1 it don't work, and when I add it to .hero-section-content, it works fine but resulting in 2 problems, the text over the image should be black instead of greenish(due to blending mode), and it is also applying the blending mode to p tag and button as well, I just want to have blend mode on h1, how to achieve i, I tried to do it but could not find the solution. https://github.com/hamzafrontend/web-page https://hamzafrontend.github.io/web-page/...
No description

Check if two strings are Anagram.

Can anyone help me further i have found the occurances of each character. ``` function areAnagrams(str1, str2) { const result1 = {}; const result2 = {};...

need help with height units in css

<div>
<img src='img.file' alt='img' />
</div>
<div>
<img src='img.file' alt='img' />
</div>
...

CSS View Transitions only working 50% of the time

Hi all, Am definitely new to view transitions so definitely could be making a mistake, but I find that cross document transitions only work 50% of the time. They also don't seem to work reliably at all if you throttle the connection. Can anyone see what I'm doing wrong?...
No description