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

text on top of image

how do i make text on top of images like https://shopify.com/ (shopify uses a video but ig its the same as the image)

http request, json-server

hello guys, using http patch how can i modify only certain todo items within the todo array? Example i want to update only the taskName of the 1st array of todo I am using axios Endpoint: http://localhost:3000/tasks/1 ```js...

Workaround CSS for smooth scrolling buggy in Google Chrome

Hello, following a video of Kevin, I think I discovered smooth scroll and enabled it right away, only to find it breaks in-page anchor links from a table of contents. I currently have this code: ```...

Empty Space Caused by Containers or Content

Hey everyone, I recently been using a retro platform called Spacehey to design old school "Myspace" layouts. Which the site is a recreation of. Because of it I've been getting back into coding and applying some of my limited knowledge learned from Webflow. With the recent page I've been playing around with, I've added two sections, then containers, then the content containers... Which seems to cause some spacing issue on that right, that essentially cuts into the sections. ...
No description

design tokens

Hey, could somebody please explain the advantages of laying out design tokens in this way: having a folder with some tokens stored in json files, for example the structure may look like: ``` tokens...

Promise is fulfilling as undefined

I have a component that fetches all the terms of a taxonomy product_type to be displayed on the frontend (WordPress site). Terms are fetched via REST and terms (may) contain a url to a svg file that I wish to directly embedded in the DOM for manipulation. Assumes all SVG files are trusted. fetchSVG() takes in the svg url and returns the <SVG> markup. The problem is await fetchSVG doesn't await at all... the promise immediately resolves to 'undefined'...

Ininity Slider

How can i create a ininity slider with a text box and a image like this?

Skip navigation button

Hello guys! I have a skip navigation button in my website like many websites do, but the problem is that when clicking on it, the #content gets added to the url: localhost:3000/home#content how can i take it off? I saw a video of a person taking it off with javascript but it still appeared for a brief second and i also think it is not a great solution, im sure there is an actual way of doing it but i just could not find anything about it. an example website that has this button without the #content is https://nextjs.org. Thanks very much!...

Data Attribute

Hey, i see people using data attributes (or classes, but I've heard data attributes are better for this sort of thing) for things such as different permutations of designs. For example, if i had a card with x at the top and y at the bottom but lets say for the second card i wanted to swap them so y is on the top and x is on the bottom, what would be the difference between swapping them in the html like so: ```html <article> x y...

CSS Default (initial) values for every single HTML5 tag

Hey everyone ! This might seems like a useless question but i was wondering if someone knows about an actual complete list of the CSS properties applied by default on each element type of HTML5 ? Just like this https://www.w3schools.com/cssref/css_default_values.php but i while looking at it there is nothing mentionned for the button element, but when removing every style from one button it becomes this (1st picture), but which properties has to be set and how to get this button style (2nd picture) ?...
No description

Troubleshooting Cross-Browser Compatibility with srcset Attribute in HTML img Tag

I'm using the srcset attribute of the IMG tag to display three different images on three different viewports. However, I've run into an issue where this srcset attribute isn't working correctly in Chrome and Safari browsers, although it works fine in Firefox. Can anyone help me in providing the best solution for ensuring compatibility across all browsers? Here's the link to my codepen: https://codepen.io/Amit-Soni-the-vuer/pen/bGJoGxM...

visually hidden class

Hey, could somebody please explain in which use cases a visually hidden class should be used on an element and on which elements? Along with this could I ask why we need to use the clip and position: absolute properties within this class? Thanks in advance! ```css .visually-hidden { border: 0;...

Is setting height as bad as people like kevin say or is it exaggeration? what about aspect-ratio?

3:28 kevin suggested not to use height. He also says that in some of his other videos and I've also heard it from other people. 1. Does this apply to aspect ratio since it's also setting height? 2. What about when I use height: 100% on my <img/>? should I stop doing that? 3. What if I set height with rem or em units? Is that still a no-no? 4. If I had a <table/ which was pushing all the contents bellow to a mile away and I wrapped the table in a <div style={{ height: 50vh, scrollY: 'scroll' }}>, would that be an 'ok' case to use height?...

Stick icons to bottom

Is there any way that on both cards the icons should be in the same line, I know the icon goes up in the right card because the content is lesser, but I want the icons on all cards no matter what, icons must be on the bottom of the card like the first card, and I am using grid inside card-content. In simple words the icons must stick to the end of the card...
No description

my sticky navbar is not working

my sticky navbar doesnt seem to work at all. it still gets left at the top of the page. im still new to web development so i only got the javascript from online tutorials. i already tried multiple of them but nothing seems to work at all. here's my code: https://codepen.io/Svenska/pen/BaEdWJE...

Changed the hardcoded Data on my ecommerce site to fakestore API but now having trouble pushing data

https://github.com/callum-laing/shopping-site I encountered this issue before but my experience/knowledge with React isn't good enough to figure this out anymore, and I'm at the point where I'd just like to get it working so I can move on to something else 😅 I'm not getting any errors when I try testing lines/functions in the console, you click "add to cart" and it's like nothing happens, literally, so I'm not sure where the missing piece of the puzzle is......

Harley Davidson

Anyone wants to recreate it using CSS3?

How to increase the quantity on an item that already exists in my shopping cart?

Yo! I'm trying to figure out how I go about increasing the quantity of an item that already exists in cart/page.jsx, instead of it adding that same item again as a new element each time, but I can't figure it out. the repo is here:...

Absolute position problem when scrolling

I'm having a problem with an abolute positioned element when scrolling, it moves and overflows the container: https://codepen.io/n00bCod3r/pen/XWQaZbz I tried adding a position relative to the container, but it gets cut:...

Kevin’s courses offline available?

Hi, not sure if this is the best place to ask but for those that did his courses. I’ll be traveling soon having 13hr flight and long train rides in Japan and I was wondering if any of the Kevin courses were doable offline or is it all online? Otherwise I’ll just download a few front end mentor challenges, thanks.