DEV Community: Abimanyu P

Creating a YouTube Web Page Using HTML and CSS

Abimanyu P — Wed, 29 Jul 2026 04:41:10 +0000

Building the Layout

A YouTube web page looks simple, but it contains many small sections that should work together correctly. The first step is creating the page structure using HTML. The page contains a top navigation bar, a left sidebar, and a video content section. After creating the structure, CSS is used to arrange these sections in the correct position. Flexbox is very useful because it can place the sidebar and the content area side by side and also helps make the layout responsive.

While designing the page, different CSS properties are used for spacing, alignment, colors, borders, and sizing. The box-sizing: border-box property helps keep the width and height under control because padding and borders are included inside the given size. The display: block property makes an element take the full available width and start from a new line, which is useful for arranging different sections of the page.

Scrolling and Styling

One important part of the YouTube layout is scrolling. The sidebar and the video content should scroll separately. This can be done by giving both sections their own height and using overflow-y: auto. The page itself should not scroll, so the body uses overflow: hidden. The scrollbar can also be hidden using browser-specific CSS while keeping the scrolling functionality active.

 .content{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: auto;
    scrollbar-width: thin;
 }

Another useful topic is CSS selectors. The universal selector (*) applies styles to every element, but those styles can be overridden using classes, IDs, or selectors with higher specificity. IDs should always be unique even though browsers still apply styles when the same ID is used on multiple elements. Classes are the correct choice when the same style is needed for many elements. Hover effects can be added using the :hover pseudo-class because inline CSS cannot create hover styles.

Working with Bootstrap Code

While copying icons or code from Bootstrap, some built-in classes may already contain predefined styles. Sometimes these styles override newly created classes because of CSS specificity or the order in which CSS files are loaded. This problem can be solved by loading the custom CSS file after Bootstrap, creating a more specific selector, or using !important only when it is really needed.

HTML:

<span class="badge rounded-pill text-bg-secondary nav-el">Secondary</span>

CSS:

span.nav-el{
    font-size: 14px;
}

Creating a YouTube clone gives a better understanding of page layout, scrolling, selectors, hover effects, CSS specificity, and styling techniques. Every small problem helps improve debugging skills and shows how different HTML and CSS properties work together to build a complete web page.

TossConf

Abimanyu P — Wed, 29 Jul 2026 04:16:03 +0000

My Experience In Conference:

TossConf 2026,it is a tamil free open source software conference,scheduled for 3 days. It was held on 3 days from 23/07/2026 at st.Joseph's Institute of Technology, chennai.

Three Days:

Day-1- Hackathon:

its a coding competition with 20 problems statements. Teams built and presented their solution.

Some of them in my mind:

A project which solves a news papers words mistakes like misalignment,misspacing,etc..they used to built it for theekathir a tamilnews paper.
A project which helps the students or peoples who use mobiles to read books or documents, To prevent them from distraction(social media doomscrolling) by actively monitoring their activities.

Day-2- Workshops:

A hands on technical training session conducted on 2 tracks simultaneously with 4 different titles for the entire day.the two tracks i attended are Frappe Framework and The Art of Crafting software.

Frappe Framework:

Frappe is a fullstack,low code python/js webapp framework which is morely suitable for bussiness related application.this session showed the architecture and how to contribute to its open source code base.

The Art of Crafting software:

This session was about how to write clean,maintainable,well-designed code rather than a specific tool/framework. And it also showed what a employees and organizations should and shouldn't do.it shows you should apply simple questions like what,who, why,how, etc.. almost every part of your life because they are the simple things so everyone refused cuz its simple but they are the common solution for most of the failures.

Day-3- Talks & stalls:

Two parallel tracks of 45 minute technical talks and FOSS project stalls/boooths people can walk around and visit.I explored these stalls linux installation,openstreet map,libreoffice.

_openstreet map_ : its the open source map which is an alternate for google maps.
_libreoffice_ : it is also a open source software which is an alternate for ms office. it can support for all os.

HTML Tables

Abimanyu P — Mon, 20 Jul 2026 05:59:34 +0000

HTML tables are used to display data in rows and columns. They are useful for showing information like student details, employee records, product lists, marks, and timetables. Tables should be used only for displaying related data, not for designing the layout of a webpage.

