add: ToC and Fixes in MD and CSS

sarojkumar007 · Dec 31, 2023 · 231e4fa · 231e4fa
1 parent 891ac60
commit 231e4fa
Show file tree

Hide file tree

Showing 12 changed files with 239 additions and 149 deletions.
diff --git a/content/blog/everything-you-need-to-know-about-modern-html/index.md b/content/blog/everything-you-need-to-know-about-modern-html/index.md
@@ -3,7 +3,7 @@ title: "Everything you need to know about modern HTML"
 description: "For web dev. HTML is a must. Here's how you can learn and use modern HTML in your projects."
 date: "2021-05-22"
 author: "Saroj Kumar"
-tags: ["Tips & Tricks","Web"]
+tags: ["Tips & Tricks", "Web"]
 ---
 
 Helloo Guys !!<br>Hope you are all in Good Health and Enjoying the Quarantine.
@@ -12,12 +12,11 @@ This post is about beginners who are just starting their career as a Web develop
 
 # Quick Intro
 
-
-> HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.<br>- *MDN*
+> HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications.<br>- _MDN_
 
 Though, there are limited restrictions in writing HTML code. But, following the general conventions of programming is recommended.
 
-# Basic Rules to Follow 
+# Basic Rules to Follow
 
 While writing HTML markup or any programming language in general, you need to follow the basics that i'm listing below.
 
@@ -30,17 +29,17 @@ While writing HTML markup or any programming language in general, you need to fo
 HTML is a markup language that is used for creating web pages that displaying content on a browser.<br>
 It consists of some elements called tags that describe the structure of that web page.
 
-Some of the basics tags that are used to create a web page are *`html`*, *`head`*, *`body`*, *`h1`* ... *`h6`*, *`p`*, *`a`*, *`img`* etc.<br>
+Some of the basics tags that are used to create a web page are _`html`_, _`head`_, _`body`_, _`h1`_ ... _`h6`_, _`p`_, _`a`_, _`img`_ etc.<br>
 Some tags are paired tags that have an opening tag and an closing tag, some tags are self closed.
 
 A basic html code will look like this:
 
 ```html
 <html>
-	<body>
-		<h1>This is a Heading</h1>
-		<p>This is a paragraph
-	</body>
+  <body>
+    <h1>This is a Heading</h1>
+    <p>This is a paragraph</p>
+  </body>
 </html>
 ```
 
@@ -59,37 +58,37 @@ After you learn the basics of HTML and How to write documents or web pages using
 
 ## Semantics
 
-HTML5 introduced some semantic tags that replaced the old school way of writing HTML code. Earlier we used a tag called *`div`* for outlining and sectioning in the Web, which replaced by tags like *`header`*, *`section`*, *`article`*, *`main`*, *`aside`*, *`footer`* etc.<br>These tags are just same as *`div`* but provide meaning to the content.
+HTML5 introduced some semantic tags that replaced the old school way of writing HTML code. Earlier we used a tag called _`div`_ for outlining and sectioning in the Web, which replaced by tags like _`header`_, _`section`_, _`article`_, _`main`_, _`aside`_, _`footer`_ etc.<br>These tags are just same as _`div`_ but provide meaning to the content.
 
 ## Connectivity
 
-New *Web sockets* and *WebRTC (Web Real-Time-Communication)* features let client and server interaction along with peer to peer communication possible without installing any extensions.
+New _Web sockets_ and _WebRTC (Web Real-Time-Communication)_ features let client and server interaction along with peer to peer communication possible without installing any extensions.
 
 ## Offline and Storage
 
-New *Online and Offline events* let webpages know whether there is active internet connection or not.
+New _Online and Offline events_ let webpages know whether there is active internet connection or not.
 
-Now clientStorages like *sessionStorage*, *localStorage*, *indexedDB* provide client side persistent data storage and better caching.
+Now clientStorages like _sessionStorage_, _localStorage_, _indexedDB_ provide client side persistent data storage and better caching.
 
 ## Multimedia
 
-New HTML5 *`audio`* and *`video`* tags allow embedding and controlling audio and video media directly in the web page.
+New HTML5 _`audio`_ and _`video`_ tags allow embedding and controlling audio and video media directly in the web page.
 
-There are additional tags like *`source`* and *`track`* which is used to add more functionality to the web component.
+There are additional tags like _`source`_ and _`track`_ which is used to add more functionality to the web component.
 
