Descripción del curso
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
- ¡Bienvenido al curso!
- Presentación del Proyecto
Etapas del diseño
- Información del cliente
- Inspiración para el diseño del sitio web
- Sketch
- WireFrame (NinjaMock)
- Mockup (Adobe XD)
NinjaMock
- ¿Qué es un wireframe?
- NinjaMock – Crear cuenta
- NinjaMock – Conociendo Ninja Mock
Wireframe
- Versión Móvil – Home
- Versión Móvil – Conócenos
- Versión Móvil – Productos
- Versión Móvil – Single Product
- Versión Móvil – Blog
- Versión Móvil – Single Blog
- Versión Móvil – Contáctanos
- Versión Móvil – Exportar e invitación
Recursos gratuitos para web
- Banco de imágenes
- Banco de Videos
- Fuentes
- Iconos
Mockup
- Iconos
- Preparando nuestra área de trabajo
- Header
- Logo – Navegación
- Slider
- Últimos Productos
- Blog
- Footer
- Conócenos
- Productos
- Detalle Productos
- Blog
- Detalle Blog
- Contáctanos
- Bonus- Prototipo
- Tareas
Nuestras herramientas de trabajo
- Editores de texto
- Consola de Windows – Babun
- Instalación de node y npm
- Instalando Git
- Instalando Browser-Sync
- Instalando gulp
- Instalando Pug
- Instalando Stylus – Nib – Rupture
- Conclusión
Pug
- Introducción
- Estructura HTML5
- Comentarios
- Atributos
- Iteración
- includes
- Mixins
- Conclusiones
Stylus
- Introducción
- Comentarios
- Variables
- Mixins
- Extend
- NIB
- Rupture
- Conclusiones
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
Instructor
0.00 average based on 0 ratings