DEV Community: antony stark

Tossconf event part 2 Frappe framework

antony stark — Tue, 28 Jul 2026 05:33:39 +0000

Frappe Framework

it is a full stack frame work,it's a low code and open source
ERP Next is build on frappe framework
it needs front-end as Html,Css,JS and back-end as Maria DB,Python
it start with terminal command as start bench
requirements to build a application
DB,Schema
Applicaton programming interface(API)
Session management,Authentication
Views,Report
Payement gateway
Cache
Message queue
Rendering
Concurrency
To install the frappe framework follow the documentation:-https://docs.frappe.io/framework/user/en/introduction

Day 1 of Tossconf Event

antony stark — Mon, 27 Jul 2026 04:25:58 +0000

The first day of starting speech by Mr.Muthu sir, one of the trainer in the Payilagam institute, he spoke about the topic of open source and explain about the Tamil Linux community

Introduction to open source:-Open source is a design and development model where the source code or original files of a digital resource are made publicly accessible so anyone can view, modify, and share them

Some of the Examples Python ,Firefox,Linux
One of the replacement of google play store is f-droid
some of the apps are

1.Open camera
2.Etchdroid
3.KDE connect
4.LocalSend
5.VLC media player

CSS attributes and Bootstrap

antony stark — Wed, 22 Jul 2026 05:31:19 +0000

Bootstrap:-Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
Why Bootstrap:-
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Box Model:-the term "box model" is used when talking about web design and layout.

The CSS box model is essentially a box that wraps around every HTML element

Every box consists of four parts: content, padding, borders and margins

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent

Example

div {
  width: 100px;
  border: 1px solid black;
  padding: 50px;
  margin: 20px;
}

Html table and their attributes

antony stark — Sat, 18 Jul 2026 15:27:14 +0000

Html table:- it is a tabular form representing the data or values in the rows and columns on the html document

Some of the html table tags are
<Table>:- it is table declaration tag and table elements ,contents described within this <table> tag
<Caption>:- used to give the title to the table or information about the table
<thead>:- this tag is a header section of the table tag
<tbody>:- this a body section where the actual data or values are entered
<tfoot>:- this a footer section of the table
<tr>:-this is table row tag which is used to create a row in the table ,in between this we use <td> and <th> tags to enter the value
<td>:- this tag is used to enter the values in the body section of the table
<th>:- this tag is used to enter the values in the head section of the table
<colspan>:- merge two cell of the table in the horizontal manner
<rowspan>:- merge two cell of the table in the vertical manner

Form attributes in HTML

antony stark — Fri, 17 Jul 2026 04:49:29 +0000

Form:- generally form is used to get information from user for storing the data or some validation purpose

Method attribute:-This attribute specifies the HTTP method to be used when submitting the form data,The default http method used in form method is GET.in method there are three attributes they are

<form action="" method="get">

In method attributes there are three types they are

get
post
dialog

Input attributes:-

Type attributes:-this type of attribute defines what type of input is used in the specified area

some of the examples
Type=button,checkbox,date,datetime-local,email,password,radio,submit,tel,text etc
Syntax
input type ="attribute name"

value attribute:-the input value attribute specifies the initial value for an input field

<input type="text" id="fname" name="fname" value="Antony"><br>

read-only attribute:- this attribute is used to read only purpose in the input field
disabled attribute:- this attribute is used to specify that this input field is disabled and un-clickable
size attribute:-The input size attribute specifies how much characters or numbers were used int the input field ,the default size is 20 and can be used in text,search,tel,password
min and max attribute:-The min and max attributes specify the minimum and maximum values for an input field,
for example it can be used for specify a range
placeholder attribute:-this atrribute gives the hint to the user about what kind of information is to give in the field
required attribute:- this attribute used to user must fill the field without leaving it wouldn't submit the form
name attribute:- this attribute purpose is for referencing the input in the url and used to identify and group data fields within a form ,it acts as a key value pair

