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

Zooming into an image

How can i make the image zoom into itself when hovering over it but without changing its size on the website, basically zooming while keeping its width and height. Here is my code: .sec4{ box-sizing: border-box; max-width: 100%; display: flex;...

Using article or main for solo components on page

Hi, this is a bit of a perfectionist question, so apologies! When designing a single component or widget on the page (eg for a coding challenge) that matches the description for using an article element, but it is the only content on the page, should you still use the article element, or only use the main element? The HTML specs have an example of only using article for single components, but I received conflicting advice that I should actually only use the main element. ...

Need help regarding CSS Grid and specificity

https://codepen.io/Depayan-M-the-flexboxer/pen/dyrQgBz I'm using grid and In this layout I want ".story-5" to take 2fr width. Also despite using two classes I couldn't make right border of ".story-3" 0px; doesn't using 2 classes make it's specificity higher?...
No description

CSS color theme and pallets

Hey folks, Hope this is the right place for this . I am looking for suggestions on color pallet generators that generate complementary dark and light theme colours . All the usual ones doesn't seem to offer what I am searching for apart from one which is behind a paywall. Any suggestions would be greatly appreciated....

Links do not have descriptive text - Aria Labels don't work ?

CodePen: https://codepen.io/Smgy94/pen/LYaXBJr Hey Guys, Im getting the "Links do not have descriptive text" error in my Lighthouse report. I don't want to change the copy in the CTA "Learn more"...
No description

is it good practice to use h1 for logo of a web page?

What do you think about h1 being using as the logo of a webpage. I still see a lot of websites where it is used this way but I also read that it's not a good practice for SEO. What are your thoughts about it?

How to align my text in center hor and ver in react

I want to align my text in middle of the video.How do I do it
No description

Good naming convention in JS?

I don't write much JS soo this problem only come up recently. My first idea is to have all of my function a "verb" like getAllItems or closeTabById. then for variable I would use "noun" like itemCount . Are there any recommended rule for this?

href to link to another spot on a page and redirect the page to that spot

```<div id="MENUID" class="MENUID-btn" onmouseleave="close()">
<ul> <li><a href="HOME">HOME</a></li> <li><a href="ABOUT US">ABOUT US</a></li>...

HOW TO USE REM

Is "rem" really a responsive unit? I tried using rem on a project but the size of the texts remain the same as the screen gets smaller. It just works same way as px. Anytime I search, people keep saying rem is a responsive unit. So how do I use it properly?

How to do JS?

Hi there, I have stared JS after doing Html CSS, and trying to make this cards section, but don't getting how to do it? I don't want to use SwiperJS, feeling really frustrating, anyone could guide how to start?
No description

I think the responsiveness is just a tad bit messed up...

Alrighty, I've created a very plain and simple Calculator but on the small screen (320px) It looks terrible what's the best way to go about fixing this?
No description

How can I move the content inside this container to the bottom?

Ignore the bad styling to this, I still gotta fix it and mess around with it I just wanted to move the content to the bottom of the container so I can have empty white space at the top for an image how can I do this?
No description

Overflow question

So I've been trying to figure out a way to make my header semi-transparent while having it be sticky which I ended up figuring out but now content will overflow behind the header when the screen becomes small enough how can I avoid this? It only happens when I make the header position it ruins the entire page.

Does justify-content work with flex-direction: column or not?

I searched and google said that it doesn't but I tried using this code https://pastecode.io/s/yb98m9ub and it seems to work just fine

how to make this black top left corner on the image ?

can anyone tell how I can do this ? I hope I am clear
No description

Idea for auto-width animation?

Basically, for my element to have a smooth, auto width transition when content of it is changed. Example: https://codepen.io/DovahTheKiin/pen/vYPQXXB...

Is really necessary to learn React or Angular for front end?

Hi, i just started diving into React and i don't understand why is used. To me it seems like it over complicates everything. Until now i can do the same things with basic Javascript and CSS. I feel that is like making everything harder. Do i really need to learn it? I already managed to make a normal website with HTML, CSS, JAVASCRIPT, PHP, JQUERY AJAX. With a catalog and filters, dashboard without using React or Angular. What is the point?

Stupid question: how do I view github repo files in Github desktop app?

Attached is a picture of my Github Desktop. I would like to view the root directory of this repository, which now has several files & folders in it, since I've uploaded and committed them online (github.com). I now want to view those uploaded files inside of this application, and use the application to create a new directory (src), and move some of the files I've just uploaded, to that created 'src' directory? How? Does Github Desktop allow such actions?...
No description

I'm having problems with some images in my project. They're not displaying the way they should.

So they're displaying in a pretty weird way. I want to display the image so that the dogs are visible and the image fits in the square, but it looks huge even tho I'm setting the width and height pretty low. I've already tried using grid instead of flexbox, playing with widths, object position, and object-fit properties. Can't seem to find the problem. Here's what's happening, how it should be looking, the codepen, and the repository (because all the images are local and it looks weird on codepen. There's a GitHub page on the repository). Thanks in advance (please ignore the non-responsive aspect of the page, I havent worked on that yet)...
No description