Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

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
vote
0answers
19 views

CSS and React.js for a basic navigation drawer

I am trying to optimize my navigation drawer code. I have tried and followed the BEM naming convention for my CSS although I would like it reviewed with respect to the best practices being followed. ...
-3
votes
0answers
24 views

Architecture Website Layout - Rate my code [on hold]

I'm a software developer trying to level up my front end skills. I used to be quite decent at it but haven't worked with front end for a long time so my skills are a bit rusty. As an exercise I'm ...
4
votes
1answer
24 views

Position logo in middle of nav

I've recently migrated away from floats and have started using flexbox to build my grids. My navigation has 4 menu items. I'd like my logo to sit in the middle of these. To maintain a good page ...
1
vote
0answers
16 views

Sparking animation for Button

I just came through a GitHub repo, which has an amazing animation for Button in Android. So, I though why not make that for web buttons too. And I started ...
3
votes
1answer
25 views

Numbered lines list

I tried my hand at making a numbered line list. I would like some feedback on my use of CSS and if this approach (using a numbered list) is considered a good solution. ...
4
votes
1answer
48 views

Basic static HTML page with applied accessibility

I'm following the project found here. I'm sure I forced some flexboxes where they didn't need to be. Tried to apply some accessibility topics that were discussed in earlier lessons. Overall its a very ...
0
votes
0answers
25 views

Table th/td absolute positioning: 1px dislocation

Table th/td absolute positioning: 1px dislocation when the table is scrolling, the last column is fixed. The last column of cells use absolute positioning. Firefox / Edge / IE, have a 1px ...
1
vote
0answers
50 views

ReactJS Typewriting animation

One of the dream idea to build typewriting in ReactJS. The code seems to be working, still there are something looks not that great in the code 😔 Looking for better solution (best practice) in the ...
2
votes
1answer
62 views

CSS Grid and Flexbox use

I have coded up the layout using the following Dribbble shot: https://dribbble.com/shots/5382121-Nike-Future To help get better at layouts. This is using a mix of Grid and Flexbox, but an area ...
1
vote
1answer
143 views

jQuery Slideshow with pagination

The code below is for a slideshow that shows a slide with class active, pre-loads a slide with class next, and holds the slide with class last in the background. My biggest issue with this is there ...
1
vote
2answers
120 views

Simple menu with descriptions

If one menu-item is clicked then the description with the same data-filter attribute should be shown. I added a class to the description elements to associate each one with the affiliated menu item. ...
2
votes
1answer
81 views

Display and search through a JSON's items in Vue.js

I have put together this small application that displays a "Users" JSON in an HTML5 table. I use Bootstrap 3, Axios and Vue.js 2 for this purpose. Here is the code: ...
1
vote
1answer
63 views

Horizontal mega menu with flexbox

I created a mega menu using flexbox, and because I'm not really into CSS, a review would be helpful. I know it would be better to avoid the third ul-level but this is not possible, because the HTML ...
5
votes
1answer
93 views

Simple way to show popup

After small research I found following informations: In this closed question I found some solution which not works good when pop-up has height bigger than screen (and some jquery solution). Here is ...
5
votes
0answers
37 views

Ultra-simple, automatic, non-float, 1-4 column, grid system

Has everyone moved over to CSS Grid and/or Flexbox? If not, I've maintained and evolved this system over a fair amount of time, the concept was derived originally, I believe, from Mary Lou, although I ...
2
votes
0answers
65 views

Event Calendar in JS, CSS, and HTML

I repeated a lot of code here and I'm trying to use more ES6 but I'm not sure where I should have used it in my code. I'd appreciate any input on where I could improve. GitHub ...
1
vote
1answer
31 views

SYNTAX QUERY - HTML and CSS responsive navigation bar using FlexBox

I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about ...
1
vote
1answer
34 views

Vue.js Stoplight app - Dynamically changing classes on elements

I recently started delving into Vue.js, and decided to try my hand at some custom class/style bindings, so I made a small app that's supposed to cycle through each "light" of a stoplight (red, yellow, ...
3
votes
1answer
77 views

My first JS program - Tic Tac Toe game

I just completed some beginner web-dev courses (cs:50 and such) and wanted to try my skills. The CSS centering - ugh I just gave up on that, I wanted to make it responsive and the letters centered ...
2
votes
1answer
75 views

Image carousel with jQuery 3.3.1

I'm trying to make a carousel with jQuery and I want to know, how to simplify the code further? so... this is my code: ...
1
vote
1answer
84 views

Unidirectional Bootstrap 3 carousel

I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions. I want to prevent slide transitions from overlapping when the bullets are clicked in random order and ...
0
votes
1answer
69 views

Calculator application by an HTML beginner

I've created a Calculator using HTML, CSS and core JS. I just need some suggestions or ...
2
votes
1answer
31 views

Rendering three vertical dots using SCSS

I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the ...
2
votes
1answer
46 views

CSV-simplified: A small open source project

I'm working on a small open source project called CSV-simplified for a course I'm taking (Bloc), and I'm looking for some feedback and potential collaborators. I don't actually know an programmers, so ...
2
votes
0answers
204 views

FCC: Product Landing Page - HTML & CSS only

I have created a product landing page for a freeCodeCamp responsive web design project which requires me to create a "Product Landing Page". Requirements to keep in mind: ...
4
votes
2answers
375 views

