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

Can I use AOS library animation on my php file?

My animation on AOS is not working. Im thinking that the problem is I am already using a GSAP. Any recommendation how to implement AOS while using also a gsap?

the right way to do responsive

```html <div> <a href="#" class="text-decoration-none "> <div class="img-wrapper d-inline-block" id="img-1"> <img src="assets/img/Literature.png" alt="Literature">...
No description

Position form after an image

I find it impossible to locate the form which is for booking a train after the parallax image responsively. I hardcode the position of the form but when the page is resized it looks ugly. PS: The design of the form is not finished but I wanted to fix its location first and then finishing the design. HTML: https://pastebin.com/DuAUuuSE CSS: https://pastebin.com/iestPdYK Thanks in advance!...

Next.js + Tailwind: how to make images be uniform

I don't know how could I make them have the same height or aspect ratio. This is my whole component: ```tsx...
No description

API not fetching data on deployment

on my local host, everything works well, but after I deploy on vercel, the web app fails to fetch data from the API as required. what could be the problem, please? ```function init() { randomBtnWord(); fetch("https://animechan.xyz/api/random")...

How to make this ?

I saw this crazy thing on LinkedIn. I am wondering how this is done. can explain this to me?

Sass, scss, less, and why/when/which/where to use them?

After developing a little project that is still ongoing, I have learnt a lot about html and css, although still dabbling in JS. This being said, I heard people talk about sass and scss, but since I had a deadline I didn't stop too much to think about those. Now that I'm looking more into them, they seem quite interesting and like a potentially good resource to use. Looking online, however, I've seen mixed opinions. A lot of people recommend them for everyone, others for big projects, and some just prefer to stick to plain CSS. And trying to look up what the difference is, I've only found sorta vague info like "sass and scss are the same but sass uses indents while scss uses {}, etc", and I am frankly a little confused. Sorry if the following is a lot of questions, but I am just very curious for input from people who work with these: - How worth it is it to use these as a personal developer? - Which one is recommendable over the other ones, in your opinion, and for what reason? Or perhaps there's no considerable difference? - If one wants to stick with base CSS, is it a sort of voluntary hinderance?...

making a image responsive in a flexbox

I think I am going to pull my hair out. I have such a hard time making images respond how you want them to. Anyone know any good help videos or articles? here is my issue that I have. ```<section class="hero"> <div class="container row"> <div class="hero_info"> <h1 class="hero_title">I Really Need A Coffee</h1>...
No description

CSS button

Can we create this button with bubble around and inside spacing after border with css only ?
No description

Phone overlap on a container

I have a figma design which is in the cover, and I want it to code using html and css, the problem is, I cant execute it properly using position absolute, I can position it in my desire look but I cant make it stay on that position, and second its not responsive. Sorry in adv Im using variables on other css properties. Any one can help me figure out how to execute this properly? ...
No description

Fade In Fade Out

I am wanting to do a fade in on scroll, then fade out on scroll. I have followed Kevins tutorial on this, but its not working. Is there another tutorial that I can add to my website, that I can use to make things fade in and out on scroll? I saw the one Kevin did 4yrs ago, but that one does not really help considering that he is using grid-column, which I am not using....

String to markdown

Problem: I have a paragraph string that is having multiple points I.e. ordered list and normal paragraphs before or after ordered list. It is not formatted. Is there way or any library I can use to easily identify paragraphs and lists and format it....

Looking for the effective way to use flexbox

Would like to know the best practice when using flexbox. I am attaching my code snippet and screenshot. If anyone have a better way, plz help me. ``` <div class="d-flex justify-content-between mt-6 mb-4 mb-sm-8">...
No description

Does anyone knows what this style called?

I've seen a lot of web designs recently with a similar looks as the attached file. dark mode with glassy feeling and purple lights around. Thanks in advance!...
No description

Self Positioning modal

I wanted advice on how should I go about this , should just simply calculate the space anytime an item is hovered with JS and add classes or is there any better CSS only way or any simpler approach

Is this Possible by Clip-paths and is it possible to animate Clip-paths ?

Hello everyone, can anyone help me with a design and animation question? I'm wondering what the best approach would be for creating this design. Should I use SVG animation or curves? I've tried using curves, but I couldn't get the shapes I wanted. Thank you in advance for your help.
No description

mousemove events

Hi everyone I'm a beginner with javascript I 'm learning mousemove events I have this code ...

font-size discrepancy using rem

Hey guys I am doing a project and I am new to front-end. Doing so, I found something which I cant understand. Could you guys help me with that. My browser: 1rem = 16px If i set font-size on using join__cards *....i get expected font-size. But if i set that on its grand-parent div...even though font-size is inhereted (You can see this in the screenshot) font-size is unexpected. I dont understand why this is happening. ...
No description

Unable to change SVG icons color in react

I have downloaded svg files and added fill = "currentColor" to each individual . THen i created a file to export these svg, so i can use it in other components. THis is where the issue happens, i cant change the color via CSS , i even added !important, still its showing default black color. ANyone knows how to fix it? ```js...