DEV Community: A K I L A N

DAY- 6(project - 2)

A K I L A N — Thu, 04 Jun 2026 18:00:40 +0000

RESUME

Sample resume

First form a Blueprint

there are two partitian - blue and white
there is a photo in the top center

Here there is less work in HTML and more parts in CSS

HTML

<body>

    <div class="Ak">           
        <div class="left">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyz-77X11MoGE22xVjjPhbpW6lPj6I0SkcTQ&s" alt="Profile image">
        </div>
         <div class="right"></div>
     </div>

</body>
</html>

CSS

<style>
        .Ak{
            border: 1px solid red ;
            height: 100vh;
            width: 60vw;
            margin: auto;
            `display: grid;
            grid-template-columns: 1.5fr 2fr;`

        }
        .left{
            border: 1px solid seagreen;
            display: flex;
            justify-content: center;
            align-items: center;




        }
        .right{
            border: 1px solid black;
        }
        img{

            width: 100px;
            height: 100px;



        }
    </style>

_There some new tags _

vh- view port height
vw-view port width
display: grid; grid-template-columns: 1.5fr 2fr; -The display property specifies the display behaviorof an element.
fr- frame
A Flex Container - The parent (container) element, where the display property is set to flex or inline-flex
Difference % and vh?
% - will apply to the parents
vh - will apply to screen size

This the current output this will be complete tomorrow

An Exericse in Flexfroggy

In this the last question - 24 was very difficult

_first line _

second line

Third line

fourth line

flex-wrap: wrap-reverse;
justify-content: center;
flex-direction: column-reverse;
align-content: space-between;

Day - 5 (Remaining Task)

A K I L A N — Thu, 04 Jun 2026 17:01:03 +0000

In the Previous Bolg I Have Complete Till the header , h1 tags
*The Next Steps *

 <section> 
            <h2>About Me</h2>
            <p> I am a web developer </p>
        </section>
        <section>
            <h2> Project</h2>
             <ul>
                <li>Potfolio</li>
                <li>Landng Page</li>
                <li>blog Template</li>
                <li>Iot project</li> 
             </ul>
        </section>
        <section>
            <h2>Contact</h2>
            <p>Email:akilan48@gmail.com</p>
        </section>
    </header>

</body>
<footer>
        <p>@2026AK</p>
    </footer>

The above is HTML part

_From The Above _
Some new tags are there

<ul>- This tag is known as unorder list

<ol> - This is Known as order list

The CSS

                /* border: 1px solid; */
                margin-top:5vh;
                 width: 60%; 
                 margin-left: 20vw;    
                border-radius: 25px;
                 background-color:beige;
                 padding-top: 10px;
                 padding-bottom: 10px;

            }

            h2{
                margin-left: 20px;
                padding-bottom: 10px;
            }

            p{
                margin-left: 30px;

            }

            ul{
                margin-left: 40px;
                padding-bottom: 10px;
            }

             footer p {
                /* border: 1px solid red;*/
                background-color: black;
                color: white;
                text-align: center;
                margin-top: 10px;
                padding: 2px;
            }

from the above

 footer p {
                /* border: 1px solid red;*/
                background-color: black;
                color: white;
                text-align: center;
                margin-top: 10px;
                padding: 2px;
            }

