Curso Diseño Web Frontend de CódigoFacilito

¿Qué aprenderé?

1. Aprenderás a diseñar páginas web desde lo más básico, entenderás cómo funcionan las páginas web y más.

2. Aprenderás a usar herramientas para desarrollo más productivo y rápido como HTML5 Boilerplate, jQuery y algunos Plugins más.

3. Conocerás el API de Google Maps para agregar mapas a tu página web, colocar marcadores, trazar rutas y más.

4. Verás buenas prácticas de CSS que te encaminaran a crear sitios responsivos. 5. Veremos la tendencia de Responsive Design, cómo llegar a ella, qué significa y cómo se

traduce en CSS. 6. Aprenderás a hacer páginas web con efecto Parallax, una tendencia de JavaScript muy

importante en el mercado. 7. Conocerás los nuevos filtros a elementos utilizando CSS3. 8. Aprenderás cómo hacer figuras geométricas con CSS3, porque la web de hoy no es

dependiente de sólo cuadrados. 9. Aprenderás buenas prácticas en la implementación de JavaScript en tus páginas. 10. Conocerás los atributos data de HTML5 y aprenderás cómo usarlo en tus páginas web. 11. Conocerás SASS, su instalación y uso. 12. Aprenderás a utilizar jQuery Templates. 13. Y mucho, mucho más. 14.

¿Cómo lo aprenderé? A través de distintos bloques de tutoriales diseñados por el tutor para que saques mayor provecho

del aprendizaje del curso, no sólo te mostramos el código para hacerlo, si no también te explicamos

por qué el código es así.

El principal objetivo es que puedas aplicar los conocimientos que aquí adquieras en el mercado y

puedas diseñar páginas web para empresas y clientes distintos.

¿Qué necesito? Hemos diseñado el curso para que sin conocimientos previos, queremos enseñar desde lo básico.

El editor que utilizaremos en el curso se llama Sublime Text 2, y puedes descargarlo en:

http://sublimetext.com/2 existe en versiones para OS, Windows y distribuciones Linux.

Utilizaremos distintas librerías pero todas y cada una de ellas podrás encontrarlas en una carpeta de

nombre “Hotel” con el código de la aplicación y el resto de los assets.

Además necesitarás un servidor local, no olvides ver el vídeo correspondiente para saber por qué y

cómo instalarlo. Aquí te dejamos algunas recomendaciones para que las instales:

XAMPP: http://www.apachefriends.org/es/xampp.html

WampServer: http://www.wampserver.com/en/

AppServ: http://www.appservnetwork.com/index.php?newlang=spanish

El tutor del curso estará usando XAMPP corriendo sobre Windows 8, pero no tendrás problema sin

importar el Sistema Operativo que tengas.

Por último, necesitarás un navegador moderno, Safari, Chrome, Firefox, Opera e Internet Explorer

10 son buenas opciones, el tutor estará utilizando Chrome 29 beta.

Temario

Bloque 1: Cómo funciona la Web. 1. Frontend y Backend 2. La función de un navegador. 3. Sublime Text 2, cómo usarlo. 4. Cómo instalar XAMPP

Bloque 2: HTML 1. Hola mundo con HTML 2. Estructura básica de un documento HTML. 3. Por qué es importante usar las etiquetas HTML correctamente

Bloque 3: Boilerplate 1. ¿Qué es HTML5 Boilerplate? 2. Condicionales IE. 3. Cargar jQuery. 4. Instalar SASS

Bloque 4: Navegación 1. Header, nav, ul, li. 2. CSS para la Navegación. 3. Figuras geométricas en CSS3 4. Mixins en SASS 5. Posicionar logo. 6. Animar menú 7. Ciclos en SASS y Fuentes Personalizadas.

Bloque 5: Crear slider 1. Slider Semántico. 2. Aplicando CSS 3. Poner a funcionar el slider con botones y jQuery. 4. Atributos data. 5. Intervalos de tiempo y opciones de animación.

Bloque 6: Pantalla de Inicio 1. Triángulos, Sombras y Más.

Bloque 7: Pantalla precios 1. Marcado (HTML) 2. Correcciones, variables en SASS y más. 3. Agregando el Ribbon. 4. Rotar Elementos. 5. Uso y manejo de jQuery Templates 6. Revertir giro.

Bloque 8: Galería CSS y JavaScript 1. Galería con CSS + JavaScript

Bloque 9: Google Maps API 1. HTML y CSS 2. Desplegar Mapa 3. Geolocalización en HTML5 4. Colocar marcadores. 5. Definir rutas en el mapa.

Bloque 10: Parallax 1. Scroll en la Navegación. 2. StellarJS 3. Scrollorama

Bloque 11: Responsive Design 1. Explicación y el Viewport 2. Explicación sobre Media Queries. 3. Aplicar Media Queries. 4. Correcciones en javascript para móviles.