<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Kamalesh AR</title>
    <description>The latest articles on Forem by Kamalesh AR (@kamalesh_ar_6252544786997).</description>
    <link>https://forem.com/kamalesh_ar_6252544786997</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3925287%2F12ec5ab2-2cb6-4e9b-88b0-8c11abacd4eb.png</url>
      <title>Forem: Kamalesh AR</title>
      <link>https://forem.com/kamalesh_ar_6252544786997</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kamalesh_ar_6252544786997"/>
    <language>en</language>
    <item>
      <title>Stack Overflow: A Powerful Community for Developers and Learners</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Mon, 25 May 2026 15:57:10 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/stack-overflow-a-powerful-community-for-developers-and-learners-1g40</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/stack-overflow-a-powerful-community-for-developers-and-learners-1g40</guid>
      <description>&lt;p&gt;&lt;strong&gt;Stackoverflow&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Today I explored Stack Overflow, one of the largest and most helpful online communities for developers. As someone who is learning programming and technology, I found this platform very useful and inspiring.&lt;/p&gt;

&lt;p&gt;Stack Overflow is a question-and-answer platform where developers from around the world help each other solve coding problems. Whether someone is a beginner or an experienced software engineer, they can ask technical questions and receive answers from the community. The platform covers many technologies such as Python, Java, C++, HTML, CSS, JavaScript, SQL, Linux, Artificial Intelligence, Data Science, and more.&lt;/p&gt;

&lt;p&gt;One of the most interesting things about Stack Overflow is its community-driven learning system. Developers share their knowledge, explain concepts, provide code examples, and help others understand programming in a practical way. Many common coding errors and technical issues already have detailed solutions available on the platform, which saves a lot of time for learners and professionals.&lt;/p&gt;

&lt;p&gt;As a beginner, I realized that Stack Overflow is not just a website for fixing errors. It is also a place to improve problem-solving skills, learn best coding practices, and understand real-world development challenges. By reading questions and answers from experienced developers, learners can gain deeper technical knowledge and improve their thinking process.&lt;/p&gt;

&lt;p&gt;Another important feature is the voting and reputation system. Helpful answers receive upvotes from the community, which helps users identify the best and most trusted solutions. Developers who actively help others can earn reputation points and badges, encouraging knowledge sharing and collaboration.&lt;/p&gt;

&lt;p&gt;I also understood that many developers use Stack Overflow daily while working on projects. When they face bugs, syntax errors, installation problems, or technical confusion, they search Stack Overflow to find explanations and working solutions. This makes the platform an essential learning resource in the software development world.&lt;/p&gt;

&lt;p&gt;For students and beginners like me, Stack Overflow can become a great companion during the learning journey. It helps improve coding confidence, exposes learners to real technical discussions, and teaches how to ask clear and meaningful technical questions.&lt;/p&gt;

&lt;p&gt;Overall, my first experience exploring Stack Overflow was very positive. I believe this platform will help me grow as a developer, strengthen my programming knowledge, and support me whenever I face coding challenges in the future.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fphn930qr0b3znpau0s5x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fphn930qr0b3znpau0s5x.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Till now, I thought developers solved coding problems individually, but after learning about Stack Overflow, I understood how developers around the world help each other through a strong online community. It was surprising to see how one platform can connect millions of programmers to share knowledge, solve errors, and support learning. I realized that even beginners can learn many things by reading discussions and solutions from experienced developers. This experience motivated me to explore more technologies and become part of the developer community in the future.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tamil linux community&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And also I learned about the Tamil Linux Community, a wonderful technology community that promotes Linux and open-source software among Tamil-speaking people. I found this community very inspiring because it helps students, beginners, and technology enthusiasts learn Linux in their native language.&lt;/p&gt;

&lt;p&gt;The Tamil Linux Community focuses on spreading awareness about free and open-source software. It encourages people to explore Linux operating systems, understand open-source technologies, and improve their technical skills through community learning. The community supports learners by conducting discussions, workshops, technical events, and knowledge-sharing sessions.&lt;/p&gt;

