Acabo de comentar en UDEMY un curso llamado Projects in HTML, impartido por Eduonix Learning Solutions. Es un curso totalmente práctico y su objetivo es que seamos capaces de crear 10 proyectos en HTML5. Personalmente me gustan este tipo de proyectos pues después de pasar por codecademy, treehouse, codeavengers, entre otros, en los cuales no haces proyectos o los que haces son francamente feos, pues me quedé con la política de sólo tomar cursos que tengan aplicación real. Además quiero ser web developer y necesito ir formando mi portafolios de proyectos. Pasemos al curso.
Comenzando dan una bienvenida, dicen de qué va a ir la cosa y a continuación ponen ciertas características que nuevas características tiene HTLML5.
Para nuestro primer proyecto utilizaremos Boilerplate. Así pues elegimos Get a custom build.
Llegamos a la siguiente pantalla y elegimos Classic H5BP.
A continuación, debajo aparecen varias características preseleccionadas.
No necesitaremos ninguna de las que están marcadas en la sección H5BP Optional.
Una vez con las opciones corretas le damos clic en Dowload it, los que nos hace bajar un archivo zipeado. A la hora de descomprimirlo queda lo siguiente:
Estos archivos los pasaremos a la carpeta html5_site.
Abrímos el archivo index.html con un editor; aquí uso note++.
En el navegador lo que vemos es una simple leyenda.
Finalmente modificamos el archivo y el código quedó como sigue:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<header id="main">
<h1>My HTML5 Site</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</nav>
<article>
<header></header>
<section></section>
</article>
<aside>
</aside>
<footer></footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
<script src="js/main.js"></script>
</body>
</html>
El resultado en el navegador fue:
Esto es todo por ahora. Pronto la segunda parte.
Eric
