Hola a todos. Bienvenidos de nuevo, es hora de otro ejemplo de tarea. Lo que vamos a hacer esta semana es agregar aún más estilo a las páginas que empezaste a diseñar la semana pasada. Entonces, una vez más, el objetivo de esta asignación es que no quiero que cambies el html en absoluto. Quiero que cree una nueva hoja de estilo o actualice la hoja de estilo de la semana pasada para que pueda usarse en tres archivos html diferentes. Cuando empiece, es muy importante que haya completado la primera asignación calificada por pares. Voy a asumir que lo has hecho y así cuando hablo en este video sobre los diferentes cambios que quiero que hagas. Puede alterar esa tarea anterior, o realmente puede comenzar completamente desde cero si no estaba contento con su trabajo anterior. Así que echemos un vistazo al antes y después de esta tarea que quiero que trates de lograr. Esta era nuestra página cuando empezamos. En la tarea uno, la llevaste de aquí a aquí. Todavía muy simple, pero mucho más limpio porque agregamos un poco de color de fondo, algunas fuentes de color, y nos deshicimos de esas imágenes. En lo que quiero que trabajes esta semana es realmente cambiar las cosas y hacerlo realmente elegante en lugar de simplemente limpio. Así que echemos un vistazo a lo que me gustaría que trabajaras en la tercera semana. Como puede ver, esto parece un sitio completamente diferente. Las imágenes están de vuelta, he agregado una imagen de fondo para una barra de navegación y algo que no es necesariamente fácil de ver cuando solo estás mirando papel, he agregado una nueva clase que resalta en qué página estamos ahora. Así que si nos fijamos, el enlace de inicio está resaltado porque estamos en la página de inicio. Si hago clic en el historial, el enlace de historial es como eso porque estamos en la página de historial y luego de la misma manera, la página del equipo. Así que esto es lo que llamamos la página actual que estamos viendo. Y así que vas a estar diseñando esto para que tus espectadores sepan dónde están en esta página. Así que voy a seguir adelante y hablar de cada una de las etiquetas que quiero que mires para completar esta tarea. Así que cuando empieces, vas a dejar ese código HTML solo, y vas a crear una nueva hoja de estilo, o vas a seguir adelante y actualizar la que usaste antes. En lo que vas a necesitar trabajar específicamente son estos elementos. Necesitas trabajar en el cuerpo, el encabezado, el h, los enlaces, y luego tengo tres clases llamadas activas, izquierda y derecha, y finalmente, vas a querer volver a poner esas imágenes en que estaban en el lado izquierdo de la página. Así que primero, hablemos del cuerpo. De forma predeterminada, sus navegadores ponen algún tipo de relleno y margen, pero quiero que sobrescriba eso y ponga algo que se vea consistente en todos los navegadores. También puedes ajustar el tamaño del texto, pero eso no es necesario. Sé que lo hice porque acabo de encontrar el texto un poco pequeño. A continuación, vaya al encabezado. El primer paso es cambiar el color de fondo y ver si puedes hacer que funcione. A continuación, va a querer agregar una imagen de fondo. Y para ser honesto, esta será la parte más complicada de toda la tarea. Porque a veces no siempre está claro dónde puedes encontrar las imágenes y dónde no puedes, así que asegúrate de registrar algunos de los otros recursos si te quedas atascado en esta parte. A continuación, quiero que cambie el color de la fuente y aumente ese tamaño un poco más. Ahora aquí de nuevo hay algo nuevo que no aprendiste antes. Quiero que le des estilo a los enlaces que están en la sección de navegación, pero solo a esos enlaces. No todos los enlaces de la página. No necesita recrear mi ejemplo exactamente, pero quiero que sus enlaces estén bien separados, deberían tener algún color de fondo, bordes redondeados y sin subrayado. Haz que se vean bien. A continuación, asegúrate de ver esa clase activa de la que hablé. Así es como las personas podrán saber qué página están viendo sin tener que mirar la URL. Ahora otra cosa en la que vas a necesitar trabajar es esta idea de que nuestra página tiene una clase izquierda y una derecha a ella. Ahora, con el fin de hacer que las cosas vayan una al lado de la otra, tendrá que meterse con la pantalla y posiblemente flotar dependiendo de cómo implemente esto. Así que asegúrese de cambiarlos para que estén uno al lado del otro, y cambie ese color de fondo para la clase izquierda. Puede que ya hayas hecho eso en la tarea anterior, pero si no te aseguras de que se haga ahora. Por último, queremos volver a esas imágenes. Primero, debes volver a poner las imágenes porque, con suerte en la tarea uno, configuras su pantalla en ninguna, lo que significa que se han ido. Así que póngalos de nuevo en algo para que se apilen uno encima del otro. A continuación, asegúrese de que estén centrados dentro de esa clase izquierda. No quiero que las fotos estén a un lado o al otro. Y, mientras los centras, asegúrate de poner un poco de espacio entre ellos, en la parte superior e inferior, también. Una vez más, usaremos el nivelador de pares para evaluar tu trabajo. A diferencia de antes, las calificaciones se basarán en el nivel de finalización, y algo más de cómo se ve tu página. Queremos asegurarnos de que no estás poniendo cosas que son difíciles de leer o que realmente están juntas. Por lo tanto, si tiene la oportunidad, asegúrese de ejecutar su página a través de algunos evaluadores de accesibilidad diferentes. Así que hubo olas y correas. Hay diferentes lugares a los que puedes ir. Pero esta es la parte realmente agradable de la clasificación por pares, sus compañeros pueden decirle si las cosas realmente no tienen el mejor contraste de color. Ahora, de nuevo, se van a aplicar normas adecuadas. Y esto es particularmente importante cuando empezamos a hablar de selectores avanzados. Descubrí que a veces la gente arroja todo lo que pueda pensar en su hoja de estilo, y solo esperan, esperan, esperan que funcione. Vamos a quitar puntos si intentas hacer eso. Ahora lo último que quiero mencionar es que sé que la gente está codificando en diferentes dispositivos. Así que cuando envíe su código, asegúrese de sentirse libre de decir que mi código solo se ve realmente bien en una pantalla grande, o en un teléfono, o algo así. Cuidar diferentes tamaños de pantalla es algo llamado diseño receptivo que no manejamos en este curso en particular. Así que no espero que hagas un sitio que se vea genial en todas las plataformas. Lo que sí espero que hagas es realmente dueño del código que envíes esta vez. Asegúrese de saber exactamente lo que cada línea está haciendo y sentirse cómodo cambiando pequeñas partes y sentir que su página no se romperá. De nuevo, si tiene problemas, asegúrese de golpear esos paneles de discusión. Tienes compañeros de clase han sido muy útiles, y realmente quiero alentar esa comunicación. Buena suerte.