&lt;p&gt;One of the most interesting things about this community is that complex technical concepts are explained in Tamil, which makes learning easier and more comfortable for many people. Beginners who are new to Linux can learn important topics such as Linux installation, command-line usage, system administration basics, open-source tools, and software development concepts.&lt;/p&gt;

&lt;p&gt;Linux is widely used in the technology industry because it is secure, powerful, customizable, and open source. Many developers, cloud engineers, cybersecurity professionals, and system administrators use Linux in their daily work. Through the Tamil Linux Community, learners can gain practical knowledge about Linux and understand how open-source communities work together to improve technology.&lt;/p&gt;

&lt;p&gt;I also understood that this community is not only about learning technology but also about collaboration and helping others grow. Experienced members guide beginners, answer questions, and encourage people to continue learning. This creates a positive environment where knowledge is shared freely among everyone.&lt;/p&gt;

&lt;p&gt;Learning about the Tamil Linux Community motivated me to explore Linux more deeply and improve my technical knowledge. I believe communities like this play an important role in making technology education accessible to everyone and encouraging more people to participate in the open-source world.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Famnzqcnoqkdevlh2cchb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Famnzqcnoqkdevlh2cchb.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Till now, I did not know that communities like this existed worldwide. After learning about the Tamil Linux Community, I understood how people from different places come together to share knowledge, help beginners, and support open-source learning. It made me feel inspired because technology is not only about coding and computers, but also about helping others learn and grow together. I am happy to know that there are communities that teach and support people in their own language, making technology easier and more accessible for everyone.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Reference&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stackoverflow&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://stackoverflow.com/" rel="noopener noreferrer"&gt;https://stackoverflow.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tamil linux community&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://forums.tamillinuxcommunity.org/" rel="noopener noreferrer"&gt;https://forums.tamillinuxcommunity.org/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>stackoverflow</category>
      <category>tamillinuxcommunity</category>
      <category>developers</category>
      <category>programming</category>
    </item>
    <item>
      <title>Gitlab and its basic commands</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Thu, 21 May 2026 16:29:17 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/gitlab-and-its-basic-commands-4l78</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/gitlab-and-its-basic-commands-4l78</guid>
      <description>&lt;p&gt;Today i learned about the gitlab installation and how to upload the projects. And i learn their commands to how add the project by terminal, and it has commands like git add, git commit-m, git push, git status, git clone, git log.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Gitlab commands&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;git status : Shows which files are modified or staged.&lt;/li&gt;
&lt;li&gt;git add . : Adds all changes in the current directory to staging.&lt;/li&gt;
&lt;li&gt;git commit-m : Saves your staged changes with a descriptive message.&lt;/li&gt;
&lt;li&gt;git clone : Downloads a project from GitLab to your computer.&lt;/li&gt;
&lt;li&gt;git push : Uploads your local commits to the GitLab server.&lt;/li&gt;
&lt;li&gt;git pull : Downloads latest changes from GitLab and merges them.&lt;/li&gt;
&lt;li&gt;git log : To see the history.&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Information about Git, Gitlab and Github</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Wed, 20 May 2026 15:38:19 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/information-about-git-gitlab-and-github-2ecc</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/information-about-git-gitlab-and-github-2ecc</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is git&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Git is a distributed version control system that helps track and manage changes in code over time. It allows multiple developers to work on the same project, view previous versions, and restore changes when needed.&lt;br&gt;
Git is a free, open-source version control system designed to track changes in computer files and coordinate work among multiple people on a single project. It is primarily used for software development, but it can be used to track changes in any set of files.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Repository (Repo): A central folder where Git tracks your project and its entire history.&lt;/li&gt;
&lt;li&gt;Commit: A saved "snapshot" of your project. Each commit records what changed, when, and by whom.&lt;/li&gt;
&lt;li&gt;Branching: Allows you to create a separate "branch" to work on a new feature or fix a bug without affecting the main codebase.&lt;/li&gt;
&lt;li&gt;Merging: The process of combining changes from one branch back into another (usually the main branch).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is gitlab&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;GitLab is a web-based DevOps platform that enables teams to manage the entire software development lifecycle in a single application. It combines version control with built-in tools for automation, collaboration, and deployment.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Provides Git-based repository hosting similar to GitHub.&lt;/li&gt;
&lt;li&gt;Includes built-in CI/CD pipelines for automated testing and deployment.&lt;/li&gt;
&lt;li&gt;Supports code review, issue tracking, and project management in one place.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhc8dmcinxnd91ydtkc1a.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhc8dmcinxnd91ydtkc1a.webp" alt=" " width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is github&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;GitHub is a web-based platform that stores Git repositories in the cloud, allowing developers to work together on projects. It helps manage code changes and supports both public and private repositories. GitHub is widely used for version control and collaboration in software development.&lt;/p&gt;