Code Area

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <div>
<h2>College admission</h2>
<form action="./user" method="get"></form>
<fieldset>
  <legend>User Information
<label for="Student-name">Name</label>
<input id="Student-name" placeholder="Enter your name" type="text" required name="Student-name">
<label for="student-email">Email</label>
<input type="text" placeholder="enter the email">
<label for="student-phone">Phone number</label>
<input placeholder="Enter you Phone number" type="tel" name="student-phone">
<label for="address"> Address</label>
<textarea name="address" id="address"></textarea>
<label for="">DOB</label>
<input type="date" name="=DOB">
<label for="">Gender</label>
<label for="">Male</label>
<input type="radio" value="others" name="male">
<label for="">Female</label>
<input type="radio" value="others" name="female">
</fieldset>
<fieldset>
  <legend>Course Details</legend>

  <label for=""> Courses</label>
  <select name="courses" id="courses">
    <option value="Python full stack">Python full stack</option>
    <option value="Java full stack">Java full stack</option>
    <option value=" AI/DS">AI/DS</option>
    <option value=" ui/ux">ui/ux</option>
    <option value="Digital marketing">Digital marketing</option>
  </select>
  <label for="feedback">Feedback</label>
  <textarea name="feedback" id="feedback"></textarea>
  <label for="">Preffered language</label>
  <input type="checkbox" value="" id="tamil" name="Tamil">
  <label for="lang">Tamil</label>
   <input type="checkbox" value="" id="English" name="English">
  <label for="lang">English</label>
   <input type="checkbox" value="" id="tamil" name="Hindi">
  <label for="lang">Hindi</label>
<input type="button" value="Submit" name="submit">

</fieldset>
  </div>
</body>
</html>

Html and CSS attributes

antony stark — Thu, 16 Jul 2026 01:52:25 +0000

HTML Attributes:-Attributes provide additional information about elements,it usually come in name/value pairs like: name="value"

Some of the attributes are:-

Href Attribute:-The a tag defines a hyperlink. The href abbreviation is hyper reference which gives a tag with additional information and helps to redirect another web page

Example

<a href="https://www.google.com">google</a>

Src attribute:-The img tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

<img src="img_bike_honda_cbr.jpg">

Width and Height attribute:-width and height attributes can specify the width and height of the content and can be used in both html and css

Example

<img src="img_honda_cbr.jpg" width="50" height="60">

Alt attribute:-alt attribute for the img tag specifies an alternate text for an image, if the image for some reason cannot be displayed, This can be due to a slow connection, or an error in the src attribute

Example

<img src="img_mazda_787b.jpg" alt="Car thumbnail">

Style attribute:-The style attribute gives the entire access to the css properities and act as a inline css to the document,user can modify the size,color,font etc

Example

<p style="color:red;">This is a red </p>

Type and Placeholder:- these two attributes are used in the input tag ,usually for specify which type of input is used, like text,email,password,number.

Example

<input type="text" placeholder='Enter your username here'>

Day-4 of posting a blog -layout or semantic structure of HTML ,css selectors

antony stark — Tue, 14 Jul 2026 04:49:43 +0000

Layout of HTML consists of 6 parts they are

header:- Defines a header for a document or a section
nav:-Defines a set of navigation links and buttons that can redirects to another page or opens a new set of lists
section:- Defines a section in a document ,may consists of introduction ,gist ,or a piece of information about the content
article:-Defines independent, self-contained content,the entire article considered as the body of contents of the document
aside:-Defines content aside from the content (like a sidebar),advertisement area etc
footer:-Defines a footer for a document or a section,like copyrights ,patent ,trademarks,collaborate partners list,references to other sites etc

CSS Selectors:-CSS selectors are used to "find" (or select) the HTML elements you want to style

some of the selectors are:-

