index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Brittany Chiang | Bookmarks</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="keywords" content="Brittany Chiang, front-end developer, web developer, Northeastern University" />
	<meta name="author" content="Brittany Chiang" />
	<meta name="description" content="Front end developer, web developer, web designer, UI/UX Designer, and everything in between." />
	<meta property="og:description" content="Front end developer, web developer, web designer, UI/UX Designer, and everything in between." />

	<meta property="og:image" content="img/ogimage.png" />
	<meta property="og:image:type" content="image/png" />

	<meta property="og:title" content="Brittany Chiang's Personal Website" />
	<meta property="og:url" content="http://brittanychiang.com/" />
	<meta property="og:type" content="website" />

	<link rel="shortcut icon" href="img/logo-transparent-black-30pt.png">

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	<link href="css/styles.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic|Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
	<div id="masthead">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1>A Collection of Links</h1>
					<h3>For Front End Developers &amp; Designers<button id="about-btn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#about">i</button></h3>
				</div>
				<!-- Modal -->
				<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title" id="myModalLabel">Hello! Thanks for checking this out.</h4>
							</div>
							<div class="modal-body">
								<p>You may be asking yourself what this website is for.  Well, one day I realized my bookmarks folder was overflowing, disorganized, and hard to navigate. So, I decided to make what I had always hoped my bookmarks folder to look like.</p>
								<p>This site is essentially a visualization of my bookmarks folder, and also a resource for other developers and designers. I am by no means an expert on any of the topics covered by these links, but I do know a thing or two about front end development and design. Some of the links below even helped me decide that I want a career as a front end developer.  I hope you find this site resourceful, useful, or anything in between.</p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--/container-->
	</div>
	<!--/masthead-->

	<!--main-->
	<div class="container">
		<div class="row">
			<!--left-->
			<div class="col-md-3" id="leftCol">
				<ul class="nav nav-stacked" id="sidebar">
					<li id="li0"><a target="_blank" href="#sec0">Online Courses &amp; Tutorials</a></li>
					<li id="li1"><a target="_blank" href="#sec1">Guides &amp; References</a></li>
					<li id="li2"><a target="_blank" href="#sec2">Resources</a></li>
					<li id="li3"><a target="_blank" href="#sec3">For Reading/Following</a></li>
					<li id="li4"><a target="_blank" href="#sec4">Frameworks</a></li>
					<li id="li5"><a target="_blank" href="#sec5">CSS</a></li>
					<li id="li6"><a target="_blank" href="#sec6">JS</a></li>
					<li id="li7"><a target="_blank" href="#sec7">Fonts/Icons/Typography</a></li>
					<li id="li8"><a target="_blank" href="#sec8">Show Your Work</a></li>
					<li id="li9"><a target="_blank" href="#sec9">Prototyping/Wireframing</a></li>
					<li id="li10"><a target="_blank" href="#sec10">Tech Interviews</a></li>
					<li id="li11"><a target="_blank" href="#sec11">Miscellaneous</a></li>
				</ul>
			</div>
			<!--/left-->

			<!--right-->
			<div class="col-md-9 col-sm-12 link-container">
				<div id="sec0">
					<h2>Online Courses &amp; Tutorials</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.udemy.com/courses/">
									<div class="link-title">Udemy</div>
									<div class="link-description">Popular online education marketplace</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.lynda.com/">
									<div class="link-title">Lynda</div>
									<div class="link-description">Thousands of awesome courses (membership required). If you're enrolled at a university, you probably have a free account.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://tutsplus.com/courses?filter=free">
									<div class="link-title">Tuts+</div>
									<div class="link-description">Video courses to build new skills from start to finish.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.codeschool.com/">
									<div class="link-title">Code School</div>
									<div class="link-description">Learn how to code</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.codecademy.com/learn">
									<div class="link-title">Codecademy</div>
									<div class="link-description">Free online courses &amp; tutorials to learn coding</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://teamtreehouse.com/">
									<div class="link-title">Treehouse</div>
									<div class="link-description">Learn HTML, CSS, iPhone apps and more.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.coursera.org/">
									<div class="link-title">Coursera</div>
									<div class="link-description">Free online courses</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.skilledup.com/individuals">
									<div class="link-title">Skilled Up</div>
									<div class="link-description">More free online courses</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.udacity.com/">
									<div class="link-title">Udacity</div>
									<div class="link-description">Online courses, even earn a nanodegree!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://iversity.org/">
									<div class="link-title">Iversity</div>
									<div class="link-description">Even more free online courses</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.khanacademy.org/computing">
									<div class="link-title">Khan Academy</div>
									<div class="link-description">Computing section of Khan Academy</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://gymnasium.aquent.com/">
									<div class="link-title">Gymnasium</div>
									<div class="link-description">Online courses to close the skills gap</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://courses.p2pu.org/en/groups/schools/school-of-webcraft/">
									<div class="link-title">P2PU School of Webcraft</div>
									<div class="link-description">Basically online university with fun challenges</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://gibbon.co/">
									<div class="link-title">Gibbon</div>
									<div class="link-description">An easy to use knowledge portal</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://onemonth.com/">
									<div class="link-title">OneMonth</div>
									<div class="link-description">Learn to code in just one month</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.sitepoint.com/">
									<div class="link-title">Sitepoint</div>
									<div class="link-description">Learn web development </div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.skillshare.com/">
									<div class="link-title">Skillshare</div>
									<div class="link-description">Explore thousands of online classes in design, photography, business, and more.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://gibbon.co/">
									<div class="link-title">Gibbon</div>
									<div class="link-description">An easy to use knowledge portal</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://onemonth.com/">
									<div class="link-title">OneMonth</div>
									<div class="link-description">Learn to code in just one month</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.sitepoint.com/">
									<div class="link-title">Sitepoint</div>
									<div class="link-description">Learn web development </div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec1">
					<h2>Guides &amp; References</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.w3schools.com/">
									<div class="link-title">W3Schools</div>
									<div class="link-description">The world's largest web developer site</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.dontfeartheinternet.com/">
									<div class="link-title">Don't Fear the Internet</div>
									<div class="link-description">Basic HTML &amp; CSS for non-webdesigners</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.bento.io/">
									<div class="link-title">Bento</div>
									<div class="link-description">A collection of guides for web development</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://hackdesign.org/lessons">
									<div class="link-title">Hack Design</div>
									<div class="link-description">An easy to follow design course for people who do amazing things.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.webplatform.org/">
									<div class="link-title">Web Platform</div>
									<div class="link-description">The latest information on how to use the technology that runs the web — HTML, CSS, JavaScript and more</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.google.com/about/careers/students/guide-to-technical-development.html">
									<div class="link-title">Google Dev Guide</div>
									<div class="link-description">Provides tips and resources to help you develop your technical skills through self-paced, hands-on learning.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.goodui.org/">
									<div class="link-title">Good UI</div>
									<div class="link-description">Lessons on how to create good user interfaces.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://thesassway.com/">
									<div class="link-title">The Sass Way</div>
									<div class="link-description">Covers the latest news and topics on handcrafting CSS with Sass and Compass.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://diveintohtml5.info/">
									<div class="link-title">Dive Into HTML5</div>
									<div class="link-description">The latest information on how to use the technology that runs the web — HTML, CSS, JavaScript and more</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.uxbeginner.com/">
									<div class="link-title">UX Beginner</div>
									<div class="link-description">Start learning about UX</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.uxapprentice.com/">
									<div class="link-title">UX Apprentice</div>
									<div class="link-description">Learn the basics of User Experience Design.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://thesassway.com/">
									<div class="link-title">The Sass Way</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec2">
					<h2>Resources</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.uxpin.com/knowledge.html">
									<div class="link-title">UX Pin</div>
									<div class="link-description">Resources section of UX Pin</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.bypeople.com/">
									<div class="link-title">ByPeople</div>
									<div class="link-description">A growing repository with 729 bundles &amp; 10037 resources for web ninjas</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://uptodate.frontendrescue.org/">
									<div class="link-title">Up To Date</div>
									<div class="link-description">Keep up to date on front end technologies</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://tympanus.net/codrops/">
									<div class="link-title">CoDrops</div>
									<div class="link-description">Web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://agiledesigners.com/">
									<div class="link-title">Agile Designers</div>
									<div class="link-description">1436 Best resources for designers &amp; developers.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://365awesomedesigners.com/">
									<div class="link-title">365 Awesome Designers</div>
									<div class="link-description">Check out the amazing work of designers all over the internet.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://graphicburger.com/">
									<div class="link-title">Graphic Burger</div>
									<div class="link-description">Tasty design resources made with care for each pixel</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://pttrns.com/">
									<div class="link-title">Pttrns</div>
									<div class="link-description">Pttrns is the finest collection of design patterns, resources and inspiration.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://freebbble.com/">
									<div class="link-title">Freebbbble</div>
									<div class="link-description">1000+ design freebies made by Dribbble users.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://pixelbuddha.net/">
									<div class="link-title">Pixel Buddha</div>
									<div class="link-description">Free and premium resources for professional community.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.premiumpixels.com/">
									<div class="link-title">Premium Pixels</div>
									<div class="link-description">Tasty design resources made with care for each pixel</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://fribbble.com/">
									<div class="link-title">Fribble</div>
									<div class="link-description">Free PSD resources</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://dbfreebies.co/">
									<div class="link-title">DB Freebies</div>
									<div class="link-description">Dribble &amp; Behance freebies</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://uispace.net/">
									<div class="link-title">UI Space</div>
									<div class="link-description">Free UI assets!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.pixeden.com/">
									<div class="link-title">Pixden</div>
									<div class="link-description">Premium design &amp; web resources</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://creativemarket.com/">
									<div class="link-title">Creative Market</div>
									<div class="link-description">Beautiful Design Content</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://techandall.com/">
									<div class="link-title">Tech and All</div>
									<div class="link-description">Dribble &amp; Behance freebies</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.gratisography.com/">
									<div class="link-title">Gratisography</div>
									<div class="link-description">Better than stock photos</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://magdeleine.co/">
									<div class="link-title">Magdeleine</div>
									<div class="link-description">A free photo everyday</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://picography.co/">
									<div class="link-title">Picography</div>
									<div class="link-description">Free high-res photos</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://pixabay.com/">
									<div class="link-title">Pixabay</div>
									<div class="link-description">Free high-res photos</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.raumrot.com/">
									<div class="link-title">Raumrot</div>
									<div class="link-description">More free photos</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://magdeleine.co/">
									<div class="link-title">Magdeleine</div>
									<div class="link-description">A free photo everyday</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://picography.co/">
									<div class="link-title">Picography</div>
									<div class="link-description">Free high-res photos</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec3">
					<h2>For Reading/Following</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.webdesignermag.co.uk/">
									<div class="link-title">Web Designer Mag</div>
									<div class="link-description">Get the biggest web news first.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://dailytekk.com/">
									<div class="link-title">Daily Tekk</div>
									<div class="link-description">Top Internet destination for consumer-focused startup, app, gadget and Internet product content.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.creativebloq.com/">
									<div class="link-title">Creative Bloq</div>
									<div class="link-description">Delivers a daily balance of creative tips and inspiration across web design, graphic design, 3D and more.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://usabilitygeek.com/">
									<div class="link-title">Usability Geek</div>
									<div class="link-description">Blog that covers a wide array of topics such as UX, Human Computer Interaction, and Information Architecture.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://news.ycombinator.com/">
									<div class="link-title">Hacker News</div>
									<div class="link-description">Reddit for hackers.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://uxmag.com/">
									<div class="link-title">UX Mag</div>
									<div class="link-description">A free community resource exploring all facets of experience design.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.fastcodesign.com/">
									<div class="link-title">Fast Co. Design</div>
									<div class="link-description">A daily exploration of the intersection of business and design, from architecture to electronics, consumer products to fashion.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://webuilddesign.com/">
									<div class="link-title">We Build Design</div>
									<div class="link-description">Web design magazine that creates amazing sources for web designers and developers.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.1stwebdesigner.com/">
									<div class="link-title">1stWebDesigner</div>
									<div class="link-description">A community of digital professionals.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://boxesandarrows.com/">
									<div class="link-title">Boxes and Arrows</div>
									<div class="link-description">Articles about innovation, graphic design, interaction design, information architecture, and the design of business.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://alistapart.com/">
									<div class="link-title">A List Apart</div>
									<div class="link-description">Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.smashingmagazine.com/">
									<div class="link-title">Smashing Magazine</div>
									<div class="link-description">Online magazine that covers coding, design, UX, graphics, wordpress, and more.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://whitneyhess.com/">
									<div class="link-title">Whitney Hess</div>
									<div class="link-description">A UX teacher, mentor, and blogger.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://bashooka.com/">
									<div class="link-title">Bashooka</div>
									<div class="link-description">A blog for graphic designer and front-end developer where i share cool new things in graphic & web design and development.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://designmodo.com/">
									<div class="link-title">DesignModo</div>
									<div class="link-description">A great resource of informative material for designers and web developers. Free UI packs!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.webdesignerdepot.com/">
									<div class="link-title">Web Designer Depot</div>
									<div class="link-description">A place where people share the latest and greatest findings, tips, and techniques for web designers and developers.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.uxbooth.com/">
									<div class="link-title">UX Booth</div>
									<div class="link-description">UX Booth shares stories by and for user experience professionals.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://bashooka.com/">
									<div class="link-title">Bashooka</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://designmodo.com/">
									<div class="link-title">DesignModo</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.webdesignerdepot.com/">
									<div class="link-title">Web Designer Depot</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec4">
					<h2>Frameworks</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://html5boilerplate.com/">
									<div class="link-title">HTML5 Boilerplate</div>
									<div class="link-description">The web’s most popular front-end template.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://frontendboilerplate.com/">
									<div class="link-title">Front End Boilerplate</div>
									<div class="link-description">The easy way to start your web projects from scratch! Because you don´t need to re-create everything every time.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://getbootstrap.com/">
									<div class="link-title">Bootstrap</div>
									<div class="link-description">The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://foundation.zurb.com/">
									<div class="link-title">Foundation</div>
									<div class="link-description">An advanced, responsive, and popular front end framework.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://purecss.io/">
									<div class="link-title">Pure CSS</div>
									<div class="link-description">A set of small, responsive CSS modules that you can use in every web project.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://imperavi.com/kube/">
									<div class="link-title">Kube</div>
									<div class="link-description">Evolution of a CSS framework for professional designers and developers.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://getuikit.com/">
									<div class="link-title">UI Kit</div>
									<div class="link-description">A lightweight and modular front-end framework for developing fast and powerful web interfaces.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.gumbyframework.com/">
									<div class="link-title">Gumby</div>
									<div class="link-description">Another front end framework.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://semantic-ui.com/">
									<div class="link-title">Semantic UI</div>
									<div class="link-description">A development framework that helps create beautiful, responsive layouts using human-friendly HTML.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://getskeleton.com/">
									<div class="link-title">Skeleton</div>
									<div class="link-description">A dead simple, responsive boilerplate.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://concisecss.com/">
									<div class="link-title">Concise</div>
									<div class="link-description">A framework written in SASS that’s lightwheight and easy-to-use.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://furtive.co/">
									<div class="link-title">Furtive</div>
									<div class="link-description">A forward-thinking, CSS micro-framework (3.96kB gzipped).</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.basscss.com/">
									<div class="link-title">Bass</div>
									<div class="link-description">A lightweight collection of base element styles and immutable utilities designed for speed, clarity, performance, and scalability.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://muellergridsystem.com/">
									<div class="link-title">Mueller Grid</div>
									<div class="link-description">A modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://getbase.org/">
									<div class="link-title">Base</div>
									<div class="link-description">A super simple, responsive framework built for all devices big, small and in-between.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://materializecss.com/">
									<div class="link-title">Materialize</div>
									<div class="link-description">A modern responsive front-end framework based on Material Design</div>
								</a>
							</div>
						</div>
					</div>
				</div>

				<div id="sec5">
					<h2>CSS</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://sass-lang.com/">
									<div class="link-title">Sass</div>
									<div class="link-description">CSS preprocessor that allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://lesscss.org/">
									<div class="link-title">Less</div>
									<div class="link-description">A CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://compass-style.org/">
									<div class="link-title">Compass</div>
									<div class="link-description">Open source CSS authoring framework</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://css-tricks.com/">
									<div class="link-title">CSS-Tricks</div>
									<div class="link-description">A site about all things web design and development (not just CSS).</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://bourbon.io/">
									<div class="link-title">Bourbon</div>
									<div class="link-description">A simple and lightweight mixin library for Sass.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://daneden.github.io/animate.css/">
									<div class="link-title">Animate.css</div>
									<div class="link-description">Just-add-water CSS animations</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec6">
					<h2>JS</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://angularjs.org/">
									<div class="link-title">Angular.js</div>
									<div class="link-description">HTML enhanced for web apps!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://emberjs.com/">
									<div class="link-title">Ember.js</div>
									<div class="link-description">A framework for creating ambitious web applications.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://nodejs.org/en/">
									<div class="link-title">Node.js</div>
									<div class="link-description">A JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. </div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://backbonejs.org/">
									<div class="link-title">Backbone.js</div>
									<div class="link-description">Gives structure to web applications by providing models with key-value binding, custom events, and more.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://gruntjs.com/">
									<div class="link-title">Grunt.js</div>
									<div class="link-description">Popular Javascript task runner.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://harpjs.com/">
									<div class="link-title">Harp.js</div>
									<div class="link-description">The static web server with built-in preprocessing.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://jekyllrb.com/">
									<div class="link-title">Jekyll</div>
									<div class="link-description">Transform your plain text into static websites and blogs.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://surge.sh/">
									<div class="link-title">Surge</div>
									<div class="link-description">Static web publishing for Front-End Developers</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://intercoolerjs.org/">
									<div class="link-title">Intercooler.js</div>
									<div class="link-description">AJAX with attributes.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://formatjs.io/">
									<div class="link-title">Format.js</div>
									<div class="link-description">A modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://argunner.github.io/blinkTitle.js/">
									<div class="link-title">BlinkTitle.js</div>
									<div class="link-description">Javascript Implementation of TitleBar Alert or Notification.It Can Perform Blinking of Html Titlebar When Required.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://leafletjs.com/">
									<div class="link-title">Leaflet.js</div>
									<div class="link-description">An open-source JavaScript library for mobile-friendly interactive maps</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://requirejs.org/">
									<div class="link-title">Require.js</div>
									<div class="link-description">A JavaScript file and module loader.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://gulpjs.com/">
									<div class="link-title">Gulp</div>
									<div class="link-description">Automate and enhance your workflow.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://yeoman.io/">
									<div class="link-title">Yeoman</div>
									<div class="link-description">Helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://instafeedjs.com/">
									<div class="link-title">Instafeed.js</div>
									<div class="link-description">A dead-simple way to add Instagram photos to your website. No jQuery required, just plain 'ol javascript.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://mark-rolich.github.io/Magnifier.js/">
									<div class="link-title">Magnifier.js</div>
									<div class="link-description">A Javascript library enabling magnifying glass effect on an images.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://fitvidsjs.com/">
									<div class="link-title">Fitvids.js</div>
									<div class="link-description">A lightweight, easy-to-use jQuery plugin for fluid width video embeds.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://github.com/DeuxHuitHuit/quicksearch">
									<div class="link-title">Quicksearch.js</div>
									<div class="link-description">A jQuery plugin for searching through DOM Elements quickly.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://mynameismatthieu.com/WOW/">
									<div class="link-title">WOW.js</div>
									<div class="link-description">Reveal Animations When You Scroll. Very similar to Animate.css. </div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://bouncejs.com/">
									<div class="link-title">Bounce.js</div>
									<div class="link-description">A tool and JS library that lets you create beautiful CSS3 powered animations.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://fitvidsjs.com/">
									<div class="link-title">Fitvids</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://github.com/DeuxHuitHuit/quicksearch">
									<div class="link-title">Quicksearch</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://mynameismatthieu.com/WOW/">
									<div class="link-title">WOW.js</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>


				<div id="sec7">
					<h2>Fonts/Icons/Typography</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.google.com/fonts">
									<div class="link-title">Google Fonts</div>
									<div class="link-description">Free web fonts by Google!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://typekit.com/">
									<div class="link-title">Adobe Typekit</div>
									<div class="link-description">Web fonts, only a limited number if you don't have an account.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://practicaltypography.com/">
									<div class="link-title">Practical Typography</div>
									<div class="link-description">A book on typography.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://hellohappy.org/beautiful-web-type/">
									<div class="link-title">Beautiful Web Type</div>
									<div class="link-description">A showcase of the best typefaces from the Google web fonts directory.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://fortawesome.github.io/Font-Awesome/">
									<div class="link-title">Font Awesome</div>
									<div class="link-description">Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.fontsquirrel.com/">
									<div class="link-title">Font Squirrel</div>
									<div class="link-description">Fonts 100% free for commercial use.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.typegenius.com/">
									<div class="link-title">Typegenius</div>
									<div class="link-description">Font pairing</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://tiff.herokuapp.com/">
									<div class="link-title">Tiff</div>
									<div class="link-description">A type diff tool that visually contrasts the differences between two fonts.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://iconmonstr.com/">
									<div class="link-title">Icon Monstr</div>
									<div class="link-description">Free icons!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://icomoon.io/">
									<div class="link-title">Ico Moon</div>
									<div class="link-description">4000+ free vector icons!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://glyphicons.com/">
									<div class="link-title">Glyphicon</div>
									<div class="link-description">A library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://useiconic.com/">
									<div class="link-title">Iconic</div>
									<div class="link-description">Multiweight, responsive icon font.</div>
								</a>
							</div>
						</div>
					</div>
				</div>

				<div id="sec8">
					<h2>Show Your Work</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://dribbble.com/">
									<div class="link-title">Dribbble</div>
									<div class="link-description">Show and tell for designers.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.behance.net/">
									<div class="link-title">Behance</div>
									<div class="link-description">Similar to Dribbble.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.easel.ly/">
									<div class="link-title">Easelly</div>
									<div class="link-description">Create and share infographics!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://codeshare.io/">
									<div class="link-title">Codeshare</div>
									<div class="link-description">Share code in real-time with other developers</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://codepen.io/">
									<div class="link-title">Codepen</div>
									<div class="link-description">Front end development playground.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://jsfiddle.net/">
									<div class="link-title">JS Fiddle</div>
									<div class="link-description">Similar to Codepen.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://cssdeck.com/">
									<div class="link-title">CSS Deck</div>
									<div class="link-description">Similar to JS Fiddle.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.cssdesk.com/">
									<div class="link-title">CSS Desk</div>
									<div class="link-description">Similar to JS Fiddle, minus the JS.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://jsbin.com/">
									<div class="link-title">JS Bin</div>
									<div class="link-description">Basically the same thing as JS Fiddle.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://liveweave.com/">
									<div class="link-title">Liveweave</div>
									<div class="link-description">Like Codepen and JS Fiddle.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://dabblet.com/">
									<div class="link-title">Dabblet</div>
									<div class="link-description">Another Codepen.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.cssdesk.com/">
									<div class="link-title">CSS Desk</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec9">
					<h2>Prototyping/Wireframing</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://wireframe.cc/">
									<div class="link-title">Wireframe.cc</div>
									<div class="link-description">Super simple way to wireframe.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://getwirefy.com/">
									<div class="link-title">Wirefy</div>
									<div class="link-description">Build intuitive, powerful wireframes for smarter web development</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.invisionapp.com/">
									<div class="link-title">Invision App</div>
									<div class="link-description">The world's leading prototyping, collaboration &amp; workflow platform.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.justinmind.com/">
									<div class="link-title">JustInMind</div>
									<div class="link-description">Prototyping software to prototype faster communicate better.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.pixate.com/">
									<div class="link-title">Pixate</div>
									<div class="link-description">Popular prototyping software.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://precursorapp.com">
									<div class="link-title">Precursor App</div>
									<div class="link-description">Another prototyping app.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://marvelapp.com/">
									<div class="link-title">Marvel App</div>
									<div class="link-description">Free mobile &amp; web prototyping for everyone. No coding required.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://proto.io/">
									<div class="link-title">Proto.io</div>
									<div class="link-description">Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.savahapp.com/">
									<div class="link-title">Savah App</div>
									<div class="link-description">Design collaboration and prototyping platform</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://pingendo.com/">
									<div class="link-title">Pingendo</div>
									<div class="link-description">The simplest app for Bootstrap prototyping.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://froont.com/">
									<div class="link-title">Froont</div>
									<div class="link-description">Flexible tool for creating and collaborating on web design without code.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec10">
					<h2>Tech Interviews</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions#general-questions">
									<div class="link-title">Front End Questions</div>
									<div class="link-description">A Github repo of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.codewars.com/">
									<div class="link-title">Code Wars</div>
									<div class="link-description">Improve your skills by training with others on real code challenges.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://exercism.io/">
									<div class="link-title">Exercism</div>
									<div class="link-description">Focus on improving your skills and gain deep understanding of the fundamentals.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.hackerrank.com/">
									<div class="link-title">Hacker Rank</div>
									<div class="link-description">Coding challenges. Community. Awesome jobs.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://www.techinterview.org/">
									<div class="link-title">Tech Interview</div>
									<div class="link-description">A new coding interview question every week.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://product.hubspot.com/blog/5-whiteboard-coding-tips-for-interviews">
									<div class="link-title">Whiteboarding Tips</div>
									<div class="link-description">5 Whiteboard Coding Tips for Interviews</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="sec11">
					<h2>Miscellaneous</h2>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://subtlepatterns.com/">
									<div class="link-title">Subtle Patterns</div>
									<div class="link-description">Free subtle patterns.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://masonry.desandro.com/">
									<div class="link-title">Masonry</div>
									<div class="link-description">JavaScript grid layout library.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://enrmarc.github.io/listify/">
									<div class="link-title">Listify</div>
									<div class="link-description">Turn a group of lines into an HTML list.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://ami.responsivedesign.is/">
									<div class="link-title">Am I Responsive</div>
									<div class="link-description">See your site responsive.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://browsehappy.com/">
									<div class="link-title">Browse Happy</div>
									<div class="link-description">A way for you to find out what are the latest versions of the major browsers around.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://builtwith.com/">
									<div class="link-title">Built With</div>
									<div class="link-description">Find out what websites are built with.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://piktochart.com/">
									<div class="link-title">Piktochart</div>
									<div class="link-description">Create beautiful infographics in less than 10 minutes</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://www.canva.com/">
									<div class="link-title">Canva</div>
									<div class="link-description">Easy to use graphic making web app.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://venngage.com/">
									<div class="link-title">Venngage</div>
									<div class="link-description">Create beautiful infographics for free!</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://stackhive.com/">
									<div class="link-title">Stackhive</div>
									<div class="link-description">The most powerful and flexible tool to reduce your front-end development time.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://color.adobe.com/create/color-wheel/">
									<div class="link-title">Adobe Color CC</div>
									<div class="link-description">Adobe color wheel.</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="http://hex.colorrrs.com/">
									<div class="link-title">Colorrrs</div>
									<div class="link-description">Gives you the RGB of whatever hex code you enter. Or vice versa.</div>
								</a>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="https://coolors.co/">
									<div class="link-title">Coolors</div>
									<div class="link-description">Super fast color schemer for designers.</div>
								</a>
							</div>
						</div>
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div>
						<div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
						<!-- <div class="col-md-3 col-sm-3">
							<div class="link-item">
								<a target="_blank" href="#">
									<div class="link-title">Link Title</div>
									<div class="link-description">Link Description Link Description Link Description Link Description Link Description Link Description Link DescriptionLink Description</div>
								</a>
							</div>
						</div> -->
					</div>
				</div>

				<div id="more">
					<h2>More lists with more links!</h2>
					<div class="row">
						<div class="col-md-9">
							<p><a target="_blank" href="https://github.com/dypsilon/frontend-dev-bookmarks">Front End Dev Bookmarks (Giant Github Repo)</a><p>
							<p><a target="_blank" href="http://blog.proofhq.com/the-200-best-graphic-app-web-design-tools-resources-categorized-007536/">The 200 Best Graphic, App &amp; Web Design Tools &amp; Resources (Categorized)</a></p>
							<p><a target="_blank" href="https://medium.com/@IsAlmog/bootstrap-resources-for-startups-and-developers-e33596032686">Bootstrap Resources For Startups And Developers</a><p>
							<p><a target="_blank" href="https://medium.com/i-m-h-o/7-top-resources-of-web-font-typography-c2d1a61f4d3d">7 Top Resources Of Web Font Typography</a><p>
							<p><a target="_blank" href="https://medium.com/@_mikehlee/resources-for-learning-to-code-c382758f8096">Resources for learning to code</a><p>
							<p><a target="_blank" href="https://medium.com/web-development-resources/the-ultimate-list-of-web-development-resources-for-designers-developers-616f4547802e">The Ultimate List of Web Development Resources for Designers &amp; Developers</a><p>
							<p><a target="_blank" href="https://medium.com/@EnnisKloote/intro-resources-on-interaction-design-8273cfdf840f">Introductory Resources on the Practice of Interaction Design</a><p>
							<p><a target="_blank" href="https://medium.com/@kanishkkunal/15-awesome-free-tools-resources-for-web-developers-d7f276b0bba3">15 Awesome Free Tools &amp; Resources for Web Developers</a><p>
							<p><a target="_blank" href="https://medium.com/@de/resources-799d16952a56">200+ Resources</a><p>
							<p><a target="_blank" href="https://medium.com/@TexasCode/code-collective-resources-512f9c5970de">Code Collective Resources</a><p>
							<p><a target="_blank" href="https://medium.com/@robertguss/learning-web-development-resources-c9188cc8d0a6">Learning Web Development </a><p>
							<p><a target="_blank" href="https://medium.com/@ti_asif/200-best-free-tools-resources-for-front-end-web-developers-3fb3c415a643">200+ Best Free Tools &amp; Resources for Front-End Web Developers</a><p>
							<p><a target="_blank" href="https://medium.com/swlh/300-awesome-free-things-e07b3cd5fd5b">+300 Awesome Free Things</a><p>
							<p><a target="_blank" href="https://medium.com/ux-for-india/list-of-courses-for-ux-hci-or-id-aspirants-7f65770b33de">List of courses for UX, HCI or ID aspirants</a><p>
						</div>
					</div>
				</div>
			</div>
			<!--/right-->
		</div>
		<!--/row-->
	</div>
	<!--/container-->

	<footer>
		<div class="container">
			<div class="row">
				<div class="col-md-12 text-center">
					<div class="lead">Made with <i class="fa fa-heart"></i> by <a target="_blank" href="http://brittanychiang.com" target="_blank">Brittany Chiang</a> in 2015</div>
				</div>
			</div>
		</div>
	</footer>

	<!-- script references -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/scripts.js"></script>

</body>
</html>