&lt;p&gt;GitHub allows developers to collaborate on projects, track changes, and maintain a history of all code versions. It is particularly popular in the open-source community and is widely used by individual developers, teams, and large organizations to develop software.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Difference between gitlab and github&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6bo8xlxv91s6s05q1w57.webp" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6bo8xlxv91s6s05q1w57.webp" alt=" " width="800" height="955"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Refered by&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/devops/gitlab/" rel="noopener noreferrer"&gt;https://www.geeksforgeeks.org/devops/gitlab/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/git/what-is-github/" rel="noopener noreferrer"&gt;https://www.geeksforgeeks.org/git/what-is-github/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>git</category>
      <category>gitlab</category>
      <category>github</category>
    </item>
    <item>
      <title>HTML and CSS for website</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Tue, 19 May 2026 15:49:58 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/html-and-css-for-website-mn5</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/html-and-css-for-website-mn5</guid>
      <description>&lt;p&gt;Today i have learned some new tags like input, button and also a semantic tag main and then some new styles hover, font-family to create a facebook login page.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Input tag&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The input tag is most essential element for creating interactive forms in HTML. it is used to collect the data from the users and we can create many forms from simple text boxes to clickable buttons depending on its type attribute.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Core Attributes&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Type: Determines what kind of data the field accepts (eg: Text, Checkbox, Password).&lt;/li&gt;
&lt;li&gt;name: Act as the unique identifier for the data of the form.&lt;/li&gt;
&lt;li&gt;Value: Sets the initial content or default value of the field.&lt;/li&gt;
&lt;li&gt;Placeholder: Provides a short hint about the expected input.&lt;/li&gt;
&lt;li&gt;Required: A boolean attribute that forces the user to fill out the field before submitting.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Button&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Button tag in HTML used to create a clickable buttons that can triger actions like submitting forms, resetting inputs, or running javascript functions.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Unlike the element, the tag is more flexible because it can contain nested content like text, images, or icons.&lt;/li&gt;
&lt;li&gt;Basic Syntax: To create a simple button, wrap your desired label between the opening and closing tags.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Main tag&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The tag in HTML is a semantic element used to identify the primary, central content of a web page.&lt;/li&gt;
&lt;li&gt;It tells the browsers, search engines, and screen reader exactly where the main content of your page begins.&lt;/li&gt;
&lt;li&gt;Separating it from repetitive elements like menus and footer.&lt;/li&gt;
&lt;li&gt;Unique content: The main element should only contain information that is unique to that specific page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Hover&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The :hover pseudo-class in CSS is used to select and style an element when a user moves their mouse pointer over it.&lt;/li&gt;
&lt;li&gt;It is a fundamental tool for adding interactivity, such as changing button colors, underlining links, or revealing hidden contents.&lt;/li&gt;
&lt;li&gt;Basic Syntax: To use hover, append :hover to the selector you want to style.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Font-family&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In CSS, the font-family property is used to define the font of the text for an element.&lt;/li&gt;
&lt;li&gt;It allows you to prioritized list of fonts, commonly referred to as a font stack.&lt;/li&gt;
&lt;li&gt;prioritized list: browsers read the list from left to right. it will use the first font if it's installed or available. if not, it tries the next one.&lt;/li&gt;
&lt;li&gt;Fallback System: you should always end your list with a generic family name to ensure the browser has a final, guaranteed option if no specific fonts are found.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
      <category>css</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>HTML and CSS Question/Answer</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Tue, 19 May 2026 15:28:18 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/html-and-css-questionanswer-k4b</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/html-and-css-questionanswer-k4b</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is the purpose of box-sizing: border-box in your project?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Box-sizing: border-box forces the browser to include an element's padding and border within its specified width and height. It stops elements from unexpectedly expanding when you add padding, making layout math predictable and preventing elements from breaking out of their containers.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;How does grid-template-columns: 2fr 1fr work?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The CSS property grid-template-columns: 2fr 1fr; creates a two-column grid where the first column is twice as wide as the second.&lt;br&gt;
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is the difference between semantic tags like &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt; versus normal  tags?


