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.
1,031
questions
-6
votes
0
answers
63
views
Can someone please have a look on my code - one component [closed]
I'm a self taught dev and just got a take home exercise for my technical interview. It is just one component build in React, I've attached picture of how it should look - mine looks identical. It ...
- 1
2
votes
0
answers
27
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 ...
- 21
0
votes
0
answers
36
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:
...
- 339
2
votes
0
answers
41
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 ...
1
vote
1
answer
153
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 ...
1
vote
1
answer
159
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 ...
- 113
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, ...
- 901
4
votes
1
answer
166
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 ...
4
votes
1
answer
212
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 ...
1
vote
1
answer
59
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 ...
- 397
0
votes
0
answers
42
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 ...
- 101
6
votes
4
answers
617
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 ...
- 95
3
votes
1
answer
150
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, ...
- 229
2
votes
1
answer
81
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 ...
- 695
1
vote
1
answer
70
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:
<...
- 339
1
vote
0
answers
22
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 ...
- 339
1
vote
2
answers
337
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 ...
- 113
1
vote
0
answers
38
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:
...
- 11
1
vote
1
answer
113
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 ...
- 113
-1
votes
1
answer
49
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 ...
- 109
3
votes
1
answer
178
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.
...
0
votes
2
answers
93
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
...
- 181
1
vote
1
answer
116
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%...
- 81
1
vote
1
answer
165
views
All-JavaScript WhatsApp button
The following code creates a WhatsApp button.
How would you improve this code?
...
- 11
2
votes
1
answer
267
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 ...
- 21
0
votes
0
answers
41
views
react custom carousel optimisation issues
I have trouble re-creating the www.youtube.com scrollable tabs in a different scenario: https://i.stack.imgur.com/bGgJF.png
It seems that the drag of letters is unoptimised, and can scroll out of ...
- 11
1
vote
0
answers
32
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
...
- 133
3
votes
1
answer
207
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 ...
- 69
3
votes
1
answer
439
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 ...
- 143
1
vote
1
answer
307
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 ...
- 51
1
vote
2
answers
3k
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 ...
- 63
1
vote
0
answers
231
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 ...
- 33
2
votes
0
answers
71
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 ...
- 21
2
votes
1
answer
193
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-...
- 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
...
- 45
1
vote
1
answer
54
views
Sidenav menu that appears when click on button
I have a side menu that appears when click on button, which works fine. But now I want to clean up my code, shorten it if possible. I was wondering if there is an easier and cleaner way to achieve the ...
- 11
1
vote
1
answer
542
views
Add and delete books into this bookshelf vanilla javascript project
In this project I was supposed to add and delete books by author and title by pressing the submit and delete button.
There is a video that illustrates how my project works.
I did it using two ...
- 13
7
votes
2
answers
521
views
First JavaScript project: number guessing game
I wanted to share my first experience with JavaScript. I've been taking JS courses for the past 2 months and finally got the first chance to code a small guess-my-number project.
(Everything is ...
- 81
1
vote
1
answer
153
views
First Web App - Pig Game
I'm learning web development with JavaScript, HTML, and CSS and have just created my first application, a Pig Game. The app works well, however, I think my CSS is a bit over complicated and that the ...
- 11
1
vote
0
answers
49
views
This code allows people to navigate through some artworks
I am new to coding and I have finished a code for a project I have given myself. Everything is functioning the way I want but I was wondering if maybe I could have done some things differently in a ...
- 11
1
vote
1
answer
440
views
Coding a hamburger menu with JS, CSS & HTML
I've created a menu that allows you to display the list when clicking on the menu icon. I wonder whether this can be improved somehow - can anyone help improve this?
Also, initially I created it with ...
- 537
0
votes
1
answer
37
views
My code is meant to be an accessible website with dynamic sizing. Could you analyze my page structure for any opportunities to optimize it?
Been learning front-end web development on the side on and off for the past few months. I don't really have any mentors to reach out to to look at my code so I thought I'd see if anyone here was ...
- 1
3
votes
2
answers
203
views
Prey Throbber using CSS Animation
I'm migrating to web development and wanted to learn CSS animations better. I was playing Prey last night and realized the "throbber" on the elevator screen would be interesting to ...
- 16.2k
1
vote
1
answer
114
views
Show progress bar for different states
I have this working code which shows the progress bar based on different states ("not-started", "progressing" and "done"). Each state will have its own class.
I notice it ...
- 955
1
vote
2
answers
235
views
Default CSS styling to use with new projects
I have a set of default styles I use with new projects and want to know whether there are any issues or imperfections with them. Can anyone see anything that could be detrimental or bad in any way?
Be ...
- 537
1
vote
0
answers
60
views
An easy way to switch styles between multiple elements in Javascript?
I have the following code to get data from NASA.api and create gallery from the data received from the sever.
...
- 121
1
vote
1
answer
70
views
An alternative way for using html tags to simulate simple firework effect
I have the following code to simulate a firework (of course a very bad and rough one)
...
- 121
1
vote
0
answers
85
views
Mobile only, all JavaScript, all textual, call now button
I have created the following mobile only, all textual (no image files and also no non-UTF8-characters), all JavaScript call now button which I have tested and works.
...
- 11
2
votes
2
answers
166
views
Optimize PHP code for Wordpress shortcode (Star-Rating)
I am using WP with the Avada theme and the built in Star Rating element as well as ACF Pro.
Unfortunately I found out that the Star-Rating element adds a rating scheme to the footer of the website ...
- 21
0
votes
1
answer
242
views
Updating active cards dynamically added by API
I am making a website where you can search through all the countries in the world. Once you have found a country you want more detail about you should be able to click and view a detailed page with ...
- 33