Conceptos básicos de diseño de contenidos - curso 3900 rublos. de Hexlet, formación 18 horas, Fecha: 1 de diciembre de 2023.
Miscelánea / / December 04, 2023
Hoy en día, las hojas de estilo brindan grandes oportunidades para diseñar texto y bloques en una página: fondo, color, uso de audio y video. Todos estos elementos le permiten crear sitios coloridos y accesibles para los usuarios. Se dedicó mucho tiempo a aprender nuevos selectores, pseudoclases y pseudoelementos. Te permiten estilizar el contenido de una manera extraordinaria.
Pruebas
Se trata de tareas prácticas que recomendamos realizar tras finalizar el curso. Las tareas le ayudarán a adquirir experiencia adicional en programación y a consolidar las habilidades adquiridas. Normalmente recomendamos completar de 3 a 5 pruebas. Pero si no funciona, no te desesperes. Vuelve a ellos más tarde.
1. Introducción
Trabajar con contenidos es una parte básica a la hora de crear un proyecto. Hay contenido escondido detrás de hermosas animaciones, bloques e imágenes. El usuario accede al sitio o abre una aplicación. En esta lección veremos brevemente los temas que se estudiarán a lo largo del curso.
teoría
2. Modelo de caja y CSS
¿Qué propiedades CSS afectan el tamaño de los elementos cuando se muestran en la página? Recordemos el concepto del modelo de caja y estudiemos cómo funcionan las propiedades de margen, relleno y borde para establecer el relleno externo/interno y los bordes visibles de un elemento. Conozcamos la propiedad box-sizing, que cambia el comportamiento estándar del modelo de caja.
teoría
3. Estilos de texto
Crear una página es, ante todo, trabajar con texto. Por muy bonito que sea el diseño, si la información es difícil o imposible de leer, el usuario abandonará rápidamente la página. En esta lección nos familiarizaremos con las propiedades básicas del estilo de texto.
teoría
pruebas
ejercicio
4. Fuentes y trabajar con ellas.
¿Has oído la frase “jugar con las fuentes”? Es hora de hacer esto. Aprendemos a conectar fuentes usando CSS, controlar el tamaño del texto, el diseño y establecer el interlineado. Al final de la lección, estudiaremos la propiedad de fuente generalizada, con la que puedes configurar 6 estilos de texto diferentes a la vez.
teoría
pruebas
ejercicio
5. Liza
Las listas son una parte integral del texto. Permiten agrupar fragmentos relacionados, uniéndolos según su significado. En esta lección, exploraremos los tipos de listas disponibles en HTML, practicaremos el anidamiento de listas y abordaremos el tema del estilo de los marcadores de listas.
teoría
pruebas
ejercicio
6. columnas
Crear un diseño de revista de varias columnas fue problemático usando CSS. Con la llegada del estándar CSS3, apareció un nuevo módulo: CSS Multi-column Layout, que hizo posible crear columnas con transferencia automática de contenido. Estudiemos las capacidades del módulo Columnas CSS y las limitaciones que se imponen con este método de estilo de texto.
teoría
pruebas
ejercicio
7. Unidades
Al igual que en el mundo real, el mundo del diseño utiliza unidades de medida para indicar el tamaño de los elementos, el relleno, el tamaño del texto, etc. En esta lección nos familiarizaremos con las unidades de medida básicas y su relación con los elementos del sitio. Estudiemos el concepto de unidades relativas y absolutas e identifiquemos la diferencia entre unidades em y rem.
teoría
pruebas
ejercicio
8. Elementos multimedia
A los visitantes del sitio web no sólo les gusta leer texto, sino que también perciben información a través de elementos multimedia: imágenes, vídeo, audio. ¿Cómo agregarlos correctamente y tener en cuenta las diferencias del navegador? ¿Por qué la imagen del sitio tiene una pequeña sangría en la parte inferior? Exploremos esto y un poco más en la lección.
teoría
pruebas
ejercicio
9. Mesas
Las tablas son la pesadilla de un diseñador de diseño. Se utilizan muchas etiquetas para crearlos y los pequeños errores pueden arruinar el ambiente. En esta lección estudiaremos paso a paso la creación de tablas simples y complejas, entenderemos de dónde pueden surgir los errores y cómo prevenirlos. Al final de la lección, podrá crear tablas con confianza y dejar de tenerles miedo.
teoría
pruebas
ejercicio
10. Formularios
Los formularios son un elemento interactivo importante de una página web. Al igual que los enlaces, los formularios brindan interacción entre el usuario y la página, lo que le permite enviar datos. Aprendamos a crear formularios, agregar campos de texto, campos de selección, listas y botones. Toquemos el tema de la accesibilidad de los formularios para personas con discapacidad.
teoría
pruebas
ejercicio
11. Selectores
Para esta lección, aprendimos y probamos selectores simples que nos permitieron seleccionar elementos por clase, identificador o etiqueta. ¿De qué otra manera puedes seleccionar un elemento en la página? En esta lección analizaremos selectores relacionados y vecinos, aprenderemos a usar selectores por atributo
teoría
pruebas
ejercicio
12. Pseudoclases
Continuaremos con el tema de los selectores en CSS y nos familiarizaremos con el concepto de pseudoclase. Aprendamos cómo usarlos para seleccionar elementos pares o impares, cómo agregar nuevos estilos de desplazamiento mouse sobre un elemento y por qué incluso los elementos serán así cuando se use solo un determinado pseudoclase. Entendamos los estados de los elementos y las pseudoclases estructurales.
teoría
pruebas
ejercicio
13. Pseudoelementos
¿Faltan elementos en la página? Los pseudoelementos vienen al rescate: elementos creados con CSS. En esta lección veremos cómo se crean los pseudoelementos, por qué son necesarios y qué características tienen. Veamos cómo se diseñan los marcadores de lista en CSS.
teoría
pruebas
14. Desbordamiento
El desbordamiento es una situación en la que el contenido dentro de un contenedor es mayor que el tamaño del propio contenedor. Esta situación puede estropear el diseño incluso para un diseñador de diseño experimentado. En esta lección aprenderemos qué hacer con esto y cómo administrar la ocultación de contenido usando la propiedad de desbordamiento. Veamos la propiedad de desbordamiento de texto y aprendamos cómo agregar puntos suspensivos en los textos si no hay suficiente espacio para ello.
teoría
pruebas
ejercicio
15. Variables CSS
Imagina que en una web hay una docena de bloques con un fondo del mismo color. Necesitas cambiar todos estos colores. En esta lección aprenderemos cómo hacer esto sin reemplazar constantemente el color en cada selector y cómo las variables pueden ayudar. Veamos cómo se crean y usan las variables, aprendamos sobre el alcance y por qué las variables globales son mejores que las variables por selector.
teoría
pruebas
16. Fondo
Un diseñador de diseño a menudo se enfrenta a la necesidad de diseñar no sólo elementos específicos, como tablas, listas, texto, elementos multimedia y formularios. A veces también es necesario estilizar los bloques en los que se encuentran. Para hacer esto, puede configurar el fondo para el bloque con contenido, y aprenderemos cómo hacerlo usando la propiedad de fondo en esta lección. Estudiemos las propiedades para configurar el color y la imagen, aprendamos cómo colocar el fondo y establecer su tamaño.
teoría
pruebas
17. Degradados
Un fondo o una imagen de un solo color no es la única forma de darle estilo a un bloque. Los artistas y diseñadores suelen utilizar degradados para crear fondos: transiciones suaves de un color a otro. En este tutorial aprenderemos cómo crear degradados lineales y radiales. Usando degradados y trucos, estudiaremos la creación de transiciones nítidas entre colores y también aprenderemos sobre la rueda de colores y cómo, con su ayuda, encontrar combinaciones de colores para degradados.
teoría
ejercicio
18. Trabajo independiente
Tareas adicionales que te permitan consolidar la teoría adquirida.
19. Materiales adicionales
Artículos y vídeos seleccionados por el equipo de Hexlet. Te ayudará a profundizar en el tema del curso.