Un curso paso a paso si deseas conocer todo el proceso de realizar un sitio web.
En este curso aprenderás herramientas, técnicas y tecnologías web avanzadas:
Iniciaremos con las etapas del diseño, el cual incluye: Wireframe (Lápiz y Papel), Sketch (NinjaMockup), Mockup y Prototipo (Adobe Experience Design), visitaremos algunos sitios web que nos sirven para inspirarnos en nuestro diseño, daremos un vistazo rápido a banco de imágenes, vídeos, iconos, fuentes, luego conoceremos los dos editores más usados actualmente por los desarrolladores, Sublime Text y Visual Studio Code, aprenderemos el manejo básico de la consola (Babun y Git Bash), continuamos con el motor de plantilla de Node.js llamado Pug (Jade) el cual nos permite modularizar nuestro código y seremos más productivos a la hora de maquetar, conoceremos su compañero ideal, el preprocesador CSS llamado Stylus con sus extensiones Nib y Rupture, y para ser más felices a la hora de codear utilizaremos BrowserSync + Gulp.
En este curso aprenderás lo básico de cada herramienta y/o tecnología, después integraremos todo para hacer diseños a la vanguardia, es decir: crearemos una base sólida y aprenderemos de la forma mas adecuada, maquetando un proyecto real.
Introducción al curso
Etapas del diseño
NinjaMock
Wireframe
Recursos gratuitos para web
Mockup
Nuestras herramientas de trabajo
Pug
Stylus
Preparando nuestro entorno de trabajo
- Introducción
- Estructura de carpetas
- Archivos Base (Hrml5Boilerplate – Normalize)
- BrowserSync
- Iniciando nuestro proyecto
- Instalación de Gulp
- Instalación de gulp-pug
- Instalación de gulp-stylus
- Definiendo las tareas: Pug
- Definiendo las tareas: Stylus
- Definiendo las tareas: Concat
- Definiendo las tareas: Imágenes
- Definiendo las tareas: BrowserSync
- Definiendo las tareas: Watch y Default
- Configuración y comprobación final
Proyecto Final
- Introducción
- Modularizando el index
- Definiendo las variables, colores y fuentes
- Home: Realizando el Header Top
- Home: Finalizando el Header Top
- Home: Estructura del header bottom
- Home: Estructura del header bottom parte 2
- Home: Estructura del header bottom parte 3
- Home: Estructura del header bottom parte final
- Home: Realizando el Slider
- Home: Realizando Últimos Productos
- Home: Realizando Últimos Productos parte 2
- Home: Realizando Últimos Productos parte 3
- Home: Realizando el Blog
- Home: Finalizando el home
- Conócenos: Preparando nuestro archivo
- Conócenos : Finalizando la página conócenos
