Skip to main content

Questions tagged [css]

CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents including colors, layout, and fonts.

Filter by
Sorted by
Tagged with
1 vote
0 answers
34 views

Enhancing Visual Appeal and Usability of CSS/JavaScript Animation

I am seeking suggestions to enhance both the visual appeal and usability of a complex web-based animation that utilizes extensive CSS and JavaScript. The complete code is also available on my CodePen: ...
Pointless's user avatar
-3 votes
0 answers
19 views

The unvisible transparency in CSS. cant work out what's wrong [closed]

I wanted to make the background of the box P a little bit transparent with such elements like rgbA, transparent, opacity, but nothing appears. I would appreciate your feedback HTML code: ...
верс's user avatar
-3 votes
0 answers
15 views

How to create chevron stepper bars in typescript with MUI and React [closed]

I am specifically trying to use the before and after psuedo selector to design the stepper. I am using MUI for everything else in the project so I need to stick with it. I have this code but im ...
joseph's user avatar
  • 1
-3 votes
0 answers
27 views

Draggable folding panel (second thought) [duplicate]

This is an enhanced version of draggable folding panel that additionally to fold unfold when clicked tapped and move around view port edges using the mouse it is moody by supporting changing its CSS ...
user283373's user avatar
0 votes
0 answers
47 views

Draggable folding panel

A responsive folding panel supporting repositioning around the view port edges using the mouse. It supports fold and unfold by clicking or tapping. ...
user283371's user avatar
0 votes
0 answers
35 views

Sparkling effect

Developed around hls() CSS function and anchor tag wrapping elements with display CSS property set to ...
user avatar
1 vote
0 answers
82 views

Simple drawing website using React

So I have recently started learning web dev (including React since a few days ago), and I have tried to implement a simple drawing website that lets you change the brush size, color, and save the ...
Tom Gebel's user avatar
  • 350
4 votes
1 answer
539 views

HTML Editor : online HTML editor with real-time preview

Overview HTML Editor is an online HTML editor with a minimalist approach. Edit your HTML, CSS, and JavaScript code and monitor the instant live preview. It can also create, open and edit other types ...
Mori's user avatar
  • 35
0 votes
0 answers
40 views

Convert CSS-styled HTML to Word file without a server

