<?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>DEV Community: Surya  P</title>
    <description>The latest articles on DEV Community by Surya  P (@surya_surya_03f1faed79db3).</description>
    <link>https://dev.to/surya_surya_03f1faed79db3</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4129946%2Fdb3ae22e-406e-4b7d-81cb-3132de287aad.jpg</url>
      <title>DEV Community: Surya  P</title>
      <link>https://dev.to/surya_surya_03f1faed79db3</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/surya_surya_03f1faed79db3"/>
    <language>en</language>
    <item>
      <title>JavaScript Basics:Arrays,Functions &amp; Callbacks.</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Sat, 10 Oct 2026 16:33:32 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/javascript-basicsarraysfunctions-callbacks-1np4</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/javascript-basicsarraysfunctions-callbacks-1np4</guid>
      <description>&lt;p&gt;*Today, I revised some important JavaScript concepts as part of my web development journey.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What I Learned:&lt;/li&gt;
&lt;li&gt;Array Length (.length)
The .length property returns the total number of elements in an array.
let marks = [10, 20, 30];
console.log(marks.length); // 3&lt;/li&gt;
&lt;li&gt;Mixed Data Types in Arrays
JavaScript arrays can store different types of data together.
const arr = [10, 20, 30, "abc", true];&lt;/li&gt;
&lt;li&gt;The filter() Method
The filter() method creates a new array containing elements that match a given condition.
const numbers = [10, 15, 20, 25, 30];
const result = numbers.filter(num =&amp;gt; num &amp;gt; 20);&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;console.log(result); // [25, 30]&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Callback Functions
A callback is a function passed as an argument to another function.&lt;/li&gt;
&lt;li&gt;Arrow Functions (=&amp;gt;)
Arrow functions provide a concise way to write functions in JavaScript.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;*Conclusion:&lt;br&gt;
Learning and revising these concepts helps me improve my JavaScript knowledge and build a strong foundation in web development.&lt;br&gt;
I will continue learning and building new projects! 💻&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Product Listing Using HTML,CSS, And JavaScript.</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Fri, 09 Oct 2026 18:30:30 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/product-listing-using-htmlcss-and-javascript-3dh5</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/product-listing-using-htmlcss-and-javascript-3dh5</guid>
      <description>&lt;p&gt;I created a Product Listing Page using HTML, CSS, and JavaScript.&lt;br&gt;
 *Features:&lt;br&gt;
Product images and prices&lt;br&gt;
Product categories&lt;br&gt;
Add to Cart buttons&lt;br&gt;
CSS Grid layout&lt;br&gt;
This project helped me improve my front-end development skills and learn more about JavaScript.&lt;br&gt;
Looking forward to building more projects.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JavaScript Objects and Arrow Functions</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Wed, 07 Oct 2026 16:41:50 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/javascript-objects-and-arrow-functions-b1h</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/javascript-objects-and-arrow-functions-b1h</guid>
      <description>&lt;p&gt;Today, I revised two important JavaScript concepts: Objects and Arrow Functions.&lt;/p&gt;

&lt;p&gt;I learned how objects store data using key-value pairs and how methods can be used inside objects.&lt;/p&gt;

&lt;p&gt;I also learned how Arrow Functions provide a shorter and cleaner way to write functions.&lt;/p&gt;

&lt;p&gt;Continuing my JavaScript learning journey step by step.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>javascript Learning:Objects and Arrows Functions.</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Wed, 30 Sep 2026 16:06:57 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/javascript-learningobjects-and-arrows-functions-2lka</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/javascript-learningobjects-and-arrows-functions-2lka</guid>
      <description>&lt;p&gt;Today, I spent some time revising two important JavaScript concepts: Objects and Arrow Functions.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;JavaScript Objects
