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

help

Luke

6/18/2024

animations - hamburger menu

Hey, So I’m pretty new to this stuff. I watched the video on hamburger menu animations. Is there an easy way to design these animations? I don’t even know where to start. I haven’t done any animations before. Are there any resources I should be looking at? Software that could help me visualize the animation and then get the path data to put in my code? Any help is much appreciated....

Uhur

6/18/2024

Replicating Kevin's Pen With A Different Layout

I am trying to visually replicate https://codepen.io/kevinpowell/pen/GrLKNo by doing https://codepen.io/imdiau/pen/OJYQpNw ...

omarda

6/18/2024

Centering with margin

Why does margin: auto only center horizontally? how is the browser not able to calculate the vertical margins the same way it would for horizontal margins, even when the element being centered and its parent have known heights

EthanOB

6/18/2024

CSS Container Queries not working

I was going over the bare basics of container queries in CSS and I was not able to get the colour paragraph inside the container to change when the div's size is >=400px <style> .container { container-type: inline-size;...

smackalpha

6/18/2024

How to Integrate webengage in nextjs app

I used WebEngage for tracking users. In React, I pasted the code in index.html under the head tag and it worked fine. In Next.js, since there's no index.html, I pasted it in _app.js, but I'm getting an error. ``` v4.js:1 Uncaught SyntaxError: Unexpected string (at v4.js:1:90) storage-frame-1.13.htm:1 Uncaught ReferenceError: webengage_fs_configurationMap is not defined at t.onload (storage-frame-1.13.htm:1:2858)...

tanka

6/18/2024

how do you go about creating the main background image to take full screen

I mean I know about vh and vw so that the div takes up fullscreen, but a side-effect of that is when you have header, the image starts to extent the vh and starts going below the bottom of the screen theres one way that I found on chat gpt, which I guess would work, ...

vince

6/17/2024

How to match border height of element

I have 2 links inside a container in the picture. The markup looks something like this: ```html...

Jeremy Parker

6/17/2024

Are CSS Variables Bad?

I'm a solo developer, so there's lots of "industry standard" / "common sense" stuff that I don't know, and, sometimes my work will have me prop up some PHP COTS software, and it seems like every time I dig into the code of other people's projects, I never see CSS variables; I feel like the only time I see them is in "cutting edge" companies or huge sites with their own css frameworks. For example, right now I'm tweaking an Omeka installation, and they have a few settings the user can use to set background color, brand color, etc -- and then in the PHP, they assign these values directly. In the equivalent of "index.php" they have this: ``` <?php if ($buttonColor = $this->themeSetting('button_color')): ?>...

Ubong Josh

6/17/2024

setInterval loops over the first character

What was I trying to do? Trying to display the page brand name one letter at a time, on page render.. What have you tried already to fix it?...

Sam Wolfgang

6/17/2024

Control CSV CSS z-index.

Hey team! I'm new here and to coding so ignore any mistakes (just looking for help about this specifically), I'm aiming to solve a problem where I'm importing a CSV and need to control the z-index. I'm finding it super difficult to even see any changes! Anyone able to help? P.S. removed the rotation axis intentionally, I forgot to put a letter back in before sharing....

message.txt

MarkBoots

6/16/2024

[brain-breaker] mask-shorthand. Firefox does not like it

Long time ago I dropped a question in here. I'm making a list where the markers are a puzzle piece (using masks). In chromium it works like expected, but: [brain-breaker]...

Vipe

6/16/2024

Struggling to display titles from api (RapidAPI)

I'm trying to learn Vue.js and I've started making a clone of MyAnimeList to practice. I'm attempting to display titles from api in h2. Can someone help me, please 🙏 ? Here's API screenshot (lightshot): https://prnt.sc/TWcfNnWIW2IR Here's the API link: https://rapidapi.com/felixeschmittfes/api/myanimelist...

Ben

6/15/2024

Angular and nest.js help

Hello. I've been developing for eight months. Right now I'm working on a project that uses Angular for the frontend, and nest.js. for the backend. As far as API requests go, I've got a get request, and a post request... here's the relevant code: ``` //hymns.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';...

tomatao

6/15/2024

Using flex for `.flow-content` utility

Why use a margin-top/bottom rather than something like ```css .flow-content { display: flex;...

דניאל אסרף

6/15/2024

basic help on structure of a simple website

I'm very new to front-end development, especially CSS. I want to create a website with a top navigation bar and a side navigation bar on the right side of the page. The top and side navigation bars should be fixed, and the main content area between the navigation bars should not overflow. If possible, I would like the height of the top navigation bar to be 15% of the height of the window and the width of the sidebar to be 15% of the width of the window, even when the user minimizes the window. I tried to achieve this behavior with the following structure: ``` <div className='App'>...

curiousmissfox

6/15/2024

Grid help

https://codepen.io/Miss-Fox/pen/wvbpdRd relevant styles in ' @layer help' So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size. ...

Mooshio

6/15/2024

Difference between scroll-margin and scroll-padding

Building on top of the sticky header I asked about a few days ago, I was wondering what the difference is between scroll-margin-top and scroll-padding-top. Which one should I use? I watched this video from Kevin, where he adds scroll-padding-top to the html tag. https://www.youtube.com/watch?v=iGUSTyG-CYw The comments on this StackOverflow answer suggest adding scroll-margin-top to the :target selector. https://stackoverflow.com/a/55683966 ...

nnnakuuul

6/15/2024

links to sections in the same page

i want to link my navbar to sections in the same page and when that sections comes into the viewport ,the list element linked to that section should have a change in color, how do i do this using css? ```html <nav class="navbar"> <ul>...

محمد

6/15/2024

JavaScript Array Question

why is this array not showing the information of itself

EthanOB

6/15/2024

article or section element?

I'm not sure whether each of the 3 parts in this card component should be made with the <section/> or <article/> tags. I know that article tags should be independent and make sense on their own and I think each part of the card does make sense on it's own, but at the same time section elements contain thematically related content, and these 3 "sections" are related. So should I use <article/> or <section/>?...

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 🙂.