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
2 votes
0 answers
31 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 ...
user avatar
2 votes
1 answer
41 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-...
user avatar
  • 329
1 vote
0 answers
16 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 ...
user avatar
1 vote
1 answer
24 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 ...
user avatar
  • 11
1 vote
1 answer
92 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 ...
user avatar
7 votes
2 answers
106 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 ...
user avatar
  • 71
1 vote
1 answer
62 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 ...
user avatar
  • 11
1 vote
0 answers
40 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 ...
user avatar
  • 11
0 votes
1 answer
71 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 ...
user avatar
0 votes
1 answer
35 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 ...
user avatar
  • 1
3 votes
2 answers
148 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 ...
user avatar
1 vote
1 answer
80 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 ...
user avatar
1 vote
2 answers
85 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 ...
user avatar
1 vote
0 answers
44 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. ...
user avatar
  • 121
1 vote
1 answer
60 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) ...
user avatar
  • 121
1 vote
0 answers
81 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. ...
user avatar
2 votes
2 answers
90 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 ...
user avatar
  • 21
0 votes
1 answer
55 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 ...
user avatar
6 votes
1 answer
153 views

Small Bayes Calculator to learn Javascript

I am trying to learn UI design so I threw together a Bayes Calculator (i.e. calculate the posterior probability of being sick given a positive/negative test result using the specificity, sensitivity ...
user avatar
  • 163
1 vote
0 answers
46 views

Drag-and-drop file upload component

I've tried to make a custom file upload input. The goal was to just have a nicer looking file input compared to its unaltered version. One thing I don't like is the CSS. I don't like altering the ...
user avatar
0 votes
0 answers
108 views

Mobile-friendly fixed background images, alternative to "background-attachment: fixed"

My goal is to create a mobile-friendly fixed background image effect, however "background-attachment: fixed" seems to be problematic on mobile devices. Could you please review my ...
user avatar
  • 1
3 votes
0 answers
41 views

Sneakers store UI challenge

So I have been coding for just under 6 months now. I've made many projects but I don't have a clue if I am writing good code. So I did this frontendmentor challenge which includes HTML CSS and JS. It'...
user avatar
1 vote
0 answers
48 views

Better way to make an hamburger menu responsive

I'm trying to make a responsive hamburger menu for a project that has been assigned to me. I've (kinda) managed to do it, but I don't actually know if the way I reached it is the proper one. What I'm ...
user avatar
2 votes
1 answer
26 views

Are there any redundant divs in my first proper webpage? Or any way to group classes in my CSS file

This is my first full formatted webpage done while doing the odin project. Is there any redundant divs? Can I reduce my css file by grouping some classes? And how to give styles to a button under a ...
user avatar
2 votes
2 answers
302 views

Sorting table rows visually with animation while keeping them intact in the DOM

I have a table which i want to sort the rows visually according to a column while the rows remain intact in the DOM structure. So nodes aren't moving in the DOM or getting replaced with eachother at ...
user avatar
  • 777
0 votes
0 answers
40 views

Adding more fields to a Questionnaire in a CRUD system

Background on Project When a customer orders a machine, I have to do something called a telephone site survey, which involves asking them questions about their site making sure everything is okay ...
user avatar
1 vote
0 answers
36 views

A simple recipe page in HTML, SASS and JS

I've been learning how to design responsive webpages. I got done the basics and can create code that closely resembles the design, but I was wondering what are the best practices in web development ...
user avatar
  • 111
1 vote
0 answers
69 views

Split columns moving in the opposite direction when scrolled - in a continuous loop

I've seen something similar and have been trying to refactor the JS. I have two columns of content, which when scrolled move in opposite directions. This should also loop continuously. The ...
user avatar
  • 11
3 votes
2 answers
81 views

Grade Calculator Tool Code Improvement

I am just looking for code improvements as I believe that it is done, and would like to see it expanded. I mainly want code improvements to make it more efficient, but any and all constructive ...
user avatar
2 votes
0 answers
72 views

Carousel in react

I implemented this carousel component in react: ...
user avatar
  • 21
1 vote
0 answers
26 views

Suggestions on how to upgrade HTML and CSS making a hamburger icon that transitions to "X" in the code below?

I'm interested in how I can improve my HTML and CSS? I didn't yet learn JS, even though I used it for onclick function, so I'm not currently interested in how to improve the JS in this code. I was ...
user avatar
2 votes
0 answers
58 views

Simple Markdown Blog

this is my first real website I created after learning about web development. It's amazing to me that anyone would spare their free time to code review strangers' code. So thank you in advance. I'd ...
user avatar
2 votes
0 answers
43 views

Creation of a header file

So I've created this Header to include in all my PHP files, and think everything works as it should for now. But since it's the first time I'm creating one, I wanted to have it reviewed just to learn ...
user avatar
0 votes
1 answer
89 views

Building user friendly inputs on a mobile device

I am working on an e-commerce website. The home page has 2 inputs: Looking for and Location. The user would enter their desired product and location and click on Search as shown below: The first ...
user avatar
1 vote
0 answers
16 views

Here's my attempt at a Volumetric Weight Calculator (in cm). How did I do?

So, I've written this small calculator for computing the volumetric weight of a parcel. I've been trying to kick some bad habits to the kerb lately so I was wondering if I could get a code review. ...
user avatar
  • 111
0 votes
0 answers
20 views

Weather status on dashboard design

So I've made a dashboard, and I have alot of colors / icons on this page. One of the things I wanted to get some others view on was the design I've choosen. I use bootstrap background colors: ...
user avatar
0 votes
0 answers
18 views

Simple flex-based design for automotive sales platform in HTML5

This is my code for a simple used car sales platform, with flex used for the DIVs: https://jsfiddle.net/m56npe32/ I am looking for constructive criticism on how to improve the design, as the entire ...
user avatar
0 votes
0 answers
20 views

Display product summary for an e-commerce website

I am working on an e-commerce website. I want to display products in the search result. Here is a subset of what I am doing to display the images. I am using flex ...
user avatar
2 votes
2 answers
599 views

A circle in a circle

Just experimenting some things with css, I made a centered circle div (inner) which is inside a circle div (outer). ...
user avatar
  • 185
3 votes
1 answer
68 views

Simple Vanilla JS Todo app

I'm a Kotlin engineer looking to get into web dev. I thought it'd be fun to make a Todo app w/o help from the internet. Just looking for some critiques and feedback, as I'm new-ish to the language. ...
user avatar
-1 votes
1 answer
34 views

PHP processed, HTML-CSS, CMS-agnostic, contact now panel

I develop a CMS-agnostic PHP formatted HTML-CSS "contact now" panel, sticky in the bottom of a website screen. The code is tested and works as can be seen from the following image. I ask a ...
user avatar
4 votes
3 answers
111 views

Creating a binary word search 🔍

I recently crafted a binary word search puzzle using HTML, CSS and JavaScript to dynamically build grids within a grid: ...
user avatar
0 votes
0 answers
41 views

Calculator with vanilla procedural JavaScript

I am doing a project for a calculator in JavaScript. Here is the project GitHub page: https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Calculator-App.md Demo: https://...
user avatar
  • 21
0 votes
0 answers
31 views

React component to display emojis from different sources

I'm looking forward for any feedback to help improve in any way this React component that will render an emoji from GitHub, Twitter or OpenEmoji: ...
user avatar
6 votes
2 answers
115 views

Calculator with JavaScript

I've just created a fully working calculator for my portfolio, and I would like to get a code review. Does that code looks good, or maybe I should refactor it? Is it good enough to be a part of a ...
user avatar
  • 63
0 votes
0 answers
19 views

Skill section with flexbox and javascript. Clicking on certain skill will change the summary

It's the first thing I've created using flexbox and Javascript so I feel like my code could probably improve a lot. Any feedback would be greatly appreciated! https://codepen.io/dee91/pen/jOwbQmd html:...
user avatar
2 votes
1 answer
266 views

Create random wave forms using JavaScript and CSS

Desired output: Animate the wave forms, but use less resources. Any bugs: There are no bugs that I know of. I tied searching google for "use less setIntervals in my project" and found this ...
user avatar
  • 23
1 vote
0 answers
8 views

Reusable/extensible deisgn of toggle to be used for switching dark mode on/off

I though of defining the following module that I could use to govern the dark mode on/off on a website. Probably I would use it only for that in the whole page, but in the case I don't (i.e. I end up ...
user avatar
  • 507
1 vote
1 answer
263 views

Best way to make a scroll top/bottom button

So I've made a button in the right-bottom corner of my HTML-page, but I was wondering since it's the first time I've made this, if there is another better way to do this, or if you guys can see ...
user avatar
0 votes
1 answer
94 views

HTML table with repeatable rows and live-calculated column totals with row grouping indication

I created a quick "demonstration of proposal behavior" tool for my post on MSO: A proposal to put ALL answerers on a path to curating better content. Because I have never asked for a review ...
user avatar
  • 7,721

1
2 3 4 5
22