KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

4rielF

2/18/2024

angular landing page

Hi, I'm working on a project, and the initial page serves as a landing page. It's my first time creating a landing page, so I have some questions. Since a landing page typically consists of multiple sections, is it recommended to separate each section into different components and then display all components within a pageComponent? Or is it preferable to include everything in the same HTML file and differentiate the content using section tags, for example? For now, the content is all static and its working with the first aproach, but will I be able to manage scroll animations correctly? I recently watched the video "Incredible scroll-based animations with CSS-only" , and I found it very interesting to apply in the near future, so i want to modify as little as posible when implementing this Thanks!...

francis

2/17/2024

Content Width on Websites

I'm curious why content on certain websites doesn't expand beyond a certain width on larger screens. Is this intentionally designed as part of responsive design, or is there another common practice for controlling the maximum width of content?

yuki_toki

2/17/2024

Remove default margin/padding on elements;

hi, is there a proper way to turn off default margin and padding on html elements; I set both to 0 in the body tag but notice some children h1,p,ul tags still apply theirs. I don't want to override it each time for each scenario. is there a better way?

o_O

2/17/2024

Is it possible to animate components based on layout changes as opposed to change in CSS value?

My flex container has two flex item. I am hiding the left flex item on the click event but when this happens, I would like the right component to animate when it takes the entire space of the flex container. Right now, it just snaps into place instead of doing an expanding animation. ```jsx <Box sx={{ display: 'flex', border: 'solid red 3px', width: '100%' }}> ...

maxK997

2/16/2024

animation-timeline works only with scroll(root)

I am getting familliar with new CSS-based animation. I followed Kevin's tutorial and I tried to replicate stuff, but animation seems to work only with animation-timeline: scroll(root); animation-timeline: view() produces very weird results for example with translateX, but nothing moves nowhere no matter the scroll. scroll(root) get things to work but it works for me only on my hero section because it is always on top and it is 100vh tall, but when I want to make some images to appear, I can't get it to work as expected....

NZAA

2/16/2024

How to blend out a image?

I'm trying to achieve something like this with a photo. What's the best way to try this? https://i.pinimg.com/originals/f5/04/9d/f5049d576c1c03cc1ce79fe8ff835b37.jpg

Almopt

2/16/2024

How to remove an eventListener with a listener using .bind()

Hi guys, does anyone have an idea how can I overcome this problem?

mtt-4242

2/16/2024

dialog toaster

Hi 👋 I'm was hoping to create a toaster that works with showModal dialog. The toaster is a popover element. It is outside the dialog and opened after the dialog element. Even if the last element of the top layer stack is visible, that doesn't seem to be the case for the ::backdrop....

Juan Ierace

2/16/2024

Does anyone know how to make an animation like this?

Krazydog

2/16/2024

Overlay size

How can I make the overlay always same size as the image? The overlay is the eye image

rumbelina

2/16/2024

How can I expand each box wider with flex-grow?

https://codepen.io/mycenas/pen/NWJodRE I have created 4 rows of 3 boxes with flex, and on click a flex-grow property is applied. No matter how much I increase the number, the boxes will only expand a small amount. I want the clicked box to expand to take up approx 2/3rds of the row, and the other 3 boxes on the row shrink to accommodate it....

Stan Long

2/16/2024

Adding data-bs-slide-to

Hi everyone, was wondering on how I can add a data-bs-slide-to-(number increases by one everytime I click on a button) into a li tag. Here's the HTML code <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>...

☢♬ ŕΔĻ𝔭ᕼ__ј𝐚𝓃 👽☹

2/16/2024

How can I open any phone on my screen while coding ?

Can someone help me to open any phone while coding , like I wanna see a preview while coding and the phone on my screen at the same time. Can anyone help ?

CDL

2/16/2024

Flexbox- flex-start 1 element, but space the rest?

How would this be done? just out of curiosity.. I'm messing around with a page and I basically want the top nav-bar to have 1 element in the top left corner, but then the other element to space out between the rest of the section, if that makes sense? "this is a random..." should appear in the middle(ish)...

conmeomaunau

2/15/2024

i want make scroll effect

I want to make this scroll effect using html, css, js, can anyone guide me?

ceyda

2/15/2024

How can i keep the value of a textbox after postback

I am not sure if i should ask this in front-end or back-end. But here it goes: I am developing a website using asp.net and c#. I have a section where i can see the feedbacks in a html table. And every row has three actions: auto-respond, respond and delete. Auto-respond and delete actions work and for respond, there is a problem. If i choose respond (Cevapla) (which is for custom respond) a section becomes visible. In that section there are three textboxes and two buttons. I set the value of TextBox1 by using a js function which takes the value of selected row's second column (email address). Other two are for subject and message. One button is html button for cancel. The other one is an asp button for send email. The problem is when i click send button the page loads again (AutoPostBack) and the value of TextBox1 (which i get from js function) becomes "". How can i keep the value of TextBox1 after postback? Frontend code is attached. Website's language is Turkish and i translate some content to english (such as buttons in question) but if there is a part needs translating please tell me. And for backend i have a Button_Click: ``` protected void Button1_Click(object sender, EventArgs e) {...

frontend.txt

Dovah

2/15/2024

What to do so that page loads when API calls are finished?

https://snazzy-tiramisu-4033f2.netlify.app/ My JS lags behind since it is dealing with API, and first thing that loads is just the regular HTML I have, and then it process the API. What to do so that it loads the finished page? I also think the way I setup my functions are slowing the code down, but I'm not sure. It goes something like this --->...

Anonymous DEV

2/15/2024

scale animation overflowing

i am trying to do a scale animation but its overflowing on hover can someone help me out i want the card to come to center on hover https://codepen.io/sarosh-afzal/pen/vYPbEzo...

Giustomuh

2/15/2024

Strange bug on Chrome with backdrop-filter blur

Problem: unexpected behavior on Chrome with Windows zoom setting to 125% or more, all fine with 100%, it stop bluring in the bottom half of the screen, what could it be? https://codepen.io/Giusto-the-typescripter/full/rNRPavJ...

uliana3412

2/15/2024

Text animation inside a slider bar component

Hello everyone. I built a slider bar to unlock the screen and I wanted to add some animation to the text like here https://codepen.io/maciekmaciej/pen/qZeNGY. My CSS code is not correct. Do you know what is wrong and how could I fix that? Thank you very much! 🙂
```.track_drag { border: 0.1px solid black; width: 350px; height: 60px;...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.