I am building a non-jQuery port of jQuery-Word-Export, which is to my knowledge the best tool to convert CSS-styled HTML to a file that can be opened, edited, and saved on Microsoft Word (Windows and ...
RubberCapybara's user avatar
4 votes
1 answer
82 views

Personal web developer portfolio

I recently published my portfolio website. I would appreciate some feedback and any advice on the design, the HTML/CSS coding, the responsiveness as well as some feedback regarding best practices, ...
alejandro's user avatar
  • 143
-1 votes
1 answer
73 views

Sine function guessing cognitive app

Please help with improving this application. It is a guessing game, for learning the values of the sine function, and boosting brain power in the process. ...
Attila Vajda's user avatar
1 vote
1 answer
136 views

Need help condensing my code so it takes up less lines and it easier to interpret

Description is at the bottom Here is a link to all the code: Link ...
WartyWarthog123's user avatar
2 votes
0 answers
72 views

React draggable sliding panel

I'm building a sliding bottom panel as a React component, adapting Phuoc Nguyen's excellent draggable element tutorial. It currently looks like this: The expected behavior is: User taps on button to ...
Jimmy's user avatar
  • 21
1 vote
0 answers
46 views

Pulse effect on event driven architecture

Event driven architecture implementation resembling pulsing with configurable softness (intense, mild, subtle), pulsing mode (inhale, exhale), pulsing frequency (plain, dense, breathe), number of ...
user avatar
0 votes
0 answers
52 views

Ascend animation followed by hover effect

This CSS code creates an animation that describes a random movement using the CSS transition property for box-shadow which ...
user avatar
0 votes
0 answers
37 views

Colorproof dust effect (second thought)

The colorproof dust effect could be enhanced with positionproof feature getting the position of the dusted element (dust container) from its getBoundingClientRect ...
user avatar
2 votes
0 answers
39 views

Colorproof dust effect

A combination of various css transitions (background-color, box-shadow, opacity, ...
user avatar
1 vote
0 answers
55 views

Gauge animation in CSS

Not sure how to show this here, but the stripes of the gauges shown below move from left to right: The gauges represent a pokémon's base stats (here, Bulbasaur). The length of each gauge is ...
eloy's user avatar
  • 43
0 votes
0 answers
24 views

CSS/Tailwind to display pokémon details

The final product is the following pokédex page, here for Bulbasaur: the blurry sprite is just a placeholder the perspective effect disappears when the mouse hovers over the text Any place where I ...
eloy's user avatar
  • 43
2 votes
1 answer
276 views

auto image slider in js and css

I was just wanting a code review on this image slider I made. I don't have anyone else to give me their opinion on the code I write outside of work, so I'm asking here. okay so i had made an image ...
hestia's user avatar
  • 21
1 vote
1 answer
51 views

Icon styling in Tailwind/React

This is a React icon component, with a few Tailwind classes. This icon component looks as follows in the UI. The name LongIcon is to differentiate with smaller, ...
eloy's user avatar
  • 43
0 votes
0 answers
21 views

Centering UI elements with flex, in React

I'm using React and Tailwind to generate cards like the example below. I was hoping to get feedback on the CSS rules I used, the order of the Tailwind classnames, and the HTML structure. I'm using <...
eloy's user avatar
  • 43
5 votes
1 answer
208 views

Tic-tac-toe with JS

I am a beginner and was hoping for some honest feedback on my js code. I struggled quite a bit on this, I did ask gpt to explain some concepts which I find it’s good for but wrote it all myself. <...
FeDev's user avatar
  • 61
1 vote
2 answers
154 views

Rubik's cube scrambler with timer and list of solves

This is a work in progress Rubik's Cube scramble generator with timer and list of solves. The list of solves is stored using localstorage so that it stays on page reload. A solve can also be deleted ...
HTMLNerd_1's user avatar
0 votes
3 answers
131 views

A Tic Tac Toe Game Made With Javascript

I just finished creating a Tic Tac Toe game in Javascript, but now am wondering if there are ways I could improve upon the code I've written for it. Mind the lack of CSS here. ...
Delfino's user avatar
  • 509
2 votes
0 answers
276 views

Multi Step Form using React

I recently completed the Multi-Step Form Challenge on Frontend Mentor using React, and I'm eager to receive constructive feedback on my code. I've put in a lot of effort to make the form functional, ...
Ultimate's user avatar
  • 143
3 votes
1 answer
47 views

Makeshift CSS/HTML Only Text Variables

I made a template for a thing that displays the technical stats of 3D art. To make it quicker to fill in the numbers and because I can't use JS for this: I use custom properties and spans to make ...
Injaa's user avatar
  • 31
0 votes
1 answer
715 views

Simple custom time input

I wanted to make a simple time input and not the built-in one which is not consistent on browsers. I did the following: ...
pileup's user avatar
  • 421
2 votes
0 answers
64 views

My Electronics Project Blog

I have been wrapping up the markup for my personal electronics project website, https://www.salvagedcircuitry.com. I write about designing, repairing and producing electronics, along with some ...
commissioneranthony's user avatar
1 vote
1 answer
741 views

Minesweeper game with HTML & CSS & JavaScript

I made a Minesweeper game using HTML, CSS and JavaScript and would like to ask for advice and feedback specifically on the code. Here are some questions to review: Is the use of HTML semantics ...
Lucio Mazzini's user avatar
1 vote
1 answer
245 views

Calorie Calculator

I have developed a calorie-tracker webpage and would appreciate some feedback on it. I'm particularly interested in optimizing performance, improving code readability, and ensuring best practices are ...
Ultimate's user avatar
  • 143
12 votes
3 answers
1k views

Blog site generator written in shell script

Since I am not a fan of having using large web-frameworks and libraries just to setup a simple blog, I decided to write my own static blog site generator in pure shell script. The script uses pandoc, ...
766F6964's user avatar
  • 901
4 votes
1 answer
191 views

Hangman Game in HTML + CSS + JS

I recently developed a hangman game with HTML, CSS and JavaScript and I would like to get your feedback and tips to improve it. The goal of the game is to guess a secret word before 6 incorrect ...
Lucio Mazzini's user avatar
4 votes
1 answer
877 views

Rock, paper, scissors with HTML & CSS & JS

I started studying web development a few months ago and to practice my skills I decided to do the game of rock, paper, scissors. Here are some questions for review: Is the use of HTML semantics ...
Lucio Mazzini's user avatar
1 vote
1 answer
126 views

Form Validation Code Optimization in HTML and JavaScript"

I've been working on a simple form validation code in JavaScript coupled with an HTML form. The form asks for user's basic information, including name, email, country, gender, and skills. There's a ...
XMehdi01's user avatar
  • 523
6 votes
4 answers
744 views

HTML Editor - online HTML editor with real-time preview

Note Please review the new question and ignore the following. Overview HTML Editor is an online HTML editor with a minimalist approach. Edit your HTML, CSS, and JavaScript code and monitor the ...
Mori's user avatar
  • 35
3 votes
1 answer
192 views

Cargo truck travel management

With the code I'll provide my objective is to build a map (table) based on the trips the truckers should do for each week with all of the charge/discharge operations. I do not need a deep analysis, ...
davidsi02's user avatar
  • 231
4 votes
1 answer
110 views

Legend of Zelda: Breath of the Wild armor upgrade materials tracker

There are plenty of these online already but none of them quite fit what I wanted. I've been meaning to learn some more front-end stuff so I decided to make one myself. I know some JavaScript but ...
Captain Man's user avatar
2 votes
2 answers
197 views

Text input with currency icon in the center

I want to have a input element for currency where there is a currency icon always at the center (but it adjusts according to the number of digits) Something like: This is what I've come up with: <...
pileup's user avatar
  • 421
1 vote
0 answers
30 views

Dividing the page into 2 sections using flexbox

I want to have a layout for desktop screens, so mostly wide screens with 4:3 or 16:9 aspect ratio. The layout is made out of 2 sections: right and left. The left section takes 2/3 of the width and the ...
pileup's user avatar
  • 421
1 vote
2 answers
576 views

Split the Bill and calculate the Tip

I have created a Bill Splitter page that asks for the total bill amount, tip percentage, and the number of people. Then it displays the tip and the total amount (including the tip) each person has to ...
Ultimate's user avatar
  • 143
1 vote
0 answers
68 views

A JS banner animation using Greensock library

This is JS animation using Greensock's timeline feature as a learning assignment. I don't have a lot of experience with JS so not sure how to optimize it/clean it up. Here's HTML: ...
Ash's user avatar
  • 11
1 vote
1 answer
129 views

Sign Up Page - A mini Frontend Project

I have designed a a small frontend project, a sign-up page. It uses HTML, CSS, JavaScript and jQuery. Being a beginner to frontend development, I want to adapt to all the best practices. I am looking ...
Ultimate's user avatar
  • 143
-1 votes
1 answer
72 views

Bootstrap card component [closed]

I am using Bootstrap v5.3 to create a card layout, and I want it to be SEO-friendly (see this link for my SEO-friendly criteria). Below is my card component I wish to optimize and, if possible, to ...
Rusurano's user avatar
  • 109
3 votes
1 answer
282 views

Piet Mondrian Painting with HTML & CSS

a few weeks ago I started learning Flexbox and to practice my skills I did the following exercise: Piet Mondrian was a 20th century Dutch painter whose paintings emphasized simple geometric elements. ...
Lucio Mazzini's user avatar
0 votes
2 answers
115 views

How to write repetitive styled components in a cleaner way

I'm using Styled Components for styling and there are many icons defined in the project so in the style file we have this code: my-component.styles.ts ...
Leo Messi's user avatar
  • 181
1 vote
1 answer
146 views

First big project using vanilla js and pure css

If i can get a some reviews and suggestion on the code it would be highly appreciated. ( Please check the flowchart i've created first https://github.com/chetinn/Memory-Map-JS/blob/main/Memory%20Map%...
Chetinn's user avatar
  • 81
2 votes
1 answer
209 views

All-JavaScript WhatsApp button

The following code creates a WhatsApp button. How would you improve this code? ...
pointy's user avatar
  • 21
2 votes
1 answer
805 views

jQuery code to add / remove classes depending on the button clicked

What the code does What the JQuery code does is add / remove classes on div's elsewhere on the page, depending on the button clicked. Button 1 clicked → add class ...
Tristan's user avatar
  • 21
1 vote
0 answers
39 views

List view html/js interface

I created this list view component and am pretty happy with how it came out. Im looking for critique on what I could improve regarding code readability, best practices and perhaps performance, it ...
EricTalv's user avatar
  • 133

1
2 3 4 5
21