<?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: Sparsh Agarwal</title>
    <description>The latest articles on Forem by Sparsh Agarwal (@akathecoder).</description>
    <link>https://forem.com/akathecoder</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%2F435183%2F1b03b8fc-76cb-4542-8f76-2b6cc1a53814.jpg</url>
      <title>Forem: Sparsh Agarwal</title>
      <link>https://forem.com/akathecoder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/akathecoder"/>
    <language>en</language>
    <item>
      <title>Blockchain for Dummies</title>
      <dc:creator>Sparsh Agarwal</dc:creator>
      <pubDate>Tue, 04 May 2021 14:47:32 +0000</pubDate>
      <link>https://forem.com/akathecoder/blockchain-for-dummies-2kkc</link>
      <guid>https://forem.com/akathecoder/blockchain-for-dummies-2kkc</guid>
      <description>&lt;p&gt;If you are out on the internet recently, you must have heard of terms like "Blockchain" or "Cryptocurriencies". They have become quite the rage in the last few years. People are saying that it will change the world. But most of us don't really know or understand this blockchain or cryptocurrencies and why we should know about them. Let's try to understand it a little.&lt;/p&gt;

&lt;p&gt;This article summarizes the most basic and important concepts needed to understand blockchain and its applications. So that you can participate in any conversation about this matter without getting lost in the first sentence.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Blockchain is NOT
&lt;/h2&gt;

&lt;p&gt;Before we learn what is Blockchain, first we need to know what blockchain is not. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Blockchain is &lt;strong&gt;NOT BITCOIN&lt;/strong&gt; &lt;/li&gt;
&lt;li&gt;Blockchain is &lt;strong&gt;NOT a cryptocurrency&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now that we know what it is not, let's look into what it actually is.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Blockchain?
&lt;/h2&gt;

&lt;p&gt;Blockchain is the name of a whole new technology. As the name suggests it is a chain of blocks. Now, what are those blocks? These blocks are the transactions or the data stored on the blockchain. Each block is linked to two other blocks making a sequence of those blocks.&lt;/p&gt;

&lt;p&gt;According to IBM, a pioneer in Blockchain and Tech Industry &lt;em&gt;"Blockchain is a shared, immutable ledger that facilitates the process of recording transactions and tracking assets in a business network."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;All the data in those blocks are visible to everyone in that blockchain. It is also immutable, meaning that once the data is entered into the blockchain it cannot be altered.&lt;/p&gt;

&lt;p&gt;Now there are a lot more things that we need to know to understand how blockchain works, but we will not be looking into them in this article. I will be writing more articles on the blockchain which will dive into more detail.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why do we need Blockchain?
&lt;/h2&gt;

&lt;p&gt;Whenever we do any type of transaction on the internet or use any service we need to be able to trust the other party that they will hold their word. To achieve that we have traditionally used middlemen, like banks, which facilitate those transactions. For years this method has worked really well but it has a lot of problems too. For example,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;They can be really slow&lt;/li&gt;
&lt;li&gt;They demand a fee to use their services&lt;/li&gt;
&lt;li&gt;We give them a lot of power and control over our lives&lt;/li&gt;
&lt;li&gt;They have full control over our data and can choose to do anything with it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By using blockchain technology, we can eliminate a lot of those problems since it is not managed by any central authority but a group of people (everyone who uses it).&lt;/p&gt;

&lt;p&gt;I will be writing a lot more articles about blockchain which will discuss the technologies in a lot more detail. &lt;/p&gt;

</description>
      <category>blockchain</category>
      <category>cryptocurrency</category>
      <category>bitcoin</category>
      <category>ethereum</category>
    </item>
    <item>
      <title>Top 10 VS Code Extensions to level up your development game</title>
      <dc:creator>Sparsh Agarwal</dc:creator>
      <pubDate>Thu, 11 Mar 2021 06:27:58 +0000</pubDate>
      <link>https://forem.com/akathecoder/top-10-vs-code-extensions-to-level-up-your-development-game-18i</link>
      <guid>https://forem.com/akathecoder/top-10-vs-code-extensions-to-level-up-your-development-game-18i</guid>
      <description>&lt;p&gt;VS Code is probably the most used code editor in the world. One of the main reasons why it has become so popular is its ability to install additional features by using extensions. There are more than thousands of extensions available on VS Code. But it can be really hard to find the extensions you might be looking for.&lt;br&gt;
