DEV Community: boopalan

Animations and Transforms

boopalan — Fri, 29 May 2026 17:40:04 +0000

Css animations

CSS provides keyframes to create animated effects in the webpages. Inside the keyframe we can define the rules to the flow of the animation to the elements.

The keyframes syntax will look like

@keyframe Name_of_the_Animations {
    here you can define the animations
}

inside the keyframes we have to define each step, here each step means from the beginning to ending of the animation competition. We are able to add several stages, for example how the initial stage the element wants to animate and how it looks in the middle of the animation, how it wants to appear, and finally how it wants to end. Not only with these steps we can add more and more steps in between the starting and ending and also we can be able to do as many as possible steps to attract animation.

Here you can say the animation first we use the percentages.

We want to define the steps of what our element wants to do at the exact moment of the whole animation duration.

Definitely the 0% and 100% will the starting and the ending of the
animations. Suppose if you want to add any particular change at the middle of the animation it wants definite at the 50%.

lets we try the pulsing animation


.btn {
background-color: green;
height: 50px;
width: 50px;
border-radius: 50%;
animation: MovingRightToLeft 7s;
animation-iteration-count: infinite;
}

@keyframes MovingRightToLeft {
0% {transform: scale(1);}
20% {transform: scale(1.2);}
50% {transform: scale(1.4);}
60% {transform: scale(1.5);}
75% {transform: scale(1.1);}
50% {transform: scale(1);}
}


<div class="btn">
</div>

Animation properties

animation-name : keyframe name
the keyframe name must be defined if you give a random keyframe name it does not work.

we can be able to define more the one animation

animation-duration : how long you want to animate it, mostly here developers use seconds to define the duration time, eg: 2s is equivalent to 2 seconds.

Animation-delay : when it want to start to progressing the animation,

animation-iteration-count : how many time you want do that animation for you object, you can define here n countable time, and even infinite

animation-timing-function: how the animation progresses through the duration of each cycle; there are some of the types in the animation-timing-function and they are linear, ease-in-out, ease-out, ease-in

animation-direction: helps to define the animation direction does the animation want to play only in the forward direction or reverse direction otherwise play in an alternate(both reverse and the forward)

animation-fill-mode: it helps to define what styles are applied to an element before the animation starts (during a delay) and after the animation finishes.

this is the one the animation given in the MND documentation

<h1 class="grow">
welcome
</h1>


.grow {
font-size: 20px;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: grow-animation 3s infinite;
}

@keyframes grow-animation {
0% {
font-size: 20px;
}
100% {
font-size: 70px;
}
}

Transform property

This property helps to allow you to visually alter the elements by rotating, scaling, skewing and moving them in 2D or 3D spaces.

This transform provides some core functions to implement the visual altars.

translate(x-axis, y-axis) : using this property we can be able to translate the object to give a and y axis coordinates, it starts from the current position of the object to make move the element appear in the give coordinates

or otherwise you can do it only any one of the direction

translate(x,y)
translateX() only one the x-axis
translateY() only one the y-axis

rotate(angle) it will tilt the object to the defined angle in this function.

Scale(x,y) it helps to make to grow the element or shrink the elements

similarly like translate you can do it only any one of the direction

scale(x,y)
scaleX() only one the x-axis
scaleY() only one the y-axis

CSS part-2

boopalan — Wed, 27 May 2026 16:10:52 +0000

Padding properties

Similarly padding acts like margins but rather than giving the space outside the elements it provides spaces inside the elements.

padding: 10px;

it act all the four sites of the elements

In case if you need to add any one side you can do it by specifying which one side you want to add, it will provide the padding to respective sides you specified

padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;

In specific scenario if you need to specify all the four sides with distincts padding it will help

padding: 5px 10px 15px 20px;

If you want to add same padding on the vertically and same padding on the horizontal side this will help to do it

padding: 5px 20px;

With the same horizontal padding you want to adjust the right and left with it

padding 10px 5px 20px;

Border properties

By border property we can adjust the width, color and styles by specifying with your requirements. We have to give the width of the border and style the border with a specific colour.

border: 1px solid green;

There are several styles we can add to the borders that are