&lt;/h2&gt;
&lt;p&gt;Semantic tags (e.g., &lt;code&gt;&amp;lt;main&amp;gt;, &amp;lt;footer&amp;gt;, &amp;lt;article&amp;gt;&lt;/code&gt;) and normal &lt;/p&gt; tags both group elements, but semantic tags clearly describe their meaning to both the browser and the developer.  tags are "dividers" with no inherent meaning, whereas semantic tags provide context about the content inside them.
&lt;h2&gt;
  
  
  &lt;strong&gt;Why is vh used instead of px?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;vh (Viewport Height) is used instead of px (pixels) to create dynamic, responsive layouts. VW, and VH are mostly used for margins, padding, spacing, and widths/heights. To reiterate, VH stands for “viewport height”, which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Difference between padding and margin?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Padding is the space inside the border (between content and border), while margin is the space outside the border (between the element and its neighbors).&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Difference between Grid and Flexbox?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;CSS Grid and Flexbox are both CSS layout modules, but they are designed for fundamentally different tasks.&lt;/p&gt;

&lt;p&gt;GRID LAYOUT:&lt;br&gt;
           CSS Grid Layout, is a two-dimensional grid-based layout system with rows and columns. It makes easier to design web pages without having to use floats and positioning. Like tables, grid layout allow us to align elements into columns and rows.&lt;/p&gt;

&lt;p&gt;FLEXBOX:&lt;br&gt;
          The CSS Flexbox offers one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes. To get started you have to define a container element as a grid with display: flex;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What are self-closing tags?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Self-closing tags are HTML elements that only require a single tag because they cannot hold text or nested elements. It is also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and concise.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is the purpose of the meta viewport tag?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This tells the browser to set the width of the viewport to the width of the device and to display the page at its original zoom level. The viewport value for the name attribute of a  element gives hints about how the viewport should be sized. If specified, you define viewport-related behaviors using a content attribute in the  element as a comma-separated list of one or more values.&lt;/p&gt;

&lt;p&gt;References:&lt;br&gt;
developer.mozilla - &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport&lt;/a&gt;&lt;br&gt;
geeksforgeeks - &lt;a href="https://www.geeksforgeeks.org/html/what-are-self-closing-tags-in-html/" rel="noopener noreferrer"&gt;https://www.geeksforgeeks.org/html/what-are-self-closing-tags-in-html/&lt;/a&gt;&lt;/p&gt;



</description>
      <category>webdev</category>
      <category>ai</category>
    </item>
    <item>
      <title>Concepts of HTML and CSS (tables and border-collapse)</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Fri, 15 May 2026 12:45:42 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/concepts-of-html-and-css-tables-and-border-collapse-5eb9</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/concepts-of-html-and-css-tables-and-border-collapse-5eb9</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is table in html?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;HTML tables help organize data into rows and columns, making information easy to read and compare. For example, They are useful for displaying schedules, price lists, product details, and more.&lt;/li&gt;
