Forem: Ansub Khan

Blockchain for Beginners

Ansub Khan — Thu, 03 Feb 2022 11:11:04 +0000

What is Blockchain?

it is a permanent database that is shared across a lot of computers around the world which makes it a chain of networks connected together that forms a blockchain.

blockchain was made popular by an anonymous person, Satoshi Nakamoto. when he released Bitcoin Network back in 2008. Bitcoin is a cryptocurrency network that handles the transfer of BTC assets across the network, without a need of a middleman or authority. while ensuring that the network itself is secure and cannot be hacked.

overtime a lot of other cryptocurrencies were made after getting inspiration from Bitcoin, another popular cryptocurrency is Ethereum.

State Management

in blockchain, we store data like a spreadsheet which contains a list of all transactions, the content of that spreadsheet at any given time will be called as "state" of that database. hence state management is simply the process of updating the data with new transactions and recording it for everyone to see.

Nodes

Node is basically a device that forms the infrastructure of blockchain. all nodes on a blockchain are connected to each other and they constantly exchange the latest blockchain data with each other so all nodes stay up to date. A full node is basically a device (like a computer) that contains a full copy of the transaction history of the blockchain.

*Use of Node: *

checks if the block of transactions is valid to accept or reject it.
save and store the block of transactions in the history of blockchain transactions.
broadcast and spread this transaction history to other nodes to sync them all with blockchain.

there is also another kind of node, which is called a mining node( aka miners), These are the nodes that can add transactions to a blockchain. Every node in the blockchain network has an option to become a mining node. The process of adding transactions to a blockchain is called mining.

Decentralization

because we are storing the data in peer to peer network of nodes, blockchain is basically a decentralized network. which has great advantages over a decentralized network.

for example:

Data breaches are common which exposes a lot of data
Centralized authorities can censor and shut down speech
Reliance on a central authority means upstream problems affect downstream consumers

on the other hand, decentralized networks bring a lot of benefits:

No censorship as there is no single authority or middleman that can censor you
No downtime as the overall network is running across 1000's of nodes across the globe

Use Cases:

cryptocurrency
smart contract
decentralized finance
gaming
supply chain tracking
decentralized governance
verifiable ownership of assets and many more

Resources

here are some good resources to understand blockchain.

But how does bitcoin actually work?

Bitcoin Whitepaper

Ethereum Whitepaper

What is a Single-Page Application [ SPA ]?

Ansub Khan — Fri, 21 Jan 2022 15:03:36 +0000

What is SPA?

SPA as the name suggests means when you load the app for once. In simple words, the pages don't reload when you click on something. on clicking on an element on the page, SPA only renders that element, instead of what traditional pages do (rendering the whole page with every 🖱)

If you Notice Gmail when you browse through your email you’ll notice that not much changes during navigation - the sidebar and header remain untouched as you go through your inbox.

The three most popular SPA tools are:

** Angular**: developed by Google and now almost ten years old)
React: created by Facebook a few years later
Vue: developed by an ex-Google employee and which has enjoyed a surge in popularity over the past few years.

Examples of SPA

Facebook
Google Maps
Gmail
Twitter
Google Drive

Pros of SPA

Speed and Response Time because you are loading everything at once
a better User Experience as users can access information very quickly.
Caching as SPA only have to request data from the server one time, upon initial download.

Cons of SPA

SEO is the biggest problem with SPAs because of fewer pages and HTML Content.
will not work for users who have disabled Javascript in their browser

if you like this article then follow me on Twitter
I learn and try to simply stuff for you :)

Thanks For Reading!

React Basics!

Ansub Khan — Thu, 20 Jan 2022 16:10:30 +0000

💭 What is React?

A UI library developed by Facebook
creates interactive, stateful, and reusable components
it uses Virtual DOM
example: Instagram .com is completely written in React

✨ Features is React?

it makes quick and responsive apps
uses Virtual DOM
Does Server-Side Rendering
Single Way Data Flow *Open Source

😌 Why Use React?

Simple and easy to learn
it is fast, simple, and scalable
it uses a component-based approach
no need for direct DOM Manipulation
Increases App Performance