Double
Solid
Group
Inside
Outside
dotted

It also provides to do to this three specific properties either any one of these sites we can specify here

border-right-width:2px;
border-right-color:red;
border-right-style:dotted;

In this way we can apply for all the four side with each one side distinct styles

Adding comments to the style sheet

In many cases the code grows much larger. In those scenarios we may sometimes forget why we define them instead of making confusition, comments that will help us identify immediately.

/*
comment
*/

Display property

For responsiveness in media queries we will use display property highly, by changing the display properties we were able to decide which division wanted to display in the screens throughout this property.

! important
This property breaks all the previous class behaviours and implement what we finally defined here

Pseudo class

How to access the first child and Last child

<li>apple</li>
<li>pear</li>
<li>mango</li>
<li>banana</li>

First child
It will select the first child in the list of same elements

li:first-child{
color : red;
}

To select the last child of the

li:last-child {
color: green;
}

Colours

_Hexadecimal _
It contains # at the beginning and followed by six digits of numbers in the base-16.
Syntax look like

#RRGGBB

It ranges from the 00 to FF
If you want to specify the green by using the end of the range in the green palace and make the remaining positions by 00

color: #00ff00;

RGB
Here we will specify the color inside the rgb between the range of 0 to 255,

color: rgb(255,0,0);

Rgba
It is same as the rgb but additionally we will pass the transparency to it

color : rgba (0,0,255, 0.5)

Box shadow
It will help to specify the shadows around the elements

Syntax

box-shadow : horizontal offset vertical offset, blear radius, density spread color;

Mostly not all the bowsers support this box-shadow to support the mozilla and shafari
We have to use this

–webkit-box-shadow: horizontal offset vertical offset, blear radius, density spread color;
–moz-box-shadow: horizontal offset vertical offset, blear radius, density spread color;

CSS

boopalan — Tue, 26 May 2026 16:57:14 +0000

Units
it helps to define the properties metrics

px: it is the default, eg10px
vw: it take the whole view width of the screen, eg 100vm
vh: it take the whole view height of the screen, eg 100vh
%: it occupies the defined ration in the screen, or in the parent’s. Eg 50%

Typography:
line-heigth: In a paragraph, it helps to define the hight between the first and second line to the whole paragraph
letter-spacing: helps to spaced add between the two letters,
word-spacing: similarly like the letter-spacing, but it add spaces between the words
text-intent: in news letter, articles we can be able to see the initial intents to the paragraph, that same thing can be done with the help this property in the web page.

*Selectors *

universal selector
it will reset all the default css properties to all the elements in the html tags

* {
    padding : 0px;
    margin: 0px;
}

element selector

we can be able to select the html tags directly in the css, and defining all the properties to it will reflected in the pages
eg

body {
    margin : 10px;
    padding : 5px:
}

class selector

we will add the class attribute to the html tags and then we select the class in CSS using class selector and define the properties to them

example

select the .para class and add the properties in css

.para {
    word-spacing : 20px;
}

id selector

it do same as the class selector but instead in a different attribute called id

select the .para class and add the properties in css

#para {
    word-spacing : 20px;
}

note class selector want to select in the . Prefix and the id selector want to select in the # prefix

Font properties

font-family : here we can be able to select the font family
font-style: the we can be able to change the style like, italic, bold,
font-size: here we can define the font style in the px or in other units
color: just like the the name of the property it for color, similarly like the units color also have some different units.

Opacity property
it make the opacity property having tags to transparency. We give the value in the 0:1 ratio.
Example

div {
    opacity : 0.5 // half transparency
}

Text properties

text-decoration: we can be able to add the decoration for the text like the underscore, overline, line through the text.
Text-transfrom: using the text transform property, we can can the lowers to upper, upper to lowers and more.
Vertical-align: some time there will have some need to add the subscript and super script for the letter, on that scenarios we can use it

List properties

list-style: it helps to specify the list look like to a circle, disc, square, and more
list-style-image: instead using the build in styles we can be able to set an custom image to act as an list style.
List-style-type: some time we have some need to use the different list style, instead of defaults on those scenario it helps to use the roman, alpha, greek, latin, this property supports for the both upper and the lowers cases fort this list style types.