&lt;li&gt; Can include text, images, links, and other elements.&lt;/li&gt;
&lt;li&gt; Allow clear presentation of data for comparison.&lt;/li&gt;
&lt;li&gt; Can be styled with CSS for better design and readability.&lt;/li&gt;
&lt;li&gt;HTML tables allow web developers to arrange data into rows and columns.&lt;/li&gt;
&lt;li&gt;This article gets you started with HTML tables, covering the very basics such as rows, cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sample code:&lt;/strong&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;table&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;font-family&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;arial&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;sans-serif&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;border-collapse&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;collapse&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;td&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nt"&gt;th&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="m"&gt;#dddddd&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;left&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;8px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nt"&gt;tr&lt;/span&gt;&lt;span class="nd"&gt;:nth-child&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="nt"&gt;even&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background-color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;#dddddd&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;HTML Table&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;table&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Company&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Contact&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Country&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Alfreds Futterkiste&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Maria Anders&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Germany&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Centro comercial Moctezuma&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Francisco Chang&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Mexico&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Ernst Handel&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Roland Mendel&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Austria&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Island Trading&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Helen Bennett&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;UK&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Laughing Bacchus Winecellars&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Yoshi Tannamuri&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Canada&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Magazzini Alimentari Riuniti&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Giovanni Rovelli&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Italy&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;What is border collapse?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The border-collapse CSS property sets whether cells inside a table have shared or separate borders.&lt;/li&gt;
&lt;li&gt;When cells are collapsed, the border-style value of inset behaves like ridge, and outset behaves like groove.&lt;/li&gt;
&lt;li&gt;When cells are separated, the distance between cells is defined by the border-spacing property.&lt;/li&gt;
&lt;li&gt;The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Sample code:&lt;/strong&gt;
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;table&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nt"&gt;td&lt;/span&gt;&lt;span class="o"&gt;,&lt;/span&gt; &lt;span class="nt"&gt;th&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1px&lt;/span&gt; &lt;span class="nb"&gt;solid&lt;/span&gt; &lt;span class="no"&gt;black&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;#table1&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;border-collapse&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;separate&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;#table2&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;border-collapse&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;collapse&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;border-collapse: separate (default):&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;table&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"table1"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Firstname&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Lastname&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Peter&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Griffin&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Lois&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Griffin&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;h2&amp;gt;&lt;/span&gt;border-collapse: collapse:&lt;span class="nt"&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;table&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"table2"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Firstname&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Lastname&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Peter&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Griffin&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Lois&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;td&amp;gt;&lt;/span&gt;Griffin&lt;span class="nt"&gt;&amp;lt;/td&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/table&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Refernces&lt;br&gt;
Border-collapse:&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse&lt;/a&gt;&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-collapse&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Table:&lt;br&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.geeksforgeeks.org/html/html-tables/" rel="noopener noreferrer"&gt;https://www.geeksforgeeks.org/html/html-tables/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.w3schools.com/html/html_tables.asp" rel="noopener noreferrer"&gt;https://www.w3schools.com/html/html_tables.asp&lt;/a&gt;&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Introduction to HTML and CSS</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Fri, 15 May 2026 02:11:07 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/introduction-to-html-and-css-1ch4</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/introduction-to-html-and-css-1ch4</guid>
      <description>&lt;p&gt;Today i learned how to create a resume building using a HTML and CSS by uses of properties like a class selector, basics of grid and flex concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Class selector:&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In HTML, the class selector is a pattern used in CSS to select and style elements that have a specific class attribute. Unlike an ID, which must be unique to one element, a class can be applied to multiple elements on the same page, making it ideal for reusable styles&lt;/li&gt;
&lt;li&gt;The CSS class selector matches elements based on the contents of their class attribute.&lt;/li&gt;
&lt;li&gt;The element selector selects HTML elements based on the element name.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is grid?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.&lt;/li&gt;
&lt;li&gt;The Grid Layout Module offers a grid-based layout system, with rows and columns.&lt;/li&gt;
&lt;li&gt;The Grid Layout Module allows developers to easily create complex web layouts.&lt;/li&gt;
&lt;li&gt;The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is flex?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;In CSS, "flex" usually refers to either the Flexible Box Layout (Flexbox) module or the specific flex shorthand property used within that layout system.&lt;/li&gt;
&lt;li&gt;The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Reference &lt;br&gt;
class selector &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Class_selectors&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.w3schools.com/css/css_selectors.asp" rel="noopener noreferrer"&gt;https://www.w3schools.com/css/css_selectors.asp&lt;/a&gt;
grid&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout&lt;/a&gt;
2.&lt;a href="https://www.w3schools.com/css/css_grid.asp" rel="noopener noreferrer"&gt;https://www.w3schools.com/css/css_grid.asp&lt;/a&gt;
flex&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex" rel="noopener noreferrer"&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/cssref/css3_pr_flex.php" rel="noopener noreferrer"&gt;https://www.w3schools.com/cssref/css3_pr_flex.php&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Day 2: Learning HTML and CSS</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Wed, 13 May 2026 12:46:56 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/day-2-learning-html-and-css-lg3</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/day-2-learning-html-and-css-lg3</guid>
      <description>&lt;p&gt;Today i learned about, How to create a portfolio using a HTML and CSS. In this session i learned about the a tag, href, margin and padding. And also blocklevel element, inline element and about the list.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Margin and Padding&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Margin and padding are the CSS properties used for spacing in box model. Margin is used for space &lt;strong&gt;outside the box&lt;/strong&gt;. Padding is used for space &lt;strong&gt;inside the box&lt;/strong&gt; of the webpage.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;a tag:&lt;/strong&gt;&lt;br&gt;