In this blog, we will look into 10 extensions (in no particular order) on VS Code which will immediately help you in your development journey.&lt;/p&gt;
&lt;h2&gt;
  
  
  1. Better Comments
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Faaron-bond.gallerycdn.vsassets.io%2Fextensions%2Faaron-bond%2Fbetter-comments%2F2.1.0%2F1594671781043%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Faaron-bond.gallerycdn.vsassets.io%2Fextensions%2Faaron-bond%2Fbetter-comments%2F2.1.0%2F1594671781043%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Better Comments Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;aaron-bond.better-comments
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This extension allows you to add semantics to your comments. You can categorize comments into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Alerts&lt;/li&gt;
&lt;li&gt;Queries&lt;/li&gt;
&lt;li&gt;TODOs&lt;/li&gt;
&lt;li&gt;Highlights&lt;/li&gt;
&lt;li&gt;Commented out code can also be styled to make it clear the code shouldn't be there&lt;/li&gt;
&lt;li&gt;Any other comment styles you'd like can be specified in the settings&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Faaron-bond%2Fbetter-comments%2Fmaster%2Fimages%2Fbetter-comments.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Faaron-bond%2Fbetter-comments%2Fmaster%2Fimages%2Fbetter-comments.PNG" alt="Better Comments Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Bracket Pair Colorizer
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcoenraads.gallerycdn.vsassets.io%2Fextensions%2Fcoenraads%2Fbracket-pair-colorizer%2F1.0.61%2F1542132753296%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcoenraads.gallerycdn.vsassets.io%2Fextensions%2Fcoenraads%2Fbracket-pair-colorizer%2F1.0.61%2F1542132753296%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Bracket Pair Colorizer Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;CoenraadS.bracket-pair-colorizer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FCoenraadS%2FBracketPair%2Fmaster%2Fimages%2Fexample.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2FCoenraadS%2FBracketPair%2Fmaster%2Fimages%2Fexample.png" alt="Bracket Pair Colorizer Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Code Runner
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fformulahendry.gallerycdn.vsassets.io%2Fextensions%2Fformulahendry%2Fcode-runner%2F0.11.2%2F1609855032050%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fformulahendry.gallerycdn.vsassets.io%2Fextensions%2Fformulahendry%2Fcode-runner%2F0.11.2%2F1609855032050%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Code Runner Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;formulahendry.code-runner
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This extension allows you to run code snippets or code files for multiple languages like &lt;strong&gt;C, C++, Java, JavaScript, PHP, Python, Perl&lt;/strong&gt; and many many more.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Code Spell Checker
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.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%2Fdp51c2eqnd3j46k2dt9n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2Fdp51c2eqnd3j46k2dt9n.png" alt="Code Spell Checker Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;streetsidesoftware.code-spell-checker
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A basic spell checker that works well with camelCase code.&lt;/p&gt;

&lt;p&gt;The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. ES7 React/Redux/GraphQL/React-Native snippets
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.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%2Fph41xr00ef1jb5g5v2co.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2Fph41xr00ef1jb5g5v2co.png" alt="ES7 React/Redux/GraphQL/React-Native snippets logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;dsznajder.es7-react-js-snippets
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This extension provides you with JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.&lt;/p&gt;

&lt;p&gt;If you are a React Developer then this extension is a must. It provides boilerplate code, auto-completion for react components, etc. which makes life a lot easier.&lt;/p&gt;

&lt;p&gt;There are a lot of snippets available in this extension. A list of them can be found at this &lt;a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets" rel="noopener noreferrer"&gt;link&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. GitLens — Git supercharged
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Feamodio.gallerycdn.vsassets.io%2Fextensions%2Feamodio%2Fgitlens%2F11.3.0%2F1614927049929%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Feamodio.gallerycdn.vsassets.io%2Fextensions%2Feamodio%2Fgitlens%2F11.3.0%2F1614927049929%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="GitLens Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;eamodio.gitlens
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Feamodio%2Fvscode-gitlens%2Fmain%2Fimages%2Fdocs%2Frevision-navigation.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fraw.githubusercontent.com%2Feamodio%2Fvscode-gitlens%2Fmain%2Fimages%2Fdocs%2Frevision-navigation.gif" alt="GitLens Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Live Server
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fritwickdey.gallerycdn.vsassets.io%2Fextensions%2Fritwickdey%2Fliveserver%2F5.6.1%2F1555497731217%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fritwickdey.gallerycdn.vsassets.io%2Fextensions%2Fritwickdey%2Fliveserver%2F5.6.1%2F1555497731217%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Live Server logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;ritwickdey.LiveServer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you are a web developer and code in plain HTML, CSS, and javascript then you must know the pain to continuously reload the page can be.&lt;/p&gt;

