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

Flexbox fluid layouts question

Query for the flexbox pros out there. I've achieved the layout I want, but I'm not 100% clear why it worked with the values I have set. See here: https://codepen.io/Xe11o/pen/ExGYXjW?editors=1100...

i have problem with astro and react js pls help me

i have made a sidebar with react and want to import it to index.astro but its not happening

learn javascript

what the best resouce on the internet to learn js from scratch ??

Light ray effect with css

Hi, I have an image that was generated by the NextJS ImageResponse using JSX and CSS, but I can't figure out, how did they achieve the light beam effect in this image, Please suggest me some suitable methods with which I may achieve a similar result... Thanks...
No description

drop down menu

Hey, i'm trying to learn how to create a drop down menu for a nav link and i have a few questions - i'm trying to center the drop down container in the middle of the about link but left: -50%; doesn't quite do it for me, is this because the container is absolutely positioned in relation to the nav link therefore only moving it to the left half of the nav link? If this is the case would a transform be better? - i've seen a few people do it this way so i tried it out here, the arrow is absolutely positioned in relation to the container which has also has a value of position: absolute;, does an absolutely positioned element in relation to another absolutely positioned element set the first element absolute to the second? it seems to work here but i'm not sure if that's good practice or is valid?...

Font-Face

Hey everyone I'm new here and learning front end development. Can anyone help me out with this question. If i have a webpage that has two different type of font for example Robotto and Montserrat and I'm using @font-face to bring those fonts into my work space locally. Do I need two create two separate @font-face property or do I put that all under the same property?

Array of images or emoji

Hello everyone! I am new here . Can anyone tell me how can I make an array of emoji or images and then display them in a div on the webpage? **

What would be the best approach for SVG files?

Hi πŸ‘‹πŸ» I am wondering what would be the best approach for using SVG files on HTML file. Personally, I like clean code which not excluding β€œsvg, path” etc. on my HTML file. I like to import it with img property but yet it doesn’t allow me to fill or stroke the SVG file. ...

Unexpected scroll issue with id anchor

Hey! I have an anchor link on one of my websites that should navigate to #contact, which is a section with the id of #contact. When you click on the "Contact" call to action button in the navbar, on the / route, it doesn't scroll all the way down to the contact section, but rather halfway between the section up above it. On the /services route, it works as expected. ...

Uncaught ReferenceError: loadCarPage is not defined onclick http://127.0.0.1:5500/index.html:1

Can anyone help me with debugging the above error message? while creating a 3d car portfolio website on my laptop. #front-end

Overflow-x messes up Overflow-y

I have a chart block with lots of price bars inside of it. Each price bar contains a tooltip component that appears on hover. I need to restrict overflow-x so that price bars do not overflow the chart box but i want to keep overflow-y so that overflowing tooltips are still visible. Here is demo: https://codepen.io/NEOdinok/pen/poQMBBx?editors=1100 ...

guys i have another problem with my blog

when i open the sidebar i want the whole backdrop to be darken with tailwindcss

Confused on JS error

Hey so, can anyone explain to me how "text" or "dataWrapper" are not of type Node? One literally gets seen as HTMLDivElement when hovering over and the other gets seen as HTMLParagraphElement In the console you see me first checking if it correctly gives the date when I ask for it Second in the console is what's within my span (which is a part that'll get added to text, so text consists of <p><span></span></p> )...

min-height vs px

i notice quite a few people using min-height to set a fixed height of an element rather than height, for example, min-height: 20px; over height: 20px, could anyone explain why people opt for this and it's benefits? is it a recommended practice or a optional one?

Background images

Need help with this
No description

Auto-typing

can anyone help to complete this code for this autotyping animation for my portfolio?

Compile error with Angular, LESS, VS Code and @media range syntax

I am trying to experiment with the the @media range syntax, but I keep having an error when compiling. The error is: ``` @media screen and (width > 100px) { ^ Missing closing ')'...

Is fluid/responsive typography a good idea, or horrible for accessibility?

A few times now I've used calc() in my CSS to create semi-responsive typography on pages. In particular, I've used this formula from CSS Tricks: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); My use cases have been homepage heroes and CTAs (hybrids between buttons and cards - icons with text). Is this good practice in the name of responsiveness, or does it negatively impact accessibility? Should I be setting specific font-sizes through media queries instead? Thanks for any input on this πŸ™‚ πŸ‘...