🥺 Limitations Of React

everything has some limitations and React is not an exception!

it is very rapidly evolving which might get difficult for some developers to keep up.
Inline HTML and JSX confuses a lot of people.
Size of the Library is quite large.

Follow Me On Twitter

Javascript Concepts that you should Learn in 2022

Ansub Khan — Sat, 15 Jan 2022 07:16:33 +0000

Lexical Structure

lexical Structure is basically the building block on Javascript: Unicode, semicolons, white space, case sensitivity, comments, literals, identifiers, and reserved words. some of the very important topics one must know before starting with the other topics of JS.

Learning Link

Expressions

Expressions are units of code that can be evaluated and resolved to a value.
Learning Link

Types

String - represents a sequence of characters e.g. "hello"
Number - represents numeric values e.g. 100
Boolean - represents boolean value either false or true
Undefined - represents undefined value
Null - represents null i.e. no value at all

Variables

a variable stores the data value that can be changed later on.

let myVariable = 22; //this can be a string or number.

Functions

JavaScript functions are used to perform operations. We can call JavaScript function many times to reuse the code.

var x = myFunction(4, 3);     // Function is called, return value will end up in x

function myFunction(a, b) {
    return a * b;             // Function returns the product of a and b
}

Object

an object is an unordered collection of key-value pairs. Each key-value pair is called a property.

let object = {
  'key1': 'value1',
  'key2': 'value2',
  'keyn': 'valuen',
};
console.log(object);

Learning Link

Classes

Classes are similar to functions.They use class keyword instead of function keyword.
They use the constructor method to initialise.

class ClassMates{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    displayInfo(){
        return this.name + "is " + this.age + " years old!";
    }
}

let classmate = new ClassMates("Mike Will",15);
classmate.displayInfo();  // result: Mike Will is 15 years old!

Learning Link

Arrow functions

Arrow functions were introduced in ES6, they allow us to write shorter function syntax:

let myFunction = (a, b) => a * b;

Loops

Loops are handy, if you want to run the same code over and over again, each time with a different value.

Learning Link

Scopes

The scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
Learning Link

Arrays

Objects allow you to store keyed collections of values. That’s fine, But quite often we find that we need an ordered collection, where we have a 1st, a 2nd, a 3rd element, and so on. For example, we need that to store a list of something: users, goods, HTML elements, etc.

let fruits = ["Apple", "Orange", "Plum"];

Learning Link

Template literals

Template Literals use back-ticks (``) rather than the quotes ("") to define a string:

` let text = `Hello World!`; `
Learning Link

Strict mode

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.

Strict Mode

ECMAScript 6

ECMAScript 2015 was the second major revision to JavaScript, ECMAScript 2015 is also known as ES6 and ECMAScript 6.
Learning Link

HTTP Request

All modern browsers have a built-in XMLHttpRequest object to request data from a server, The XMLHttpRequest object is a developers dream because you can:

Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background

Learning Link

Some GitHub Terms You Should Know!

Ansub Khan — Sun, 09 Jan 2022 06:06:38 +0000

GitHub is one of the most used hosting platform for version control and collaboration, we must have heard about the terms like repo and PR in your coding career what do they mean, or simply put what do they even mean to us? here are a few Github terms you must know!

Repository (Repo)

it is a directory that stores all of the files and folders you used to build the project and it also stores the changes made to the project.

Commit

commit is a change that you bring to your program, it can be adding, removing, modifying code or files from your project.

Local and Remote

your project will have two independent repos one which is offline is called Local and one which is hosted online on platforms like GitHub or GitLab is Remote

Pull, Push or Fetch

to synchronize your project between local and remote we use these three operations.

Pull - pull changes from remote to local

Push - push changes from local to remote

Fetch - only downloads new data but doesn't integrate it to your working project in local

Branch

they basically divert you from the mainline of development, so that you can fix the bug or build a new feature and then merge it back without messing up the main code.

Pull Request

it is simply a way of telling people that you want the changes you made in the branch to get included in Main Code.

Top 5 Visual Studio Code Keyboard Shortcuts

Ansub Khan — Mon, 27 Dec 2021 16:34:04 +0000

