DEV Community: ABHAY TIWARI

Grid Layout in a nutshell

ABHAY TIWARI — Sun, 07 Aug 2022 05:30:00 +0000

what is a grid ?
a grid is a 2-d structure of columns and rows . specifically a CSS grid consists of different blocks of html arranged in rows and columns. for example

<div class="grid-example">
        <div class="grid-element-1">1</div>
        <div class="grid-element-2">2</div>
        <div class="grid-element-3">3</div>
        <div class="grid-element-4">4</div>
        <div class="grid-element-5">5</div>
        <div class="grid-element-6">6</div>
    </div>

here in the above html code grid-example is the name of the container class and grid-element-(1,2,3,4,5,6) are the elements of grid container. to arrange these element in the form of row and column there are plenty of properties used we can use them according to the layout of the page.
for example by using the basic grid template property I am going to generate a grid of 3 columns and 2 rows from the above html code.

       .grid-element-1{
            background-color: black;
            color: white;
        }
        .grid-element-2{
            background-color: white;
            color: black;
        }
        .grid-element-3{
            background-color: black;
            color: white;
        }
        .grid-element-4{
            background-color: white;
            color: black;
        }
        .grid-element-5{
            background-color: black;
            color: white;
        }
        .grid-element-6{
            background-color: white;
            color: black;
        }

the above css generate the following pattern

now I am making this containers display grid see what happens . nothing much happens until we use the properties grid-template-columns.

.grid-example{
            display: grid;
            grid-template-columns: 100px 100px 100px;
        }

you can see a 2*3 grid is generated having each block of 100px from the above code when it is added to the CSS file or entered in style tag .
grid-template-column is a property of the grid that specifies tracks in a grid columns how many and how much is their length is specified with grid-template-columns. similarly is the property of grid-template-rows that specifies tracks in row and their length .

Properties associated with grid

grid-tempelate-column
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
that is it defines the no. of columns in a grid and the size of each column in a grid . each individual column is a track on which html markup for different block is developed hence they are called tracks. for example

grid-template-columns: 160px 160px;

the above declaration of grid property generates two blocks of 160px each .
grid-template-columns: 1fr 60px;
the above declaration is same as the one which we used before it also generates the tracks in same way that is 2 in number but length of 1 track is 1fr that is total width of viewport minus the 60px of the second track .
fr here specifies a size unit dealing in fractions of width of the screen more prominently the viewport of the screen.
for example if i specify the tracks as

1fr 1fr 1fr 1fr

than it can be assumed all the tracks are of 1/4 the width of
viewport.

follow the link to mdn reference of the above property to learn more

grid-template-rows

The grid-template-rows property defines the height of each row.
everything is similar to the grid template column property from declaration to tracks of rows.

follow the link to mdn reference of the above property to learn more

gap
gap property is used to specify spacing between two or more grids elements. this is shorthand property for various grid gap properties combined together.

Introduction to GITHUB desktop GUI

ABHAY TIWARI — Fri, 15 Jul 2022 12:06:00 +0000

lets start with first installing github desktop. to install github click on the link below.
github desktop
note- above link is direct installation link of exe file for github desktop
or you can simply explore official github website.
github website official

Github desktop is an extension of the version control of git and cloud based versioning and distributed version control features of github on your pc with little salt of GUI replacing CLI of git bash .
Github desktop has almost all the faetures required and necessary to begin your software development journey. Github desktop is easy to use once you know the features of github desktop very well you will feel comfortable in using github to save your project and live run your project with ease.

Once github desktop is installed on your pc start exploring it .

Know your GITHUB GUI

git push

It is used to push or upload your local repo on which you are working to a remote repo. In case of github desktop it is generally the repo on github account saved on cloud.it is the counterpart of git fetch operation in which a remote repo is transported to the local computer.

git fetch and git pull

Fetch is a primary operation to check for any changes in the remote repo it is primarily used concept in collaborative work flows while fetch checks the remote repo for changes pull immediately changes the content of the local repo to be in line to those on the remote repo after fetching it also updates the content of local repo.

git branches

a branch is a new/separate version of the main repository. Branches allow you to work on different parts of a project without impacting the main branch. When the work is complete, a branch can be merged with the main project. You can even switch between branches and work on different projects without them interfering with each other.

git commit

Adding commits keep track of our progress and changes as we work. Git considers each commit change point or "save point". It is a point in the project you can go back to if you find a bug, or want to make a change. It is used to record the changes in the repository. The staging and committing are co-related to each other. Staging allows us to continue in making changes to the repository, and when we want to share these changes to the version control system, committing allows us to record these changes.

