DEV Community: Raj

Css Flex

Raj — Mon, 20 Jul 2026 15:26:19 +0000

What is Flex in CSS?
Flex (Flexbox) is a CSS layout system that makes it easy to arrange items in a row or column. It allows you to align, size, and distribute space between items inside a container.Flexbox helps create responsive and flexible web layouts with less code.

How does Flex work?

Flex works with two parts:

Flex Container – The parent element.
Flex Items – The child elements inside the parent.

First make the parent a flex container:

.container {
display: flex;
}

Example:

Box 1
Box 2
Box 3

.container {
display: flex;
}

Output:

Box 1 Box 2 Box 3

The boxes appear in one row because of display: flex.
**
Common Flex properties**

display: flex; – Enables Makes the container a flex container.
flex-direction – Sets the direction (row or column).
justify-content – Aligns items horizontally.
align-items – Aligns items vertically.
flex-wrap – Allows items to move to the next line if needed.
gap – Adds space between items.
Size (flex-grow, flex-shrink, flex-basis)

Example:

Think of Flexbox as a teacher.
The container is like the teacher giving instructions.
The items are like students following those instructions.

The teacher can tell students to:

Stand in a row.
Stand in a column.
Leave equal space.
Stand in the center.

Properties & Non-Standard Property

Raj — Sun, 19 Jul 2026 15:31:44 +0000

What is a CSS property?
A CSS property is a keyword used to control the appearance and layout of an HTML element. It tells the browser what style to apply, such as color, size, spacing, border, or position.

Example:

h1 {
color: blue;
font-size: 30px;
}

How many CSS properties are there?
There is no fixed number. CSS has more than 500 standard properties, and new properties continue to be introduced in newer CSS specifications.

Common CSS properties

background
background-color
font-size
font-family
font-weight
text-align
width
height
margin
padding
border
border-radius
display
position
top
left
right
bottom
flex
grid
justify-content
align-items
overflow
opacity
z-index
box-shadow
cursor

What does non-standard property mean?

A non-standard property is a property that is not part of the official CSS specification (W3C standard). It is usually created by a browser company for its own browser so it may not work in every browser.

(or)

Non-standard properties are browser-specific CSS properties. They are not official CSS properties so they may work in some browsers but not in others.

Example

webkit-user-select: none;
webkit- → Chrome, Safari
moz- → Firefox
ms- → Microsoft Edge (older versions)

Html Attribute

Raj — Sat, 18 Jul 2026 12:12:00 +0000

What is an HTML Attribute?

An HTML attribute provides additional information about an HTML element. It is always written inside the opening tag.

Example:
Content
Example:

Google
href Attribute name

https://www.google.com → Attribute value

The HTML standard has 100+ attributes, and browsers continue to support additional global, element-specific, and newer attributes as HTML evolves.

they are called common HTML attributes?

id
class
href
src
alt
title
style
type
value
placeholder
name
disabled
required
checked
readonly
maxlength
pattern

Common HTML Attributes

Types of Attributes

Global Attributes

id
class
style
title
hidden

Element-Specific Attributes

href (for )

Boolean Attributes

required
checked
disabled
readonly
autofocus

Form tag in HTML

Raj — Thu, 16 Jul 2026 05:46:43 +0000

Collecting user input on web pages
widely used over 85 of websites rely on ms to gather user data.
They play a crucial role in modern web development by enabling user interaction and data submisson.

1.Basic Search Form ( GET Method )
this simple form uses the GET method which appends the submitted form data directly to the URL It is perfect for search bars

(E.g) when you search the google . The browser URL becomes something link.
Everyone can see what you searched because it appears in the URL.
Use GET for:
Search boxes
filters
public information.

2.Standard Login Form (POST Method)

For Sensitive data link passwords use the POST method .This sends the form data hidden inside the HTTP request body instead of the URL

(E.g) When you enter your atm pin your pin is not shown publicly.it is sent securely to the bank
Login Passwords Registration Payments