keyboard shortcuts are there to make our life much easier, imagine copying and pasting if we don't have cmd + C and cmd + V (control for windows). VS Code also comes with a lot of helpful shortcuts that can make our work very easy.

here are the Top 5 Visual Studio Code Keyboard Shortcuts that we should know about:

1. Command Palette Shortcut:

use shift + cmd + P to open the command palette and you can search for any setting in VS Code that you want to do. command palette is like the brain of VS Code. it is Ctrl+Shift+P for windows.

2. Search for Item in File

use Cmd + F to instantly search for the keyword you are looking for inside the VS Code file that you are working on. here you can find and replace the words and there is much more. Ctrl+F for windows.

3. Toggle Panel

use Cmd + J to hide or reveal the bottom panel, it is much handy when you are going to use the terminal inside VS Code because with this shortcut you can quickly reveal or hide the terminal window. do give this one a try!

4. Find a File

as the name suggests it opens up the search for files, where you can quickly search for files that you are looking for. use Cmd + P for that.

5. Global Finder

this is similar to the 3rd one but this works globally, which means that you can search keywords in every file instead of doing it in just one file Shift + Cmd + F

here is the cheat sheet for all the commands discussed above.

if you like reading this blog feel free to follow me on Twitter, where I try to simplify Web Development for you.

What is Local Storage?

Ansub Khan — Fri, 24 Dec 2021 16:14:58 +0000

localStorage is a way of saving the key-value pair in the web browser and the best part about it is that there is no expiration date meaning that data will still be there in the browser even if you reload the page.

How does localStorage work?

to storage the localStorage in your web application, you can use five methods:

setItem() : adds key value to localStorage
getItem() : retrieve the items you entered in localStorage
clear(): to clear the local storage

Where is localStorage stored?

it depends upon the browsers that how and where they are storing it, for example, Firefox stores localstorage in webappsstore.sqlite file in the profile folder.

What is window.localStorage?

localStorage is available via the windows.localStorage property which is a part of the Window interface in Javascript that represents the window containing the DOM Document.

setItem()

it is a method to store the values in localStorage object

it takes two parameters: key and a value



window.localStorage.setItem('name', 'Ansub Khan')

over here you can see that ‘name’ is basically a key that stores the value ‘Ansub Khan’, now the thing is that localStorage only stores String but what if we have to store data of different data types like an array?

for that we use a method called JSON.stringify() before passing it to setItem().



const person = { 
    name: "Ansub Khan", 
    age: 21
}

window.localStorage.setItem('user', JSON.stringify(person));

getItem()

it is used to access the data that you have stored in the localStorage using setItem() method.



window.localStorage.getItem('user')

// this is going to give us

'{"name":"Ansub Khan","age":21}'

now to use this value as an object you need to convert it back to an object, if you remember localStorage stores data in String format, that’s why we used JSON.stringify(), now to convert it back to object we are going to use JSON.parse()



JSON.parse(window.localStorage.getItem('user'));

clear()

it is used to delete the data that we saved in local storage, you can see the localStorage in Chrome, open inspect element, and then click on the application, there you are going to find the local storage as seen in the image below

on using this method



window.localStorage.clear()

it will get empty like it was before.

localStorage has some limitations tho:

Do not store sensitive user information in localStorage
It is not a substitute for a server-based database as information is only stored on the browser
localStorage is limited to 5MB across all major browsers
localStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page

CSS Colors Simplified!

Ansub Khan — Sun, 28 Nov 2021 11:00:35 +0000

Abstract

CSS Color Property helps us to add colors to the webpage which makes the website quite appealing. using CSS Color Property we can give color to the text, make changes in the background and also add gradients. and it is actually quite easy to add colors to the website. we only have to use a simple syntax.

Content

Color Basics
Hex Color Code
RGB Color Values
HSL Color Values
Changing Color Using Class and Id
CSS Background Color
CSS Link Color
Summary

CSS Color Basics

CSS (short for cascading stylesheets ) makes it very easy to add colors also there are a lot of formats that we can use to add colors like HTML Color Names, RGB, and HSL Value.