id selector:-The id of an element is unique within a page, so the id selector is used to select one unique element,To select an element with a specific id, write a hash (#) character, followed by the id of the element
Class selector:- The class selector selects HTML elements with a specific class attribute,to select elements with a specific class, write a period (.) character, followed by the class name
Element selector:- used pick html elements by the name of the particular element
Universal selector:-The universal selector (*) selects all HTML elements on the page.
Group selector:- used to group two or more html elements in one area for applying same styling or attributes were used

Example

h1, h2, p {
  text-align: center;
  color: red;
}

Pseudo class:-pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name,it is a keyword that can be added to a selector, to define a style for a special state of an element
Pseudo element:-pseudo-element is a keyword that can be added to a selector, to style a specific part of an element,pseudo-elements are denoted by a double colon (::) followed by the pseudo-element name

Day-3 of Posting blog (Lists in html)

antony stark — Mon, 13 Jul 2026 04:57:32 +0000

Html lists:-
Html lists are used to structure the items in a ordered or unordered manner
some of the lists types are:-
Ordered list:- this type of list starts with /ol tag ends with ol tag and arrange the items in ordered form like 1(number),a(alphabetic),i(roman number)

Unordered list:- this tag starts with ul and ends with /ul and arrange items in the dot (.),disc ,circle or bulletins form

Description list:- it is used for description purpose like question and answer form ,this tag has sub tags they are:-

Description term

2.Description data

sample code area

<!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>
    <h1>Fruits</h1>
    <ol>
        <li>orange</li>
        <li>Apple</li>
        <li>Grapes</li>
    </ol>
    <h1>Vegetable</h1>
    <ul style="list-style: disc;">
        <li>Potato</li>
        <li>Tomato</li>
        <li>Broccoli</li>
    </ul>
    <dl>
        <dt>Html</dt>
        <dd>Hper text markup language</dd>
    </dl>

</body>
</html>

Day-2 of Posting a blog

antony stark — Sat, 11 Jul 2026 06:13:24 +0000

I Learn about the git and some of its commands,First of all we want to know what is Git

Git is a distributed Version control system founded by Linus Torvalds ,He made git for developing the linux kernel

Its main objective is to track changes in source code and collabrate the project with developers ,also prevent conflict on overwriting the code with others code

Some of the codes for Terminal and git commands :-

cd/cd../- change directory- used to change the directory or folder
ls- list files
git init - intializing the git into the local repository through terminal or power shell
git remote add orgin -used to connect with the gitlab repository with local repository
git commit -m"message to display in repo" -used as a savepoint in the Repository history and code is ready to push
git clone -used to clone the existing project or source code in the local repository
git status -displays the current state of your working directory and staging area

Day 1 of posting a blog

antony stark — Thu, 09 Jul 2026 04:19:56 +0000

Today session i learnt about how to use flex box ,flex items and their properities

Flex Box is a css tool mainly used to arranging inside the elements or items in a horizantal or vertical within the container

In the Flex Box the x axis or main axis is the primary direction and it is determined by the flex direction property
If the direction is row,the main axis is horizantal and the cross axis is vertical

Flex Items/ child properities

it is the child element of the flex container or flex box
order- Specifies the display order of the flex items inside the flex container
flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis - Specifies the initial length of a flex item
align-self - Specifies the alignment for the flex item inside the flex container

Parent Properities

display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap

code area

<!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>
        .container{
            display: flex;
            border: 1px solid;
            padding: 10px;
            /* justify-content: center; */
            /* height: 100vh; */
            /* align-items: center; */
            width: 20%;
             /* flex-wrap: wrap; */
             align-self: center;

        }
        .items{
            border: 2px solid red;
            padding: 10px;
            /* height: 50%; */
        }
        #div1{
order: 2;
flex-grow: 1;
        }
        #div2{
order: 1;
flex-grow: 2;
        }
        #div3
        {
            flex-grow: 3;

            order: 3;
        }
    </style>
</head>
<body>
    <h1>Flex box</h1>
    <div class="container">
        <div id="div1">d1</div>
        <div id="div2">d2</div>
        <div id="div3">d3</div>
    </div>


</body>
</html>