&lt;p&gt;Live Server is an amazing extension that starts your HTML file on localhost and automatically reloads the page when you save your file.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Live Share
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fms-vsliveshare.gallerycdn.vsassets.io%2Fextensions%2Fms-vsliveshare%2Fvsliveshare%2F1.0.3912%2F1614890580405%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fms-vsliveshare.gallerycdn.vsassets.io%2Fextensions%2Fms-vsliveshare%2Fvsliveshare%2F1.0.3912%2F1614890580405%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Live Share Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;MS-vsliveshare.vsliveshare
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you're using or app types you're building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Prettier - Code formatter
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fesbenp.gallerycdn.vsassets.io%2Fextensions%2Fesbenp%2Fprettier-vscode%2F5.9.2%2F1613061160143%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fesbenp.gallerycdn.vsassets.io%2Fextensions%2Fesbenp%2Fprettier-vscode%2F5.9.2%2F1613061160143%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Prettier Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;esbenp.prettier-vscode
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Prettier is arguably the best extension on VS Code.&lt;/p&gt;

&lt;p&gt;Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.&lt;/p&gt;

&lt;p&gt;It supports JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Path Intellisense
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fchristian-kohler.gallerycdn.vsassets.io%2Fextensions%2Fchristian-kohler%2Fpath-intellisense%2F2.3.0%2F1599815793523%2FMicrosoft.VisualStudio.Services.Icons.Default" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fchristian-kohler.gallerycdn.vsassets.io%2Fextensions%2Fchristian-kohler%2Fpath-intellisense%2F2.3.0%2F1599815793523%2FMicrosoft.VisualStudio.Services.Icons.Default" alt="Path Intellisense Logo"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ext &lt;span class="nb"&gt;install &lt;/span&gt;christian-kohler.path-intellisense
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a simple extension which automatically completes the path files in your code.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/iaHeUiDeTUZuo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/iaHeUiDeTUZuo.gif" alt="Path Intellisense Example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have any more extensions which you find quite useful then please mention them in the comments.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>webdev</category>
      <category>extensions</category>
    </item>
    <item>
      <title>Get Started with Web Development</title>
      <dc:creator>Sparsh Agarwal</dc:creator>
      <pubDate>Tue, 16 Feb 2021 06:06:40 +0000</pubDate>
      <link>https://forem.com/akathecoder/get-started-with-web-development-27ee</link>
      <guid>https://forem.com/akathecoder/get-started-with-web-development-27ee</guid>
      <description>&lt;p&gt;Nowadays it's really easy to learn anything online. You can go online and google "learn [skill]" and you can find thousands of options but what exact skill should you learn. &lt;br&gt;
If you want to become a Web Developer (a person who creates websites) and not sure where to start then this blog is for you.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;If you don't want to read this whole blog and just want an online course that teaches you everything you need to know from scratch. I got you covered 😉&lt;br&gt;
&lt;a href="https://www.udemy.com/course/the-complete-web-development-bootcamp/"&gt;The Complete Web Development Bootcamp&lt;/a&gt; by Angela Yu is probably the best online Web Development course out there. I also started my Web Development journey from this course itself.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h1&gt;
  
  
  What is Web Development?
&lt;/h1&gt;

&lt;p&gt;There are practically countless websites and web applications online today. These websites can be for anything from social networking websites like Facebook to E-Commerce websites like Amazon. Web Development is the creation, updating, and maintenance of these websites. &lt;br&gt;
Web Developers (commonly referred to as &lt;strong&gt;devs&lt;/strong&gt;) use a lot of different programming languages and technologies to create such websites.&lt;/p&gt;

&lt;h1&gt;
  
  
  Where to start?
&lt;/h1&gt;

&lt;p&gt;To learn Web Development, we need to know the basics. &lt;br&gt;
Web Development is generally divided into two parts:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Frontend - The part of a website that the user interacts with directly is termed as the front end. It is also referred to as the ‘client-side’ of the application. It includes everything that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Backend - Backend is the server-side of the website. It stores and arranges data, and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with. It is the portion of software that does not come in direct contact with the users.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;First, we need to learn Frontend Development.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. HTML
&lt;/h2&gt;