let’s start with the most basic way of adding color to your website:

body{

color: red;

}

this is going to change the text of the website to Red, so whenever you are going to add any text in your HTML it is going to appear in red color.

you must be wondering that we just typed red and this is showing text in red color?

they are W3C color names assigned by the W3C to specify colors in web pages or files. These names can be used instead of their corresponding hexadecimal value to refer to that color in an HTML file or CSS stylesheet. These names are supported by all modern web browsers and used because it's easier to remember color names than color codes.

some examples of W3C colors are green, yellow, blue, MediumSlateBlue, etc.

visit the W3C website to see the complete list of colors.

HEX Color Code

The most common way to add color to an HTML element using CSS is with hex color codes. To change the default color of your website's text, use the CSS color property in your stylesheet. the default color of your website's text.

body{
color: #ff0000;
}

Hex color codes start with a hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF

RGB Color Value

RGB Color Value is commonly found in many design apps and technologies, here RGB stands for Red Green Blue. RGB colors can be used by wrapping the values in parentheses and adding rgb in lowercase in front of them.

body{
color: rgb(225, 0,0)
}

we can also change the opacity of the color when it comes to rgb(), we just have to add ‘a’ in rgb() and add the value between 0 and 1, to control the opacity. for example, if I am
setting 0.5 opacity then the text would have 50% opacity.

body{
    color: rgba(225, 0, 0, 0.5);
}

HSL Color Values

HSL Stands for Hue, Saturation, and Lightness, Hue is measured in degrees from 0 – 360, while Saturation and Lightness use a scale of 0% – 100%.

body{
color: hsl(0, 100%, 50%);
}

It should be noted that the rgba(), hsl(), and hsla() functions are relatively new additions to CSS and are not supported by some older browsers. Depending on your needs, you may want to experiment with different methods for adjusting the opacity of your colors.

Changing Color Using Class and Id

now to change the color of a specific element, you can directly call that element in CSS, for example, if we want to change the color of all H1s to Blue then we can call H1 in CSS like this:

h1{
color: blue;
}

but what if we want to change the color of specific elements inside a Class or Id?

for that, we are going to call the class or id inside CSS and change their color.

<body>
  <div id="parent">Id name is Parent</div>
  <div class="child">Class name is Child</div>
</body>

#parent{
    color: red;
}

.child{
    color: blue;
}

CSS Background Color

the background is something that consists of the width and height of the element, this is going to include the padding and borders but does not include margin, to change the background color in CSS we use background-color property. for example, let’s try changing the background color of our webpage to Green.

body{
background-color: green;
}

we can also create a rectangle using CSS Color Properties:

<body>
    <div class="box"></div>
  </body>

body {
  background-color: red;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

CSS Background Image

CSS Background Image property allows us to place the image inside the HTML, you can add images like JPG, PNG, SVG, etc. for that we use the url() syntax. for example, if we want to add a image of deer in my HTML body we will type this:

body{
background-image: url(deer.jpg);
}

we can also add gradient using the same property

body {
  background-image: linear-gradient(red, yellow);
}

here we have a choice to add the color and what type of gradient we want to add

CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

The background property in CSS allows you to control the background of any element

body {
  background:
     url(sweettexture.jpg)    /* image */
     red;                     /* color */
}

Summary

CSS Color Property helps us to add colors to the webpage which makes the website quite appealing.
using CSS Color Property we can easily add the color inside CSS
there are different color formats that CSS Color Property supports
They are known as Hex Code, RGB Color Code, HSL Color Code
to change the text color we use the “color” property
to change the background we use ‘background-color” property.
to change the background to an image or a gradient we use “background-image” property.

CSS Animation Simplified!

Ansub Khan — Tue, 16 Nov 2021 07:52:27 +0000

CSS animations are a module that lets you animate the element which changes the element from one style to another. and to use the CSS animation we use @keyframes.

before talking about animation, let us make two boxes:

.parent{} - this is going to create a box
.child{} - this is going to create a small box inside the parent.

Note: container class is here to make the box come to the center for easier visibility.

<div class="container">
    <div class="parent">
      <div class="child"></div>
    </div>
</div>

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: rgb(21, 214, 124);
  height: 400px;
  width: 400px;
}

