KPC

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Join

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

GauravKumar1502

5/6/2024

Need Help Making Inner Div Scrollable without Explicit Height

Hey folks!, I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height. Here's a brief overview of what I'm trying to achieve:...

PartTimeCoder

5/6/2024

Dynamically Swapping CSS Variables in React

Hi everyone! First time posting here 🙂 Not sure if this is possible (or even recommended), I am wondering how to dynamically swap out css variables, not just update the variable value. Example, there is a list of projects displayed, I click one and a modal opens with all the details associated with the selected project. Each project manager has their own css variable with their color (eg --name1: red, --name2: blue, etc). Is there a way to dynamically check the project manager name, and then assign the background-color with the corresponding variable, or do I need to have just one variable name (eg --proj-manager) and then have it set the color to that variable?
The project is in React, and there are dozens of project managers so many different colors to be set. I will also be using the css variables for the managers in other areas of the app as well. I do have sass in the project too, but would prefer css variables if possible, but I am open to either. I should also mention I am a noob, self-taught over the last 2 years (with lots of tutorials from Kevin) and working on my first real project now. Any assistance or direction would be appreciated!...

Silvershot

5/6/2024

Explain Css animation behavior?

Here's a simple example which demonstrates the behavior of the opacity property of a fading text with an infinite animation https://jsfiddle.net/kc7t62ge/. Setting the opacity programmatically (by clicking the button LOL) does not interrupt the animation, which makes sense. However, the opacity now alternates between 0 and the new set value, in my example 0.3. Why is that? Is there a hidden property behind the css animation being set, aka max-opacity of some sort?...

thethingisback

5/6/2024

A more coherent scheme to make my parallax responsive

GH:https://github.com/nnall/hm-frontend-Nick.git I have a 2 - page site in react where, in each of 'page''s directory, 'Home' & 'AboutUs', each has a similarly laid out/schemed 'parallax.css', solely for adjusting my parallax groups inside of the parallax wrapper parent, root element of the component. I'm only using CSS and 'perspective' currently and my components' structure for parallax look like this:...

Light

5/5/2024

Expanding on the container class

I recently saw a video by Kevin showing a new way of using container classes. Video: https://www.youtube.com/watch?v=c13gpBrnGEw I've tried adapting it for my needs but haven't figured out how to achieve this yet, so I'd like some help/directions. I've attached the image of what I'm trying to accomplish in addition to Kevin's already showcased features of this design. ...

lko

5/5/2024

Why does the word wrap on firefox but not in chrome?

If you open this link in firefox, the text wraps, why? It doesnt happen on chrome https://play.tailwindcss.com/KBSFCQXRbi...

TheBassGuy 🎸

5/5/2024

Full Width Dynamic Text Size

Any ideas on how I can do this without using JS?

ZNP

5/5/2024

What's the right mindset when making CSS and BEM

I'm watching KP's css responsive layout, I thought I did pretty well, then KP uses a lot more reusing of classes, being effective with inheritance. I was much more focused on keeping everything within it's own box- putting each class with it's seperate rules and only overlapping once or twice. I know in the demystified he says it's really up to you, however I want to know what you guys think and what mentality you have towards CSS , bem and other rulesets.

Shayokh

5/5/2024

How to create this UI using Bootstrap?

I want to recreate something close to that box UI. As you can see, there is a box "floating above" 2 divs/sections. How can I get something like that using bootstrap? Which utility/component should I look at?

roger

5/5/2024

html css responsive

How to achieve this layout please somebody help do me I have made some part of it #css #html #front-end

Harry H

5/5/2024

Wrapper issue / Cube CSS attempt

Good morning (UK time), I am having issues with my wrapper class after trying to refactor to CUBE CSS. Frustratingly doesn't seem to be working when applying a max-width through the 'data-type' method, although works absolutely fine if I apply it directly to my wrapper class. Any help would be much appreciated - I am sure it is something blatant that I just cant see at the moment. ...

CDL

5/4/2024

Transitions/Animations - Where to start, and what to avoid?

Looking for info on how to start using transitions/animations - the only ones I'm aware of and have used are the basics from Svelte transition: in/out, fade, fly etc... I'm wanting to learn this through Vanilla JS if possible, but also React 🙂...

shadow7

5/4/2024

Rendering Issue with Flowbite Plugin in Angular Project

Hello everyone, I'm currently experiencing an issue with the Flowbite plugin in my Angular project. When I include require("flowbite/plugin") in my tailwind.config.js file, the rendering of my application becomes unusual, specifically when I use the type attribute on an input element. Here's the relevant part of my tailwind.config.js:...

Stroudy

5/4/2024

JavaScript cheat sheet

Good evening, hope you are all well, I am currently learning JavaScript and trying to get used to the syntax like how they are laid out like a loop

 if(condition) {code}

 if(condition) {code}

Is there a cheat sheet you use or something i may find useful that helped you?

Lloyd Peterson

5/4/2024

How to achieve this kind of layout

How to acheive this UI i tried to develop this with grid but failed to do it. can someone help me?anyway, i use tailwindcss for styling

Zax71

5/4/2024

A11Y dialog advice

Hi! I have a HTML dialog that I would like to close by clicking outside of it or using a close button. I chose to use this method from StackOverflow to close it by clicking outside and it works correctly, with some a11y warnings.... These are because I have on:click that is not on a button. When thinking about this I feel that if you were using keyboard navigation, it would make more sense to use the close button instead of selecting the whole outside of the dialog with tab. So, my question is: should I do something to allow keyboard navigation/screen readers to know that you can click outside, and then how would I achieve that. Or, how do I disable these warnings if I am right that it would be more of a hindrance to screen readers and keyboard navigation to be able to close the dialog by clicking outside and only allow them to use the close button....

Shail

5/4/2024

Need guidance/advice on implementing security in my react js app.

Need guidance/advice on implementing security in my react js app. I have a spring boot backend (monolitihic) application. It uses Spring security with Jwt token to implement security. When a user logs in, the app returns the Access and Refresh token in cookie. In the react app, i have created a PrivateRoute component to validate if the user is authenticated before loading protected routes. But in the component I am not able to figure out how do i validate if the user is actually authenticated. Do I just check if the browser has the cookie or not or should i send the cookie back to server to validate if token is valid or not?...

Lizzy

5/4/2024

Jekyll error for stylesheet linked to html file

I am new to using Github Pages/Jekyll and I have encountered an issue that I just cannot seem to resolve. I am trying to host my project locally for developing. My (relevant) file structure is: ```jekyll-site/ ├── _assets/...

Ahmed Kashkoush

5/4/2024

How can I start freelancing

I'm a front-end developer with html, css, javascript and react skills, I want to apply my skills to make money, so my questions are: How to start or plan it or what to expect from freelancing? How to create a freelancing profile what level should I master a certain service so that I freelance with it, let's say landing pages, is a tutorial and a single application might do the job or should I do more, and how more should id if so...

RanzoLići

5/4/2024

Responsive design hick-ups (flexbox gap, and img width)

Hi! My problem: trying to make the the gap property of my flexboxes responsive. It needs to be readjusted in both header and footer, it works fine when im doing my first media query(for tablets) but then when i want to do it again for laptop and pc screens it overrides the tablet's. Same problem with img widths. https://codepen.io/Ranzo-web/pen/oNOrJRQ...

Previous Next

Gaming

Programming

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

Kevin Powell - Community

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.