Las hojas de estilo en cascada (CSS) añaden color, estilo y animación a las páginas web, al tiempo que permiten a los diseñadores mantener el formato…
Las hojas de estilo en cascada (CSS) añaden color, estilo y animación a las páginas web, al tiempo que permiten a los diseñadores mantener el formato separado del contenido.
Este curso intermedio se basa en los fundamentos de CSS y le enseña cómo dar vida a sus sitios web. Dado que los dispositivos móviles ahora representan aproximadamente la mitad de todo el tráfico web, es crucial que los diseñadores web sepan cómo crear páginas web receptivas que se ajusten automáticamente al tamaño del dispositivo del usuario. En este curso, aprenderá a crear menús utilizando encabezados CSS y barras de navegación. También exploraremos apartados, ventanas de contenido y pies de página. El resto del curso se centrará en técnicas de diseño receptivo, incluida la ventana gráfica, la vista de cuadrícula, los contenedores, estilo de las formas y las galerías de imágenes. Al final de este curso, podrá crear hermosas páginas web que se presenten perfectamente en todos los dispositivos.
Objetivos de aprendizaje:
- Artículos de estilo y apartados
- Crear páginas usando la vista de cuadrícula
- Explorar barras de navegación únicas
- Usar fotogramas clave para controlar la animación
- Crear formularios memorables
- Usar consultas de medios
Habilidades que obtendrás
Hojas de estilo en cascada (CSS)Códigos CSSMarco de trabajo CSSHojas de estilo de JavaScriptCSS Orientado a ObjetosHojas de estilo en cascada Sassy (SCSS)Lo que aprenderás
- Estilizar artículos y asides para estructurar contenido de página
- Construir diseños de página responsivos usando CSS Grid View
- Crear barras de navegación únicas, menús, encabezados y pies de página
- Controlar animación usando keyframes
- Diseñar formularios memorables y estilizados
- Aplicar media queries y configuraciones de viewport para diseño responsivo en dispositivos
Puntos clave
- CSS añade color, estilo y animación a páginas web mientras mantiene el formato separado del contenido.
- Este curso intermedio se basa en los conceptos fundamentales de CSS para dar vida a sitios web.
- Debido a que los dispositivos móviles representan aproximadamente la mitad de todo el tráfico web, los diseñadores web necesitan crear páginas responsivas que se ajusten al tamaño de dispositivo del usuario.
- El curso cubre elementos de diseño de página incluyendo menús, barras de navegación, asides, ventanas de contenido y pies de página.
- Los temas de diseño responsivo incluyen viewport, grid view, contenedores, estilos de formularios y galerías de imágenes para que las páginas se presenten bien en todos los dispositivos.
Preguntas frecuentes
¿Para quién es este curso?
Es un curso intermedio para diseñadores web que ya conocen los conceptos fundamentales de CSS y quieren aprender cómo dar vida a sus sitios web y hacerlos responsivos en dispositivos.
¿Qué seré capaz de hacer después de completar este curso?
Al final del curso, serás capaz de crear páginas web hermosas que se presenten perfectamente en todos los dispositivos, incluyendo estilizar artículos y asides, construir diseños de grid, crear barras de navegación y formularios, y controlar animación con keyframes.
¿Qué técnicas de diseño responsivo cubre el curso?
Cubre técnicas de diseño responsivo incluyendo viewport, grid view, contenedores, estilos de formularios, galerías de imágenes y media queries.
¿Qué conocimiento previo necesito?
El curso se basa en los conceptos fundamentales de CSS, por lo que está destinado a estudiantes que ya comprenden los conceptos básicos de CSS.
¿Qué temas se enseñan en las lecciones?
Las lecciones cubren una introducción, diseño de página, diseño responsivo, diseño de grid, menús, animación, formularios y galerías de imágenes, terminando con una conclusión.
Transcripción
Transcripción
(música optimista) Bienvenido a KnowledgeCity, y nuestro curso sobre hojas de estilo en cascada. Mi nombre es Cliff Brozo, y este es un curso de nivel intermedio. Lo que significa que vamos a esperar que sepas solo un poco sobre CSS. Si no estas seguro quizás quieras visitar nuestro curso para principiantes, y repasar las cosas que quizás no recuerdes. En nuestro curso intermedio, vamos a hablar sobre el diseño del sitio web, utilizando hojas de estilo en cascada. Hablaremos sobre dónde se supone que deben ir los encabezados. ¿Cómo debemos diseñar nuestras barras de navegación? ¿Qué es un aparte y qué entra allí? Seguramente sabemos lo que pasa en la ventana de contenido. Su contenido, pero ¿qué tipo de contenido? ¿Y qué deberíamos poner en un pie de página? y ¿cómo debería verse? Gran parte de nuestro curso va a discutir técnicas de diseño receptivo. Queremos crear nuestros sitios web para que, no importa qué dispositivo use el usuario, cabrá en su pantalla. Vamos a tener que discutir qué es la ventana gráfica y cómo analizamos qué usuario está usando qué dispositivo. Hablaremos de la vista de cuadrícula y cómo usar CSS para diseñar nuestras páginas. Y hablaremos de contenedores. Esas son las cosas en las que ponemos las cosas. Cuando hablamos del diseño de la cuadrícula, convertiremos un código complicado, y lo convertiremos en algo que tenga sentido. Te daremos una visual crear menús desplegables, para la navegación, se vuelve fácil y se ve muy bien cuando lo diseñamos en CSS. Hablaremos de formas de estilismo, haz que se vean atractivos para que la gente quiera completarlos. Facilíteles la tarea de completar el formulario. Hablar de diferentes barras de progreso. y cómo podemos usar un control deslizante para permitir que el usuario sepa, lo lejos que han llegado. Finalmente, discutiremos una galería de imágenes, y cómo podemos mostrar nuestras fotografías, en un formato atractivo. Si el usuario está mirando nuestro sitio web en una computadora de escritorio, pueden ver algo parecido a esto, dividido en cuatro columnas diferentes. Pero si tienen una tableta, no es tan ancha. Entonces pueden obtener algo como esto. Y si tienen su teléfono, pueden obtener algo como esto. Todo eso se hace con CSS, y sin cambios en el sitio web. Entonces, Espero que me acompañes en este viaje, y no solo aprenderemos cómo funcionan las cosas, pero por qué funcionan. Te veo en la próxima lección.
Aprende sobre la marcha
Lleva tu aprendizaje a todas partes: la app de KnowledgeCity te permite ver las lecciones sobre la marcha.