.child {
  background-color: red;
  height: 50%;
  width: 50%;
}

Transition Property

let's move our box from left to right, for that we don't have to use the animation and keyframe property because the animation of moving a box from left to right is quite simple easy and a one-step process. because the object is moving from left to right that's it.

so that's why we use transition property.


.child {
  background-color: red;
  height: 50%;
  width: 50%;
  transition: transform ease-in 1s;
}

.child:hover {
  transform: translateX(100%);
}

this is going to make to move the child box from left to right when you are going to hover on it.

syntax of transition property is like:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

transition property : it is used to specify which specific property you have to change.
transition-duration: this determines the duration of the transition
transition-timing-function: this is used to define a function that describes how a transition will proceed over its duration, allowing a transition to change speed during its course. learn more about here
transition-duration: it is used to define a length of time to delay the start of a transition.

but what if we want to make the child circle around the parent box?
now here comes the role of animation property

animation also has a lot of properties but we can use a shorthand animation to include all the properties. so let's get started:

.child {
  background-color: red;
  height: 50%;
  width: 50%;
}

.child:hover {
  animation: left-to-right 1s ease-in forwards;
}

@keyframes left-to-right {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateY(100%);
  }

  60% {
    transform: translateX(100%) translateY(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

first you will see that the animation actually has a name "left-to-right" and then i am using that same name in the keyframe. this is to determine that animation is going to apply on that exact keyframes.
second is that you will find forwards, it actually comes from animation-fill-mode property which is actually saying that you have to stop the animation at 100% otherwise what animation is going to do is that it will reset the animation when it will reach to 100% and the box will come again to 0%.

Sub-Properties of Animation

animation-name: declares the name of the @keyframes at-rule to manipulate.
animation-duration: the length of time it takes for an animation to complete one cycle.
animation-timing-function: establishes preset acceleration curves such as ease or linear.
animation-delay: the time between the element being loaded and the start of the animation sequence (cool examples).
animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
animation-iteration-count: the number of times the animation should be performed.
animation-fill-mode: sets which values are applied before/after the animation. For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.
animation-play-state: pause/play the animation.

and this will be the result:

so that's CSS Animation for you, this is actually quite the basics of animation there is a lot more to CSS Animations, I will provide some links which can help you become a PRO in CSS Animations:

CSS Tricks Animation Guide

CSS3 Animation & Transitions Crash Course

you can also buy my handwritten notes on CSS Grid which i made while learning about GRID topic for just $1:
Get My CSS Grid Notes

Connect With Me!

CSS Grids Simplified!

Ansub Khan — Fri, 12 Nov 2021 09:53:08 +0000

What is CSS Grid?

CSS Grid Layout is a two-dimensional grid-based layout system that is specifically designed to make the layout work easy on CSS.

Before we used to layout our web pages using tables, float, then positioning, and inline-block, but all these methods were more like hacks. Flexbox is also a good layout tool that a lot of people use but it is one-directional flow and it also has different use cases as well. Grid is the first CSS Module which is created specifically to solve the layout problems.

let's start with adding grid to the layout, I am making a simple HTML Container:

<div class="container">
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
    </div>

now let's add grid to out CSS layout:

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-gap: 1rem;
}

.container div {
  background: #eee;
  padding: 1rem;
}
/* changed nth child color to tell the difference */
.container div:nth-child(odd) {
  background: #ddd;
}

now this will give us the output of 6 divs divided into columns having 3fr (MDN defines the fr unit as a unit that represents a fraction of the available space in the grid container). you can also use px or rem even % but they are fixed. hence it is a better practice to use fr.

grid-template-columns

.container {
grid-column-columns: 3fr 3fr;
}

it specifies the number and the width of columns in a grid layout. in simple words more fr you are going to add is going to add more columns and change the value of fr is going to change the width of the specific box;

Now, in my case, I have added 2fr with the value of 3. then it will give them an equal space of 3.

if I am going to increase the fr then it is going to create more columns. you can also change the value to make one column bigger than the other one.

grid-gap

you must be wondering how I am getting the space between the spaces I used grid-gap property for gap;

.container{
grid-gap: 1rem;
}

grid-template-rows

grid-template-rows is also the same thing as we did for the column, for example, i added grid-template-rows along with grid-template-row

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: 10fr 30fr 4fr;
  grid-gap: 1rem;
}

