Learn How To Code in Java !!!!!!


These our best friends to help us make our website awesome! Let's take a look at some of great thing that we can do using them

Here is my 3 examples of how you can use them toghether and make nice things!


Tutorial #2 --> What will magnet attract??

Click on items on left and see what will happen !!! :D

hammer dog frying-pan cat spoon bunny

#1 At first we need to add our img(s) to html...

#2 Then on CSS, they will be positioning absolute to make a circle...

			position: relative;
			display: flex;
			display: flex;
			margin-right: auto;
			height: 100vh;
			display: flex;
			margin-right: auto;
			width: 55%;
			height: 100vh;
		.magnet img{
			position: absolute;
			top: 360px;
			left: 5px;
		.items img{
			position: absolute;
		.items a:nth-child(1) img{
			top: 550px;
			left: 525px;
		.items a:nth-child(2) img{
			top: 220px;
			left: 440px;
		.items a:nth-child(3) img{
			top: 420px;
			left: 700px;
		.items a:nth-child(4) img{
			top: 260px;
			left: 925px;
		.items a:nth-child(5) img{
			top: 130px;
			left: 710px;
		.items a:nth-child(6) img{
			top: 540px;
			left: 880px;

#3 After desining everything now it's a time for make them functional...just using a click event and animate to make them what you saw !!!

		const $items= $('.items img');
		const $iron = $('.iron');
		const $ironStick = $iron.css('left');
		$items.on("click", function(){
		            left: '13%',
		            top: '350px' 
		        }, 1000);
		        console.log('not iron');