I'll be happy to help, Chibi!
First off, I do have some sites in HTML5!
Paper Scraps,
Sacred Vessels,
DILF,
So Scandalous!,
this page here and
Nyx's Lounge demo. It's much more of a change if, like me, you start off from XHTML, where everything needed a closing slash/tag. There are some deprecated tags and some new ones, and now you can't write tags in all caps (I remember when I used to do this, ouch).
The biggest change, and I think that's what people mean when they say they converted to HTML5, is actually CSS3, which opens up a whole new world of possibilities. The progress bar on Paper Scraps and the one pager shrines page? All CSS3. The responsiveness? CSS3. Rounded corners, embedded fonts, the imageless gradient background on DILF? CSS3. Even the menu on the demo is mostly CSS with a tiny bit of JS thrown in.
As for responsiveness, it can be hard to wrap your head around it and time consuming to code. This is why I use the built-in responsiveness from
Bootstrap! Bootstrap is a framework that uses HTML5, CSS3 and jQuery to make it easy and fast to build a basic website with a grid and responsive. I know I just said a lot of scary buzzword, but don't worry, if you understand CSS classes it's pretty simple. You download the Bootstrap kit and start a new HTML file with this:
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and you insert whatever you want between the body tag and the jQuery! (The jQuery has to stay at the end of the page for performance reasons.)
Bootstrap is built with a grid of 12 columns, meaning that the width of your columns for your layout have to add up to 12. For example, for a three column layout, you write this:
Code: Select all
<body>
<h1>Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
This is column 1
</div>
<div class="col-md-4">
This is column 2
</div>
<div class="col-md-4">
This is column 3
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
where "container" is the container of your site, "row" is a row of columns, and "col-md-4" is a column (col-) measuring 4/12 columns (-4) wide in the grid for a medium-sized screen (md) (the responsive part). 4+4+4=12! You can have 6 columns each 2/12 wide, or 2 columns 6/12 wide, or you can even have just 1 column 12/12 wide, it's up to you! It just has to add up to 12. You can have more than one row as well, of course.
I hope this was helpful! If you have questions about all this, don't hesitate to ask!
