Hola a todos bienvenidos de vuelta. Es hora de que empecemos a codificar. Una de las cosas que he notado en el último par de años de enseñanza es que los estudiantes realmente difieren en la forma en que saltan y manejan diferentes tipos de clases de codificación. Algunos se sentarán en la computadora, nunca leerán el libro y simplemente hackear, y hackear, y hackear. Algunos de ustedes pueden ser un poco culpables de hacer todas las lecturas, escuchar todas las conferencias, pero en realidad nunca probar ninguna de las cosas de las que hemos hablado. Así que para eso son estas tareas. Una oportunidad para que finalmente revises y pongas algo de este código y veas qué pasa cuando intentas aplicar estilo a tu HTML. Así que el objetivo de esta tarea es que me muestres que puedes escribir un archivo CSS que puede ir y estilo tres archivos HTML diferentes. Voy a seguir adelante y mostrarles algunos ejemplos de nuestro antes y después para esta tarea. He puesto los enlaces aquí en el lado, pero va a ser mucho más claro cuando te muestre la tarea en acción. Así que vamos a echarle un vistazo. Cuando empecemos, te voy a dar tres archivos HTML que realmente no están bien diseñados. Comienzan, tienen una navegación, tienen tres imágenes muy grandes, algunas son más pequeñas. Y luego tienen el contenido. Las tres páginas que verás, la casa, los equipos y el historial tienen contenido diferente. Lo que quiero que hagas es escribir tus propias reglas CSS que tomarán este tipo de páginas y lo convertirán en algo que se vea así. Sé que esto no es un gran salto, pero así es exactamente como quiero que empieces a codificar. Quiero que hagas pequeños cambios incrementales que puedan llevarte de algo que es difícil de leer a algo que es mucho más fácil de leer. Así que sigamos adelante y pasemos a través de las diferentes cosas que necesitarás cambiar para lograr este aspecto separado. Lo más importante a entender es que debe dejar el HTML solo. No quiero que lo cambies en absoluto, sino que solo quiero que peines las cosas y edites cosas dentro de la hoja de estilos. Y las cosas que vas a necesitar agregar son estilos para el encabezado, los encabezados, la sección, los enlaces y las imágenes. Así que, déjame pasar y mostrarte exactamente lo que necesitas mirar. Para tu cabecera, es bastante sencillo. Quiero que entres y quiero que añadas un color de fondo. Para sus encabezados, tanto h1 como h2, quiero que cambie el color de la fuente. Ahora recuerde, esto es diferente del color de fondo. Es el color en el que aparece el texto. A continuación, quiero que se asegure de que todos los encabezados se muestren en mayúsculas. Así que, si vuelves, echaremos un vistazo rápido. Puedes ver que ver tu cabeza y el frisbee definitivo están en mayúsculas, mientras que en la versión HTML original, están en minúsculas. Así que quiero que uses CSS para hacer ese cambio. Lo siguiente que quiero que hagas es solo para el encabezado h1 quiero que centres el texto. A continuación, haga un cambio rápido en la parte de la sección de su HTML. Quiero que peines la sección diferente para que tenga un color de fondo diferente del resto de elementos de tu página. A continuación, echemos un vistazo a los enlaces. Los cambios que vas a hacer aquí son muy sutiles. No son muy obvios si no te dije específicamente lo que estás buscando. Y lo que quiero que hagas es que cambies el color de fondo, y el color de la fuente, para tus enlaces. Después de que haya hecho eso, vaya y centre el texto, similar a la forma en que va al centro los textos para los encabezados h1. Por último, lo último que realmente un poco estropea nuestra página HTML ejemplo inicial es estas enormes imágenes que sólo se interponen en el camino. Así que por ahora, ya que no hemos hablado de la mejor manera de darle estilo a las imágenes, quiero que las elimines de la página. Pero recuerde, esta podría ser la parte más complicada de toda la asignación porque no quiero que cambies el html. Quiero que esas fotos estén ahí. Solo quiero que uses CSS3 para eliminarlos de la página. Así que espero entre mirar a través de este ejemplo y mirar en línea, y mirar mis fotos de antes y después, que usted será capaz de hacer esta tarea. Cuando termines, vamos a usar la calificación de pares. Cuando hagamos esto, las calificaciones se basarán básicamente en lo bien que pudieras terminar lo que estábamos haciendo. Cuando hablo de estética, estoy hablando de ¿elegiste colores de fondo bonitos y colores de fuente. Realmente no nos importa esto. Esta es nuestra primera tarea. Sólo quiero que sientas el éxito. Sin embargo, sí se aplican normas adecuadas. Y lo que quiero decir con eso es que no uses nombres de color, uses hexadecimales o RGB, y no pongas todas tus reglas en una sola línea. Asegúrese de que su hoja de estilos CSS sea fácil de leer. Aparte de los estilos que he enumerado, por favor, no cambie otras cosas por ahora. Hace que sea mucho más difícil de calificar. Pero no te preocupes. A medida que avancemos en este curso, tendrás la oportunidad de poner tus propios looks únicos como elementos de estilo. Por ahora todo lo que puedo decir es buena suerte y asegúrate de ir a los foros de discusión si tienes alguna pregunta.