a tag is a &lt;strong&gt;anchor element&lt;/strong&gt; using to create a hyperlink in the webpage. It connects one page to another page links to different section within the same page.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;href:&lt;/strong&gt;&lt;br&gt;
href is stands for &lt;strong&gt;hypertext reference&lt;/strong&gt; is an attribute used to specify the destination of a link. It is most commonly used within the anchor tag to create clickable hyperlinks.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What are inline element:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;An inline element does not start on a new line.It only takes the width needed for its content.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What are block level element:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;A block-level element starts on a new line and takes the full width available.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is &amp;amp;copy:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&amp;amp;copy is a character entity used to display the copyright symbol.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why it use:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;HTML entities are used because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Some symbols are reserved in HTML.&lt;/li&gt;
&lt;li&gt;Ensures proper display in browsers.&lt;/li&gt;
&lt;li&gt;Makes code more compatible.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Refered by:&lt;br&gt;
google&lt;br&gt;
w3schools-&lt;a href="https://www.w3schools.com/tags/att_a_href.asp" rel="noopener noreferrer"&gt;https://www.w3schools.com/tags/att_a_href.asp&lt;/a&gt;&lt;br&gt;
Geeksforgeeks-&lt;a href="https://www.geeksforgeeks.org/html/html-lists/" rel="noopener noreferrer"&gt;https://www.geeksforgeeks.org/html/html-lists/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>css</category>
      <category>html</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Day 1:Introduction to HTML Learning</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Tue, 12 May 2026 16:04:24 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/introduction-to-html-10b4</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/introduction-to-html-10b4</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is HTML&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;HTML is stands for &lt;strong&gt;hypertext markup language&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;It is to create structure the content of webpage.&lt;/li&gt;
&lt;li&gt;It consists of series of element.&lt;/li&gt;
&lt;li&gt;It contains a tags &lt;code&gt;head&lt;/code&gt;,&lt;code&gt;body&lt;/code&gt;,&lt;code&gt;title&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Now we uses html5 version.&lt;/li&gt;
&lt;li&gt;Html uses browser to display the output.&lt;/li&gt;
&lt;li&gt;It contains the &lt;strong&gt;meta data&lt;/strong&gt; about the page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is markup language&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;A markup language is a language used to &lt;strong&gt;structure, format, and display&lt;/strong&gt; content on webpages or documents using special tags.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Why markup language&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Because tags “mark up” the text with information about structure and formatting.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Features of markup language&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Uses tags.&lt;/li&gt;
&lt;li&gt;Easy to read.&lt;/li&gt;
&lt;li&gt;Not a programming language.&lt;/li&gt;
&lt;li&gt;Used for webpage structure. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is element&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;An HTML element is a fundamental building block of a webpage that tells a web browser how to structure and interpret a specific piece of content. It typically consists of a start tag, content, and an end tag.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;opening tag.&lt;/li&gt;
&lt;li&gt;content.&lt;/li&gt;
&lt;li&gt;closing tag.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Type of CSS&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Inline CSS:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;CSS is written directly inside the HTML tag using the &lt;strong&gt;style&lt;/strong&gt; attribute.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;h1&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"color:red;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Hello&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Internal CSS:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;CSS is written inside the &lt;strong&gt;&lt;/strong&gt; tag within the HTML file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;External CSS:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;CSS is written in a separate &lt;strong&gt;.css&lt;/strong&gt; file and linked to HTML.&lt;/p&gt;

