diff --git a/frontend/assets/img/devcenter-logo.svg b/frontend/assets/img/devcenter-logo.svg
new file mode 100644
index 0000000..259d264
--- /dev/null
+++ b/frontend/assets/img/devcenter-logo.svg
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 226.4 63.1" style="enable-background:new 0 0 226.4 63.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#10A2DC;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="31.5" cy="31.5" r="31.5"/>
+<g>
+	<g>
+		<path class="st1" d="M13,19.6h8.8c6.7,0,11.4,5.2,10.3,12c-1.1,6.7-7.4,12-14.1,12H9.2L13,19.6z M16.2,38.2h1.4c3.7,0,7.2-2,8-6.7
+			c0.7-4.3-1.8-6.7-5.8-6.7h-1.5L16.2,38.2z"/>
+		<path class="st1" d="M52.8,27.6c-1-1.7-2.9-2.6-5.1-2.6c-3.8,0-6.8,2.9-7.4,6.6c-0.6,3.8,1.6,6.5,5.5,6.5c2,0,4.2-1,5.8-2.5
+			L50.3,43c-2.2,0.6-3.7,1.1-5.7,1.1c-3.3,0-6.3-1.3-8.5-3.5c-2.3-2.4-3-5.5-2.4-9.1c0.5-3.3,2.3-6.4,4.9-8.8
+			c2.7-2.4,6.4-3.9,9.8-3.9c2,0,3.8,0.4,5.5,1.2L52.8,27.6z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M70.3,20.7H79c1.6,0,3.3,0.2,4.9,0.7c1.6,0.5,3.1,1.2,4.4,2.3c1.3,1,2.4,2.4,3.2,4c0.8,1.6,1.2,3.5,1.2,5.8
+		c0,2.2-0.4,4.1-1.2,5.7c-0.8,1.6-1.9,2.9-3.2,4c-1.3,1-2.8,1.8-4.4,2.3c-1.6,0.5-3.3,0.8-4.9,0.8h-8.8V20.7z M73.8,43.1h4.5
+		c1.5,0,3-0.2,4.3-0.6c1.3-0.4,2.4-1.1,3.4-1.9c0.9-0.8,1.7-1.8,2.2-3c0.5-1.2,0.8-2.6,0.8-4.1c0-1.6-0.3-3-0.8-4.2
+		c-0.5-1.2-1.3-2.2-2.2-3c-0.9-0.8-2.1-1.4-3.4-1.8c-1.3-0.4-2.7-0.6-4.3-0.6h-4.5V43.1z"/>
+	<path class="st0" d="M112,37.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.6H98.4c0,0.7,0.2,1.4,0.5,2c0.3,0.6,0.7,1.2,1.2,1.6
+		c0.5,0.5,1.1,0.8,1.7,1.1c0.7,0.3,1.4,0.4,2.1,0.4c1.2,0,2.2-0.3,3-0.8c0.8-0.5,1.5-1.1,2-1.8l2.4,1.9c-0.9,1.2-2,2.1-3.2,2.7
+		c-1.2,0.6-2.6,0.9-4.1,0.9c-1.3,0-2.5-0.2-3.6-0.6s-2.1-1-2.8-1.8c-0.8-0.8-1.4-1.7-1.9-2.8c-0.5-1.1-0.7-2.3-0.7-3.7
+		c0-1.3,0.2-2.5,0.7-3.7c0.4-1.1,1.1-2.1,1.9-2.9c0.8-0.8,1.7-1.4,2.8-1.9c1.1-0.4,2.3-0.7,3.5-0.7c1.3,0,2.4,0.2,3.4,0.6
+		c1,0.4,1.9,1,2.6,1.8c0.7,0.8,1.3,1.7,1.6,2.8S112,36.2,112,37.5z M108.6,36.2c0-0.7-0.1-1.3-0.3-1.9c-0.2-0.6-0.5-1.1-0.9-1.5
+		s-0.9-0.8-1.5-1c-0.6-0.3-1.3-0.4-2.1-0.4c-0.7,0-1.4,0.1-2,0.4c-0.6,0.3-1.2,0.6-1.7,1c-0.5,0.4-0.9,0.9-1.2,1.5
+		c-0.3,0.6-0.5,1.2-0.5,1.9H108.6z"/>
+	<path class="st0" d="M123.3,46.2h-3.7l-7-17.1h3.7l5,13.4h0.1l5-13.4h3.6L123.3,46.2z"/>
+	<path class="st0" d="M143.9,33.5c-0.4-0.6-0.9-1-1.6-1.4c-0.7-0.4-1.5-0.6-2.3-0.6c-0.9,0-1.7,0.2-2.4,0.5
+		c-0.7,0.3-1.3,0.8-1.7,1.4c-0.5,0.6-0.8,1.2-1.1,2c-0.3,0.7-0.4,1.5-0.4,2.3c0,0.8,0.1,1.6,0.4,2.3c0.3,0.7,0.6,1.4,1.1,2
+		c0.5,0.6,1.1,1,1.8,1.4c0.7,0.3,1.5,0.5,2.4,0.5c0.9,0,1.7-0.2,2.4-0.5c0.7-0.3,1.3-0.8,1.7-1.4l2.3,2.1c-0.7,0.8-1.6,1.5-2.7,2
+		c-1.1,0.5-2.3,0.7-3.7,0.7c-1.3,0-2.5-0.2-3.7-0.6c-1.1-0.4-2.1-1-2.9-1.8c-0.8-0.8-1.5-1.7-1.9-2.8c-0.5-1.1-0.7-2.3-0.7-3.7
+		c0-1.3,0.2-2.6,0.7-3.7c0.5-1.1,1.1-2.1,1.9-2.8c0.8-0.8,1.8-1.4,2.9-1.8c1.1-0.4,2.3-0.6,3.6-0.6c1.2,0,2.4,0.2,3.6,0.7
+		c1.2,0.5,2.1,1.2,2.8,2.1L143.9,33.5z"/>
+	<path class="st0" d="M164.2,37.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.6h-13.6c0,0.7,0.2,1.4,0.5,2c0.3,0.6,0.7,1.2,1.2,1.6
+		c0.5,0.5,1.1,0.8,1.7,1.1c0.7,0.3,1.4,0.4,2.1,0.4c1.2,0,2.2-0.3,3-0.8c0.8-0.5,1.5-1.1,2-1.8l2.4,1.9c-0.9,1.2-2,2.1-3.2,2.7
+		c-1.2,0.6-2.6,0.9-4.1,0.9c-1.3,0-2.5-0.2-3.6-0.6c-1.1-0.4-2.1-1-2.8-1.8c-0.8-0.8-1.4-1.7-1.9-2.8c-0.5-1.1-0.7-2.3-0.7-3.7
+		c0-1.3,0.2-2.5,0.7-3.7c0.4-1.1,1.1-2.1,1.9-2.9s1.7-1.4,2.8-1.9c1.1-0.4,2.3-0.7,3.5-0.7c1.3,0,2.4,0.2,3.4,0.6
+		c1,0.4,1.9,1,2.6,1.8c0.7,0.8,1.3,1.7,1.6,2.8C164,34.9,164.2,36.2,164.2,37.5z M160.8,36.2c0-0.7-0.1-1.3-0.3-1.9
+		c-0.2-0.6-0.5-1.1-0.9-1.5s-0.9-0.8-1.5-1s-1.3-0.4-2.1-0.4c-0.7,0-1.4,0.1-2,0.4s-1.2,0.6-1.7,1s-0.9,0.9-1.2,1.5
+		c-0.3,0.6-0.5,1.2-0.5,1.9H160.8z"/>
+	<path class="st0" d="M170.5,29.2c0,0.4,0.1,0.9,0.1,1.5c0,0.5,0,1,0,1.4h0.1c0.2-0.5,0.5-0.9,0.9-1.3c0.4-0.4,0.8-0.7,1.3-1
+		c0.5-0.3,1-0.5,1.6-0.7c0.6-0.2,1.2-0.3,1.8-0.3c1.1,0,2.1,0.2,2.8,0.6s1.5,0.9,2,1.5c0.5,0.6,0.9,1.4,1.2,2.2
+		c0.3,0.8,0.4,1.7,0.4,2.7v10.6h-3.4v-9.5c0-0.7-0.1-1.4-0.2-2c-0.1-0.6-0.3-1.2-0.6-1.7c-0.3-0.5-0.7-0.9-1.2-1.2
+		c-0.5-0.3-1.2-0.4-1.9-0.4c-1.3,0-2.4,0.5-3.3,1.5c-0.9,1-1.3,2.4-1.3,4.1v9.1h-3.4V32.8c0-0.5,0-1,0-1.8c0-0.7-0.1-1.4-0.1-1.9
+		H170.5z"/>
+	<path class="st0" d="M195.3,31.9h-4.5v8.9c0,1,0.2,1.8,0.6,2.2s1,0.7,1.8,0.7c0.3,0,0.6,0,1-0.1c0.4-0.1,0.7-0.2,1-0.3l0.1,2.8
+		c-0.4,0.1-0.9,0.3-1.4,0.3c-0.5,0.1-1,0.1-1.5,0.1c-1.6,0-2.8-0.4-3.7-1.3c-0.9-0.9-1.3-2.2-1.3-4v-9.3h-3.3v-2.8h3.3v-4.9h3.4v4.9
+		h4.5V31.9z"/>
+	<path class="st0" d="M213.3,37.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.6h-13.6c0,0.7,0.2,1.4,0.5,2c0.3,0.6,0.7,1.2,1.2,1.6
+		c0.5,0.5,1.1,0.8,1.7,1.1c0.7,0.3,1.4,0.4,2.1,0.4c1.2,0,2.2-0.3,3-0.8c0.8-0.5,1.5-1.1,2-1.8l2.4,1.9c-0.9,1.2-2,2.1-3.2,2.7
+		c-1.2,0.6-2.6,0.9-4.1,0.9c-1.3,0-2.5-0.2-3.6-0.6c-1.1-0.4-2.1-1-2.8-1.8c-0.8-0.8-1.4-1.7-1.9-2.8c-0.5-1.1-0.7-2.3-0.7-3.7
+		c0-1.3,0.2-2.5,0.7-3.7c0.4-1.1,1.1-2.1,1.9-2.9s1.7-1.4,2.8-1.9c1.1-0.4,2.3-0.7,3.5-0.7c1.3,0,2.4,0.2,3.4,0.6
+		c1,0.4,1.9,1,2.6,1.8c0.7,0.8,1.3,1.7,1.6,2.8C213.1,34.9,213.3,36.2,213.3,37.5z M209.8,36.2c0-0.7-0.1-1.3-0.3-1.9
+		c-0.2-0.6-0.5-1.1-0.9-1.5s-0.9-0.8-1.5-1s-1.3-0.4-2.1-0.4c-0.7,0-1.4,0.1-2,0.4s-1.2,0.6-1.7,1s-0.9,0.9-1.2,1.5
+		c-0.3,0.6-0.5,1.2-0.5,1.9H209.8z"/>
+	<path class="st0" d="M216.5,31.1c0-0.7-0.1-1.4-0.1-1.9h3.2c0,0.4,0.1,0.9,0.1,1.5c0,0.6,0,1,0,1.4h0.1c0.5-1,1.2-1.8,2.1-2.4
+		c0.9-0.6,2-0.9,3.1-0.9c0.5,0,1,0,1.3,0.1l-0.1,3.1c-0.5-0.1-1-0.2-1.6-0.2c-0.8,0-1.5,0.2-2.1,0.5c-0.6,0.3-1.1,0.7-1.5,1.2
+		c-0.4,0.5-0.7,1.1-0.9,1.7c-0.2,0.7-0.3,1.4-0.3,2.1v9h-3.4V32.8C216.5,32.4,216.5,31.8,216.5,31.1z"/>
+</g>
+<g>
+	<g>
+		<path class="st0" d="M-65.8,225.9c3.2,0,3.2-5,0-5C-69,220.9-69,225.9-65.8,225.9L-65.8,225.9z"/>
+	</g>
+</g>
+<circle cx="1104.9" cy="25.4" r="31.5"/>
+<g>
+	<g>
+		<path class="st1" d="M1086.3,13.4h8.8c6.7,0,11.4,5.2,10.3,12c-1.1,6.7-7.4,12-14.1,12h-8.8L1086.3,13.4z M1089.6,32.1h1.4
+			c3.7,0,7.2-2,8-6.7c0.7-4.3-1.8-6.7-5.8-6.7h-1.5L1089.6,32.1z"/>
+		<path class="st1" d="M1126.1,21.5c-1-1.7-2.9-2.6-5.1-2.6c-3.8,0-6.8,2.9-7.4,6.6c-0.6,3.8,1.6,6.5,5.5,6.5c2,0,4.2-1,5.8-2.5
+			l-1.2,7.5c-2.2,0.6-3.7,1.1-5.7,1.1c-3.3,0-6.3-1.3-8.5-3.5c-2.3-2.4-3-5.5-2.4-9.1c0.5-3.3,2.3-6.4,4.9-8.8
+			c2.7-2.4,6.4-3.9,9.8-3.9c2,0,3.8,0.4,5.5,1.2L1126.1,21.5z"/>
+	</g>
+</g>
+<g>
+	
+		<text id="XMLID_67_" transform="matrix(1 0 0 1 1140.5691 40.0865)" style="font-family:'Gotham-Medium'; font-size:36.0482px; letter-spacing:-1;">Devcenter</text>
+</g>
+<g>
+	<circle class="st0" cx="1717.8" cy="31.5" r="31.5"/>
+	<g>
+		<g>
+			<path class="st1" d="M1699.3,19.6h8.8c6.7,0,11.4,5.2,10.3,12c-1.1,6.7-7.4,12-14.1,12h-8.8L1699.3,19.6z M1702.5,38.2h1.4
+				c3.7,0,7.2-2,8-6.7c0.7-4.3-1.8-6.7-5.8-6.7h-1.5L1702.5,38.2z"/>
+			<path class="st1" d="M1739.1,27.6c-1-1.7-2.9-2.6-5.1-2.6c-3.8,0-6.8,2.9-7.4,6.6c-0.6,3.8,1.6,6.5,5.5,6.5c2,0,4.2-1,5.8-2.5
+				l-1.2,7.5c-2.2,0.6-3.7,1.1-5.7,1.1c-3.3,0-6.3-1.3-8.5-3.5c-2.3-2.4-3-5.5-2.4-9.1c0.5-3.3,2.3-6.4,4.9-8.8
+				c2.7-2.4,6.4-3.9,9.8-3.9c2,0,3.8,0.4,5.5,1.2L1739.1,27.6z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<circle cx="2249.8" cy="25.4" r="31.5"/>
+	<g>
+		<g>
+			<path class="st1" d="M2231.3,13.4h8.8c6.7,0,11.4,5.2,10.3,12c-1.1,6.7-7.4,12-14.1,12h-8.8L2231.3,13.4z M2234.5,32.1h1.4
+				c3.7,0,7.2-2,8-6.7c0.7-4.3-1.8-6.7-5.8-6.7h-1.5L2234.5,32.1z"/>
+			<path class="st1" d="M2271.1,21.5c-1-1.7-2.9-2.6-5.1-2.6c-3.8,0-6.8,2.9-7.4,6.6c-0.6,3.8,1.6,6.5,5.5,6.5c2,0,4.2-1,5.8-2.5
+				l-1.2,7.5c-2.2,0.6-3.7,1.1-5.7,1.1c-3.3,0-6.3-1.3-8.5-3.5c-2.3-2.4-3-5.5-2.4-9.1c0.5-3.3,2.3-6.4,4.9-8.8
+				c2.7-2.4,6.4-3.9,9.8-3.9c2,0,3.8,0.4,5.5,1.2L2271.1,21.5z"/>
+		</g>
+	</g>
+</g>
+<circle class="st1" cx="2700.9" cy="25.4" r="31.5"/>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M2682.3,13.4h8.8c6.7,0,11.4,5.2,10.3,12c-1.1,6.7-7.4,12-14.1,12h-8.8L2682.3,13.4z M2685.6,32.1h1.4
+				c3.7,0,7.2-2,8-6.7c0.7-4.3-1.8-6.7-5.8-6.7h-1.5L2685.6,32.1z"/>
+			<path class="st0" d="M2722.1,21.5c-1-1.7-2.9-2.6-5.1-2.6c-3.8,0-6.8,2.9-7.4,6.6c-0.6,3.8,1.6,6.5,5.5,6.5c2,0,4.2-1,5.8-2.5
+				l-1.2,7.5c-2.2,0.6-3.7,1.1-5.7,1.1c-3.3,0-6.3-1.3-8.5-3.5c-2.3-2.4-3-5.5-2.4-9.1c0.5-3.3,2.3-6.4,4.9-8.8
+				c2.7-2.4,6.4-3.9,9.8-3.9c2,0,3.8,0.4,5.5,1.2L2722.1,21.5z"/>
+		</g>
+	</g>
+</g>
+<g>
+	
+		<text id="XMLID_68_" transform="matrix(1 0 0 1 2736.5691 40.0865)" class="st1" style="font-family:'Gotham-Medium'; font-size:36.0482px; letter-spacing:-1;">Devcenter</text>
+</g>
+</svg>
diff --git a/frontend/category.html b/frontend/category.html
new file mode 100644
index 0000000..098c621
--- /dev/null
+++ b/frontend/category.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>user-category</title>
+</head>
+<body>
+	<div id="logo">
+		<a href="index.html">
+			<img src="res/devcenter-logo.svg">
+		</a>
+		
+	</div>
+	<div id="name">
+		<h2>Coding101</h2>
+	</div>
+	<div id="content">
+		<h2>I am a..</h2>
+	</div>
+
+	<div id="sec-cat">
+		<div class="background">
+			<div class="transbox">
+				<p>Secondary School Graduate</p>
+			</div>
+		</div>
+	</div>
+	<div id="grad-awt-cat">
+		<div class="background">
+			<div class="transbox">
+				<p>Student/ Graduate/ Awaiting NYSC</p>
+			</div>
+		</div>
+	</div>
+	<div id="empl-cat">
+		<div class="background">
+			<div class="transbox">
+				<p>Employed/ Corp Members/ Unemployed</p>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/explainer.html b/frontend/explainer.html
new file mode 100644
index 0000000..463af23
--- /dev/null
+++ b/frontend/explainer.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>explainer</title>
+</head>
+<body>
+	<div id="logo">
+		<a href="index.html">
+			<img src="res/devcenter-logo.svg">
+		</a>
+		
+	</div>
+	<div id="name">
+		<h2>Coding101</h2>
+	</div>
+	<div id="content">
+		<h2>We've already done the hardwork on curating the best resources to help you.</h2>
+
+		<h3>All you have to do is try to answer the next couple of question as best as you can so we can figure out what you may like.</h3>
+
+		<h4>We then use that to create a track that might be the most engaging way for you to get into tech.</h4>
+	</div>
+	<div id="button">
+		<button type="button" href="category.html">Begin</button>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..f014fe1
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>index</title>
+</head>
+<body>
+	<div id="logo">
+		<a href="./">
+			<img src="res/devcenter-logo.svg">
+		</a>
+		
+	</div>
+	<div id="name">
+		<h2>Coding101</h2>
+	</div>
+	<div id="content">
+		<h2>Coding101 aims to help people who are interested in coding get an head start.</h2>
+
+		<h3>We understand that coding can be a bit confusing at the beginning and we are here to help you get started.</h3>
+	</div>
+	<div id="button">
+		<button type="button" href="explainer.html">How?</button>
+	</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/question.html b/frontend/question.html
new file mode 100644
index 0000000..e26e345
--- /dev/null
+++ b/frontend/question.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>question</title>
+</head>
+<body>
+	<div id="logo">
+		<a href="index.html">
+			<img src="res/devcenter-logo.svg">
+		</a>
+		
+	</div>
+	<div id="name">
+		<h2>Coding101</h2>
+	</div>
+	
+	<form>
+		<div id="quiz">
+			<label>I am a Secondary School Graduate</label>
+		
+			<div class="quest-1">
+				<li>
+
+				    <h3>What do you prefer as a hobby/ what do you do in your free time</h3>
+				    <hr>
+				    
+				    <div>
+				        <input type="checkbox" name="question-1-answers" id="question-1-answers-A" value="A" />
+				        <label for="question-1-answers-A">A) Computer Styled Sections </label>
+				    </div>
+				    
+				    <div>
+				        <input type="checkbox" name="question-1-answers" id="question-1-answers-B" value="B" />
+				        <label for="question-1-answers-B">B) Cascading Style Sheets</label>
+				    </div>
+				    
+				    <div>
+				        <input type="checkbox" name="question-1-answers" id="question-1-answers-C" value="C" />
+				        <label for="question-1-answers-C">C) Crazy Solid Shapes</label>
+				    </div>
+				    
+				    <div>
+				        <input type="checkbox" name="question-1-answers" id="question-1-answers-D" value="D" />
+				        <label for="question-1-answers-D">D) None of the above</label>
+				    </div>
+
+				</li>
+
+			</div>
+		</div>
+
+		<div>
+			<div id="button">
+				<button type="button">Back</button>
+			</div>
+			<div id="button">
+				<button type="button">Next</button>
+			</div>
+		</div>
+	
+	</form>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/resources.html b/frontend/resources.html
new file mode 100644
index 0000000..663ee3e
--- /dev/null
+++ b/frontend/resources.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>resources</title>
+</head>
+<body>
+	<div id="logo">
+		<a href="index.html">
+			<img src="res/devcenter-logo.svg">
+		</a>
+		
+	</div>
+	<div id="name">
+		<p>Coding101</p>
+	</div>
+	<div id="content">
+		<p>We've already done the hardwork on curating the best resources to help you.</p>
+
+		<p>All you have to do is try to answer the next couple of question as best as you can so we can figure out what you may like.</p>
+
+		<p>We then use that to create a track that might be the most engaging way for you to get into tech.</p>
+	</div>
+	<div id="button">
+		<button type="button">Begin</button>
+	</div>
+</body>
+</html>
\ No newline at end of file