you can also use repeat(value, fr) to make the consistent columns or rows.

.container{
grid-template-columns: repeat(3, 1fr)
}

this is going to make 3 columns of 1fr.

grid-auto-rows

we can also increase the height of boxes we use by using grid-auto-rows.
for example, if I want to increase the height by 10rem I will type:

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: 10rem;
}

minmax()

now if you match it with the image before this one then you are going to find out the difference between the height of the two images. if you have text which is more than the height you have given then you can use minmax(), we use this to give the min-height we need and then we can give maximum height to for the element which can also be auto where the browser is going to adjust the text inside the grid by itself.

look in this case, the text is going out of the box, and below the other box, let's add mixmax() to fix this issue.

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: minmax(10rem, auto);
}

justify-items, align-items & align-self, justify-self

just like we use justify-content and align-items in flex, we have the same thing in GRID as well, we call them justify-items, align-items. in order to look into that you can just look at the flex-properties they both do the same thing.

Grid Column

Shorthand property for [grid-column-start] and [grid-column-end].

grid-column: auto auto

the grid item's column start and end are automatically set.

grid-column: 1 / 3

The grid item starts before the first column and ends just before the third one.

grid-column: span 3

The grid item spans 3 columns.

grid-column: 1 / span 4

The grid items start before the first column and span for 4 columns, creating a new one in the process.

the same thing goes with grid-rows as well.

you can also buy my handwritten notes on CSS Grid which i made while learning about this topic for just $1:
Get My CSS Grid Notes

these are some advanced topics of GRID, I will recommend you this video on CSS Grids.

Thanks For Reading!

if you need any help with HTML, CSS and Javascript then you can find me on my website

you can also download my FREE NOTION TEMPLATE which is a powerful to-do list that can boost your productivity.

Click Here!

Best Visual Studio Code Themes

Ansub Khan — Tue, 09 Nov 2021 09:15:10 +0000

VS Code probably has the best community, and they have a lots of editor customization options. Here are a few of my favourite VS Code themes.

SynthWave ’84 (this one is the best)

Do you remember that endless summer back in ’84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams? No, I don’t remember it either, but with this experimental theme, we can go there.

Download SynthWave '84
I have disabled the glow effect but you can enable it if you want to.

Shades of Purple

I also like shades of purple, Shades of the purple theme is built with several shades of purple and a few contrast colors to make things pop. This also makes SOP a very good theme for teaching, presenting,

Download Shades of Purple

Horizon Theme

it is the beautiful warm dual theme for Visual Studio Code, it comes in dark mode as well, but the light mode looks much better.

Download Horizon Theme

Atom Dark One Theme

VSCode Theme based on Atom's One Dark theme. Best rated One Dark theme port in the marketplace, features full Workbench theming.

Download Atom Dark One

What is Semantic HTML?

Ansub Khan — Tue, 09 Nov 2021 09:12:28 +0000

What is Semantic HTML?

Semantic HTML is a coding style where elements which we use actually have some meaning. Semantic simply put means a logic that has an actual meaning hence comes the name: Semantic HTML, an HTML which is a logic and also has a meaning.
This practice is good for Search Engine Optimization (SEO)
it is also good for accessibility, especially for visually impaired people who rely on browser speech, screen readers to interpret page content clearly.
Here is how a non-semantic HTML looks like:

here is how a semantic HTML looks like

Remember:

to write semantic HTML, avoid using div tags everywhere, instead use elements like header, nav, section, article, aside, footer.
all these elements are built with a specific purpose - they are good for SEO too.

In Simple Words:

non-semantic elements: <div> and <span> tells nothing about its content.

Semantic Elements: <form>, <table>and <article> -> clearly defines its content.

if you want any help with the Semantic HTML or any other query then please contact me on my Twitter