-
The concept of position : absolute and position : relative in CSS
Let me first type in the basic HTML and CSS files like so, and then I’ll explain this in detail (you’ll need to follow along to understand it fully well) : So, we’ve created three basic boxes (boxA, boxB & boxC) one inside the other, as parent and child. Render the code and observe the…
-
How to use quotes within a string in JavaScript
The best thing to do in order to use quotes within a string in JavaScript is to use backticks (` `) instead of single or double quotes. Let’s see this with an example: Another way is to use the backward slash (\) in the following way:
-
justify-content: center vs align-items: center in CSS
In CSS, justify-content: center aligns items (such as text, divs or boxes) horizontally and align-items: center aligns things vertically. Both these CSS properties can be used by activating the display: flex property first. These properties applies to the parent container. Here are the illustrations to explain the same :
-
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…
