CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents including colors, layout, and fonts.
7
votes
1answer
91 views
Create a dynamic growing pyramid
In connection with a job application I have to progress the following task:
Create a dynamic growing pyramid. The structure has to be sorted
alphabetically (concerning the inserted values).
...
1
vote
0answers
11 views
How can I ensure my content on my website fits within size portion of the browser? [closed]
I'm building my own website for an assignment project for college and wondering if anyone could help me with this major issue I'm having.
When I open the html file of my website on my macbook which ...
-3
votes
0answers
13 views
Last div won't align within the navbar [closed]
I also had trouble with having div's display next to each other so I'm sure this is also going to be another silly situation. I'm currently developing the css in sass if your wondering why it looks ...
4
votes
0answers
20 views
Flexbox layout, columns, rows, multiple heights
I wanted everything to just snap into place, but found I had to add spacing to some of the items in order to line them up. It's still neater than trying to float things, and Grid isn't ready yet. But ...
7
votes
1answer
94 views
JavaScript Rain
I am looking for someone to help me improve this code. It works great but can sometimes slow my browser down a lot when raindrops are at a high amount.
...
3
votes
1answer
39 views
Updating an element's class based on the background color
I'm trying to build a generic thing that will update a fixed menu button's color to either 'black' or 'white' depending on which contrasts better with the background color. I've got it working, but I ...
6
votes
2answers
76 views
Putting a border around the selected list item
I have an HTML list. The goal is that:
When an li is clicked, the .my-list--selected class will be applied. And, since the ...
1
vote
1answer
38 views
JavaScript canvas bouncing objects
I have been playing with JavaScript for some time now and made a simple canvas animation. I tried to make my code clean but I would like to hear your opinions about it.
GitHub
...
5
votes
2answers
60 views
HTML + CSS Weblog
I'd like to get my code reviewed. What I have is a simple Weblog consisting of HTML and CSS. I'd like you to pinpoint mistakes (smelly code and so on) and how to improve my code. Opinionated responses ...
4
votes
1answer
96 views
HTML form using <table> or <div>
I read that, in HTML, it is better to display non-tabular data using the <div> tag instead of the <table> tag. I ...
5
votes
1answer
88 views
Single-page personal portfolio website
I am not sure if I am right by asking this here, but I have got a big site, but I feel like the code is very messy. I am using plain CSS to get things done. I don't want to add frameworks and stuff ...
1
vote
0answers
53 views
Generating hundreds of css clases
I have elements that are generated dynamically on the screen. I have bars and diamonds.
The problem is I have hundreds of different types of bars or diamonds that need to be rendered on the screen. ...
0
votes
0answers
20 views
Django project : Optimize HTML/CSS part
I'm developing my Django Civil Status project since 5 months up to now and I would like to make a break and optimize files, processes, ...
In order to give you an idea about my level :
Django : 10/...
0
votes
2answers
64 views
Simple SASS & BEM module for social feed widgets
I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity).
I am coding ...
1
vote
0answers
19 views
How to alternate colors with a countdown? [closed]
I need help with my file:
If you run my code once you enter in a number and a multiplication table pops up, you will see the first row/column is a yellow color, and then it alternates every other box ...
2
votes
1answer
23 views
Building a profile image with a fly-out menu in the header
Background
I am more formally trained in backend/server-side coding. Over my career I have often found myself thrown into front-end coding. I have spent the last year and a half learning JavaScript/...
1
vote
1answer
34 views
Positioning the left-right arrow buttons for a carousel
I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position ...
0
votes
0answers
28 views
Optimize CSS delivery to eliminate render-blocking CSS in above-the-fold content
Running pagespeed on my site to check for performance, and I would like to eliminate the render blocking css in my site. I have 6 css files. e.g, animate.min.css, font-awesome.css and so forth.
Doing ...
1
vote
0answers
64 views
Simple item dragging app in plain JavaScript
Lately, I've been working on this simple app, which lets you create custom circle and move it around with your cursor. I'm planning to expand it or incorporate it into another app. For now, I just ...
4
votes
0answers
44 views
Teaching myself JavaScript: Table Editor
I am trying to teach myself JavaScript. I've read some online tutorials and watched some Douglas Crockford videos and decided to dive right in.
I made a little table editor in JavaScript: there's ...
0
votes
2answers
48 views
Keep main content scrollable but not the body
For a template such as:
I'm using the following approach
Get the height of the viewport via javascript (Let's say 500px)
Deduct the header and footer height from it (Let's say header and footer are ...
1
vote
2answers
47 views
Composing a CSS transformation
I have a function that creates a css transform property string
based on some global variables. This string can be copied later by a user, so I would prefer to keep the output short.
This is my code:
...
1
vote
1answer
31 views
Display related images based on text name
Instead of "Black and Green" text, We are displaying "Black & Green" images with help of below code.
What we want is this concept should work for all colors, for that one solution is i need to ...
3
votes
1answer
98 views
My grade calculator with special weighting
My school has a special 65% formal 35% informal weighting, so I made something to find what your grade would be if you added or ...
0
votes
2answers
59 views
Changing placeholder text with CSS only
I am building one of those contact forms that are conversational. I have code that works but I don't think it is optimal (at the bottom). The form looks like:
The code is live on this codepen
The ...
3
votes
0answers
41 views
Inline Purchase Details
I'm not good at all with CSS, but I try! The following code works (demo here), but I'm sure that can be improved.
HTML:
...
11
votes
0answers
98 views
A vanilla JavaScript library for typesetting pseudocode in HTML documents
I have this plain JavaScript library for typesetting pseudocode in HTML documents. (See the documentation for details.) (See the GitHub repository - broken as of now.)
Source code
algotype.js
<...
2
votes
1answer
37 views
Extract rotation values from css string Javascript
I have the following function that takes out the rotation values from a css string and returns them as an array.
...
0
votes
3answers
96 views
Vanilla JS mouse events on dynamically created elements
In terms of performance, what is the best way to bind mouseover/mouseout event on dynamically created elements?
This is what I have but I'm not sure it is ok for performance:
...
4
votes
1answer
62 views
George Washington Carver tribute page
Yeah, it's another person wandering through from freeCodeCamp. Sorry.
That aside, I've got a tribute page to George Washington Carver, developed as a project for the above. I'm generally happy with ...
1
vote
1answer
77 views
Create bootstrap toolbar
I have created a bootstrap toolbar(navbar) which is working.
my question is, since this is my first time on this topic if there is a place for improvement ?
we are using some mock to enter some dummy ...
1
vote
1answer
48 views
Simple parallax using jQuery and CSS
I'm working on a website and am trying to implement a parallax effect on an image and title (possibly other elements too).
I'm trigering the effect with .scroll() ...
0
votes
0answers
20 views
Animated Ajax loader: Ascending air bubble
This week I've had an idea for an Ajax loader animation: An air bubble ascending in a glass tube.
Something like shown here: https://en.wikipedia.org/wiki/Spirit_level#/media/File:...
0
votes
2answers
185 views
Vue GitHub user lookup
I have made a small Vue app which fulfills the following user stories:
Given I make a search for an existing GitHub user, then:
The user's username is shown
The user's avatar is shown
The user's ...
1
vote
1answer
47 views
Bootstrap responsive layout
I'm creating a responsive page with bootstrap. I tested my code with my browser (Firefox and Chrome) and it works. Is the code clean or is there a better way to code it?
...
4
votes
1answer
71 views
Sometimes-sticky HTML element
I am working on a sticky element that on certain point when the user scrolls down it turns into a relative element so it's not a sticky element anymore, only when the user scrolls to the top and ...
1
vote
0answers
32 views
Modals that are centered vertically and horizontally within 80% of the browser size
I'm very new to website development. I would like to know if there is a much better, preferably with less codes, to write this modal.
Here is the full website assets if you need to look at how the ...
0
votes
0answers
30 views
jQuery slideshow with connected links and the ability to pause/resume when hovered - follow-up
The stated goal from Take 1:
I want a slideshow with three primary pieces of functionality:
Has text links that act as bullet-points and can jump directly to a slide when clicked.
Pauses ...
4
votes
1answer
83 views
jQuery responsive tabs to accordion
I wrote a script that adapts HTML tabs for different screen resolutions. On a small screen it's an Accordion and on wider ones they're Tabs. The script is for a production site, and I'm not so good in ...
3
votes
1answer
61 views
jQuery slideshow with connected links and the ability to pause/resume when hovered
Update: Here is Take 2.
I want a slideshow with three primary pieces of functionality:
Has text links that act as bullet-points and can jump directly to a slide when clicked.
Pauses when a slide or ...
1
vote
1answer
42 views
Control element with JavaScript and SASS: move options between two select-elements
Who has to use enterprise software like for example Microsoft Access knows that control: There a two select lists. The one list offers possible options. With a button you can add one or multiple ...
2
votes
2answers
80 views
Creating tiles with CSS
I am still a beginner in CSS and am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or if there are any improvements I need to make.
Is ...
4
votes
0answers
30 views
Polyfill for a legacy system: Attach “labels” to their corresponding checkboxes
I had to do some maintenance programming on a legacy software recently.
Most of the system's logic is done with Java and PL SQL.
The Java creates some special kind of XML. These XML is then ...
6
votes
2answers
243 views
Simple Business Card Website
I have been learning to code for nearly a month now. Any tips on how I can improve with indenting to help future readers?
Snippet
...
2
votes
1answer
60 views
Fitting multiple images in a given width
I was looking for a function which would take the overall width, max height, min height parameters as the input and fit multiple images in the given overall width adjusting their width.
For an ...
4
votes
1answer
34 views
Positioning a container next to its menu
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to ...
1
vote
0answers
66 views
jQuery plugin for dropdown with multiple select
This is my first time creating a jQuery plugin. As there are many tutorials for jQuery plugins, I'm not sure if my code correct.
This is my first draft for my plugin, it is working but I haven't ...
1
vote
1answer
27 views
Attach / detach navigation bar depending on scrolled position of the document
The idea is the following:
I have a large text with a header upon it and a navigation bar. The navigation bar is located between header and text.
If the user scrolls downwards then the header-part ...
0
votes
0answers
25 views
Media Queries Exercise
I am learning responsive design and media queries and am trying to simulate the problem as mentioned here.
I am solving a problem where it has to be responsive on devices with 320*470 (android phone) ...
1
vote
0answers
63 views
Gradual color change on scroll
I'm a beginner who wants to learn properly how to write code. The following code takes initial RGB values and gradually changes them (shade by shade) to targeted rgb values, scroll by scroll. The code ...
