DEV Community: Jaisurya

CSS Box model

Jaisurya — Mon, 27 Jul 2026 03:04:44 +0000

In CSS, 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.

EXPLANATION

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

div{
  width: 400px;
  border: 12px solid green;
  padding: 50px;
  margin: 20px;
}

Iframe in HTML

Jaisurya — Fri, 24 Jul 2026 10:53:14 +0000

The tag in HTML is used to embed another webpage directly inside your current page. Think of it like a window on your website looking into another webpage. Basic Syntax: <div class="highlight"><pre class="highlight html"><code><iframe src="https://example.com" width="600" height="400" title="Example Website"></iframe> </code></pre></div> Let's see how we embed a youtube video inside our website: Most video and map providers generate <iframe> code automatically for you when you click "Share" -> "Embed". <div class="highlight"><pre class="highlight html"><code><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </code></pre></div> Now we have a youtube video inside our webpage.

Boolean Attributes in HTML

Jaisurya — Sun, 19 Jul 2026 10:37:30 +0000

The three of the most common boolean attributes that we use in HTML.

Disabled:
When you add it to a form element, you completely shut down any interaction with it.Form inputs that depend on a previous action. For example, keeping a "Submit" button disabled until the user checks a "Terms of Service" box.

<button type="submit" disabled>Submit Application</button>

Required:
It tells the browser that this field must have a value before the form can be submitted. If a user tries to click submit while a required field is empty, the browser blocks the submission and pops up a native warning message.

<input type="email" name="user_email" required>

**
Readonly:**
The readonly attribute is the most unique of the three and is often confused with disabled.Pre-filled data that the user needs to see (and maybe copy), but shouldn't alter. For example, an order summary page showing a calculated grand total or a system-generated account ID.

<input type="text" name="account_id" value="A99281" readonly>

CSS Selectors

Jaisurya — Tue, 14 Jul 2026 02:26:29 +0000

Here are the four foundational selectors you'll use 90% of the time.

1. The Universal Selector ( * )

This selects everything on the HTML page.

* {
  margin: 0;
  box-sizing: border-box;
}

2. The Type Selector ( element )

HTML tags matching the name directly. This is best for setting baseline styles for paragraphs, headings, or buttons.

p {
  color: #333;
  line-height: 1.5;
}

3. The Class Selector ( .class )

Any element with a matching class attribute. Uses a dot ( . ).
This is best for reusable styles you want to apply to multiple different elements.

.btn-primary {
  background: blue;
  color: white;
}

HTML: <button class="btn-primary">Click</button>

4. The ID Selector ( #id )

A single element with a matching id attribute. Uses a hashtag ( # ).Unique, one-of-a-kind elements on a page (like a specific sidebar or nav).

#main-header {
  background: black;
}

HTML: <header id="main-header">...</header>

Lists in HTML

Jaisurya — Sat, 11 Jul 2026 03:37:37 +0000

In HTML, lists are used to group related items together. There are different types of list in HTML. They are,

1. Unordered list:
Used for items where the order does not matter. By default, these items are displayed with bullet points.

<ul>
  <li>Water</li>
  <li>Coffee</li>
  <li>Tea</li>
</ul>

2. Ordered list:
Used for items where the sequence or order matters.By default, these are displayed with numbers.

<ol>
  <li>Cake</li>
  <li>Chocalate</li>
  <li>Juice</li>
</ol>

3. Description List
Used for pair of terms and description.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets.</dd>
</dl>

Time to try Linux.

Jaisurya — Wed, 08 Jul 2026 03:03:21 +0000

If you are a pro Windows user, that's fine, but why don't you try an OS that offers more performance, stability, privacy, and security,all for free? If you are convinced, here is how you can try Linux Mint without compromising Windows.

Step 1: The very first thing is to download the ISO file using this link: https://www.linuxmint.com/download.php. You can download different editions. My recommendation is Cinnamon. This will ask for a download mirror; choose any one.

Step 2: Another download you have to make is Rufus. Use this link: https://rufus.ie/en/. This software will make your pendrive into a bootable drive. Download the portable version and install it.
Step 3: Before launching Rufus, insert your pendrive (preferably 8 GB or more). Now launch it.

Step 4: It will automatically detect the pendrive. Your job is to select the ISO file, then click Start. (Note: This will format your pendrive, so be aware before you do it.) Then eject the pendrive.

Step 5: Now go to Disk Management, create a disk partition on the C drive, give enough space for using Linux, and assign any letter to that drive.

Step 6: After that, go to the BIOS settings and disable the Secure Boot option for frictionless Linux booting. Save the option and exit.

Step 7: Restart your PC and go to the boot options by pressing keys like F1 or F9. This will differ for each laptop brand, so find yours.

Step 8: Select the pendrive, and that will boot Linux.

Step 9: Double-click the Install Linux Mint icon to install Linux on your system. After that, you need to select the language and other basic settings. For the installation type, select Install Linux alongside Windows, or select the Something Else option to select the drive you want to install Linux on, and that's it.

Welcome to the Linux community.

Comment your first impression of Linux.