3.Comprechensive Registration Form
this advanced example showcases diverse form controls , including dropdown list ( ) ,multi-line text boxes () checkboxes, and radio buttons.</p> <p>(E.g) <select> Thinking a restaurant menu card you choose one option <br> veg chicken fish </p> <p>(E.g) <textarea> restaurant food feedback <br> plesaes share a feedback bescuse imporvatRadio Buttons</p> <p>The <input type=”radio”> defines a radion button.<br> Radion buttons let a user select one of a limited number of choices.<br> p>Choose your favorite friend name :</p></p> <form> <input type="radio" id="html" name="fav_language" value="msd"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="vk"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="Jk"> <label for="javascript">JavaScript</label> </form> <p>This is how the HTML code above will be displayed in a browser:<br> choose your favorite palyer :<br> msd<br> vk<br> jk.</p> <p><strong>4.checkboxes</strong><br> the <input type=”checkbox”> <br> checkboxes let a user select ZERO or MORE options of a limited number of choices</p> <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> <p>this is how the HTML code above will be displayed in a browser:<br> i have a bike <br> i have a car<br> i have a phone.</p> <p><strong>5.The Submit Button</strong><br> the <input type=”submit”> submitting the form data to a form-handler</p> <p>the form-handler is typically a file on the server with a script for processing input data.<br> the form-handler is specified in the form’s action attribute.</p> <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>This is how the html code adove will be displayed in a browser:</p> <p>first name </p> <p>last name</p> <p>submit.</p> <p><strong>6.he Name Attribute for <input></strong><br> notice that each input field must have a name attribute to be submitted.<br> If the name attribute is omitted the value of the input field will not be sent at all.</p>

HTTP Basic: Access dented. If a password was provided for Git authentication, the password was incorrect or you're required to use a token instead of a password. If a token was provided, it was either incorrect, expired

Raj — Sat, 11 Jul 2026 07:34:04 +0000

Git authentication failed. Use a Personal Access Token (PAT) instead of your password. - DEV Community

You fix the problem you do this step but you learn more git access key you read more also I give...

dev.to

Git authentication failed. Use a Personal Access Token (PAT) instead of your password.

Raj — Sat, 11 Jul 2026 07:25:37 +0000

You fix the problem you do this step but you learn more git access key you read more also I give example

No Need Password only you want Personal Access Token & key

**What is a Personal Access Token?**
A Personal Access Token (PAT) is a long secret code generated by GitLab or GitHub. It is used to securely authenticate Git commands like:

1.git push
2.git pull
3.git clone

temporary digital key for Git.
How to create a Personal Access Token in GitLab

1. Sign in to your GitLab account.

2. Click your profile picture.

3. Then click edit the profile.

_

Then right side see the access -> see 7 option you click personal access tokens._ _
you can see the generate token click -> show the tow option click legacy token._ _ 6.the enter name description is not compulsory but important only select two option ✅ read_repository ✅ write_repository then click the generate compulsory copy the code because that key don't enter your terminal user password only copy and paste generated key & token._

I give example Personal Access Token (PAT).

Imagine you want to enter your office.

Username = Your name (who you are)
Password = Your house key
Personal Access Token = A special office access card

Your house key opens your house, but it doesn't open the office. Similarly, your GitLab password lets you log in to the website, but Git may require a Personal Access Token instead of your password when you use git push.

HTML .Tag ,

Raj — Thu, 09 Jul 2026 05:25:36 +0000

welcome to my first blog

This is not an Ordinary blog. it is based on my own understanding and i am still learning . I will explain topics simple words the way i understand them. I m not to write like an Ai or an expert I share my learning journey so that beginners can understand easily. If i make any mistakes I will learn from them and improve.

Why Mention the Language?
meta lang="eng"

* Browser Understanding the page language. 
* useful translation tools translate a other language correctly.
* improve accessibility for blind users programmers code .
* Screen readers like JAWS and NVDA which convert text to Speech.

* it's short method used quickly typing.
* long method available but short method almost using every user.
* what is this called universal character encoding
(E.g)

* HTML File = message (you send the secret code word)
* UTF-8 = reading rule ( friend A not  understands the secret code word mean)
* Reader = Browser ( then you explain a friend what secret code meaning)

why using this tag?
meta name="viewport" content="width=device-width, initial-scale=1.0"

every device a different display screen width.
this tag tells the browser to match the web page to the device's screen.
a make your website look good on different display screen.

(E.g)

 * imagine opened a website on an old Nokia phone not fit the display screen properly.
 * I had to zoom in and out every time to read the content because the layout was not aligned correctly.