The <table> tag creates the table. The <tr> tag creates a row, <th> creates a header cell, and <td> creates a normal data cell. Header cells can be placed at the top of the table or on the left side, depending on how the data is organized. If the headers are only on the left side, using the <thead> tag is not required because <thead> is mainly used to group header rows.

Other useful tags are <caption>, which adds a title to the table, <tbody>, which contains the main table data, and <tfoot>, which contains the footer rows. The colspan attribute is used to merge columns, and the rowspan attribute is used to merge rows. Older HTML used attributes like border, cellpadding, and cellspacing, but modern websites use CSS for styling tables because it keeps the HTML clean and easy to maintain.

Basic Example

<table border="1">
    <caption>Student Details</caption>

    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Department</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Abimanyu</td>
            <td>21</td>
            <td>CSE</td>
        </tr>
        <tr>
            <td>Abishek</td>
            <td>22</td>
            <td>IT</td>
        </tr>
    </tbody>
</table>

Example:First column as a head:

<table border="1">
    <caption>Student Information</caption>

    <tr>
        <th scope="row">Name</th>
        <td>Abimanyu</td>
    </tr>

    <tr>
        <th scope="row">Age</th>
        <td>21</td>
    </tr>

    <tr>
        <th scope="row">Department</th>
        <td>CSE</td>
    </tr>

    <tr>
        <th scope="row">College</th>
        <td>Anna University</td>
    </tr>
</table>

HTML Forms and Their Elements

Abimanyu P — Thu, 16 Jul 2026 17:52:46 +0000

HTML Forms and Common Form Tags

HTML forms are used to collect information from users through a webpage. The <form> tag is the main container that holds different form elements such as text boxes, buttons, radio buttons, checkboxes, and drop-down lists. Every form element has its own purpose. For example, the <input> tag is used to create different types of input fields, <label> is used to describe an input field, <textarea> allows users to enter multiple lines of text, and <select> with <option> is used to create a drop-down list. Tags like <button>, <fieldset>, and <legend> help organize the form and make it easier to understand.

<form>
  <fieldset>
    <legend>Student Information</legend>

    <label for="name">Name</label>
    <input type="text" id="name" name="studentName">

    <button type="submit">Submit</button>
  </fieldset>
</form>

Understanding Important Form Attributes

HTML attributes provide additional information to form elements and control how they behave. Attributes like type, id, name, placeholder, value, required, disabled, and readonly are commonly used while creating forms. The name attribute is mainly used to identify form data during form submission. In a normal HTML page without a backend, it does not create any visible change for text fields, but it is useful for grouping radio buttons. When multiple radio buttons have the same name, the browser treats them as one group and allows only one option to be selected.

<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female

Difference Between Input Validation and Display Elements

Some HTML attributes have different purposes depending on the element they are used with. The min and max attributes in an <input> element are used to limit the values that a user can enter. The same attributes inside the <meter> element define the range of a measurement instead of restricting user input. The <meter> tag is useful for displaying values such as battery level, storage usage, or exam score. Unlike <input type="range">, which lets users change a value using a slider, the <meter> element only displays a value and is not used to receive input from the user.

<meter value="70" min="0" max="100"></meter>

<input type="range" min="0" max="100" value="70">

Understanding HTML Attributes

Abimanyu P — Wed, 15 Jul 2026 17:24:00 +0000

What are HTML Attributes?

HTML attributes provide additional information about an HTML element. They help the browser understand how an element should behave, what extra information it contains, or how it should be displayed. Attributes are always written inside the opening tag of an element and usually follow the format attribute="value".

Think of it like this: an HTML element is the object, and an attribute is the information or settings about that object. For example:

<img src="cat.jpg" alt="Cat">

Here, <img> is the HTML element, while src and alt are attributes. The src attribute tells the browser which image to display, and the alt attribute provides alternative text if the image cannot be loaded.

Why are Attributes Important?

HTML elements alone can only create the basic structure of a webpage. Attributes make those elements more useful by adding extra information and controlling their behavior. They can connect HTML with CSS for styling, connect HTML with JavaScript for interactivity, improve accessibility by helping screen readers understand content, and even improve SEO by providing meaningful information to search engines.

Without attributes, HTML would only display plain content with very limited functionality.

Types of Attributes

