Need help with Order for display flex
Order is used to change to position of the child elements in a flex box. i tried the same but its not quite the same. there is a main div location-jokes container which has
display:flex and flex-direction:column properties . Now i wanted to reverse the order of childs so i used following order to change the position, the child position is changed but the grandchildren position is affected by this, how to fix it, so only child position is moved ? i have attached the code and ss for better understanding
``` .location-jokes :first-child {
order: 2;
margin: 1rem 0;
...
What is pre?
I was reading Chromes news about nesting being available (YEAH!!), and this Codepen revelas if you're in a browser that supports this new function.
Then I started looking at the CSS, and what is actually the
pre selector doing? It isn't connected to any HRML element as far as I can see. I tried deleting it and playing wiht it, but nothing happens.
https://codepen.io/bramus/pen/oNdrypM?editors=1100...Webp or AVIF?
I was wondering, if i should choose AVIF over Webp for my images. The AVIF files are much smaller than the Webp, and i don't really see any difference tbh, so idk if there is a downside to using AVIF other than maybe browser support.
why aspect-ratio needs a display to work?
Hi
I want to use aspect-ratio to make a rectangle and then make it a circle;
but the <a> is not responding to aspect-ratio in my code here until I put a . https://codepen.io/codedkk/pen/RwYxbKL
Why?
it is from Kevin's tutorial: https://scrimba.com/learn/spacetravel/the-explore-button-part-1-cof6e4b00a7a0928954d4bda3...
display:grid / inline-block
display:grid / inline-block
Atomic Design and React
I am following Brad Frost's Atomic Design principles in React and am wondering if I'm creating an antipattern. I have a Heading component that just renders a heading tag and some styling. Seems simple enough, but there are multiple different use cases for this simple Heading component, so I'm conditionally rendering jsx and styling based of a
type property. This, however, can really bloat up my component and I'm wondering if I'm doing too much in one component. This is a simpler example but I have many other components like this in my project.
Below is an example:
```jsx
import { PropTypes } from "prop-types";...Issues with cards in responsive design
im having issues with cards in responsive design, i narrowed down the issue to images where i declared position:absolute in normal design without declaring relative parent, and the images sat in its place......
now in responsive its having this wierd positioning, i removed position : absolute for normal design its working properly but in normal mode images are way off https://codepen.io/avinash-tallapaneni/pen/ExRomwX...

Cannot remember the title of one of Kevin's videos
Can anyone remember one of Kevins videos where he was talking about how we often set margin top and bottom: on H and P tags which then causes an issues where we do not want margin tops on headings etc. He mentioned that there was a way to do this this with * ~ * or something similar?
I hope that makes some kind of sense.
Cheers....
Is this overusing of hooks or am I paranoid ?
During my reactjs journey I always was puting inside hooks function which requires either access to props/state or they have to somehow use other hooks.
Recently I join to the project where people (who are backend developers mainly) were putting inside hooks functions which does not requires any of those hooks stuff i decribed above. Like for example they were building two function incrementDate(date) and decrementDate(date). All those function requires is date. They are puting this inside hooks and using useEffects on this. Is this big anti-pattern or am I paranoid?...
Which is better: ./style.css or just style.css?
I've been using
./script.js or ./style.css in my HTML files, but I see developers/designers better than me who do not include ./ and just use script.js or images/photo.jpg instead. I know that they both point to the file in the current directory, but is one preferred over the other, or does it not matter?How to make functions work with newly added HTML via JS?
So, I have normal JS file and a button that adds new HTML when clicked. But my functions that are in the file do not work with newly added element. What am I doing wrong?
tabindex attribute on radio input
It seems like we need to have a name attribute on an input of type radio, otherwise, we can't tap through them, is this correct or am I doing something wrong?
Extracting date from a Wiki page
I need some guidance.
I have a personal page, built with Astro Framework.
Then there's a wiki page that has tables and data.
What is the best approach for me to collect some of this data of this wiki page into a JSON, and from this JSON generate a JS that displays this information?...
How can i get api for this
how can i make like when someone use this discord bot to add a user ?? or if they add it to the server and the number to change

header missing in responsive mode
i have attached the video. To my understanding the header is moving out of bounds and its not showing when scrolled. if i give display none to countries forecast section the header appears, how to fix this?
How do I build a website like this using JS?
How can I code the kind of animation that is in this website - https://www.peopletonotion.com/ . I don't understand how this is built. Would love to learn it.
Here, the Hero image is fixed as we scroll through the page....
Codepen auto complete feature query
Is there any way to bring auto complete feature in codepen.io? I miss this feature for css to avoid typo mistake.
Eslint: Unresolved Module Errors in "Monorepo"
Hi, I have set up a project containing two separate sub-projects, one for my headless CMS and one for the frontend.
Before then all modules for custom paths (set up in the
tsconfig.json) did correctly resolve, but now that the root is no longer in the project root, but in the astro sub-directory it can no longer resolve them.
Everything still works, except for eslint complaining, and CMD-Clicking the paths opens the right file as well.
...
Sass @use won't import partial
I'm working on a project with vite. I'm trying to import a partial, but for some reason I keep getting an error saying can't find stylesheet to import
File structure:
```
/src...
Best approach to add an SVG image positioned bottom of a ClipPath.
Hey guys and gals,
Firstly, thanks for taking the time to checkout my question. Any help or insight is appreciated, spent a good part of today with no success unfortunately. We're currently building a basic portfolio site for a client. The client has provided a UI of what they want their website to look like (don't judge).
The Problem:...