JavaScript objects are used to store related data and functionality together using key-value pairs. Objects can also contain methods to perform specific actions.
For example:
const mobile = {
brand: "Vivo",
price: 15000,
network: "5G",&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;browse: function () {&lt;br&gt;
console.log("Browsing...");&lt;br&gt;
}&lt;br&gt;
};&lt;br&gt;
I also practiced creating objects for different bikes:&lt;br&gt;
const TVS = {&lt;br&gt;
model: "XL-100",&lt;br&gt;
price: 99000,&lt;br&gt;
cc: 100,&lt;/p&gt;

&lt;p&gt;drive: function () {&lt;br&gt;
console.log("Speed - 70 km/h");&lt;br&gt;
}&lt;br&gt;
};&lt;/p&gt;

&lt;p&gt;const bajaj = {&lt;br&gt;
model: "Pulsar",&lt;br&gt;
price: 150000,&lt;br&gt;
cc: 150,&lt;/p&gt;

&lt;p&gt;drive: function () {&lt;br&gt;
console.log("Speed - 120 km/h");&lt;br&gt;
}&lt;br&gt;
};&lt;br&gt;
This helped me understand how properties and methods can be organized inside an object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Arrow Functions
I also revised Arrow Functions, which provide a shorter and cleaner way to write function expressions in JavaScript.
The basic syntax is:
(param1, param2) =&amp;gt; expression;
For example:
const add = (i, j) =&amp;gt; i + j;
This practice helped me understand how JavaScript objects and functions work together and made my fundamentals stronger.
I'm continuing my JavaScript learning journey and looking forward to learning more concepts and building projects.&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>My Frontend Project:Google &amp; Facebook Login pages.</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Mon, 28 Sep 2026 15:52:02 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/my-frontend-projectgoogle-facebook-login-pages-3dad</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/my-frontend-projectgoogle-facebook-login-pages-3dad</guid>
      <description>&lt;p&gt;I recently started my web development journey by learning HTML and CSS.&lt;br&gt;
As part of practice, I Created two simple frontend projects:&lt;br&gt;
*Google search page&lt;br&gt;
*Facebook Login page&lt;br&gt;
These project helped me understand HTML structure,css styling,layouts,forms,buttons,and alignment.&lt;/p&gt;

&lt;p&gt;While building these pages,I got more comforrtable with writing HTML and CSS and Learned how small design changes can  improve the over all apperence of a webpage.&lt;/p&gt;

&lt;p&gt;I'm currently learning javascript and looking forward to building more interactive projects.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>webdev</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Youtube Front page clone using HTML &amp; CSS</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Sat, 26 Sep 2026 16:14:07 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/youtube-front-page-clone-using-html-css-fkg</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/youtube-front-page-clone-using-html-css-fkg</guid>
      <description>&lt;p&gt;Today I created a YouTube-inspired front page using HTML and CSS.&lt;/p&gt;

&lt;p&gt;In this project, I focused on creating the basic layout and design of a YouTube front page. I used HTML to structure the webpage and CSS to style the elements, spacing, alignment, and overall layout.&lt;/p&gt;

&lt;p&gt;This project helped me practice HTML structure, CSS styling, Flexbox, spacing, and creating a clean frontend design.&lt;/p&gt;

&lt;p&gt;I’m happy with the progress and looking forward to building more frontend projects and improving my web development skills.&lt;/p&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>webdev</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Today I practiced my front-end development skills by designing an Instagram-inspired login page using HTML and CSS.I focused on creating a clean layout, proper alignment, input fields, buttons, spacing, and styling to make the page look simple.</title>
      <dc:creator>Surya  P</dc:creator>
      <pubDate>Wed, 23 Sep 2026 17:20:09 +0000</pubDate>
      <link>https://dev.to/surya_surya_03f1faed79db3/today-i-practiced-my-front-end-development-skills-by-designing-an-instagram-inspired-login-page-346b</link>
      <guid>https://dev.to/surya_surya_03f1faed79db3/today-i-practiced-my-front-end-development-skills-by-designing-an-instagram-inspired-login-page-346b</guid>
      <description></description>
      <category>css</category>
      <category>frontend</category>
      <category>html</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
