Ver todas las Rutas
Aprende Diseño Web
Esta Pista de 40 horas te equipará completamente en los fundamentos del diseño web. Aprenderás cómo diseñar y construir sitios web hermosos a través de los principios básicos del diseño como marca, teoría del color y tipografía. También aprenderás HTML y CSS, que son los lenguajes de código comunes en los que se construyen todos los sitios web modernos. Desde la codificación hasta el trabajo en el navegador y la animación, tu carrera en diseño web comienza aquí.
Comenzaremos con una base en HTML y CSS, cubierta en los primeros cursos de la Pista. Luego, pasarás a temas más intermedios como Selectores CSS y Formularios y Tablas HTML. El curso Tipografía para Diseñadores te dará las habilidades que necesitas para elegir tipos hermosos para tu sitio.
A continuación, cubriremos Diseños CSS, comenzando con Módulos de Visualización, la propiedad Float y el posicionamiento del contenido de la página. El curso Diseños Responsivos te enseñará a usar los principios fundamentales del diseño responsivo como un marco para pensar en el diseño de página para diferentes tipos de pantallas. Luego, dominarás Flexbox, un conjunto de propiedades CSS que te da una forma flexible de diseñar contenido.
La siguiente parte de la Pista nos lleva a través de Bootstrap, un marco de trabajo de front end de código abierto, así como la creación de prototipos en el navegador. A continuación, cubrirás cómo trabajar con Transformaciones y Transiciones CSS para dar vida a tu contenido visual.
Nuestros cursos SVG Basics y SVG and CSS te darán una buena comprensión de la creación de gráficos y animaciones usando estos métodos. Finalmente, para cerrar la Pista, cubriremos cómo usar Sass para potenciar tu flujo de trabajo front end, y usar Diseño de Cuadrícula CSS.
¡Comienza tu viaje de diseño web hoy con esta Pista profunda!
-
Un salario de nivel inicial para las tecnologías cubiertas en esta ruta es aproximadamente $42,000 / año en promedio.
-
Algunas empresas que utilizan estas tecnologías regularmente incluyen: Google, Facebook, Yahoo, eBay, Amazon y Treehouse
¿Listo para comenzar a aprender?
Treehouse ofrece una prueba gratuita de 7 días para estudiantes nuevos. Obtén acceso a miles de horas de contenido. Aprende a programar, consigue el trabajo de tus sueños.
Comienza Tu Prueba Gratuita
-
Curso
- 1
- 2
- 3
Introducción a HTML y CSS
Comienza a crear páginas web con HTML y CSS, los bloques de construcción básicos del desarrollo web. HTML, o HyperText Markup Language, es un conjunto estándar de etiquetas que usarás para indicarle al navegador web cómo está estructurado el contenido de tus páginas web y aplicaciones. Usa CSS, u Hojas de estilo en cascada, para seleccionar etiquetas HTML e indicarle al navegador qué aspecto debe tener tu contenido. Ya sea que estés programando por diversión o planeando comenzar una carrera en desarrollo web, aprender HTML y CSS es un excelente lugar para empezar.
-
Curso
- 1
- 2
- 3
- 4
Conceptos Básicos de HTML
Aprende HTML (HyperText Markup Language), el lenguaje común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web. Si quieres construir un sitio web o una aplicación web, necesitarás saber HTML.
-
Curso
- 1
- 2
Proceso de Diseño Web
Ir de una pantalla en blanco a un sitio web terminado puede ser desalentador. En este curso, aprenderás sobre los pasos principales involucrados en el diseño de sitios web. Aprenderemos cómo recopilar información, explorar conceptos potenciales e iterar en un diseño. Al final, tendrás la base que necesitas para continuar tu viaje de diseño.
-
Curso
- 1
- 2
- 3
- 4
Conceptos Básicos de CSS
En este curso, vamos a aprender los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones. No importa qué tipo de sitio web o aplicación web quieras construir, tendrás que usar CSS.
-
Curso
- 1
- 2
- 3
- 4
Diseño CSS
En este curso, aprenderemos técnicas para tener mejor control sobre nuestros diseños de layouts CSS. Cubriremos cómo el Modelo de Caja CSS impacta la presentación de cada elemento HTML, aprenderemos a controlar la posición de cada elemento en la pantalla, e incluso comenzaremos a ajustar nuestros diseños para diferentes tamaños de pantalla y entornos.
-
Curso
- 1
- 2
- 3
- 4
Mejora del Diseño con CSS
En este curso, vamos a aprender propiedades CSS para mejorar el diseño visual. Cubriremos varias propiedades para estilos de texto, incluyendo la carga de fuentes web desde recursos externos. Aprenderemos técnicas para convertir nuestras cajas CSS en más que solo rectángulos. Y finalmente, aprenderemos algunos efectos visuales realmente geniales usando filtros y degradados CSS.
-
Curso
- 1
- 2
- 3
Selectores CSS
En este curso corto, vamos a ir más allá de los conceptos selectores básicos cubiertos en Conceptos Básicos de CSS. Además de las formas comunes de seleccionar elementos con selectores de tipo, ID y clase, podemos dirigirnos a elementos basados en sus atributos, posición en el documento HTML, incluso su relación con otros elementos.
-
Curso
- 1
- 2
- 3
Formularios HTML
La web es un medio de comunicación bidireccional. Hay muchos elementos HTML para mostrar datos y producir resultados, y a la inversa, también hay muchos elementos HTML para aceptar entrada. Aceptar entrada del usuario significa crear formularios web. En este curso, aprenderemos sobre todos los elementos de formulario más importantes que los profesionales web utilizan diariamente.
-
Curso
- 1
- 2
Tablas HTML
La web está llena de texto e imágenes, pero también está llena de información como puntuaciones deportivas a lo largo de los años, listas de nombres y direcciones de correo electrónico de empleados, o información nutricional de tus alimentos favoritos. Las tablas HTML permiten mostrar información en lo que se conoce comúnmente como datos tabulares, que es información almacenada en una estructura similar a una tabla de columnas y filas. En general, cualquier cosa que podrías poner en una hoja de cálculo podría ir en una tabla. Hay muchos casos de uso para una tabla, por lo que es importante agregarlas a tus habilidades porque es un método muy común para mostrar información.
-
Curso
- 1
- 2
- 3
- 4
- 5
Tipografía para Diseñadores
La tipografía es uno de los aspectos más importantes del buen diseño. En este curso, aprenderás todo lo que necesitas saber sobre la creación de buena tipografía como Diseñador UX: cómo elegir una fuente; qué buscar al distribuir tipos, cómo crear jerarquía tipográfica, distribución de tipos y creación de tipografía responsiva.
-
Curso
- 1
Diseño de Diseño CSS Móvil Primero
En este curso, obtendrás práctica práctica usando técnicas de diseño CSS como un Reinicio CSS con Normalize, un contenedor de diseño, un pie de página adhesivo y contenido centrado con un encabezado de ancho completo.
-
Curso
- 1
- 2
- 3
Diseños Responsivos
El diseño web responsivo es una colección de técnicas para construir sitios web que funcionen en múltiples tamaños de pantalla. En estas lecciones, vamos a usar los principios fundamentales del diseño responsivo como un marco para pensar en el diseño de página. Al final, deberías tener una mejor comprensión de cómo abordar decisiones comunes en el diseño responsivo.
-
Curso
- 1
- 2
- 3
Diseño de Diseño CSS Flexbox
Flexbox es un conjunto de propiedades CSS que te da una forma flexible de diseñar contenido. Con flexbox puedes cambiar la dirección, alineación, tamaño y orden de elementos, independientemente de su tamaño y orden original en HTML. ¡Incluso puedes estirar y encoger elementos y distribuir espacio, todo con solo unas pocas líneas de CSS!
-
Curso
- 1
- 2
- 3
- 4
Conceptos básicos de Bootstrap
Aprende a construir con Bootstrap, uno de los marcos de trabajo front end de código abierto más populares, para ayudarte a construir un diseño y diseño funcional en poco tiempo.
-
Curso
- 1
- 2
Creación de Prototipos en el Navegador
Antes de diseñar un sitio web, es importante tener algún tipo de plan o un wireframe para guiar tus esfuerzos. Pero a veces, cuando pasas de un simple boceto a píxeles digitales, los resultados no son exactamente lo que esperas. Cuando trabajas con HTML y CSS reales, y puedes ver tu sitio en pantallas reales, puedes ver una representación más precisa del resultado final. En este curso, vamos a construir un prototipo de sitio web usando el marco de trabajo web Bootstrap.
-
Curso
- 1
- 2
- 3
- 4
Transiciones y Transformaciones CSS
Las transiciones y transformaciones CSS pueden crear animaciones simples que mejoren las interacciones del usuario en sitios web y aplicaciones. En este curso, construirás una galería de imágenes interactiva usando transiciones y transformaciones CSS.
-
Curso
- 1
- 2
Conceptos Básicos de SVG
Scalable Vector Graphics (SVG) es un lenguaje de marcado XML para crear imágenes bidimensionales usando vectores. Esto es diferente de los formatos de imagen tradicionales basados en raster que usan píxeles, como JPEG y PNG. Cuando se usan en páginas web, las imágenes SVG proporcionan un nivel infinito de detalle, por lo que se ven nítidas independientemente del tamaño de pantalla o la densidad de píxeles. En este curso, veremos situaciones donde los SVG son mejores que los archivos PNG y JPEG, así como cuándo un SVG podría no ser la mejor opción. Finalmente, aprenderemos cómo modificar SVG usando CSS.
-
Curso
- 1
- 2
Animación de SVG con CSS
SVG (Scalable Vector Graphics) también admite interactividad y animación, por lo que puedes animar e interactuar con SVG como lo haces con HTML. Este curso corto cubre los métodos más comunes para animar SVG: transiciones CSS, transformaciones y animaciones de fotogramas clave.
-
Curso
- 1
- 2
- 3
- 4
Conceptos Básicos de Sass
Sass es un lenguaje de hojas de estilo que extiende CSS con características como variables, reglas anidadas, mixins y funciones, en una sintaxis compatible con CSS. En este curso, aprenderás a usar los poderes de Sass para potenciar tu flujo de trabajo front end. Los ejemplos te enseñarán por qué deberías usar Sass en tus proyectos. Al final, estarás escribiendo CSS más eficiente usando código que es fácil de leer y mantener.
-
Curso
- 1
- 2
- 3
Diseño de Cuadrícula CSS
La Maquetación CSS Grid proporciona una forma integrada y más eficiente de diseñar maquetaciones basadas en cuadrículas en el navegador. Trae un nuevo conjunto de propiedades, funciones y unidades flexibles que te permiten controlar la ubicación exacta y el tamaño de los componentes de la cuadrícula.
-
60 minExamen
Examen Final de la Pista de Diseño Web
Pon tus habilidades de Diseño Web a prueba. Este examen final incluye una variedad de tipos de preguntas para evaluar lo que has aprendido. Aprueba para obtener tu certificado.
-
Finalización de la Ruta
Esta ruta incluye:
- Introducción a HTML y CSS 2 horas
- Conceptos Básicos de HTML 3 horas
- Proceso de Diseño Web 43 min
- Conceptos Básicos de CSS 3 horas
- Diseño CSS 2 horas
- Mejora del Diseño con CSS 2 horas
- Selectores CSS 2 horas
- Formularios HTML 2 horas
- Tablas HTML 59 min
- Tipografía para Diseñadores 3 horas
- Diseño de Diseño CSS Móvil Primero 38 min
- Diseños Responsivos 47 min
- Diseño de Diseño CSS Flexbox 105 min
- Conceptos básicos de Bootstrap 2 horas
- Creación de Prototipos en el Navegador 59 min
- Transiciones y Transformaciones CSS 3 horas
- Conceptos Básicos de SVG 46 min
- Animación de SVG con CSS 85 min
- Conceptos Básicos de Sass 4 horas
- Diseño de Cuadrícula CSS 111 min
- Examen Final de la Pista de Diseño Web 60 min