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.

3
votes
0answers
17 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
35 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 ...
-2
votes
0answers
23 views

PHP - aria-current not display [on hold]

sorry about my English , my PHP knowledge is very poor... so , my problem.. I have a File , heard.php where have all PHP Code , here the PHP Code which I think making the problem... ...
0
votes
0answers
47 views

HTML CSS Javascript Index page

I think I've written myself in circles and am bodging elements to get them to work rather than understanding how the page and elements should work together. I've used contrasting colours in each of ...
1
vote
0answers
18 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
27 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, ...
0
votes
0answers
12 views

list items equi-distant from edge to edge

I've created an equi-distant list of items that span from edge to edge of their container's boundaries. The challenge is usually with the list items' left or right margins that restricts them ...
3
votes
1answer
50 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
42 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
62 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
57 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
27 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
39 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
63 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
367 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
35 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 ...
4
votes
2answers
66 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 keen ...
1
vote
1answer
38 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
64 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
80 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
221 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
337 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
25 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
176 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
187 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 ...
1
vote
2answers
111 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
41 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
113 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
36 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
65 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
69 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
60 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
49 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
406 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
364 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
156 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]...
2
votes
2answers
114 views

Fading HTML elements in and out after timed delays using jQuery

I recently launched my first website, and despite being very proud of how far I've come, I know that my code is more "I got it to work" than "It works the best that it can." I'd like some criticism, ...
7
votes
1answer
87 views

Mobile webpage for a refugee organization

For a school project, I've to create a website for a refugee foundation in Haarlem. But designing is one part, coding the actual design is a whole other world. The hamburger menu went pretty well and ...
2
votes
1answer
103 views

CSS/JS slider using just data-attributes and transform:translate

I needed to make a multi-page form, with slides, but without using too much js code like slick.js or the likes. So I tried to figure out how to make it really simple, but still cross-browser and ...
-1
votes
1answer
153 views

Simple HTML website with a JavaScript navigation bar (version 3)

This is a followup post to version 1, and version 2. The following code is a website with a nav-bar on it. It uses some simple JavaScript and CSS (with media-queries) to make it work: index.html: <...
3
votes
2answers
171 views

Platformer Game: Arrow Key Player Movement and Collision Detection

I am in the middle of working on this game and I still need to add some things (e.g. score, coin counters, etc.) but I really feel like there is way too much unneeded code. Could you help me simplify ...
3
votes
0answers
96 views

Pure-CSS slide viewer

Not long ago I designed a pure-CSS slide viewer. A demo is available here, while the source code can be retrieved here . I would like to receive opinions, suggestions, and critiques, especially about ...
0
votes
0answers
162 views

Fetching and displaying API data as an HTML list

I've written the following which works but it's the first API I have written and I just wanted to see the general opinion of what could be done differently in a better way so I can learn more and ...
2
votes
0answers
1k views

Pure CSS Responsive Show more / Show less

I have put together a CSS snippet to responsively display a Show more / Show less button if content of list cannot fit 1 line (1em) when you resize the window using pseudo-elements. Currently, I have ...
3
votes
0answers
55 views

Tabby Cat - simple react app

I am new to ReactJS as a fun alternative to the old boring JS and for practicing I tried to make a sort of "tabby cat" app similar to the browser extension one (tabbycats.club) where you get a new ...
5
votes
2answers
78 views

Web ToDo application in JavaScript, HTML, CSS

I would like to share with you the code from the application I just finished. It is a web application written in HTML, CSS, JavaScript and jQuery. It uses ...
2
votes
0answers
74 views

A simple “couple creator”

I just made this simple generator as a side-project to one big project I'm working on (demo on github pages here) and would like some opinions, feedback or suggestions on how to improve it. I hope you ...