footer p{
This will follows by parent & child
so This will not impact on other

tag

** The final Output**

Day - 4 Built a website

A K I L A N — Wed, 03 Jun 2026 03:40:56 +0000

To Built A website
First needed to analize the given the demo site .than need to plan a the step by step process .which should be written in note then we can go with the flow

we are going to replicate the above page

*Here i am using the vscode *

First syntx

<!DOCTYPE html>
<html lang = "en">
<head> 
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

step 2 write the code in the part body we are going to write the code

<body> 
<header> 
<h1> Akilan</h1>
<nav>
<a href="">About Me </a>
<a herf="">Project</a>
<a herf="">Contact</a>
<a herf="">login page</a> 
</nav>
/<header>
</body>

from the above
there are two types of elements Block-level element and Inline Element

Block-level Element

Block-level Elements always starts on a new line,and the browers automatically add some space (a margin) before an after the element
This Element always takes up the full width available (strectches out as far as it can )
Here are the block-level elements in HTML

Inline Elements

An inline element does not start on a new line.
An inline element only takes up as much width as necessary
Here are the inline elements in HTML:

The HTML part has been over next CSS

here were are using Internal CSS

Internal CSS - The CSS rule set should be within the HTML file in the head section

<style>
 h1{
            /* border: 1px solid blue; */
            text-align: center;
            background-color: black;
            color: white;
            padding: 10px; 
            margin-bottom: 15px; 
          }
</style>

From the Above I have Used

text-alige:center;- this center the text
padding:10px- This creates extra Space with in the Element
we can specify the direct space like top,right,left,bottom
margin-bottom:15px-This create extra space around an element,
we can specify the direction space like top,bottom,right,left

4.*Nav tag from a tags *

where the tag is a inline element so I fit the four inline element
in a block_level element tag

*remaining code *

 nav{
            text-align: center;
            background-color: black;
            padding-bottom: 25px ;

          }

          a{
             /* border: 1px  solid red; */
            color: white;
            text-decoration: none;
            margin-right: 10px  ;
            /* display: block; */
           }

From The Above A New tag Is Used

text-decoration: none - this remove the line given below the tag

*Final code *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h1{
            /* border: 1px solid blue; */
            text-align: center;
            background-color: black;
            color: white;
            padding: 10px; 
            /* margin-bottom: 15px; */
          }
          nav{
            text-align: center;
            background-color: black;
            padding-bottom: 25px ;

          }

          a{
             /* border: 1px  solid red; */
            color: white;
            text-decoration: none;
            margin-right: 10px  ;
            /* display: block; */


          }




    </style>
</head>
<body>
    <header>
        <h1>Akilan</h1>
        <nav>
        <a href=""> About me </a>
        <a href="">Projects</a>
        <a href="">Contact</a>
        <a href="">login page </a>
        </nav>
    </header>


</body>
</html>

OUTPUT

Day 3 - LINUX

A K I L A N — Tue, 02 Jun 2026 04:06:00 +0000

1.What is Linux?

Linux is based on UNIX operating system
Linus is free open source ,accessible to everyone.
This promotes global collaboration and inovation
Linux offers efficient performance and strong security
it works well across many device and industries

2.What is open source operating system?*

The term open-source is closely related to open source software(oss).
oss is type of computer software that is released under a license , but the source code is made available to all the users
example (Linux. ubuntu-Highly user-friendly and great for beginners. fedora-Features the latest cutting-edge software and updates. Debian- Known for being incredibly stable and reliable.)

3.Features of Linux?

Free and Open-Source
Extremely Flexible - There is no prerequistes for installing an entire linux suit,it allows a user to install only the components that are required by the user.
Lightweight Infrastructure - linux requires lesser storage space and its installation requires around 4gb to 8 gb of disk space .
Graphical User Interface (GUI) - even linux works on using the command kine interface but it can be converted to be used like windows
having a Graphical user interface.
End-to-end encryption - Linux allows end-to-end encryption while accessing data thus storing public keys in the server.All data is password protected and provides authentication to users

Portable Environment - linus works on any environment and doesn't depends on the device being high or low - ended.
Shell/ Command-line Interface - The Linux command line interpreter is known as Shell that provides an interface between the user and kernel which then executes programs known as commands.

4.Linux is best for Running?

Servers & Cloud
Programming & Development
Older or Low-Spec PCs
Privacy & Customization

** Where Linux Falls Short?**

Mainstream Gaming - many popular multiplayer games with anti-cheat software still will not run on Linux.
Specialized Creative Software - If you rely on the full Adobe Creative Suite (Premiere Pro, After Effects) or Microsoft Office, you are better off with Windows or macOS.

Components of Linux?
Its foundational architecture consists of

kernal
system libraries
shell
system utilities
hardware layer

Inroduction to HTML

A K I L A N — Mon, 01 Jun 2026 14:08:44 +0000

HTML

HTML stands for hyper text markep language
It is a standard Language for creating and structuring web page using tags and elements
It is a static language

It consists of series of element
HTML elements tell the browser how to display the contents
where HTML file is written ,saved ,opened in a browser, rendered, and finally displayed

example

<html>
   <head>
       <title> AK Movies List </title>
  </head>
 <body>
     <h1>Mankatha</h1>
     <h1>Billa</h1>
 </body>
</html>

tages are <h1> </h1> <html> </html>
elements are <h1> mankatha </h1>

1.Latest Version of HTML
HTML 5 is the latest version .This is 5th and final version that is now retired by (world wide Web Consortium) W3C.HTML5 was first released in a public-facing form on 22 January 2008 and with major updates and "W3C" status in October 2014.

2.Features of HTML 5.

Audio and Video
vector graphics( this feature enables drawing grpahics directly in the browser using Javascript)

3.Header and footer (this will replace generic

elements by clearly marking the top and bottom section of a webpage. this improves the semantic structure and helps browsers interpet content order ) here semantic means clearly describes its meaning to both the browser and the developer.

4.Figure and Figcaption (to grouped medeia and self contained content with in a document)

5.Nav Tag ( it is used to define a section of navigation links within a website )It helps structure areas that connect to different pages or sections.

6.Progress Tag(is used to check the progress of a task during the execution.)

7.Placeholder Attribute (this showa hint text inside the input fields untile the user types)
Email Attribute ( the input email id is automatically vaildated to check the format of the email is correct or wrong )

8.web stroage.
# this provides the localstroage and sessionstroage to store directly in the browser .It offers a safer

9.Offline Web Applications
# The application cache (appcache) enables wed apps to function offline by stroing essential locally .

10.WebSockets.
#WebSockets allow real-time, bidirectional communication between the client and server.

aternative of markup language.

Extensible Markup Language (XML)
Extensible Hypertext Markup Language (XHTML)
Standard Generalized Markup Language (SGML)