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
1 answer
69 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
131 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
54 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
42 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
47 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
31 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
34 views

Colorproof dust effect

A combination of various css transitions (background-color, box-shadow, opacity, ...
user avatar
1 vote
0 answers
48 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
16 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
169 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
41 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
19 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
183 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
144 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
126 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
-1 votes
0 answers
71 views

Html and CSS editor that runs and saves code

I decided to create this project to put my JS skills to the test mostly, and it works well. It is a HTML and CSS editor that saves your code to localstorage and ...
HTMLNerd_1's user avatar
2 votes
0 answers
237 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
46 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
519 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
57 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
644 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
242 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
189 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
730 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
125 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
  • 459
0 votes
0 answers
77 views

SingleDivUI: Simple Chart library with CSS

I have created a SingleDivUI chart library with CSS. Here the idea is to create the UI components with a single div element by CSS. To explore the power of CSS and to bring some innovative thoughts I ...
Soundar's user avatar
  • 101
6 votes
4 answers
691 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
  • 95
3 votes
1 answer
181 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
  • 229
4 votes
1 answer
105 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
148 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
29 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
554 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
67 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
66 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
274 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
108 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
139 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
201 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
716 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
38 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
3 votes
1 answer
231 views

Responsive Navigation with hamburger menu

This script creates a hamburger menu when the window is resized. It will also create a sticky navigation when the window is scrolled down, which will also create a hamburger menu when the window is ...
DumbMathBoy's user avatar
3 votes
1 answer
661 views

Javascript : Etch-a-sketch

I am a beginner in javascript and I have made this project as a part of The odin project. Feautres: Draw by hovering the mouse on grid Erase Clear the entire sketch at once Reset the grid size I ...
Samir's user avatar
  • 143
1 vote
1 answer
403 views

Loading Filtering and Displaying Top 10 Countries Data

I've created a small project that fetches data from a 'countries' API and works around with it to display the 'top 10 most populated countries' & 'top 10 most spoken languages'. I kindly wish if ...
noharm's user avatar
  • 51
1 vote
2 answers
4k views

JS page loading without refresh

As an exercise, I found a basic way of updating pages without refreshing, partially mimicking the behaviour of SPAs and routing libraries such as React Router. I was not looking for something as ...
Ichi's user avatar
  • 93
1 vote
0 answers
378 views

Optimally change the classname of an html element dynamically in react/typescript?

I am currently building a custom dynamic tab component. In my component, I am dynamically creating a class name which I use to determine which tab is active and which is not. It seems to be working ...
Kale 's user avatar
  • 33
2 votes
0 answers
86 views

Dropdown menu that visually includes the toggle button in it

I'm a beginner in front-end development and tried to make a dropdown menu that includes the toggle button within the menu, instead of opening a separate menu besides the toggle button. I went with ...
lumetorm's user avatar
2 votes
1 answer
278 views

CSS gradient text that fades in and out

Here I have a basic text gradient effect which fades into a gradient animation, and fades out of the animation on hover in/out. Without the fade in, it looks janky and jolty. But because of the fade-...
Lance's user avatar
  • 351
1 vote
0 answers
23 views

Taildwindcss dark mode toggle using javascript object

I'm learning javascript objects and ES6 and made this dark mode toggle for TailwindCSS. I'd like to know what can I improve with this code below ...
shrayder's user avatar

1
2 3 4 5
21