About

This page was created as a voluntary project to include some of the basics of CSS, HTML and the tiniest bit of JavaScript & the jQuery library.
I decided to make the page about the solar system because of my interest in Astronomy and for the sake of teaching others about our own neighborhood of celestial bodies.
I chose this type of project not only to express my creativity but to show others that it's okay to choose your own type of project, as long as you include everything that you've learned (tip: including extra things will always give you better grades).

It all started with two circles; one big yellow and the other one being little and blue, which were included in a project that CodeCademy (a site I highly recommend) suggested for new users. The idea was to create a very simple version of the solar system by making the blue circle orbit around the yellow one and at the same time having a grey circle orbiting around the blue one, which would represent the orbits of the moon and the earth.



The earliest version of Our Solar System:

In the beginning


Which was backed up with the HTML and CSS code:


index

<html>
	<head>
		<link rel= "stylesheet" href= "style.css"/>
	</head>
   
	<body>
		<!-- Right below is an image of the sun -->
		<img id= "sun" src= "http://goo.gl/PmbqZa">
		<img id= "earth" src= "http://goo.gl/41IWnf">
		<!-- Insert the 'earth' on the next line -->
	</body>
</html>


style.css

	html, body {
		/* The universe takes up all available space */
		width: 100%;
		height: 100%;
					
		/* The universe is black */
		background-color: black;
	}

	#sun {
		position: absolute;
		/* Positions the top-left corner of the image to be *
		/* in the middle of the box */
		top: 50%;
		left: 50%;
					
		/* Play with these numbers to see what it does */
		height: 200px;
		width: 200px;
		margin-top: -100px; 
		margin-left: -100px;
	}

	#earth {
		/* Style your earth */
	}

	#earth-orbit {
		/* For Section #2 */
	}