Curso de maquetación web de lo básico a lo avanzado

Name: Curso de maquetación web de lo básico a lo avanzado
Rating: 4.5 (2033 reviews)

Aprende a maquetar sitios web de una manera fácil y efectiva en los lenguajes HTML5 y CSS3

Created byJuan Fernando Urrego

Last updated 6/2024

Spanish

What you'll learn

Aprenderás a pasar tus diseños hechos en programas de diseño como Photoshop o Illustrator a lenguajes de maquetación web HTML5 y CSS3 de una manera fácil y práctica.
Aprenderás a utilizar el método de las ayudas visuales.
Aprenderás la maquetación de cajas principales e internas para elaborar un correcto wireframe.
Aprenderás a integrar los elementos gráficos y así realizar la estructura del sitio web para internet en el lenguaje de marcado HTML5 y hojas de estilo CSS3.
Aprenderás a crear tu propio sistema de columnas al mejor estilo de Bootstrap sólo con HTML5 y CSS3 para que se adapten a cualquier dispositivo.

Course content

1 section • 21 lectures • 2h 30m total length

Bienvenida4:00
En esta clase te doy la bienvenida a este curso de Convierte diseños en Photoshop a HTML5 y CSS3, mostrándote el archivo base con el cual trabajaremos durante todo el curso. Recuerda descargar la carpeta comprimida de medios_maquetación_web_Tutoriales_a_tu_alcance.zip
Antes de comenzar0:47
Canales de comunicación y aprendizaje0:13
Creando ayudas visuales - parte 17:26
Comenzaremos a maquetar nuestro sitio web gracias a las ayudas visuales que traeremos del archivo de photoshop.
Creando ayudas visuales - parte 26:39
Continuaremos editando los archivos html5 y css3 para la ubicación de nuestras ayudas visuales.
Creando las cajas principales - parte 19:13
En esta clase comenzaremos a ubicar las cajas principales de acuerdo a las ayudas visuales que colocamos anteriormente en las hojas de estilo.
Creando las cajas principales - parte 28:10
En esta clase finalizaremos la ubicación de las cajas principales para continuar con la ubicación de las cajas internas.
Creando las cajas internas - parte 110:00
En esta clase, comenzaremos a ubicar las cajas internas que están dentro de cada caja principal en nuestra maquetación web.
Creando las cajas internas - parte 29:18
En esta clase continuaremos agregando estilo a las cajas internas.
Creando las cajas internas - parte 39:30
Continuamos con la ubicación de las cajas internas dentro de las cajas principales. Aprenderás varios trucos de maquetación en estas clases de creando las cajas internas.
Creando las cajas internas - parte 47:19
Finalizamos las clases de crear las cajas internas, ahora, a integrar el diseño.
Integrando el diseño - parte 18:41
En las próximas clases a continuación, comenzaremos a integrar los elementos gráficos que compone nuestro diseño web hecho en photoshop.
Integrando el diseño - parte 28:50
Continuamos la integración del diseño de la sección de la página de inicio.
Integrando el diseño - parte 38:09
En esta clase finalizamos la integración del diseño de la página de inicio. En las próximas clases continuaremos con las otras secciones del sitio web.
Integrando la sección Quienes Somos - parte 19:01
Comenzaremos a organizar las secciones que quedan faltando de nuestro sitio web, comenzando por la sección de Quienes Somos.
Integrando la sección Quienes Somos - parte 29:19
Hemos aprendido a organizar estéticamente un artículo compuesto por título, imagen y párrafo con CSS3.
Integrando la sección Servicios - parte 18:36
En esta clase aprenderemos a organizar una galería de imágenes con HTML5 y CSS3.
Integrando la sección Servicios - parte 28:11
Gracias a las ayudas visuales nuevamente hemos logrado organizar la galería de imágenes.
Integrando la sección Contáctenos9:28
En esta clase aprenderemos a organizar un formulario de envío de acuerdo a un diseño preestablecido.
Despedida8:02
Hemos culminado este curso de Convertir un diseño hecho en Photoshop a HTML5 y CSS3 exitosamente. Los invito a que vean más cursos gratuitos en la página web de Tutoriales a tu Alcance. También los invito a que vean el próximo curso de esta secuela de Desarrollo Web llamado "Aprende a crear Animaciones y Efectos Interactivos con CSS3" sin usar JavaScript. Feliz Diseño!
Clase Extra0:04

Requirements

Descargar el material de trabajo del curso, lo entregaremos en la clase 1. Ver los cursos gratuitos introductorios de HTML5 y CSS3 en Tutoriales a tu Alcance.

Description

¿DE QUÉ SE TRATA EL CURSO?

Cuando diseñas páginas web, debes crear tus diseños en programas gráficos como photoshop o illustrator. La pregunta es ¿Cómo pasar mis diseños a un lenguaje de marcado HTML y a hojas de estilo CSS?. Si te has hecho esta pregunta, en este curso aprenderás a pasar tus diseños hechos en photoshop a lenguajes de maquetación web HTML5 y CSS3 de una manera fácil y práctica.

¿CÓMO ES EL CURSO?

Utilizando el método de las ayudas visuales, la maquetación de cajas principales e internas para elaborar un correcto wireframe, y finalmente integrando los elementos gráficos realizaremos así la estructura del sitio web para internet en el lenguaje de marcado HTML5 y hojas de estilo CSS3.

En este curso podrás descargar una carpeta donde está todo el material necesario para la elaboración del mismo.

¿CUÁNTO SE TARDA EN COMPLETAR EL CURSO?

Depende de ti. Estimo que menos de una semana puedes completar el curso, pero dependerá de tu ritmo de trabajo y de tu disponibilidad.

¿CUÁLES SON LOS REQUISITOS?

Descargar el material que se encuentra en los recursos de la clase 1.

¿A QUIÉN VA DIRIGIDO ESTE CURSO?

Diseñadores gráficos, visuales, artistas, desarrolladores

Empresas y emprendedores

Cualquier persona que quiera tener una página web

Who this course is for:

Este curso va dirigido a todas las personas que diseñen páginas web en photoshop y las deseen pasar al lenguaje de código web HTML5 y CSS3.