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

need Test users for my final assignment of a short course, please.

The requirement for this specific assignment task is to find two people to test the functionality of my website. These users should come from different backgrounds in terms of technological experience, education, and age. If you'd be so kind to check out a super-novice web developer's site and answer a few questions, I'd appreciate it very much: https://www.360functions.co.za/assignment10/ Can you please answer these questions relating to my website?...

How do you efficiently class text elements in CSS?

Summary: How do you generally go about grouping text elements in css? Hey, I'm working on my portfolio website and doing it with HTML/CSS to help differentiate as a Product Designer. I'm relatively new with CSS but one of the things that I was wondering is how to go about text and classes ...

guick one: Animated PFP on Codepen?

i tried all animation supported formats: apng, gif, webp, png, jpg. at the end it still converts back to static image.. welp xd

How to create a gallery with flex for images

Probably a beginner question. Let's say you have something like this: https://codepen.io/Bard-the-scripter/pen/yLZmBEw. So, just some very big images. Can I have the image to be at least X pixels wide and at most Y pixels wide, but always fill the screen width?

How to upload website to Netlify from src

Hello, I just finished frontend mentor challenge and I have problems with deploying a site on netlify. It's my first time using tailwind, npm scripts and tooling. I also had some problems with git branches, but I think it's good now. I don't really have the build command (I was thinking maybe the npm run start is the build command but it also wasn't working). The netlify is showing the "page is not exisiting". On the GitKraken it looks like on the screen. Also the .gitignore file isn't working properly, it ignores for example node_modules/ but not dist/
EDIT. I managed to upload a website from GithubPages, but I am still curious how to do it via Netlify github: https://github.com/Jakub-Gryczka/age-calculator github pages: https://jakub-gryczka.github.io/age-calculator/...
No description

Jest error with conditions on props.

I am trying to test if layout.js if it calles a fetch service, this works. But in layout.js, page.js is rendered and my fetched data is added as a prop. I mock the service an data and I return []. But in page.js I only show the data when it is not empty but I keep getting an error when using this condition. I've already tried with returning just random types and random conditions like strings but it doesn't help. I am using jest for the testing in Next.js.
No description

Is there a way to lazy load an embedded iframe? (Google Maps/youtube video)

I have youtube and google maps iframes on a website, which load immediately and hurt Lighthouse scores a lot. Any ideas?

Navbar

hi people, recently I was proposed to create this type of bottom navbar, I would like to hear a few opinions before starting what would be the best way to approach this design
No description

Create a drop down menu for the navbar

I would like to create a dropdown menu for shop. Each time when Shop is click, it should display all the menu until it is clicked again. How can I achieve this in JavaScript. https://codepen.io/GIVETH123/pen/MWLLZBg...

Absolute/Relative positioning overflow

How do you make it so that the overflow scroll of this container(horizontally), appears while the vertical overflow is visible as well? On top of that, I would also want the absolutely positioned tooltip/popup to have its overflow to show horizontally. tldr I need to: show overflow scroll horizontally show overflow of the popup anywhere(right now it only appears below or above, but not on the left side or right side of the screen)...
No description

Navbar sitcky

hi people, recently I was proposed to create this type of bottom navbar, I would like to hear a few opinions before starting what would be the best way to approach this design
No description

Table of contents wrapper though sticky and top hiding

Hey, so I got a problem with a container being sticky and having set top: 32px and it's hiding behind a header so basically another container at some point of scroll somehow and I don't know how to avoid this? Can someone help me with that, because I couldn't figure it out with multiple approaches already...
No description

How do I do the layout for this?

So i have this design and I'm trying to implement it in vanilla CSS. i realised in mobile view i would make it a
flex-direction:column
flex-direction:column
but on the main screen i realise that the image is on the right and the text is on the left . How would it be done? I've attached an image of the design. I'd prefer pseudocode so i try coding it myself.
No description

Please, how do I structure this in React JS?

```html Sectors: <select multiple="" size="5"> <option value="1">Manufacturing</option> <option value="19">&nbsp;&nbsp;&nbsp;&nbsp;Construction materials</option>...

Button and input to have same height

Hi, I wanted to make the same height of button as of input field. I tried to do, but didnot find the solution. https://codepen.io/hamzacodepen951/pen/WNPqpMO...

Should I be setting a base font size?

Hello, I am developing my first responise website and been trying to learn as much as I can (really enjoying the videos on YT). One thing I can't really find the answer to is if I should be setting a base font-size on the html element for rem to go off of. I know the default is generally 16px so in theory I should be fine not setting a base side right? Or is it good practice to set a base size? Thanks

Transition duration not working

Hello all, I'm having a problem with my css, the transition duration is not working. I'd like help on this problem. https://zod-codes.github.io/k-p-community/ (this is meant to be the finished product). https://github.com/zod-codes/k-p-community/tree/main/SPACE-TOURISM-WEBSITE (here's the link for the repo ).

frontend table challenge

hey guys, simple but imo hard challenge: how to build this kind of layout ONLY with table/tr/td no position property...
No description

Find Dimensions of frontendmentor design without pro

When tackling a Frontend Mentor challenge without a pro membership, figuring out the height, width, margins, and border-radius can be challenging. Often, you have to rely on your eyes and make educated guesses. However, here's a handy trick: open the design preview image in your browser, enter inspect mode, and add a simple HTML element to the body. Set its style to position: absolute and adjust height, width, top, left, or inset to easily determine the dimensions of any component in the design. In the video, I demonstrate how playing with these properties allows you to accurately find the dimensions of various elements. Additionally, if you need to pinpoint the exact color, use the browser's built-in color picker in inspect mode. Remember, as a coder, you have the power to overcome challenges and achieve precise results. Watch the video to see this trick in action and enhance your Frontend Mentor experience!...