Some attributes can be used on almost every HTML element. These are called global attributes. Common examples include id, class, style, title, hidden, and lang. These attributes are mainly used for styling, identifying elements, adding tooltips, hiding content, or specifying the language of a webpage.

An HTML element can also have multiple attributes at the same time.

<img src="flower.jpg" alt="Flower" width="300" height="200" title="Beautiful Flower">

In this example, each attribute has a different purpose, but all of them work together to describe and control the same image element.

Another type is Boolean attributes. These attributes do not require a value because their presence itself is enough to enable a feature.

<input checked>
<input disabled>
<input required>
<option selected>

When these attributes are present, the browser automatically applies their behavior. For example, checked selects a checkbox by default, disabled prevents user interaction, required makes a field mandatory, and selected marks an option as the default choice.

HTML attributes may look small, but they play a major role in building webpages. Understanding how and when to use them helps create web pages that are more functional, accessible, and easier to maintain.

Cloning Google's Web Page Using HTML & CSS

Abimanyu P — Wed, 15 Jul 2026 16:10:32 +0000

Building the Layout

Cloning Google's web page is not just about making the page look similar, it is also about arranging every element in the correct position. The search bar, logo, icons and buttons all depends on proper HTML structure and CSS styling. Simple tags like div, span, img and textarea plays a major role while creating the layout. Flexbox is useful to align elements properly and keep the spacing consistent. Small changes in padding, margin and width can completely change the final appearance of the page.

Positioning and Styling Elements

Some elements cannot be placed using normal layout alone. position: relative and position: absolute helps to overlap one element on another and place icons exactly where they are needed. SVG icons taken from Google's page may not appear directly because they use Google's own CSS variables, so replacing the fill value or styling it correctly is required. Image alignment, textarea styling and controlling the left spacing of elements also helps to match the original design more closely.

Debugging Small UI Issues

While creating the clone, small issues can appear even when the code looks correct. A span text may show an underline because of its parent element or inherited styles instead of the span itself. Some SVG icons may not display at all if they are placed incorrectly or missing required styling. Checking the HTML structure, inspecting elements in the browser and verifying CSS rules makes it easier to identify the actual reason instead of changing random properties. Most UI problems comes from small CSS details, so debugging each element step by step gives a cleaner and more accurate result.

HTML, CSS & GITLAB

Abimanyu P — Wed, 15 Jul 2026 15:35:53 +0000

CSS Semantic Tags and Google Page Structure

HTML provides semantic tags like <header>, <nav>, <main>, and <footer>
to describe the purpose of different parts of a webpage. Even though a <div> can also be used to create the same layout, semantic tags make the code more meaningful and easier to maintain. Search engines and screen readers can identify these sections correctly, which improves accessibility and page structure. A <div> is mainly used as a generic container when no specific semantic element matches the content. While creating a Google homepage clone, the footer can be separated into a country section and a navigation section. The footer stays at the bottom of the page using CSS positioning, while Flexbox helps to align the links on the left and right side in a clean manner.

GitLab Branch Push Using SSH

Git follows a workflow where a local repository is connected to a remote repository through a remote named origin. Instead of pushing code directly to the main branch, creating a separate feature branch keeps the project organized and avoids affecting other developers' work. SSH keys provide a secure way to connect Git with GitLab, so there is no need to enter the account password every time a push operation is performed. Commands like git remote -v, git checkout -b, git add, git commit, and git push -u origin branch-name play an important role in the workflow. After the first push, the upstream branch gets linked, making future pushes simple with a normal git push command.

Day 1 - Basics of HTML & CSS

Abimanyu P — Thu, 09 Jul 2026 17:27:26 +0000

What I Learnt?

Today I started learning html and css. I have studied html well in my college days and now I recalled it, but I have only less knowledge in css. So today I started doing more efforts to learn css.

I learnt about how well a css can style the html elements. At first I am confused between margin and padding then later i understood it with the help of my trainer. I also learnt about how a style can applied by "class and id" to the html elements.

I learnt flex box and i understood that flexbox is mainly used to arrange and align elements easily. Now i understood how text is aligned next to the icons on sites.

Challenges I Faced:

At first I am confused between margin & padding and I also had difficulties in flexbox, then later i understood it with the help of my trainer.