Update content for web and mobile in software architect (#2336)

* Update 102-spa-ssr-ssg.md

* Update 104-microfrontends.md

* Update 105-w3c-and-whatwg-standards.md

* Update 100-reactive-functional-programming.md

* Update content/roadmaps/114-software-architect/content/111-web-and-mobile/100-reactive-functional-programming.md

* Update content/roadmaps/114-software-architect/content/111-web-and-mobile/102-spa-ssr-ssg.md

* Update content/roadmaps/114-software-architect/content/111-web-and-mobile/105-w3c-and-whatwg-standards.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

content/roadmaps/114-software-architect/content/111-web-and-mobile/100-reactive-functional-programming.md

@@ -1 +1,12 @@
-# Reactive functional programming
+# Reactive and Functional programming
+
+Functional programming is a programming paradigm designed to handle pure mathematical functions. This paradigm is totally focused on writing more compounded and pure functions.
+
+Reactive programming describes a design paradigm that relies on asynchronous programming logic to handle real-time updates to otherwise static content. It provides an efficient means -- the use of automated data streams -- to handle data updates to content whenever a user makes an inquiry.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink badgeText='Watch' href='youtube.com/watch?v=e-5obm1G_FY'>Learning Functional Programming</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.telerik.com/blogs/functional-programming-javascript'>Functional Programming with JavaScript</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-programming-in-javascript/'>What is Functional Programming?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/reactive-programming'>What is Reactive Programming?</BadgeLink>

content/roadmaps/114-software-architect/content/111-web-and-mobile/102-spa-ssr-ssg.md

@@ -1 +1,10 @@
-# Spa ssr ssg
+# SPA vs SSG vs SSR
+
+- **SPA**: A single page application loads only a single web document from the server and then updates the content of that document on demand via `Javascript APIs` without reloading the entire document. React, Vue, Angular are the top frameworks used to create single page applications.
+- **SSR**: This technique uses a server like `Node.js` to fully render the web document upon the receival of a request and then send it back to the client. This way the user get an interactive document with all the necessary information without having to wait for any JavaScript or CSS files to load.
+- **SSG**: Static site generation renders the web document in the server(like SSR), however the page is rendered at **build time**. So, instead of rendering the page on the server upon the receival of a request, the page is already rendered in the server, waiting to be served to the client.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/codex/web-design-patterns-ssr-ssg-and-spa-fadad7673dfe'>Web design patterns — SSR, SSG, and SPA</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/rendering-on-the-web/'>Rendering on the Web</BadgeLink>

content/roadmaps/114-software-architect/content/111-web-and-mobile/104-microfrontends.md

@@ -1 +1,8 @@
-# Microfrontends
+# Microfrontends
+
+Microfrontends is an architectural style where independently deliverable frontend applications built by different teams using different technologies are composed into a greater whole. Simply, a Micro-Frontend is a portion of a webpage (not the entire page). There is a “Host” or a “Container” page in the Micro-Frontend Architecture page that can host one or more Micro-Frontends.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=lKKsjpH09dU'>Micro-Frontends Course - Beginner to Expert</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://micro-frontends.org/'>Micro Frontends</BadgeLink>

content/roadmaps/114-software-architect/content/111-web-and-mobile/105-w3c-and-whatwg-standards.md

@@ -1 +1,10 @@
-# W3c and whatwg standards
+# W3c and WHATWG Standards
+
+World Wide Web Consortium (W3C) standards define the best practises for web development to enable developers to build rich interactive experiences that are available on any device. Theses standards range from recommended web technologies such as HTML, CSS, XML to the generally accepted principles of web architecture, semantics and services.
+
+Web Hypertext Application Technology Working Group (WHATWG) is another set of web standards that came into existence after W3C announced that it was going to be focusing on XHTML over HTML. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.w3.org/standards/'>W3C Standards</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://spec.whatwg.org/'>WHATWG Standards</BadgeLink>