-
Basics of JavaScript Modules using Import and Export keywords
A Brief Explanation Modules are actually certain independent pieces of code syntax which can be used and reused in certain other places, when required. The reason we use modules is because they help to segregate code segments into different files, folders or pages. You don’t really need to write one single long page of JavaScript…
-
How to Setup a React Project Development Environment for the First Time
Before setting up a React App or project, first you’ll need to see whether NodeJS is installed on your system. NodeJS is required to be installed for having Production-Ready apps so that you don’t run into any trouble from here on. So, in order to see whether Node is installed on our system, type this…
-
Git and GitHub : Installation and Setup in Linux Environment
Brief Introduction Git is an open-source version control system which is very popular in the community. GitHub on the other end is like the online version of Git. Now they both are similar, just that Git is more ‘command-line type’ and installs locally on your PC, and GitHub has a GUI or Graphic User Interface…
-
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…