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

Icon font or directly

What is the way to go? Implement icons with an icon font or integrate the svg's directly? Which option would you choose?...

Localized Page Quirks

Hello everyone! I'm working on localizing 7 landing pages on my site. Did any of you ever do something different CSS/Design vise when localizing pages? Thanks!

How to build new Hero grid designs

I have seen these new Hero designs in Dribble and Pinterest. How would you develop something like this
No description

Text in a card shrinking to multiple lines at small screen sizes making the card look a mess

How can I make I text in a card not shrink but fit well in small screen sizes like 375px? Because it makes the text long and the card looks like a mess?? Someone please help me

How do I go about learning site design?

I am re-learning CSS (why I am here πŸ˜€ ), but how do others learn the how to of designing the general look'n'feel of a site?

Animation on Navigation Bar

Hi guys, I am trying to create an animation similar to the one Kevin Powell made (refer to the attached picture). However, the issue is that I am unable to replicate it exactly because it's in my navigation bar and not a simple rectangle. Additionally, I would like to implement a diagonal animation, as shown in the attached paint picture. Could you please assist me with this? ```HTML <!DOCTYPE html> <html lang="fr">...
No description

Navigation Bar

is there a reason why flex: 1; dosent work on a ul tag when making a navigation bar? As soon as you take out the ul tag and add a flex grow of 1 to the nav tag it then expands and acts how it should?
No description

Flex Grow not working on Nav

Can someone please tell me why my flex grow isnt working on my nav. I dont understand what im doing wrong
No description

Is there a correct way to copy these containers?

Sorry for that bad title, I created this basic container I wanted to know is there a correct way to copy the containers or would I have to make separate containers with the same styling?
No description

How can I recreate this design?

Hey there, Recently I was researching some cool portfolio design to make mine look better and I came across this guy who had done his Projects like this I was wondering how can I get the design he had? He had placed a laptop and phone with his project on it.
No description

White line between my hero and main sections

Hi all, trying to build a website for my sister's business. Just making a couple prototypes for the moment, and on this one I have a white line between the hero and main sections. It's a piece of body. ( I tried setting the body background color to red and the line becomes red). Anyone have an idea what causes this? heres my codePen: https://codepen.io/berdj/pen/OJqvyZw...

Best practice for Hero Image Behind/Below Text

As seen in the Figma image, I'm trying to make a hero page with a responsive image based on screen size. I currently have this set as a background image set to contain but end up having to create a lot of padding to bring the image up and down correctly. Is there potentially a better way to do this? At certain viewports, the image overlaps the text pretty badly.
No description

THE BEST SECRET EVER:

button{ all:unset; } now you can style your button however you want!...

security for simple login

Hey just curious . For a job interview I'm asked to do a login page and some of my friends are suggesting I give it some proper authentication . What's a very simple and easy hash library or library in general to give something that's just html and javascript a small amount of security if just for show To note I'm pretty new to front end and have no experience in anything cyber security...

Styling position

Hi guys, I'm trying to style the same position for the money after the text without set a fixed width. For example: Subtotal: $100 Total : $100.000 Is there any way to solve this problem?...

Having issues making this responsive

New to this I'm wondering how I would make this responsive so it all shrinks the same way no matter the size of the screen. https://codepen.io/Gabriel-Mald/pen/RwdQQja...

Funky white thing in Upper Right of my Website

Hi, I just slightly finished this part of my .blog-nav, and things seem to be working fine, and look pretty good as I'm not fully finsihed. However, I just noticed that when I scroll over there is this what flap that appears in the upper right of my website. Can anyone let me know what this is, and why it's happening, and how to fix it to where I still. have the same functionality but that goes away? ...

Infinite slider with HTML, CSS and JS

I came across this video, https://www.youtube.com/watch?v=sXMcXz_1Vls where the coder has created a wonderful-looking front page and I tried to copy it but would like to be able to make the slider infinite, that is to say, once you get to the final image it continues to the first image. This is the JavaScript that he has used : let circle = document.querySelector('.circle'); let slider = document.querySelector('.slider');...

Styling The Medium Navigation

Hello Guys.. I am having a problem with styling the navigation of this site to look like the design. I need help with this, thanks..
My code with the styles for the design of the viewport of 700px

React CSS file structure?

I've just started this project using Vite, and I always get a little confused on where to contain my CSS. index.css I've always used as the global css styling, and I delete app.css... do you do something different?...
No description