-
How to add white space around a web page using CSS?
Let’s say you have a a simple web page like so: Now, to add some white space around this web page, you can use these two methods: Method 1 Say, you want to add 50px space on the left an right side : In the above code, the first parameter ‘0’ represents top-bottom, and the…
-
How to make images responsive using CSS
To make an image responsive, all you need to do is to set the image width in terms of percentage rather than pixels. Let me demonstrate this with an example : Say, we have an image called image_file.jpg in the HTML file. All we need is to go to the CSS file and set the…
-
How to Scale Image without distorting the aspect ratio using CSS
Here’s a simple web page with a dog photo : Say the image dog_photo.jpg is huge, around 4500 X 2200 pixels in size, and falls off the container. You just have to change the height or width to a smaller size. Remember, height OR width, not both of them. If you change both, the image…
-
Rock-Paper-Scissors Game Logic in JavaScript
This is the total breakdown of the Rock-Paper-Scissors Game Logic in JavaScript. Here’s the full code first. Afterwards I’ll break down as to how it all works behind the scenes. Here, the code runs from top to bottom and executes accordingly. Part 1 Let’s now break down the first part of the game. The first…
-
Flat button with rounded corners – CSS
Simply do this : In order to make the button appear flat rather than the default look (which is a bit 2D’ish) first specify a background-color to it and then specify the CSS border property to zero. Note that if you specify the border : 0 without the background-color, the code won’t work as expected.…
-
What is a Constructor Function in JavaScript
A constructor function is a type of function which creates a new object in JavaScript. Unlike other functions, the name given to a constructor function starts with capital letter, i.e., we have to use the pascal notation in its naming convention. Also this keyword is used to set the properties in constructor functions. Let’s explain…
-
Horizontally align HTML header elements using CSS
While there are various different ways to horizontally align items using CSS, the best way forward is to use the flexbox layout. In order to use CSS flexbox property efficiently, you have to use elements or tags inside of other elements or tags. The flex property works only if you have elements or tags like…
-
Remove Bullet Points and Underline – CSS
You can easily remove bullets from unordered or ordered lists and underlines from anchor tags in HTML using certain CSS rules. Example Let’s see how to achieve this with an example : In the above code snippet, we’ve three links inside of anchor tags. By default you’ll have underlines beneath them and bullet points before…
-
Smallest Integer in an Array – JavaScript
To find the smallest integer in an array, we can use various methods. Firstly, let’s use the Math.min() method: Using reduce() method: Let’s break down Example 2 now using some visuals for you to understand: Other ways to do this:
-
What is a Descendant Combinator in CSS?
Descendant combinator is a parent-and-child selector in CSS. In this, a child element will be selected only when there’s a parent element present. Another way to put it is that it will select a child element only if it’s nested inside a parent (or ancestor) element, no matter how deep down the nested element is.…
