# Pre-requisites Training Resources

On this page:

* [Backend pre-requisites training resources](#backend-pre-requisites-tutorials)
* [Frontend/UI pre-requisites training resources](#prerequisite-reference-study-materials-hardbreak-hardbreak-development-team-hardbreak)

## Backend Pre-requisites Tutorials

<table><thead><tr><th width="248">Tools Required</th><th>Tutorials Resource Links</th></tr></thead><tbody><tr><td><ol><li>Java Basics</li></ol></td><td></td></tr><tr><td><ol start="2"><li>Spring Boot</li></ol></td><td><ol><li><a href="https://www.youtube.com/playlist?list=PLC97BDEFDCDD169D7">Spring Framework</a></li><li><a href="https://www.youtube.com/playlist?list=PLqq-6Pq4lTTbx8p2oCgcAQGQyqN8XeA1x">Spring Boot Quick Start</a></li><li><a href="https://www.youtube.com/playlist?list=PL1A506B159E5BD13E">Spring Data Support</a></li><li><a href="https://www.youtube.com/playlist?list=PLqq-6Pq4lTTYTEooakHchTGglSvkZAjnE">Spring Security Framework</a></li><li><a href="https://www.youtube.com/playlist?list=PLqq-6Pq4lTTZSKAFG6aCDVDP86Qx4lNas">Spring Boot Microservices Level 1</a></li><li><a href="https://www.youtube.com/playlist?list=PLqq-6Pq4lTTbXZY_elyGv7IkKrfkSrX5e">Spring Boot Microservices Level 2</a></li><li><a href="https://www.youtube.com/playlist?list=PLqq-6Pq4lTTaoaVoQVfRJPqvNTCjcTvJB">Spring Boot Microservices Level 3</a></li></ol></td></tr><tr><td><ol start="3"><li>Postgres</li></ol></td><td><ol><li><a href="https://www.youtube.com/playlist?list=PLk1kxccoEnNEtwGZW-3KAcAlhI_Guwh8x">PostgreSQL Tutorials</a></li></ol></td></tr><tr><td><ol start="4"><li>Kafka</li></ol></td><td><ol><li><a href="https://www.youtube.com/playlist?list=PLGRDMO4rOGcNLwoack4ZiTyewUcF6y6BU">Spring Boot &#x26; Apache Kafka</a></li></ol></td></tr><tr><td><ol start="5"><li>Elastic Search</li></ol></td><td><ol><li><a href="https://www.youtube.com/watch?v=gS_nHTWZEJ8">Intro to Elastic Search</a></li></ol></td></tr><tr><td><ol start="6"><li>Json Path Basics</li></ol></td><td><a href="https://restfulapi.net/json-jsonpath/">https://restfulapi.net/json-jsonpath/</a></td></tr><tr><td><ol start="7"><li>Yaml &#x26; regular expressions</li></ol></td><td><a href="https://spacelift.io/blog/yaml">https://spacelift.io/blog/yaml</a></td></tr><tr><td><ol start="8"><li>Kubernetes</li></ol></td><td></td></tr><tr><td><ol start="9"><li>Helm</li></ol></td><td></td></tr></tbody></table>

## Frontend/UI Pre-requisites Tutorials <a href="#prerequisite-reference-study-materials-hardbreak-hardbreak-development-team-hardbreak" id="prerequisite-reference-study-materials-hardbreak-hardbreak-development-team-hardbreak"></a>

| Topics                                | Study Materials / Youtube links                                                                                                                                                                                                                                                                                                     | Official links/documentation                                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| HTML5                                 | [Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw)                                                                                                                                                                                                                                      | <https://html.com/>                                                                                                                                                                                                                                                                                                                                                                                                            |
| CSS3                                  | [Learn CSS3](https://www.youtube.com/watch?v=wRNinF7YQqQ)                                                                                                                                                                                                                                                                           | <https://www.w3schools.com/css/>                                                                                                                                                                                                                                                                                                                                                                                               |
| Javascript                            | Learn [Javascript](https://www.youtube.com/watch?v=W6NZfCO5SIk)                                                                                                                                                                                                                                                                     | <https://www.w3schools.com/js/>                                                                                                                                                                                                                                                                                                                                                                                                |
| **ReactJs**                           | [Learn ReactJS](https://www.youtube.com/watch?v=4baq00tHfmA)                                                                                                                                                                                                                                                                        | <https://react.dev/learn>                                                                                                                                                                                                                                                                                                                                                                                                      |
| Routing , Lazy Loading , Custom Hooks | [<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">React Lazy Loading & Code splitting](https://www.youtube.com/watch?v=tV9gvls8IP8)                                                                                                                                              | [<img src="https://legacy.reactjs.org/favicon.ico" alt="" data-size="line">Code-Splitting – React](https://reactjs.org/docs/code-splitting.html) [<img src="https://legacy.reactjs.org/favicon.ico" alt="" data-size="line">Building Your Own Hooks – React](https://reactjs.org/docs/hooks-custom.html) [<img src="https://reactrouter.com/favicon-light.png" alt="" data-size="line">Home v6.11.1](https://reactrouter.com/) |
| React-hook-form                       | [React-hook-form Tutorial - ](https://www.youtube.com/watch?v=U-iz8b4RExA)[<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">THE ULTIMATE REACT-HOOK-FORM CHALLENGE - ALL THE FEATURES IN ONE FORM](https://www.youtube.com/watch?v=U-iz8b4RExA)                                  | [Home](https://react-hook-form.com/)                                                                                                                                                                                                                                                                                                                                                                                           |
| React Query                           | [<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">React Query Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jpi7Ptjl5b50p9gLjOFani)                                                                                                                                | [![](https://tanstack.com/favicons/favicon-16x16.png)TanStack Query \| React Query, Solid Query, Svelte Query, Vue Query](https://react-query.tanstack.com/)                                                                                                                                                                                                                                                                   |
| Tailwind css                          | [![](https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png)Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)                                                                                                                                                              | [![](https://tailwindcss.com/favicons/favicon-16x16.png?v=3)Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)                                                                                                                                                                                                                                                            |
| Axios (Optional)                      | [Axios Crash Course \| HTTP Library - ](https://www.youtube.com/watch?v=6LyagkoRWYA)[<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">Axios Crash Course \| HTTP Library](https://www.youtube.com/watch?v=6LyagkoRWYA)                                                           | [<img src="https://axios-http.com/assets/favicon.ico" alt="" data-size="line">Axios](https://axios-http.com/)                                                                                                                                                                                                                                                                                                                  |
| i18Next(Optional)                     | [Multi-language Translate React JS APP with React Hook & i18next - ](https://www.youtube.com/watch?v=cHqxgLhOl5Y)[<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">Multi-language Translate React JS APP with React Hook & I18NEXT](https://www.youtube.com/watch?v=cHqxgLhOl5Y) | [<img src="https://1143667985-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/spaces%2F-L9iS6Wm2hynS5H9Gj7j%2Favatar.png?generation=1523462254548780&#x26;alt=media" alt="" data-size="line">Introduction](https://www.i18next.com/)                                                                                                                                                                                      |
| Yarn(Optional)                        | [Yarn Workspaces Tutorial - ](https://www.youtube.com/watch?v=G8KXFWftCg0)[<img src="https://www.youtube.com/s/desktop/1805f790/img/favicon_32x32.png" alt="" data-size="line">Yarn Workspaces Tutorial](https://www.youtube.com/watch?v=G8KXFWftCg0)                                                                               | [<img src="https://yarnpkg.com/favicon-32x32.png?v=775b53071ebde4f6d738805a2d9fcb72" alt="" data-size="line">Home](https://yarnpkg.com/)                                                                                                                                                                                                                                                                                       |
| Webpack                               |                                                                                                                                                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Flutter**                           | [Click here](#further-reads) to learn about Flutter                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                |

### Additional Reads

{% file src="<https://3868804918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FegsIWleSdyH9rMLJ8ShI%2Fuploads%2Fgit-blob-a8ca5539e6891511e1b4e6eaf32520a31c610a7b%2FFlutter-Coding.pdf?alt=media>" %}
