
Te doy la bienvenida al curso de Introducción al Diseño Web. Mi nombre es Max Palominos y a continuación aprenderás a crear un sitio web desde cero, utilizando etiquetas de lenguaje HTML y variables CSS que te ayudarán a ordenar y mejorar el atractivo visual de una página web. Recuerda descargar los recursos y de apoyo que encontrarás en las siguientes unidades.
En este video conoceremos el proyecto que realizaremos a lo largo del curso. Veremos cada una de las secciones que posee, su estructura por columna, efectos y enlaces web. Aquí podrás descargar la plantilla de este proyecto para que puedas revisarla y utilizarla como guía durante todo el curso.
A continuación, conoceremos cómo se compone un documento HTML y cuales son las etiquetas necesarias para que el navegador lo pueda reconocer como una página web.
Continuamos conociendo las etiquetas más utilizadas en una página web y cómo podemos modificar su aspecto utilizando variables CSS
Ahora es tiempo de descargar nuestra guía de recursos y así complementar nuestros conocimientos sobre HTML y CSS. En este documento encontrarás una serie de enlaces a otros sitios web, los que han sido muy importantes en mi aprendizaje de diseño web. Entre ellos encontrarás herramientas, aplicaciones de apoyo, software de utilidad gratis y de pago, enlace a bibliotecas de recursos de imagen, audio, video y otros elementos gráficos que te pueden ayudar.
Aunque, para crear un sitio web lo puedes hacer utilizando un edito de texto básico como WordPad o Notes, existen herramientas muy útiles como SublimeText, Brackets o Dreamweaver, ya que no ayudarán a ordenar el contenido de la página y así no enredarnos con tantas líneas de código. Además, cada uno podrás complementarlo con plugin o extenciones que mejorarán tu entorno de trabajo. También te muestro una herramienta de maquetación muy interesante llamada Figma. Una de las cualidades más interesantes es que no se instala, la puedes usar desde tu navegador y trabajar documentos junto a tu equipo en tiempo real. Es una potente herramienta de diseño.
Iniciamos nuestro proyecto configurando la sección de cabecera. En ella insertaremos un video que se mostrará como tipo "fondo" en contenedor que configuraremos como columna. Configuraremos propiedades específicas para que logre contener nuestro video y el título lo posicionaremos al centro y por sobre las capas anteriores.
En este segundo video aprenderás a configurar una sección de columna, que en su interior contiene otra fila de dos columnas.
Ahora veremos cómo crear una fila de tres columnas y aplicaremos algunas propiedades a nuestra hoja de estilos que ayudará a mostrar nuestro contenido con un aspecto mejorado
En la siguiente sección aprenderás a configurar filas de dos columnas, cada una con propiedades específicas
Ahora configuraremos filas de cuatro columnas con propiedades específicas para una correcta visualización
Continuaremos configurando el pié de página o Footer site, para ello realizamos configuraciones específicas que ayudarán a mostrarlo de mejor manera en los diferentes dispositivos. Además. aprenderás a crear listas de contenido e insertar enlaces en cada elemento
Finalmente, conocerás las Media Queries y cómo se configuran en nuestra hoja de estilos. Aprenderás su funcionamiento, cómo estas afectan a las variables introducidas anteriormente y cómo las podremos configurar para pantallas de tamaño fijo o variable según sea el caso.
En este curso aprenderás a crear una página web desde cero. Conocerás la estructura básica de un documento HTML para que pueda ser reconocido por los navegadores, cómo puedes ayudar a que los buscadores lo reconozcan y lo indexen a sus resultados de búsqueda en relación a etiquetas y descripción de tu página web. Revisaremos las etiquetas web más utilizadas y cómo se componen, luego conoceremos la estructura de variables, en modelo escala, que nos permitirá añadir o modificar estilos a cada elemento u objeto desde la propia hoja de estilos. Aprenderás a crear la hoja de estilos y enlazar ambos documentos para intervenir sus etiquetas y mejorar el aspecto visual utilizando simples variables CSS. Nuestro proyecto será replicar una página web de tipo personal. Para esto no será necesario tener conocimientos previos. En este curso aprenderás desde lo más básico que te permitirá crear y configurar cada una de las secciones de nuestro proyecto, ingresando etiquetas y modificándolas con líneas de código en nuestra hoja de estilos. Aprenderás a crea filas, columnas y dar propiedades específicas a cada una de ellas. Finalmente, aprenderás transformar la página web en un sitio completamente Responsive o ajustable a varios tamaños de pantallas, para así mostrarla correctamente en múltiples dispositivos. Lo único que necesitarás para realizar este curso es: Un computador con acceso a internet, un software para edición de código web (o también puedes usar editor de texto simple como TextEdit o WordPad), y muchas ganas de aprender