HTML for UI design
I want to be able to develop my user interface designs from figma. Do I need to learn HTML or just CSS and Javascript? And what are the best resources for that? So far in dev mode, I've only seen…
Html – should i use grid? or what can you recommend for actions like this?
im not sure what to use in that case I want to have resumé (img) on the left, the biographie (p) with a wide width in the middle and on the right in the same area a input (email), texterea…
Html – How to clip a gradient to Text over the parent element?
I want to clip the gradient of the parent element to the children but it doesnt quite work. either the gradient shows completely (not only covers the text) or my other, normal background is the background it uses to clip…
Html – CSS: How to toggle the borders of a specific table column without twitching
function toggleBorders() { table.tHead.firstElementChild.children[1].classList.toggle('thick-border'); Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border')); } table { border-collapse: collapse; } th.thick-border, td.thick-border { border: 3px solid coral; border-top: none; border-bottom: none; } <table id="table"> <thead> <tr> <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th> </tr> </thead> <tbody> <tr> <td>11</td> <td>12</td> <td>13</td>…
CSS make an absolute positioned container´s width fit-content of its insides
I want to position a div with dynamic text and dynamic position inside a container. Placing the div is not a problem, but I expected it to adjust its width to its content. How can I make the green box…
Css – Centering a loading spinner
I want to ensure my loading spinner is always centered when used, in a table, a button, ... .th-loader { .progress { top: calc(50% - (var(--loading-indicator-border)/2)); left: calc(50% - (var(--loading-indicator-border)/2)); width: var(--loading-indicator-border); aspect-ratio: 1; background: #006edb; border-radius: 50%; transform: rotate(0deg)…
Html – How to add space between two buttons?
In my homepage header, I have a login and register button. Currently, there is no space between these two buttons in wide screen. In smaller screen, I made it to collapse, and there is space. How do I keep the…
Css – Tailwind styles don't load well when working on a React project for a long time
I'm working on a React application, using Tailwind for styling. This issue happens when I've been developing for a while. For example, I add a container with hover:bg-red-900, and it works at first, but for some reason, that specific style…
Html – How can I animate a button without moving the text within?
I have a button to which I applied a costant, rotating animation. @keyframes rotateinf { from { transform: rotate( 0deg); } to { transform: rotate(360deg); } } The problem is: the child text gets the animation applied too. I managed…
Html – Select class where parent is last child in
I have a simple html hierarchy: <div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">whatever</div> </div> <div> <div class="custom-class">thing i want to select</div> </div> </div> I am currently adding attributes to .custom-class but would like to add a specific attribute to…