How to Connect Java Backend With Html/Css Frontend

how to connect back end java code with front end code(Html and css and java script) while constructing web site?

One way to do this is to use REST services. Your front end code can make a REST call to the back end and let it work its magic. It's a pretty standard approach in industry projects.

The people who have commented are right in saying that the question is a bit too broad, and the answer really depends on your use case, but here are some resources you can go look at to find out more:

https://www.genuitec.com/connecting-angular-2-app-java-ee-backend/
http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-service/
https://dzone.com/articles/web-applications-frontend-and-backend-communicatio

How to connect backend and frontend

The question is quite vague

Now there are multiple ways for the front end to connect to the backend. Let's see. But first let's recap.

Front End: Refers to the client side. The UI that the users interact with.

Example frameworks: ReactJS(JS/TS), VueJS, Angular etc

Back End: Refers to the server side work like authentications, data fetching etc.

Example frameworks: NodeJs(JS/TS), Django, ASP.NET etc

HTML, CSS and JS are the building blocks of websites. As the time progressed we got frameworks like Sprint(Java), asp.net(c#), django(python) etc. They may differ in the language they are built on top off. But they all follow the same patterns. Some of the common design architectures are:

Model–View–ViewModel (MVVM)
Model-View-Controller (MVC)
3 Tier Architecture

For difference in MVC and MVVM check this answer

Now the developers depending on the project chooses any one of this patterns. But this are just architectures that can be implemented with any of the frameworks out there.

How the front end and backend communicates is a different story. Let's say you and I are both tasked with creating a school management system.

You chose Angular(front end) and asp.net(backend). On the other hand I chose ReactJS(front end) and Nodejs(backend). We can both achieve the same goal. But with different languages.

API vs Templating: This are two different ways we can have our application establish communication between frontend and backend.

Templating:

A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.

API: API stands for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.
Let's say the user in your school portal inputs his name and password and hits login. That will send a post request to the backend and the backend which you wrote will check if the user is real or not. If the authentication is successful the backend will send a message and the user will navigate to the portal's dashboard.

For a better understanding of when to choose templating vs API refer to this post

Now about the example you provided i.e bubble sort. You actually don't need a backend and develop an API to show the sorted data. And usually the backend is required for the websites which handles authentication, authorization, protected data etc like an e-commerce.

That said you can have a backend for such a project. You'll have to send the data to the server side which will sort the array and send the sorted result back.

Refer to the section on API/Templating to choose you're preferred method. Hope you'll have a good understanding on how to work your application.

How to integrate a website with a Java back end?

You can use a number of technologies to interact with applications. If you want to stay on the Java side, JSF, JSP are two big ones. JSF Depends on a big framework, but there are other frameworks that rely just on JSP/Servlets. You can incorporate JQuery into the HTML/JSP/JSF combinations.

On the other hand you could just use JQuery to send AJAX calls to Servlets that return HTML/Json to the client. The JQuery can then do whatever you want with that.

connecting back end to front end

Jakarta Servlet

The usual route for a web app with Java is using Jakarta Servlet and Jakarta Server Pages (JSP) technologies. You may also find useful any of many other "enterprise edition" frameworks that are largely aimed at web apps and web services in the joint cooperative effort known as Jakarta EE. (Formerly known as Java EE.)

You can code servlets and JSPs by hand. Or you can choose from any of several templating frameworks built on top of those.

Alternately, and my favorite, is to use Vaadin Flow. In this framework you write plain pure Java to build your forms in terms of widgets such as buttons, fields, and so on, with little to no awareness of Web technologies. At runtime, the necessary HTML, CSS, and JavaScript are automatically generated so as to render your user-interface remotely in the web browser. Under the covers, Vaadin Flow is actually a large Servlet, pre-written for our benefit. Vaadin Flow works with or without Spring Boot, your choice.

By the way, an alternative to web browser clients is to build a local client app that talks to your Java-based server via sockets, Web Services, Java RMI, or other avenues. Such client can be written in Java via JavaFX/OpenJFX, Swing, or SWT. Or use other languages/toolkits outside Java.

Explaining any of these technologies is much too broad for Stack Overflow. You'll need to do some deep dives into researching these to decide what works for you. I suggest starting with a search of Wikipedia.

For specific software recommendations, see the sister site, Software Recommendations Stack Exchange.

FYI, psql is not a database. You may be referring to the Postgres database server, for which psql is one of several client tools for interactive console sessions. DataGrip is another such database client tool, for example.

how to use frontend code (html , css) alongside jax-rs in eclipse?

the answer is found. it is done by adding specific attributes to HTML tags.