git merge

to merge multiple sequences of commits, stored in multiple branches in a unified history or to be simple you can say in a single branch. What happens is when we try to merge two branches, git takes two commit pointers and starts searching for a common base commit in those two specified bit branches. When git finds the common base commit it simply creates a “merge commit” automatically and merges each queued merge commit sequence.

git merge conflict

the above image shows the landing window of the github with various options such as

file
edit
view
repository
branch
help
these options are contained in top navbar of software home page. file options have various option for create and cloning repo etc.
edit have many options such as cut copy paste undo etc. view option has many options such as changes history repo list branches list etc.
below the top navbar there is

Size Units in CSS

ABHAY TIWARI — Mon, 04 Jul 2022 11:16:19 +0000

Length or Size units play very important role in defining the ammount of space a block of element takes on the screen. in Most forms of software designing we use generally two types of size units.

Absolute or Fixed
Relative

Absolute size units are generally used in only designing and printing of sample screen etc. they are not used in live projects because size of device screen vary so much and using them will make project ugly and not tempting to use but still they are used in basic builduing and small testing projects. while on the other hand Relative units varry according the device size and are directrly proportional to size of screen.
each size unit in css is written after a number of required size. i.e for example 2px,3cm,5mm,60vw,20vh etc. Note there is no space in between hose two (unit and number). we can omit the size unit if we wish to keep it zero.

we need size units in various properties of css. for example specifying the margins and padding,specifying font sizes,specifying border radius,specifying height and width of boxes etc.
below are some examples of fixed size units

/*length in centimetres*/
height: 10cm;
/* length in millimetres*/
height: 10mm;
/*length in inches a inch is equal to 2.54 cm */
height: 10in;
/*length in pixels a pixel is 1/96th part of inch*/
height: 10px;
/*length in points a point is 1/72 part of pixel*/
height: 10pt;
/*length in picas a pica is equal to 12 points*/
height: 10pc;

Relative size units are given below that are most commonly used in CSS.
em -it is a size unit that compares it size from the size of current font element. 2em means twice,0.5em means half,0.25em means one fourth etc.
height: 0.5em;

CSS selectors in brief

ABHAY TIWARI — Fri, 01 Jul 2022 04:11:07 +0000

CSS selectors are the elements used for targeting certain part of html document for styling purposes. there are various categories and types of selectors in CSS depending on which element are to be selected for styling .

<body>
    <h1>this is a heading</h1>
</body>

look at the code snippet above . inside a body tag I have a element h1 containing some text. to style this an element selector is used how? let's look at the code snippet given below inside style tag

<style>
        h1{
            font-size: x-large;
            font-weight: bold;
            margin: 20px;
            padding: 20px;
            background-color: black;
            color: white;
        }
    </style>

some random properties I have given to the element selected inside style tag that leads to a different style of the h1 text when displayed on browser.

class selector-these are selectors used when a group of html elements need uniform style .

id selector-these are special class of selector which target only the concerned element none other than the element that is target is affected by it. these selectors are generally used when we want to select certain unique properties of a element to change
in order to provide more unique style.

A class selector is selected with a dot(.) prefix with class name and ID selector is selected with a hash(#) prefix with ID name.

for example

<body>
    <h1 id="heading">
        CSStutorial
    </h1>
    <p class="para">
        hey there this is selectors tutorial
    </p>
</body>

<style>
     .para{
        background-color: black;
        color: white;
     }
     #heading{
        font-size: x-large;
        color: aqua;
     }
    </style>

CSS UNIVERSAL SELECTOR

This selector selects all the element present in html page and give them uniform styling.
this selector is used at the very beginning for giving all element some common properties at the start. which later on can be overwritten or changed . a universal selector starts with a star/asterisk(*)

 *{
            margin: 0;
            padding: 0;
        }

adding above code sequence to the style tag in the above example makes the margin and padding of every element zero.
see by yourself

there is no gap between the two elements h1 and p in the above
image after applying the universal selector.

grouping of one or more selectors

<body>
    <h1>heading1</h1>
    <h2>heading2</h2>
    <h3>heading3</h3>
</body>

h1{
    text-align: center;
    color: blue;
}
h2{
    text-align: center;
    color: blue;   
}
h3{
    text-align: center;
    color: blue;
}

the above code is very hectic and tedious job to type for that purpose instead of explicitly defining properties we are going to group all heading into one selector block separated by comma .

h1, h2, h3{

    text-align: center;
    color: blue;
}