Margin property

margin: 10 px; it adds 10 px margin all the sides

instead if you want to define any one side, you can be able to specify which one particular side only want to add margin

margin-top
margin-left
margin-right
margin-bottom

if you in the situation of adding both the right and left where same width, and the top and bottom where same width, you can be able to use it
margin : vertical px horizontal px

otherwise both the top and bottom(horizontally) same size and the left and right are in the different size we can use this

margin top px, horizontal px right px

HTML

boopalan — Fri, 22 May 2026 16:49:08 +0000

What is HTML?
HTML stands for Hyper Text Markup Language.

What is meant by Markup Language?
It does not mean by a programming language, rather than programming it actually defines and gives structures for the contents in the web pages, by using them we define how each and every contents want to appear in the browser whenever we open any web pages.
How to identify it was a html and it has the annotations for the web content. By defining .html at the end of the filename any one can identify a html
How does it work?
In html everything is tags, it only knows tags, if we say anything to do it, we want to define that in the specific html tags.

How will tags look?

<tagname> content </tagname>

Whenever we define anything in html we want to use the tags, there are several tags available in the html, each one was created for specific use cases, mostly every tag have starting and ending tags, some could not have ending tags. The ending tag looks exactly like the starting tag but it begins with slash(“/”) to ensure it was an ending tag.
Suppose if we want to define something in the web page means we want to use the correct tag for what we are going to define in the html page. For example to define paragraph we would have to use

tag, here we want to define first stating tag

what was we want to put it inside the paragraph and after the content must we have to use the ending tag

, it looks like exactly like this

this is the blog for the html page

.
creating the first html file.
for that first open a folder where you want to create the html file, the create file with .html extension and open it in a text editor,
every html file begin with the tag
inside the tag use the tag, if we define anything inside body tag that will be displayed in the html page, for instance we will define a paragraph inside the body tag

<html>
<body>
   <p>This is a paragraph.</p>
</body>
</html>

if we save it and open it the file in the browser we will see the paragraph inside what we have written in the

tag

there are several tags are use for define many things make appear in html

some of them are h1, p, button, table and more

h1 tag is used to ensure it was the heading of the page and it appears larger and bolder then the p tag.

<h1>this is the heading of the page</h1>

button is used to define button in the page,

<button>click me</button>

table helps to create table in the page

<table>
   <tr>
     <td>Emil</td>
     <td>Tobias</td>
     <td>Linus</td>
   </tr>
 </table>

best practice for writing html

Use semantic tags:
using appropriate tags such as header, footer, section, nav, will improve the structure and the accessibility of the our web page, Also it helps other use to understand other developer to understand we the tags are use

Include alt text for images:
Always using the alt attribute for the image helps accessibility.

Minimize the inline styles and scripts:
To keep our html cleaner and accessible using separate external css and javascript files instead of using inline style and script tags.

Ref :
https://en.wikipedia.org/wiki/Markup_language
https://www.w3schools.com/html/html_intro.asp

git and gitlab

boopalan — Thu, 21 May 2026 15:19:53 +0000

git

Why do we need git?

GIT is one of the Distributed version control systems.

Every company will have a lot of developers, they do many changes. Here the problem is that sharing the valid code to another developer, without git developers, focuses on many issues and the game changer comes from Linus Torvalds.

Throughout this, developers are able to move forward and backward the versions whenever needed, so they can easily fix bugs and solve them immediately , it increases productivity.

Multiple developers work on the same code base at any time.

GITLAB

Web based devops platform
Software development life cycle
- Analysis
- Plan
- Design
- Develop
- Test
- Deploy
CI/CD

Installing git on linux

sudo apt install git

Clone a repo using git

Companies will have remote repositories, there is no guarantee all of them will use the same code hosting system but there will not be many differences between them.

To add the changes in the git

git add filename

Or 

git add .

To check the changes in git

git status

To commit the changes in git

git commit -m “message”

To push the changes in the gitlap

git push

It will ask the credentials

To skip credentials

git rest remote-url origin https://<username>:<token>/gitlab.com/<repo>