Best Web Development Tutorials For Beginners

W3schools

https://www.w3schools.com

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.

TutorialsPoint

https://www.tutorialspoint.com/

Free tutorials and reference manuals with examples for Kubernetes, Spring JDBC, Java Concurrency, Gerrit, Spring AOP, Spring MVC, Apache Solr, Excel Power View, Sencha Touch, Tex Commands, Agile Testing, Apache Tajo, C++ Library, MariaDB, SAP QM, SAP SOLMAN, SAP SCM, MS Access, KoaJS, OAuth2.0, Scrapy, SAP CCA, SAP PM, SAPUI5, Cognos, Internet of Things, Rural Marketing, Trampolining, Golf, Angular2, Framework7, Arduino, CherryPy, Firebase, SAP C4C, SAP Dashboard, SAP PI, ExpressJS, Design Thinking, Internet Security, PyGTK, Apache Drill, Excel Charts, Elastic Search, Computer Security, Extreme Programming, Behavior Driven Development, Conversion Rate Optimization, SAP Basis, Business Law, Kanban, Erlang, SAP Payroll, ASP.Net WP, PouchDB, MFC, SAP HR, Yii, Clojure, Aurelia, CoffeeScript, CPanel, Laravel, SAP Webi, MS SQL Server, pinterest, Indian Polity, Windows10, Teradata

CSS Tricks

https://css-tricks.com

Tips, Tricks, and Techniques on using Cascading Style Sheets.

Codrops

https://tympanus.net/codrops/

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.

GitHub

https://github.com/

GitHub is a web-based Git or version control repository and Internet hosting service. It is mostly used for code. It offers all of the distributed version control and source code management functionality of Git as well as adding its own features.

Stack Overflow

https://stackoverflow.com/

Stack Overflow is the largest online community for programmers to learn, share their knowledge, and advance their careers.

Advertisements

Simple template for create HTML5 project

Here is sample template for starting the HTML5 Project.

File Structure :

  • ProjectName
    • assets
      • css
        • reset.css
        • responsive.css
        • style.css
      • fonts
      • images
      • js
        • jquery-1.11.3.min.js
        • modernizr-3.2.0.base.js
        • prefixfree.min.js
    • index.html

index.html

<!doctype html>

<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>

	<meta charset="utf-8">

	<!--
		HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
		Free to use
	-->

	<!-- Always force latest IE rendering engine (even in intranet) -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- Important stuff for SEO, don't neglect. (And don't dupicate values across your site!) -->
	<title>HTML5-Reset</title>
	<meta name="author" content="" />
	<meta name="description" content="" />

	<!-- Don't forget to set your site up: http://google.com/webmasters -->
	<meta name="google-site-verification" content="" />

	<!-- Who owns the content of this site? -->
	<meta name="Copyright" content="" />

	<!--  Mobile Viewport
	http://j.mp/mobileviewport & http://davidbcalhoun.com/2010/viewport-metatag
	device-width : Occupy full width of the screen in its current orientation
	initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
	maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width (wrong for most sites)
	-->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Use Iconifyer to generate all the favicons and touch icons you need: http://iconifier.net -->
	<link rel="shortcut icon" href="favicon.ico" />

	<!-- concatenate and minify for production -->
	<link rel="stylesheet" href="assets/css/reset.css" />
	<link rel="stylesheet" href="assets/css/style.css" />
	
	<!-- media query -->
	<link rel="stylesheet" href="assets/css/responsive.css" />

	<!-- Lea Verou's prefixfree (http://leaverou.github.io/prefixfree/), lets you use un-prefixed properties in your CSS files -->
	<script src="assets/js/libs/prefixfree.min.js"></script>

	<!-- This is a minimized, base version of Modernizr. (http://modernizr.com)
		  You will need to create new builds to get the detects you need. -->
	<script src="assets/js/libs/modernizr-3.2.0.base.js"></script>

	<!-- Twitter: see https://dev.twitter.com/docs/cards/types/summary-card for details -->
	<meta name="twitter:card" content="">
	<meta name="twitter:site" content="">
	<meta name="twitter:title" content="">
	<meta name="twitter:description" content="">
	<meta name="twitter:url" content="">
	
	<!-- Facebook (and some others) use the Open Graph protocol: see http://ogp.me/ for details -->
	<meta property="og:title" content="" />
	<meta property="og:description" content="" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />

</head>

<body>

<div class="wrapper"><!-- not needed? up to you: http://camendesign.com/code/developpeurs_sans_frontieres -->

	<header>

		<h1><a href="/">Page Title</a></h1>

		<nav>

			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>

		</nav>

	</header>

	<article>

		<h1>Article Header</h1>

		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>

		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>

		<h2>Sidebar Content</h2>

	</aside>

	<footer>

		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>

	</footer>

</div>

<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script type="text/javascript" src="assets/js/libs/jquery-1.11.3.min.js"></script>


<!-- this is where we put our custom functions -->
<!-- don't forget to concatenate and minify for production -->
<script type="text/javascript" src="assets/js/functions.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	});
</script>

<!-- Asynchronous google analytics; this is the official snippet.
	 Replace UA-XXXXXX-XX with your site's ID and uncomment to enable.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXX-XX', 'auto');
  ga('send', 'pageview');

</script>
-->

</body>
</html>		
	

Reference : HTML5-Reset