&lt;p&gt;First, we need to learn &lt;strong&gt;HTML (HyperText Markup Language)&lt;/strong&gt;. As you can see in its name HTML is not a Programming language but a Markup Language. Now, what is a Markup Language you ask? A Markup Language is a system for annotating a document in a way that is syntactically distinguishable from the text. In simple terms, it is used to define the structure of the document so that it displays only text and in the way, it's intended to.&lt;/p&gt;

&lt;p&gt;There are a lot of places to learn HTML. Some of them are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML#beginners_tutorials"&gt;MDN Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/html/"&gt;W3 School&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.javatpoint.com/html-tutorial"&gt;JavaTPoint&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.tutorialspoint.com/html/index.htm"&gt;Tutorials Point&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  2. CSS
&lt;/h2&gt;

&lt;p&gt;Now that we can show text on the screen, we need to style the screen to make it look better. For this purpose, we use &lt;strong&gt;CSS (Cascading Style Sheets)&lt;/strong&gt;. CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. Basically, it gives style to the website.&lt;/p&gt;

&lt;p&gt;Resources to Learn:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS"&gt;MDN Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/css/"&gt;W3 School&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.javatpoint.com/css-tutorial"&gt;JavaTPoint&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.tutorialspoint.com/css/index.htm"&gt;Tutorials Point&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. CSS Framework
&lt;/h2&gt;

&lt;p&gt;To make our lives a little bit easier, we use different tools and libraries. Let's see some of them.&lt;br&gt;
First, you probably want to learn a CSS Framework or Library which will greatly reduce the code you write while styling your website.&lt;br&gt;
There are quite a few such CSS Frameworks and Libraries out there but we will focus on just one for now. Now you can choose anyone but two of the more famous and easier ones are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/"&gt;Bootstrap&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tailwindcss.com/docs"&gt;Tailwind CSS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  4. JavaScript
&lt;/h2&gt;

&lt;p&gt;Now our website has started to look a lot like those other big websites, but it still can't perform any function. To do that we need to define logic in the website using JavaScript. Javascript is a high-level programming language that is used to define logic and provide the functionality to websites.&lt;/p&gt;

&lt;p&gt;Resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"&gt;MDN Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/js/DEFAULT.asp"&gt;W3 School&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.javatpoint.com/javascript-tutorial"&gt;JavaTPoint&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.tutorialspoint.com/javascript/index.htm"&gt;Tutorials Point&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  5. DOM Manipulation
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;The Document Object Model (DOM)&lt;/strong&gt; is the data representation of the objects that comprise the structure and content of a document on the web. It represents the page so that programs can change the document structure, style, and content.&lt;br&gt;
We use Javascript to interact with DOM and provide functionality, change the Data and style of the webpage while the website is running, etc.&lt;/p&gt;

&lt;p&gt;Resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"&gt;MDN Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/js/js_htmldom.asp"&gt;W3 Schools&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now we know how to use HTML, CSS, and Javascript which are the big trinity of Web Development. Only by using these three technologies, we can create nearly most of the websites out there. But as you go on creating websites it can get a lot tiring writing a lot of the same code again and again to achieve seemingly simple functionalities.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. jQuery
&lt;/h2&gt;

&lt;p&gt;Moving on the same path to make your lives even easier you should learn jQuery.&lt;br&gt;
jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. &lt;/p&gt;

&lt;p&gt;Resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://api.jquery.com/"&gt;jQuery Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.w3schools.com/jquery/jquery_intro.asp"&gt;W3 Schools&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now that the Frontend part is complete (kinda) we will move onto Backend.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Backend Framework
&lt;/h2&gt;

&lt;p&gt;There are a lot of options when it comes to Backend Frameworks. There is NodeJS with JavaScript, Django with Python, Ruby on Rails, etc.&lt;br&gt;
Just choose one which you find easier.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Databases
&lt;/h2&gt;

&lt;p&gt;Even though a lot of the websites would not need a database but in case you need to store data as well, for example like Ecommerce Website, Blog, etc., we do need a database.&lt;br&gt;
There are a lot of different databases, but they can be generally divided into two types, i.e. SQL and NoSQL Databases.&lt;br&gt;
Some of the most famous ones are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.tutorialspoint.com/mysql/index.htm"&gt;MySQL&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.mongodb.com/"&gt;MongoDB&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.postgresql.org/"&gt;PostgreSQL&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With this, you know all the things you might need to make a fully-fledged website.&lt;/p&gt;

&lt;p&gt;Happy Coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>udemy</category>
    </item>
  </channel>
</rss>