&lt;p&gt;CSS&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;green&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  &lt;strong&gt;Difference between tags and element&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The primary difference is that a &lt;strong&gt;tag&lt;/strong&gt; is a markup command used to define the start or end of a structure, while an &lt;strong&gt;element&lt;/strong&gt; is the complete unit consisting of those tags and the content inside them&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Introduction to Linux (OS)</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Tue, 12 May 2026 15:17:36 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/introduction-to-linux-os-78n</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/introduction-to-linux-os-78n</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is linux?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Linux is an open source operating system. It is used for developers to developing, server, cloud computing and company uses. It was created by Linux Ttorvalds in 1991. It is highly customizable and free to use. And it has become a one of the most popular operating system in technology.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Why is linux?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;It is free and open source.&lt;/li&gt;
&lt;li&gt;It is fast and lightweight.&lt;/li&gt;
&lt;li&gt;It is secure and stable.&lt;/li&gt;
&lt;li&gt;It is highly customizable for user.&lt;/li&gt;
&lt;li&gt;It is excellent for programming and server.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Advantages of linux&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Open source and free.&lt;/li&gt;
&lt;li&gt;More secure.&lt;/li&gt;
&lt;li&gt;High performance. &lt;/li&gt;
&lt;li&gt;Stable and reliable.&lt;/li&gt;
&lt;li&gt;Best for developers.&lt;/li&gt;
&lt;li&gt;Strong command line.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Disadvantage of linux&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Learning curve:
Beginners may find difficult because many task by terminal commands.&lt;/li&gt;
&lt;li&gt;Software compatiblity:
Some software is not officially for linux.&lt;/li&gt;
&lt;li&gt;Hardware driver issue:
A few device may not have a proper linux drivers.&lt;/li&gt;
&lt;li&gt;Gaming support:
gaming support is improve but not like windows for some game.&lt;/li&gt;
&lt;li&gt;Different distribution:
too many distributions are there to confused beginners&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Introduction to Linux (OS)</title>
      <dc:creator>Kamalesh AR</dc:creator>
      <pubDate>Mon, 11 May 2026 15:42:05 +0000</pubDate>
      <link>https://forem.com/kamalesh_ar_6252544786997/introduction-to-linux-os-15eg</link>
      <guid>https://forem.com/kamalesh_ar_6252544786997/introduction-to-linux-os-15eg</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;What is linux?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Linux is an open source operating system. It is used for developers to developing, server, cloud computing and company uses. It was created by Linux Torvalds in 1991. It is highly customizable and free to use. And it has become a one of the most popular operating system in technology.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Why is linux?&lt;/strong&gt;
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;It is free and open source.&lt;/li&gt;
&lt;li&gt;It is fast and lightweight.&lt;/li&gt;
&lt;li&gt;It is secure and stable.&lt;/li&gt;
&lt;li&gt;It is highly customizable for user.&lt;/li&gt;
&lt;li&gt;It is excellent for programming and server.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Advantages of linux&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Open source and free.&lt;/li&gt;
&lt;li&gt;More secure.&lt;/li&gt;
&lt;li&gt;High performance. &lt;/li&gt;
&lt;li&gt;Stable and reliable.&lt;/li&gt;
&lt;li&gt;Best for developers.&lt;/li&gt;
&lt;li&gt;Strong command line.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Disadvantage of linux&lt;/strong&gt;
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Learning curve:
Beginners may find difficult because many task by terminal commands.&lt;/li&gt;
&lt;li&gt;Software compatiblity:
Some software is not officially for linux.&lt;/li&gt;
&lt;li&gt;Hardware driver issue:
A few device may not have a proper linux drivers.&lt;/li&gt;
&lt;li&gt;Gaming support:
gaming support is improve but not like windows for some game.&lt;/li&gt;
&lt;li&gt;Different distribution:
too many distributions are there to confused beginners&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
  </channel>
</rss>