Simple to-do application by an HTML beginner

I have made a simple To-Do Application just to get started with HTML/CSS/JavaScript and here is what I came up with. I have done what I can do at my best but still, I need some suggestions on my code, ...
2
votes
1answer
41 views

Plain Page Flip Effect

I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book. It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't ...
5
votes
3answers
99 views

JavaScript Snake: First app

I just finished my first full app in JavaScript and I'm hoping to get some feedback. I guess I'm looking for overall design advice, use of classes and functions etc. but anything is fair game so I am ...
1
vote
1answer
42 views

Web page's semantic elements

I request a review of the following web page, especially on the use of semantic elements: https://jsfiddle.net/SSteven/qt9d2sfw/ The HTML5 code is: ...
2
votes
2answers
89 views

Small Javascript elevator simulation

I created a small Javascript elevator simulation that works as expected, however, being pretty new to Javascript I can t help but feel like this code in unnecessarily complex. Honestly any feedback ...
2
votes
1answer
153 views

jQuery accordion to serve as table of contents

I'm putting together a video website for our company, with a working accordion. It works, but it using the same class name for each section creates issues with the expanding and collapsing. I found ...
8
votes
2answers
235 views

PHP Chess Version 2

For programming practice, I created a chess program in PHP (my most comfortable language). The program reads a FEN (a string with the location of all the pieces on the board) from the URL, generates ...
3
votes
1answer
417 views

jQuery image carousel

I have made this custom image carousel, using HTML5, jQuery and CSS. My aim was to make it really lightweight but with (just) enough features: "bullets", auto-advance, responsiveness. ...
2
votes
1answer
31 views

IOT Javascript GUI/Hub - Displaying Incoming Data

A server sends JSON to my webpage via a socket and the webpage creates or updates a "card" which displays the information from the JSON data. It's a one-way/read-only system. Flow is: Thing sends ...
3
votes
1answer
211 views

JavaScript responsive menu (dropdown/dropup)

I have the following front-end code for a responsive navigation menu which I thought using in my WordPress website. Clicking the .burger element should cause ...
1
vote
0answers
337 views

‘Memory-Game' in JavaScript

Can you please review my code for reusability, clarity, readability and any bad stuff or bad practices? Brief Description:- Its a card memory-game, when you click two cards, it sees if they are same ...
2
votes
2answers
126 views

JavaScript calculator that only adds numbers

This is a JavaScript calculator that uses JQuery and bootstrap. How can I improve the CSS, HTML, JS and the general design? ...
2
votes
2answers
50 views

Dim Hero & Add Background to Nav on scroll

I have followed a tutorial that initially was for adding a 'sticky' nav. I adapted this slightly so it adds a background to the Nav when the page scroll reaches the top-third point of the hero area. ...
1
vote
1answer
58 views

Continuously update position of div with click event

I am trying to continuously get the position of a div on screen and update the new position each time a "click" event listener is clicked. At the moment my code works but feels redundant and could be ...
1
vote
0answers
115 views

Trick circumvents [position: sticky] restriction to parent

Check out the live example: https://verifuse.github.io position: sticky; elements are sticky within the bounding box of their direct parent containers. I wanted to ...
1
vote
0answers
51 views

Slider that increased center slide width. (Slider plugin suggestions)

I wanted to create slider when it slide center slide width must have incresed and the two slide next to it stay on normal slide. I have tried one using slick slider. Here is the code pen link that I ...
4
votes
3answers
64 views

Breaking group of items into rows then ensure consistent height of each row element

I'm working on a product category page where the product images have inconsistent heights so I've been asked to improve the page appearance without changing the images. The page contains x number of ...
3
votes
2answers
67 views

Changing the width of a centered progress bar

I am making a game in which the player has a certain amount of available boost. To show this, I am using a blue bar inside a black frame. The bar can grow and shrink at different rates as available ...
3
votes
1answer
135 views

CSS Grid and Bootstrap 4

First time posting in Code Review! I have started learning front-end development to complement my UI design skillset and am starting with CSS Grid and bootstrap. Have a look at the snippets. I think ...
3
votes
1answer
67 views

JavaScript code to add buttons and slowly remove them

My javascript code is working, however i am seeking suggestions on how I can go about improving my existing code for reusability and testability. The code is pretty straight forward, I have three ...
3
votes
1answer
55 views

HTML+CSS Template: Search Results List

I'm trying to develop some templates for common HTML + CSS tasks I've been dealing with. One of which is a general search results list either from client- or server-side. So far I'm using the ...
3
votes
0answers
504 views

React native circular progress view

This is a functional component that I have developed in React Native for creating a circular progress view. The code does not use any external libraries, just pure CSS. Article that I wrote while ...
3
votes
1answer
45 views

Try My Advertising Website

I was wondering about my HTML & CSS. I'll just create a list as to what concerns I have: Does my HTML & CSS follow proper coding standards and conventions? Am I making proper use of semantic ...
2
votes
0answers
491 views

React Animation example - accordion panel

I decided to study an animation in React and created a simple example of an collapsible panel using CSSTransitionGroup. To make an animated collapsible, I added max-height: 0, overflow: hidden and a ...
13
votes
1answer
159 views

Make Stack Overflow Design Great Again

I've been annoyed with the new side bar layout, so I chose to hide it. But then, the useful links were gone, so I decided to make this little user script in Tampermonkey to bring them back to [roughly]...