-Camera API and WebRTC features allow using computer's camera  and comunicating through video conferencing respectively.
+Camera API and WebRTC features allow using computer's camera and comunicating through video conferencing respectively.
 
 ## 2D/3D
 
-New *`canvas`* tag is now used to draw objects and animations in the web.
+New _`canvas`_ tag is now used to draw objects and animations in the web.
 
-By using new [*WebGL*](https://developer.mozilla.org/en-US/docs/WebGL) we can now bring 3D Graphics in the Web.
+By using new [_WebGL_](https://developer.mozilla.org/en-US/docs/WebGL) we can now bring 3D Graphics in the Web.
 
-*SVG* images now can be directly embedded in the Web Pages. More on it later.
+_SVG_ images now can be directly embedded in the Web Pages. More on it later.
 
 ## Additional
 
-We have performance improvement like *Web Worker*, *XMLHttpRequest*, *History and FullScreen API*, *Drag and Drop* etc. and Device Access like *touch events*, *geolocations*, and *Camera API* are the important features.
+We have performance improvement like _Web Worker_, _XMLHttpRequest_, _History and FullScreen API_, _Drag and Drop_ etc. and Device Access like _touch events_, _geolocations_, and _Camera API_ are the important features.
 
 There is a huge improvement in CSS referred as CSS3 which now has a lot of new Features in background styling, animations and Typography.
 
@@ -99,41 +98,40 @@ I really want to teach you more on these Topics. So, I am keeping them for futur
 
 Apart from semantic tags discussed above, Here are some of the new HTML tags that you should possibly replace while writing HTML Code.
 
-| Tag          | Description                                                                                         |
-|--------------|-----------------------------------------------------------------------------------------------------|
+| Tag             | Description                                                                                         |
+| --------------- | --------------------------------------------------------------------------------------------------- |
 | &lt;bdi>        | Isolates a part of text that might be formatted in a different direction from other text outside it |
 | &lt;details>    | Defines additional details that the user can view or hide                                           |
-| &lt;summary>    | Defines a visible heading for a &lt;details> element                                                   |
+| &lt;summary>    | Defines a visible heading for a &lt;details> element                                                |
 | &lt;dialog>     | Defines a dialog box or window                                                                      |
 | &lt;figure>     | Defines self-contained content                                                                      |
-| &lt;figcaption> | Defines a caption for a &lt;figure> element                                                            |
+| &lt;figcaption> | Defines a caption for a &lt;figure> element                                                         |
 | &lt;mark>       | Defines marked/highlighted text                                                                     |
 | &lt;meter>      | Defines a scalar measurement within a known range (a gauge)                                         |
 | &lt;progress>   | Represents the progress of a task                                                                   |
 | &lt;time>       | Defines a date/time                                                                                 |
 | &lt;wbr>        | Defines a possible line-break                                                                       |
-| &lt;datalist>   | Specified options show as suggestions while typing in an input field                                   |
+| &lt;datalist>   | Specified options show as suggestions while typing in an input field                                |
 
 # Using Attributes
 
 As now you know where and how to use new HTML5 tags, let's see how you can write attributes.
 
-Attributes are very important for any tag to be effectiively useful for the web page. General attributes like *`bgcolor`*, *`height`*, *`align`*, *`cellpadding`* etc are no longer used and replaced by CSS. So, it's a good practice to keep track of what attribute to use and what not. There are alternative attributes like *`style`* which provide the same functionality. There are some attributes which does not require any value. e.g.- *`controls`*, *`allowfullscreen`*, *`autoplay`*, *`autocomplete`*.
-
-There are special attributes like _data-\*_ and _aria-* (Accessible Rich Internet Applications)_. <br> data-* is used to store custom data private to web page.<br>aria-* is used for accessibility support like screen readers, text-to-speech, magnifiers etc.
+Attributes are very important for any tag to be effectiively useful for the web page. General attributes like _`bgcolor`_, _`height`_, _`align`_, _`cellpadding`_ etc are no longer used and replaced by CSS. So, it's a good practice to keep track of what attribute to use and what not. There are alternative attributes like _`style`_ which provide the same functionality. There are some attributes which does not require any value. e.g.- _`controls`_, _`allowfullscreen`_, _`autoplay`_, _`autocomplete`_.
 
-[Read More about _data-*_](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)<br>
-[Read More about _aria-*_](https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility)
+There are special attributes like _data-\*_ and _aria-\* (Accessible Rich Internet Applications)_. <br> data-_ is used to store custom data private to web page.<br>aria-_ is used for accessibility support like screen readers, text-to-speech, magnifiers etc.
 
+[Read More about _data-\*_](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)<br>
+[Read More about _aria-\*_](https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility)
 
 > Learn about writing better meta/information about the web page you are developing. Its always a good practice to write as much as additional information about the page in the `head`.
 
 That's it for this post. Let me know if you find these useful.
 
-### References:
+# References:
 
 [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
 
 If you like the post, feel free to share it.
 
-**Thank You**
+**Thank You**
diff --git a/content/blog/getting-started-with-powershell/index.md b/content/blog/getting-started-with-powershell/index.md
@@ -3,7 +3,7 @@ title: "Getting Started with PowerShell"
 description: "Day to day tasks take a lot of manual efforts and time, which we can reduce by automation using scripts. Here's How."
 date: "2022-04-03"
 author: "Saroj Kumar"
-tags: ["Automation","Windows","Powershell"]
+tags: ["Automation", "Windows", "Powershell"]
 ---
 
 **Automation is the FUTURE!**
@@ -24,34 +24,32 @@ With system level access, the performance is high and with a lot of built in fea
 
 Powershell is most useful for managing and automating Microsft environments. It helps users automate repeatitive and time-consuming tasks and tasks such as user management, CI/CD, managing cloud services, finding, filtering, expoorting information, interacting with system apps and more.
 
-
 Let's see how we can use it.
 
 Every windows device such as Windows 7,8,10, Windows Server 2008, Windows Server 2012 R2 and more have pre-installed PowerShell.
 
-### Checking if powershell installed or not
+## Checking if powershell installed or not
 
 On your system, click on `Win` key and type 'powershell'. You will see some suggestions as below:
 
 ![PowerShell](powershell-search.png?v=1)
 
-You see a bunch of powershell apps such as *Windows PowerShell* and *Windows PowerShell ISE*.
+You see a bunch of powershell apps such as _Windows PowerShell_ and _Windows PowerShell ISE_.
 
-*ISE* stands for *Integrated Scripting Environment*.
+_ISE_ stands for _Integrated Scripting Environment_.
 
-*Windows PowerShell ISE* provides you a environment for writing scripts while you can use *Windows PowerShell* as a command shell.
+_Windows PowerShell ISE_ provides you a environment for writing scripts while you can use _Windows PowerShell_ as a command shell.
 
 > Other than running commands or writing script, we can test, debug our scripts in ISE.
 
 Now that you know powershell is installed, let's write some scripts.
 
-### Writing PowerShell Script
+## Writing PowerShell Script
 
-Open *PowerShell ISE*. You will see something like this:
+Open _PowerShell ISE_. You will see something like this:
 
 ![PowerShell App](powershell-app.png?v=1)
 
-
 On the script pane, type `hostname`. Then, on the top you can see two little green play buttons. 1<sup>st</sup> one is for running whole file and 2<sup>nd</sup> one is for running only the selected script.
 
 Click on the first play button, to run whole script. You will see your HostName on the left side PowerShell Terminal.
@@ -62,7 +60,7 @@ Powershell can run Command Prompt commands as well as PowerShell Code.
 
 Unlike other programming/scripting languages, it also has DATATYPES, OPERATORS, DATA STRUCTURES, FUNCTIONS, CONDITIONALS(If, For, ForEach, While, Do-While), CLASSES. Additionally, It has commandlets(cmdlets),libraries and modules.
 
-### Variables and Datatypes
+## Variables and Datatypes
 
 We declare varibales or assign values in PowerShell, in this way,
 
@@ -87,7 +85,7 @@ Write-Host $Var_Text
 
 Here, Write-Host is a builtin cmdlet in PowerShell, that prints a variable to terminal. More on cmdlets later.
 
-### Conditinals and Functions
+## Conditinals and Functions
 
 The basic systax is similar to the other programming/scripting languages, only with Capitalization ;p
 
@@ -98,7 +96,7 @@ If($true<#Condition#>){
 	#Action
 }
 
-for ($i = 1; $i -lt 10; $i++){ 
+for ($i = 1; $i -lt 10; $i++){
 	Write-Host $i
 }
 
@@ -114,11 +112,11 @@ function MyFunction ($Param1, $Param2){
 # MyFunction -Param1 <Param1Value> -Param2 <Param2Value>
 ```
 
-### Using CommandLets(cmdlets)
+## Using CommandLets(cmdlets)
 
 PowerShell has a builtin cmdlet for Every Operation you might perform on a Windows Device.
 
-E.g. *Fetching a list of files present in a Folder* (Similar to *dir* for cmd.)
+E.g. _Fetching a list of files present in a Folder_ (Similar to _dir_ for cmd.)
 
 ```powershell
 Get-ChildItem -Path "path/to/folder"
@@ -129,6 +127,7 @@ To Avail all the list of cmdlets we can run below command:
 ```powershell
 Get-Command -CommandType Cmdlet
 ```
+
 OR to check if a specific command exists or not, type:
 
 ```powershell
@@ -147,7 +146,7 @@ If you want to read book:
 
 # Bonus Tips
 
-> PowerShell is built on .NET. So, it has support of .NET which we can use to extend our possibility of automation and *Save the Day!*
+> PowerShell is built on .NET. So, it has support of .NET which we can use to extend our possibility of automation and _Save the Day!_
 
 > Use can install powershell on other platforms like linux and run powershell scripts/cmdlets.
 
@@ -157,4 +156,4 @@ That's it for this post. Let me know if you find these useful. See you on the ne
 
 If you like the post, feel free to share it.
 
-**Thank You**
+**Thank You**
diff --git a/content/blog/how-to-start-front-end-web-development/index.md b/content/blog/how-to-start-front-end-web-development/index.md
@@ -3,7 +3,7 @@ title: "How to Start Front-end Web Development"
 description: "This post is perfect for you, if you want to start Front-end Web Development. It gives you a head-start, roadmap and resources to start your web dev journey."
 date: "2021-04-03"
 author: "Saroj Kumar"
-tags: ["Tips & Tricks","Web"]
+tags: ["Tips & Tricks", "Web"]
 ---
 
 Hey Guys! I am starting a new Series on Fundamentals of Web Development from scratch and here is the first post that describes everything you need to know about Front-end Web Development.
@@ -21,10 +21,10 @@ You need to learn Languages that are used to create a page/document that can be
 Below mentioned items are the starting point of your Great Journey! Get a hands on to these.
 
 1. A Code Editor (Any of your choice)
-	- Atom
-	- Visual Studio Code
-	- Sublime Text
-	- Brackets
+   - Atom
+   - Visual Studio Code
+   - Sublime Text
+   - Brackets
 2. Understanding of CLI (Command-line Interface) to fasten your workflow.
 3. Browsers and DevTools
 
@@ -56,7 +56,7 @@ While working with Web Development, if you are stuck at some point, these sites
 
 # What to Learn after that:
 
-### Version Control System (git, GitHub)
+## Version Control System (git, GitHub)
 
 You must have knowledge about version control systems like `git` which will fasten your work and let you work on your project the way you like.
 
@@ -72,13 +72,13 @@ There are a number of sites/services that provide git solution, like
 8. [AWS CodeCommit](https://aws.amazon.com/codecommit/)
 9. [GitKraken](https://www.gitkraken.com/)
 
-### npm (Node Package Manager)
+## npm (Node Package Manager)
 
 Node Package Manager is very common around every project you are going to face in life. So, be a good friends with `npm`. There are tons of packages available in `npm` that make our projects easier to work with.
 
 [Read More](https://docs.npmjs.com/)
 
-### Libraries and Frameworks
+## Libraries and Frameworks
 
 As we are talking about `npm`, lets take a moment to dive in. Libraries and Frameworks are the pre-built files and tools that can be used in our project to reduce the workload.
 
@@ -93,13 +93,12 @@ Here are some of the sites that help deploying your static site real quick, and
 - [Netlify](https://netlify.com)
 - [GitHub Pages](https://pages.github.com/)
 - [AWS Amplify](https://aws.amazon.com/amplify/)
-- [Surge](https://surge.sh/) (*Best for Quick Deploy*)
+- [Surge](https://surge.sh/) (_Best for Quick Deploy_)
 - [Aerobatic](https://www.aerobatic.com/)
 - [zeit.co](https://zeit.co/)
 
-
 That's all for the first post. In the upcoming posts, we will explore more on Web Languages.
 
 If you like the post, feel free to share it.
 
-**Thank You**
+**Thank You**