Codificación manual de tu primer sitio web: fundamentos de HTML y CSS (original)

1. Introducción: Oye. Hola. Mi nombre es Rich Armstrong y llevo 10 años diseñando y construyendo sitios web. Esta clase se trata de aprender a hacer tu propio sitio web desde cero. Te voy a enseñar a escribir tu propio HTML y a escribir tu propio css. La capacidad de escribir tu propio HTML y CSS abre un mundo de posibilidades. Es divertido, es empoderador, y se llega a prácticamente, hacer su propia pieza de Internet. Entonces para el final de la clase, habrás hecho tus primeros sitios web de una página hecha, tendrás un entendimiento básico de HTML y CSS, tus amigos van a estar celosos, tu mami va a estar orgullosa de ti, y podrás compartir tu creación en Internet, lo cual es bastante guay y podrás entender esto, que puede ser aún más fresco. Entonces espero que estés emocionado porque estoy emocionado de enseñarte. 2. ¡Esta clase ha sido actualizada!: Oye, estoy súper emocionado de que hayas decidido tomar esta clase. Una tonelada de estudiantes lo han tomado y tienen excelentes críticas, crearon proyectos impresionantes, y hicieron un montón de preguntas. Pero hice esta clase en 2015, lo que significa que un montón de cosas ha cambiado, funciona de manera diferente a cómo lo hace en esta clase. Creé una nueva versión de la clase, cual está más actualizada y tiene mejor calidad de audio y video. Se puede llevar viendo esta clase. Ese contenido sigue siendo súper impresionante. Pero, recomiendo encarecidamente echar un vistazo al nuevo. Aprender a codificar a mano tu propio sitio web abrirá puertas, te guiará por nuevas trayectorias profesionales y te empoderará para compartir lo que quieras con el mundo. Visita este enlace para echar un vistazo a la nueva clase. 3. ¿Qué vamos a crear, aprender o hacer?: ¿ Qué vamos a hacer? ¿Qué vamos a hacer? Vamos a hacer un sitio web de una página para tu héroe animado o de dibujos animados favorito. Entonces el mío es Wreck-It Ralph, y aquí hay tres sitios web de estilo diferente que te llevé y te muestro cómo hago. Te enseño a usar Sublime Text. Te enseño a usar Google Chrome. Te enseño a usar GitHub y a compartir tus sitios web y tus creaciones web. Empezamos realmente pequeño y fácil, y nos levantamos y te enseño cómo usar HTML o cómo escribir HTML, sobre cómo escribir CSS y cómo vincularlos. Todo está narrado visualmente y proporciono metáforas simples de cómo funcionan las cosas. Entonces únete a mí y aprenderás a construir los sitios web de tus personajes. 4. Descargar estas tres aplicaciones gratuitas: Para que la construcción de sitios web sea divertida y fácil, necesitamos tres cosas. Abre tu navegador y busca algo llamado Sublime Text 3. Sublime Text 3 es un editor de código. Descarga el para tu sistema operativo. Hará que escribir HTML y CSS sea una brisa. Lo siguiente que necesitamos es Google Chrome, así que busca eso. Google Chrome es, como, Internet Explorer o Safari, pero tiene algunas herramientas realmente geniales para las personas que construyen sitios web. Te mostraré exactamente cómo usarlo. Descárgalo y estarás bien en tu camino a entender cómo funcionan y se ven tus sitios web. Lo siguiente que necesitamos es GitHub Desktop. Lo que GitHub Desktop nos permite hacer o lo que GitHub nos permite hacer, es que nos permite almacenar código y rastrear nuestros cambios a ese código. Para qué lo estaremos usando es subir y almacenar y hospedar nuestros sitios web y como herramienta para compartirlo con otros. Vamos a descargar esa. Con estas tres aplicaciones, podemos casi conquistar el mundo, no todo el mundo, sino el mundo HTML y CSS. Van a ser muy útiles y va a ser divertido y aprenderás mucho. Voy a saltar adelante a cuando se descarguen todas las apps y te enseñaré cómo configurarlas. Ver esto ahora. 5. Instalar las aplicaciones: Por fin se descargan mis aplicaciones. Ahora, todo lo que hacemos es abrir la carpeta Descargas y empezar a instalar a estos chicos malos. El primero es el Texto Sublime. Abramos ese DMG si estás en un Mac, en Windows, hacéis lo tuyo. Si realmente te atascas, dame un tiro. Acabamos de entrar en la carpeta Aplicaciones. Si ya tienes copia, reemplácela como yo. Fantástico. El siguiente es Google Chrome. Hagamos doble clic en eso, mismo tipo de cosas. Arrástralos a la carpeta Aplicaciones, esta es un poco más grande, podría tardar un poco más. De nuevo, si ya tienes copia, reemplácela como yo. El siguiente es GitHub Desktop. Simplemente vamos a arrastrar eso directamente a nuestra carpeta Aplicaciones. Están las tres cosas que necesitas instalar. 6. Hacer y compartir tu primera página web: Hemos descargado esas tres apps. Ahora, hagamos un sitio web. Vamos a ir a nuestra carpeta Aplicaciones y vamos a buscar nuestra app GitHub. Yo sólo voy a escribir G-I, que me llevará a la aplicación GitHub Desktop. Abramos eso, y se te pedirá contraseñas o autenticación. Te llevarán a través de un montón de pantallas de interés, y eventualmente llegarás a algo como esto, que te pedirá tu nombre de usuario y contraseña, que probablemente no tendrás, así que vamos a conseguir uno de github.com. Abre este enlace. Tendrás que elegir un nombre de usuario, poner tu correo electrónico y crear una contraseña, y luego registrarte. Si ya tienes una cuenta como yo, puedes iniciar sesión. Mi nombre de usuario es mrra-screencast, y mi contraseña es un secreto. Una vez que hayas iniciado sesión o te hayas inscrito, llegarás a una pantalla que se ve así. Aunque muy importante es verificar tu cuenta de GitHub en tu Gmail o en tu app de correo, donde sea. Sin verificarlo, en realidad no se pueden alojar páginas correctamente. Esto crea un nuevo repositorio, que es como crear un nuevo proyecto. Vamos a llamarlo caricatura-héroe o gero. Preferiría héroe. La descripción, mi primer sitio web o digamos un sitio web sobre mi caricatura-héroe. Hagámoslo público para que la gente pueda verlo, para que la gente pueda copiar el código si así lo quiere. Vamos a inicializarlo con un README, ahí pero pegajoso sobre esto, así que prefiero incluirlo, y crear tu repositorio. Lo que tenemos que hacer en primer lugar, sé que es realmente abrumador ver toda esta información, todos estos enlaces, es solo hacer clic en este desplegable y escribir gh-pages y crear una nueva rama llamada gh-pages. O presione “Enter” o presione ese enlace allí. Esto crea una nueva página, y esta es una rama especial donde realmente podemos albergar nuestro sitio web. Ese es el Paso 1. paso 2 va a la aplicación GitHub Desktop y vuelve a iniciar sesión. Recuerda tu nombre de usuario. Viene muy bien en este momento. Inicia sesión, y de aquí en adelante, estarás conectado como ese usuario hasta que vuelvas a cerrar sesión. Cerremos esta ventana. Lo que tenemos que hacer ahora es que necesitamos básicamente obtener ese proyecto de GitHub. Ahí está. Voy a clonarlo a mi computadora local. Voy a seleccionar el escritorio como mi directorio de proyectos, y voila. A continuación, selecciona caricatura-héroe, y asegúrate de que estás trabajando en una rama gh-pages. Esto es muy importante. Vamos a estar creando un sitio web así que queremos que sea una página de GitHub. Esa es la primera parte de la historia de GitHub hecha. Lo que tenemos que hacer a continuación es buscar Texto Sublime. En tu carpeta Aplicaciones, solo voy a buscar o escribir S-U para que aparezca Sublime. Abramos esto, y luego solo sigamos por ahora. Escriba h1 Mi primer sitio web, y h1 de nuevo. Te darás cuenta de que estoy envolviendo un h1 con un signo más pequeño que y otro mayor que, y lo estoy cerrando con un más pequeño que, una barra, y un signo mayor que. No se ve demasiado notable. Pero verás que en cuanto lo guarde en mi carpeta como archivo HTML, solo lo voy a guardar como test.html. Verás este color. En realidad comienza a codificar el color de mi archivo. Lo que también hace es que empieza a darme sugerencias sobre qué escribir, y también completa un montón de código para mí. Si presiono “Enter” ahora, verás que hace bastante trabajo para mí, y no tengo que recordar a todos esos divertidos personajes. Aquí dentro, voy a decir Mi color fav es rojo. Fantástico. Guardemos esto. Lo siguiente que podemos hacer es buscar Google Chrome. Voy a escribir G-O en mi carpeta Aplicaciones y abrir Google Chrome. Me va a preguntar si quiero configurarlo como mi navegador predeterminado. Voy a decir que sí, por favor. Mac va a ser un poco cauteloso, y voy a decir que sí, usa Google Chrome. Después tenemos instalado Google Chrome, Sublime Text y GitHub Desktop y los estamos usando. Yo sólo los voy a arrastrar ligeramente hacia la izquierda que los mantenga en mi barra en la parte inferior, incluso cuando estén cerrados. En mi ventana de Finder, voy a ir al escritorio, abrir mi carpeta de caricatura-héroe y arrastrar mi archivo test.html a Google Chrome, y ahí está mi primer sitio web. Ahora quiero compartirlo con el resto del mundo. Voy a GitHub Desktop. Veo que hay un cambio no comprometido, test.html. Esto significa que se da cuenta de que hay un cambio. Ahora quiero decir que sí, comete este cambio, porque en realidad he terminado de trabajar en este pedacito, y voy a decir, creé mi primer archivo de prueba. Puedes dar una descripción si quieres. Tu resumen y descripción son realmente útiles cuando estás trabajando a través de muchos cambios y estás trabajando con equipos para que puedas decir, esto es exactamente lo que he cambiado y por eso lo he cambiado. Después te comprometes a gh-pages, que lo compromete a tus proyectos locales en tu computadora. Ahora, para ponerlo en línea, en realidad quieres sincronizarlo. Ahora bien, esto es realmente útil. Significa que puedes mantener un montón de cambios en tu computadora, y luego cuando termines, puedes enviarlo todo hasta GitHub en línea. Ahí vamos. A lo siguiente que tenemos que ir es a Chrome, crear una nueva pestaña, y ahora recuerda, tu nombre de usuario de GitHub. El mío era mrra-screencast, y ahora, necesitas go.github.io/ tu nombre de proyecto, así que cartoon-hero/test.html. Presiona “Enter”. Hay un error. Tengamos una lectura. No contiene el archivo seleccionado. Eso es porque lo escribía mal. En realidad deletreemos bien, test.html. Ahí vamos. Puedes compartir esta URL con cualquiera. Pero ahora, en realidad quiero que mi rojo sea rojo. Ahora, aquí es donde se pone realmente poderoso. Vuelve a Sublime Text, y vamos a escribir span, no spam, y ya ves cómo también completó ahí de nuevo. Fantástico. Vamos a dar a esto elementos y atributos. Ahí vamos. Yo lo voy a guardar. Ahora, en Chrome, verás eso. Voy a volver a nuestra local, que verás que hay un archivo, y verás que el online es nuestro nombre de usuario. Voy a refrescar este, y verás que mi color favorito es el rojo acaba de aparecer. Ahora, ¿cómo volvemos a poner eso en línea? Ve a GitHub Desktop y verás que se recogió algunos cambios. Ya verás que hay un montón de textura roja y un montón de verde. Está diciendo que el rojo va y el verde está llegando. Fantástico. Asegúrate de que te estás comprometiendo con gh-pages, y luego vamos a decir, pon un lapso en. Mi rojo ahora es rojo. Eres bienvenido a cambiar tu archivo de prueba como más te convenga. Experimenta, diviértete. Pon lo que quieras. Entonces digo comprometerse con gh-pages. Hago una sincronización rápida para asegurarme de que esté subiendo a github.com. Una vez que esto haya terminado de sincronizarse, esperaré un poco más antes de que GitHub consiga su acto juntos. Después iré a la segunda pestaña y refrescaré. Si no aparece nada, puede que tarde un poco más para que las cosas realmente sucedan. Hago otra actualización, y otra. A lo mejor no sucede súper rápido, pero eventualmente se va a poner rojo. Si realmente no pasa nada, ve a Safari y ve a tu página de commit, que verás que algo ha pasado, pon un lapso en. En realidad ha pasado. Vuelve a Google Chrome y ahora refresca, y verás que dice, mi color favorito es el rojo. A veces las cosas tardan un tiempo. A veces solo necesitas esperar un poco. Ahí vamos. Tu primera página web. 7. Teoría del modelo de caja HTML (fácil, lo prometo): De acuerdo, ¿qué es HTML? Bueno básicamente, el HTML es un lenguaje que los humanos escriben y los navegadores pueden entender, es el lenguaje para mostrar información. Pero, ¿qué es? No lo entiendo. Sí, muy buena pregunta. HTML es en realidad un montón de cajas, cajas dentro de cajas, dentro de cajas, dentro de cajas. El cuadro principal es en realidad tu navegador. Dentro de cualquier caja dada, puedes tener otra caja HTML o puedes tener texto, o no puedes tener nada. Por lo que realmente hay tres opciones para cada caja individual. Algunas cajas son invisibles y cada caja tiene un propósito diferente, y cada caja se muestra de manera diferente por defecto, por el navegador, es bastante potente. Por lo que por defecto la mayoría de las cajas son sólo tan altas como su contenido, otras cajas son tan altas y tan amplias como su contenido. la mayoría de las cajas les gusta sentarse lo más lejos posible a la izquierda y lo más lejos posible a la parte superior. Entonces, ¿qué es una caja HTML? Enfriar analogía, metáfora genial, pero no entendemos. Déjame explicártelo. Cada caja HTML o la mayoría de ellos, tiene una etiqueta de apertura y tiene una etiqueta de cierre y tiene contenido. Recuerda, el contenido puede ser texto, en blanco o nada, o puede tener otros elementos HTML dentro del mismo. Una etiqueta de apertura tiene menor o menor que el símbolo. Tiene el nombre de la etiqueta, y luego tiene un símbolo mayor que, esa es tu etiqueta de apertura. El tag de cierre tiene un símbolo menor que y tiene una barras inclinadas hacia adelante, el nombre de la etiqueta, y luego un símbolo mayor que, esa es la etiqueta de cierre. Ahora todo el elemento HTML tiene una etiqueta de apertura, el contenido y la etiqueta de cierre. Lo que realmente es genial de los elementos HTML es que pueden tener estos pequeños bits y piezas secretos llamados atributos que el navegador puede entender. Entonces al igual que por ejemplo, una etiqueta de enlace o etiqueta de anclaje, que es un nombre de etiqueta de a, tiene diferentes atributos. Uno puede ser un href, la URL a la que desea que vaya el enlace. También puedes tener cómo debo abrir el enlace como objetivos. También puedes tener un atributo title, que le dice al navegador cuando el usuario pasa por encima de esto por un pequeño periodo de tiempo, ¿qué debemos mostrar? Por lo que esos son algunos atributos básicos que puedes agregar a la etiqueta de enlace. Esa es la teoría HTML para ti. 8. Comienza a escribir tu propio HTML: Suficiente teoría. Hagamos algunas cosas. Arrastra aquí la caricatura en Sublime Text y empecemos a escribir algo de HTML. Otra teoría, sólo voy a seguirla. Hasta que lo guardemos como un archivo HTML, no vas a conseguir ninguna finalización de código genial. Guárdalo en tu carpeta de héroes de dibujos animados como elements.html. Ahí vamos. Ahora dices que hay algo de color de código. También hay terminación de código h2. Epígrafe 2. Hagamos un párrafo. Este es mi primer párrafo. Tenemos algunos elementos, hay un predeterminado listo y uno básico llamado etiqueta div. Esta es tu caja básica y es la más común para poner más cajas dentro de. En realidad podemos simplemente seguir poniendo cajas dentro de cajas dentro de cajas. Eventualmente necesitas poner algo dentro de algo. Voy a poner una etiqueta aquí. Ahora una etiqueta es un enlace o un ancla. Viene con un atributo especial llamado href, y dentro de ese href, especificas url. Se le dice al navegador, si el usuario hace clic en esto, ¿a dónde debemos ir? Pones algo dentro ahí. Vamos a poner http.skillshare.com. El contenido del mismo debe ser, visite el sitio web de skill share. Fantástico. Vamos a ahorrar. Ahora, haga clic con el botón derecho en elementos de HTML reveal y finder, y luego arrástrelo a Google Chrome. Entonces tenemos algo, se ve lo diferente que es la h1 de la h2. Epígrafe 1, rúbrica 2. Es muy diferente a tu párrafo y es muy diferente a tu enlace el cual está subrayado y es morado porque lo visitamos antes. Si hago clic en este, oye, me va a llevar a algún lado. Para hábillshare sitio web. Eso es genial. Volver a sublime, ahora puedo cambiar o darle a la una etiqueta o a los elementos un atributo extra llamado objetivo, lo que me permitiría establecer su valor para subrayar en blanco. Guárdalo. Lo que esto hará, es que en realidad se abrirá en una nueva pestaña, lo cual es bastante genial. Significa que solo puedes seguir abriendo nuevas pestañas y nuevas pestañas y nuevas pestañas y eventualmente llegar a tantas que ni siquiera sabes cuál es cada una de ellas. Digrego. Volvamos a Sublime Text, y te mostraré algunos otros elementos más y sus atributos. Si creamos una nueva etiqueta de párrafo, podemos decir, “Hey There”. Pero si quiero decir “Hey ahi, mi nombre es:” Ahora quiero realmente poner eso en una nueva línea. Puedo usar una etiqueta br, que es un descanso. Ahora puedes pulsar “Enter”. No tenemos que hacerlo. Pero no voy a hacerlo. Mi nombre es Richard. Guardemos esto. Archivo, guardar. Desde aquí, lo puedes ver. En realidad hay un salto de línea. Esa es una de las etiquetas especiales. No tiene etiqueta de cierre. El siguiente que me gustaría mostrarles son los elementos de imagen. La etiqueta de imagen tampoco tiene etiqueta de cierre. Otro especial, otro rompereglas. Si escribimos test.jpg y guardamos, vuelve a Chrome, refresca. Ya verás que se le ocurre un enlace de imagen rota. Ahora lo que quiero hacer es encontrar una imagen. Señor R.A. Voy a buscar esto. El señor R.A, Richard Armstrong. Voy a buscar algunas imágenes. Ahí hay una buena. Ahora, voy a hacer clic derecho y voy a guardar imagen como test.jpg. Fantástico. Ahora cuando me refresque, saldrá mi imagen. Ahora con una imagen, es realmente genial porque significa que también se puede especificar una diferente. Si hago clic en este y hago clic derecho y especifico, bueno, copio la URL de la imagen. Significa que en realidad no tengo que descargar eso. Significa que solo puedo copiar y pegar eso dentro de mi fuente. Cuando test.jpg es una URL relativa, es decir ¿dónde puedo encontrar eso localmente? También puedes pegar en una URL absoluta, que comienza con HTTP o HTTPS://. Ahora voy a guardar esto y volver a mi navegador, volver a elements.html, y actualizar. Ya verás que ahora tengo una nueva imagen. El último que tenemos que hacer para todas las páginas HTML es que necesitamos envolverlo en un elemento HTML. ¿ Ves todo eso? Eso fue bastante intenso. Sólo voy a editar, deshacer, y lo voy a hacer todo por mi cuenta. Vamos HTML. Escribamos la etiqueta HTML de cierre y luego la cortemos y la pongamos en la parte inferior. Lo que necesitamos entonces es que necesitamos una etiqueta de cabeza y necesitamos una etiqueta de cuerpo. Ves lo que pasa cuando cierras las cosas automáticamente. Etiqueta de cuerpo. Voy a cortar esa etiqueta corporal y la voy a poner justo debajo del último elemento. Lo que HTML recomienda es que pongas todos tus elementos invisibles dentro de tu etiqueta de cabeza. Te mostraré un ejemplo de cajas invisibles y todas tus cosas visuales o cosas visibles dentro de tu etiqueta corporal. Esto es sólo la formalidad. Realmente no tienes que tener todo esto, pero para todos los navegadores y para que las cosas funcionen súper suavemente todo el tiempo, lo recomendaría encarecidamente. Estaremos haciendo esto a partir de ahora. Dentro de tu cabeza, podemos hacer algo así como título y en realidad podemos cambiar el título de la página web. Por el momento, el título de la página web es elements.html. Yo quiero cambiarlo por otra cosa. En Sublime Text, voy a decir elementos con algunos signos de exclamación. Guarda eso, refresca. Se ve que dice elemento y los pocos signos de exclamación. De eso se trata en cuanto a cómo rock HTML. Ahora lo que es realmente genial es que cada elemento visible puede tener atributos de estilo y dentro del atributo de estilo, puedes empezar a jugar con algo de CSS. Podemos decir que el color es azul. También podemos decir subrayado decoración de texto. Suena bastante guay. Archivo, guardar. Eso parece un enlace, a pesar de que no podemos hacer clic en él. Puedes ver cómo puedes empezar a meterte con algo de CSS aquí. 9. Teoría de CSS (muy breve): Hemos aprendido a hacer cajas y poner cajas dentro de otras cajas, pero ¿cómo hacemos que estas cajas se vean bonitas? Bueno, aquí es donde entra CSS. ¿ Qué carajo es CSS? Se trata de un montón de estilos que se pueden fijar con etiquetas HTML específicas a través de diversos medios y formas, pero básicamente una regla CSS contiene una lista de pares de claves y valores. Significa que se puede decir: el color es este, color de fondo es este, tamaño de la fuente es este, el margen es este, el relleno es éste, es un montón de ellos, no voy a pasar por todos ellos ahora, así que ese es el teoría. Entrémonos en ello. 10. Tres formas de abordar CSS: Hagamos algo de CSS ahora. Arrastra tu carpeta Cartoon Hero a Sublime Text y vamos a crear un nuevo archivo. Vamos a guardarlo como stylish.html. Vamos a guardarlo y sólo voy a escribir una etiqueta HTML y dejar que Sublime la complete por mí. Verás un poco de información extra en la parte superior aquí. Eso está bien. Vamos a llamar a este elegante documento. Dentro de cuerpo, solo voy a crear unas cuantas etiquetas h1, Encabezado 1-1. Voy a copiar esto, y luego lo voy a pegar un par de veces. Entonces voy a crear uno nuevo, que es un h2. Voy a llamarlo Rumbo 2-1, y voy a copiar eso y pegarlo un par de veces. Yo sólo voy a marcar la diferencia que usted sabe exactamente lo que está pasando. Está bien. Guardemos esto. Después para darle un poco de estilo, podemos decir color, colon, y luego darle un color, y luego punto y coma. Entonces si quieres cambiar el tamaño de la fuente, puedes tener 90 píxeles porque es un h1 tan grande. Está bien. Nosotros lo guardamos. A continuación, hacemos clic derecho en el elegante archivo HTML, Revelar en Finder, y luego lo arrastramos a Google Chrome. Ya verás que luego hay un montón de elementos ahí. Uno Uno ellos es rojo. Pero el tamaño de la fuente no se ve demasiado diferente, y lo llamamos tamaño fon, así que cambiémoslo a T. Guárdalo. Vuelve a Google Chrome. Eso es grande. Eso es exactamente lo que queremos. Está bien. Pero ahora quiero que todos los demás rubros sean exactamente iguales. Lo que hacemos es que podemos copiar esto y pegarlo. Simplemente voy Control C o Apple C y pego. Está bien. Wow, eso lleva mucho tiempo. Archivo, Guardar, y ya verás eso, wow. encabezamiento 1s y el rumbo 2s se ven exactamente iguales, lo que debería tener derrotas el punto, ¿no? Ahora en realidad, quiero que todos los h2s sean verdes, entonces se verán diferentes. Ahora, de nuevo, hay que cambiar uno. Cámbialos a todos. Se pone un poco desordenado, y consume mucho tiempo, pero hace el trabajo. Está bien. Pero hay una mejor manera. En lugar de usar un atributo de estilo en el elemento HTML dentro de tus elementos de cabeza, vamos a crear una etiqueta de estilo. Sublime lo rematará para ti y dentro de tu etiqueta de estilo presiona “Tab” dos veces, y luego escribe h1. Dentro de tu h1, solo voy a presionar “Shift” y “Tab” solo para dessangrarlo. Tu h1, podemos decir, color debe ser rojo. Está bien. Ahora quiero sacar todos estos colores deben ser rojos. Fantástico. Archivo, Guardar. Refrescar. Ahí vamos. Ahora bien, puede que no se den cuenta de lo genial que es eso, pero si quería cambiarlos todos a naranja, deletreados correctamente, por supuesto, solo podría escribir una línea y luego Guardar, Refrescar y luego se cambian los tres de mis elementos. Ahora este es el poder de CSS, sobre todo cuando te lo quitas de los elementos HTML reales, puedes empezar a cambiar cómo se ve tu sitio desde un archivo diferente y cambia todo tu sitio, todo tu sitio web, no solo todos y cada uno de los elementos. Esto hace que tu sitio sea diferente, más elegante y actualizarlo realmente, realmente simple y fácil. Está bien. Saquemos también el tamaño de la fuente. Vamos a cortarlo, y vamos a pegarlo. Está bien. Voy a sacar los atributos de estilo de todos estos h1s. Ya verás que he guardado en los atributos de estilo de h2s por ahora. Está bien. No quiero comprarlo todavía. Muchas gracias. Todavía lo estoy probando. Ni siquiera sé si me gusta HTML y CSS todavía. Está bien. Tu color es naranja, tamaño de fuente es de 90 píxeles. A lo mejor quieres hacer otra cosa. Digamos, decoración de texto. Vamos a darle un subrayado. Ahí vamos. Archivo, Guardar, Refrescar, y voila. Increíble. Por lo que puedes empezar a ver que tener una línea de código puede comenzar a ajustarse a todo tu sitio o a todos ciertos elementos de un sitio. Está bien. Ahora, quiero hacer lo mismo con h2s. Quiero el tamaño de la fuente, no los pesos de la fuente. Quiero que el tamaño de la fuente sea de unos 40 píxeles. Entonces vamos a Guardar esto y Refrescar. No pasó nada. Está bien, pero te diré por qué no pasó nada. Porque cuando escribes estilos en un atributo de estilo, anulan los estilos y la etiqueta de estilo. Está bien. Esta es la naturaleza del CSS. Hay un montón de sobrescribir o anular eso sucede. Entonces si es primero, lo que se escribe primero y algo más después de que está escrito, si tiene la misma regla, entonces anulará. Entonces si copio esto y lo pego, y lo cambio a 60, el valor de la segunda regla anulará el valor de la primera regla. De igual forma, si está en los atributos de estilo, el tamaño de fuente anulará los tamaños de fuente anteriores. ¿ De acuerdo? Entonces eso es algo para recordar. Yo sólo voy a retomar todos estos estilos, porque en realidad, no los queremos. Nos encantaría que todo estuviera dentro de una hoja de estilo, dentro de la etiqueta de estilo. Está bien. Pero sí quiero que mi color sea verde. Entonces vamos a guardar esto, y vamos a ver qué pasa. Está bien. Eso se ve bien. Pero ahora, ¿cómo sabemos que eso es realmente lo que queremos? ¿ Cómo sabemos que son 40? ¿ Cómo sabemos que no son 60? ¿ Cómo sabemos qué es qué? Ahora entra Google Chrome. Haga clic derecho en algo. Inspeccionar el elemento. Wow, empezarás a ver que en realidad conoce HTML y CSS. Se puede inspeccionar un montón de cosas diferentes. Entonces lo que podemos hacer aquí es que realmente podemos ir y hacer click en este h2 o inspeccionar un elemento, y ver que el tamaño de fuente es 60, y que el tamaño de fuente solía ser de 40, pero parece que está siendo sobrescrito por esta h2. Eso se puede ver en la línea 15 y en la línea 12, así como. Es realmente, muy útil. Lo que también es realmente útil es que se puede ir, “Me pregunto de qué tamaño debería ser, porque 60 no está del todo bien Así que en realidad podemos escribirle 50 píxeles, o tal vez 22 píxeles es justo lo correcto. Voila. Se puede ver cómo se ve, pero cuando se Refresca, las cosas vuelven a la normalidad. Entonces volvamos aquí. Cambia a 22 y quita este h2. Fantástico. Pero ahora ¿qué pasa si quiero que algunos de mis h1s y algunos de h2s sean de un color diferente? Aquí es donde se vuelve realmente interesante. Entonces voy a decir clase, un nuevo atributo, clase. Voy a darle cierta clase a ciertos elementos. Vamos a decir, pequeño. Voy a copiar esto, y voy a pegarlo en algunos de ellos. Está bien. Ahora, ¿cómo carajo acabamos de conseguir h1s con una clase de pequeños, y solo conseguimos h2s con una clase de pequeños? Bueno, en CSS, hay una cierta manera de hacer esto, y es ese punto y el nombre de la clase. aplican las mismas reglas a los nombres de clase. Entonces digamos, el tamaño de fuente es de 12 píxeles y Guarda esto. Verás que algunos elementos son realmente pequeños. Empezarás a ver eso, oye, que uno es pequeño, que uno es pequeño, que uno es pequeño, porque todos tienen una clase de pequeños. Eso es realmente genial. Ahora lo que pasa es, aunque tuviéramos que mover la clase pequeña por encima del selector h2, aún así la anularía. Aquí se puede ver. Por lo que podría esperarse que debido a que el pequeño vino primero y el h2 llegó segundo, que este tamaño de fuente anularía este tamaño de fuente. Pero lo que CSS también hace es que tiene ponderaciones. Por lo que un nombre de etiqueta tiene una ponderación menor que un nombre de clase. De la misma manera algo con una ID de primero tiene una ponderación aún mayor que un nombre de clase, y una ponderación más grande que un nombre de etiqueta. Entonces si ponemos un tamaño de fuente de 150 píxeles en el primer elemento, o el elemento con un ID de primero, tendrías un 150 píxeles. Pero, ¿qué es una identificación? Bueno, un ID es casi como una clase, excepto que solo puede estar en un elemento. Por lo que un elemento solo puede tener un ID de primero. ¿De acuerdo? Ahí está nuestro gran encabezado, con primero, y se puede ver que a pesar de que está más arriba de la página que las otras reglas, tomó preferencia porque es una identificación. Aun así, si vamos a poner aquí un atributo de estilo y cambiar el tamaño de la fuente a no lo sé, cambiémoslo a 20 píxeles. Archivo, guardar. Verás que un estilo en línea en un atributo de estilo toma preferencia sobre un ID. Por lo que hay varias ponderaciones en las que pensar a la hora de hacer estilo. Lo siguiente que debemos considerar es ¿qué pasa si quiero apuntar a algo más dentro de un elemento? Si hay un lapso aquí, y dentro del lapso, digo: “Pruébalo”. Afuera, también tengo un lapso que dice, “Pruébalo”. Guardemos esto y veamos qué pasa. El primer lapso, solo voy a inspeccionar este elemento, dice pruébame, pero es verde como el h2. Ves lo que hace un span, hereda el contenedor de su padre o el estilo de las cajas principales. Al igual que voy a inspeccionar a este tipo e inspeccionar a su compañero. Perdón. Hereda del contenedor del cuerpo porque así son los padres. Ya ves, los tramos son bastante inteligentes por defecto. Pero ahora quiero hacer que todos los tramos cursiva, así que intentemos eso. Ahora tengo CSS aquí, solo escribe span y digamos, ¿qué podrían ser fuentes? Ahí vamos. Estilo de fuente, cursiva. Ahí vamos. Vamos a salvar y voila, una cursiva. Pero, ¿qué pasa si quiero que sólo este lapso haga algo? Bueno, podríamos ponerle un nombre de clase que esperamos, o lo que podríamos hacer es decir h2 span, lo que significa que el span o todos los tramos dentro de todos los h2s hagamos algo. ¿ Qué vamos a hacer? Podríamos darle un color de fondo, podríamos darle un golpe. Hagamos eso. Estilo de fuente, font-family, no. ¿ Decoración de texto? Sí. Podemos ir a través de la huelga. La ortografía es terrible. Strike-through, pero no se ve bien. A lo mejor hay un guión. ¿ Quién sabe? A ver. Archivar, guardar, actualizar. Nada realmente se ve demasiado bien. Ahora el poder del Google es realmente útil cuando se trata de CSS y HTML porque toda la web está construida sobre HTML y CSS. Hagamos un rápido Google para CSS tachado. Ahí vamos. Hay algunos sitios web que son realmente útiles. Propiedad de texto-decoración, línea a través. Hay un montón de información diferente, pero oye, vamos a copiar esto. A ver si funciona. Línea a través. Ahora hagamos de nuevo aquí y refresquemos, allá vamos. Tengo un tachado o un line-through como lo llaman y lo que es más, sólo lo tengo en el h2. Sólo hay una cosa más que me gustaría mostrarles. Como puedes ver, mis estilos están creciendo a pesar de que no tengo tanto CSS y a pesar de que no hemos peinado tanto nuestra página. La mejor manera de ir sobre el estilo de las cosas es realmente crear un archivo de hoja de estilo separado. Lo que vamos a hacer es crear una etiqueta de enlace y texto sublime. Basta con pedir conjunto completo listo. Bueno, es una hojas de estilo, es una hojas de estilo tipo CSS y el HREF significa ¿dónde diablos está? Sólo vamos a decir que está en la carpeta CSS y se llama test.css. Ahora lo que voy a hacer es que voy a cortar todo esto. Voy a quitar estas etiquetas de estilo, y luego voy a guardar. Ahora voy a decir archivo, nuevo archivo. Voy a pegarlo y voy a decir archivo, guardar como crear una nueva carpeta llamada CSS, y luego la voy a llamar test.css y guardar. Después va a agregar una sangría diciendo shift-tab, solo para que esté limpio y ordenado. Guárdalo. Ve a Google Chrome, refresca. Nada cambió, pero eso está bien. Sólo para asegurarme de que todo esté funcionando, voy a añadir una nueva regla y la voy a aplicar al organismo. El cuerpo voy a decir color de fondo. Pidamos gris claro. Guarda, refresca, y es gris claro. Ahora bien, esto es realmente genial porque significa que podemos escribir un montón de CSS sin complicar nuestro archivo HTML. Sólo tenemos una línea que se relaciona con el archivo test.css. Fantástico. Eso es HTML y CSS para ti. Aprenderemos un montón más a medida que creamos nuestro proyecto, pero por ahora, si quieres sincronizar eso la web y compartirlo con tus amigos y compartir tus experimentos, crea nuevos archivos, nuevas carpetas, nuevo HTML, nuevo CSS, ve por ello. Hay un montón de enlaces a CSS. Guardias de esperanza es un montón de enlaces a HTML. Guardias de esperanza, puedes hacer referencia a todos los elementos HTML, todos los elementos CSS en los recursos proporcionados. Lo que queremos hacer aquí es solo asegurarnos de que estamos en la rama gh-pages. Entonces nos vamos a comprometer a decir que hemos hecho un montón de cosas o lo que tú quieras. Comprometerse con gh- páginas. Fantástico. Sincronizar. Una vez sincronizada, en realidad podemos abrir Google Chrome. Abre una nueva pestaña y luego lo que vamos a hacer es ir a GitHub y vamos a iniciar sesión. Entonces recuerda tu nombre de usuario. El mío es mrra-screencast. Recuerda tu contraseña, inicia sesión. Acude a tu directorio de caricatura-héroe o repositorio, haz clic en el que se compromete. Verás que hay un compromiso inicial. Enfriar. Pero ahora necesitas ir a tu sucursal gh-pages. Ya verás que hemos hecho un montón de cosas. Ahora que sabes que los commits vienen a través, abramos una nueva pestaña. Voy a decir, mrra-screencast.github.io/caricatura-hero/estilish.html Vamos a ver. Ahí vamos. Podemos compartir nuestro sitio web guapo con el resto del mundo. Diviértete un poco, juega, haz algunas cosas locas. Comparte tus enlaces en la galería de proyectos, retroalimentación sobre los códigos de otras personas, contesta preguntas, haz preguntas, vuelve salvaje, ten un jol. 11. Primero la planificación :): Todo bien. Ahora vamos a empezar a planear nuestro sitio, y la planeación puede tomar cualquier forma que te guste. Puede suceder antes de una etapa, y después de una etapa, antes de otra etapa. No existe tal cosa como planear una vez y luego nunca volver a planear a lo largo de todo el diseño y desarrollo del sitio. Necesitas estar planeando antes de casi todo lo que haces. Planear es increíble. Una de las formas que me gusta planear es, primer lugar hacer un boceto rápido del sitio si aún no lo he diseñado. Después de que lo he diseñado, entonces me gusta hacer una alambrada, y esto no es una típica alambrada de cómo se ve el sitio? ¿Cómo funciona? Pero una caja label wireframe de cómo van a encajar todas estas cajas en la página web o en la página? Déjame llevarte a través de mi página web de personajes y cómo he trazado todos los bloques. En primer lugar, ahí está mi página, que es una caja grande. Lo que quiero es el cuadro de encabezado y dentro de ese cuadro de encabezado, quiero un cuadro de imagen de perfil. Yo quiero que sea redondo, y he puesto una cruz a través de la caja para significar que es una imagen. El siguiente elemento es un encabezado, aún dentro del encabezado, y éste va a ser el nombre de mi personaje, y tal vez podría haber un subtítulo. Pero por ahora sólo hay un rumbo. Lo siguiente es dentro del contenido, en realidad me gustaría que hubiera otro encabezamiento, y tal vez esto pudiera decir de mi personaje. Entonces va a haber una etiqueta de párrafo con un montón de copia, un montón de textos por encima de mi personaje. Lo siguiente, otro encabezado, y esto podría ser decir algo como las cosas favoritas de Mi personaje, o los amigos favoritos de Mi personaje. Lo que voy a hacer es ponerlo en un cuadro de lista ordenado, y dentro de ese cuadro de lista ordenado, va a haber un montón de elementos de lista. Después de eso, voy a poner una imagen y otra vez ves la gran cruz que significa la imagen. Debajo de eso va a haber una pequeña leyenda, y luego debajo de eso, otro encabezamiento con una lista desordenada, con un montón de elementos de lista. Esta lista puede ser cosas favoritas que hacer, o amigos de nuevo, o características, o un montón de cosas diferentes que puedes poner en listas. Después de eso, solo voy a incluir un pequeño pie de página y dentro de ese pie voy a decir, éste es quien hizo el sitio web, aquí es donde me pueden encontrar y cualquier otra pequeña información que mis usuarios puedan querer buscar. Esto es lo que hago por todos los sitios web, desde pasar de un diseño a HTML y CSS. Este es un proceso realmente bueno, una parte realmente buena de la planeación. Cuando puedo decir, ¿cómo encaja todo como cajas? Haces lo mismo por tu página web, puedes copiar la mía o puedes llegar a algunas ideas diferentes propias. Pero es realmente bueno pensar en cómo encaja todo en cajas, y qué cajas caben en qué cajas. 12. Vamos a escribir el HTML de nuestro sitio web: Escribamos nuestro HTML para este proyecto. Abramos nuestra carpeta de caricatura-héroe y arrástrela a Sublime Text y lo primero que vamos a hacer es crear un nuevo archivo y lo vamos a guardar como index.html dentro de nuestra carpeta de dibujos-héroe. El motivo por el que lo llamamos index.html es porque cuando el navegador llega a un sitio web, necesita saber qué archivo no se debe cargar primero y siempre busca tu archivo de índice. Lo siguiente que vamos a hacer es escribir una etiqueta HTML y dejar que Sublime Text llene el resto. Vamos a quitar esto más pequeño que el símbolo, entonces vamos a empezar a escribir nuestro HTML. Entonces mi personaje es Wreck-It Ralph. De verdad lo disfruto. Sea quien sea tu personaje, podría ser un personaje de dibujos animados, un personaje animado pero si no te gusta eso, elige un personaje de película o elige a alguien más para hacerlo, lo hace mucho más fácil y mucho más divertido. Lo siguiente que vamos a hacer es insertar un elemento de enlace y Sublime Text sabe que es un CSS1 lo cual es genial así que diremos css/hero. css para que sepa dónde encontrarlo. Me gustaría ahorrar como voy por si el equipo se bloquea o pasa algo malo. Ese es nuestro elemento principal. Ahora, voy a estar referenciando a mi caja alambrada aquí y allá. Veamos qué tengo que hacer. Necesito un elemento de cabecera en primer lugar así que déjame escribir mi elemento de cabecera y dentro de mi elemento de cabecera, necesito una imagen que sea nuestra imagen de perfil y un encabezado. Hagamos mi etiqueta de imagen y mi fuente va a ser img/profile.jpg y luego debajo de eso, voy a crear una etiqueta h1 y llamarla Wreck-It Ralph. Fantástico. Ese es mi encabezado pero ahora verás mi wireframe que en realidad tengo un contenedor exterior y este no es el navegador, esto en realidad es un contenedor. Voy a crear uno nuevo llamado wrapper o un nuevo div con la clase de wrapper y se va a envolver todo mi contenido. Lo siguiente que vamos a hacer es crear un div con una clase de contenido y por dentro aquí, voy a poner todo mi contenido. El siguiente es un pie de página y a pesar de que en mi vista previa o mi wireframe no hay caja real aquí para un pie de página y no hay caja real para el contenido, he decidido que debería ponerlos en. Tu wireframe no tiene por qué ser súper concreto, solo te ayuda a planear. Entonces los siguientes elementos que voy a poner es mi pie de página. Ahora, dentro de mi contenido, lo que necesito hacer es crear un h2 para este título o este encabezado, necesito crear una etiqueta p, otra h2, una lista ordenada con un montón de elementos de lista dentro de una imagen, una p con una clase de subtítulo, otro encabezado, una lista desordenada con algunos elementos de lista dentro y dentro del pie de página, necesito crear algunos elementos los cuales usaré una lista para crear. Entonces, empecemos a escribir esto. El primero que quiero hacer aquí es escribir sobre Ralph y estoy eligiendo un h2 porque ya hay un h1 en la página así que estos no son tan importantes como el h1 pero son bastante importantes. Mi siguiente es una etiqueta p y dentro de esta etiqueta p, voy a escribir un poco sobre Ralph, así que un chico malo de videojuego de 8 bits que recorre la longitud de la arcada para demostrar que es un buen tipo. También tiene manos masivas. Podemos tomar que uno debe tener en cuenta. Lo siguiente que quiero hacer es escribir sobre las características de Ralph. aquí voy a usar un ol y dentro del ol, vamos a crear algunos ítems de lista. Lo primero, es súper guay. El siguiente elemento de la lista, es tratado como mal culo, genial. El siguiente, es amigable con los personajes de juego glithy-girl. No empezó de esa manera, pero termina así. Después de nuestra ol o nuestra lista ordenada, vamos a tener una imagen grande así que voy a darle a esta imagen una clase de gran imagen. Tiene sentido, ¿verdad? Fuente de la imagen va a ser también big-image.jpg. Después de eso, vamos a conseguir una p y le voy a dar una clase de subtítulos y en esta leyenda dirá, este es Ralph en acción. Después de eso, voy a crear otro h2 y decir que amigos de Ralph deletrearon correctamente, claro. Aquí, voy a usar una lista desordenada. Crea algunos elementos de lista. Yo sólo voy a copiar y pegar esto. Dentro de aquí, voy a encontrar a algunos de sus amigos. El primero es Jake de tiempo de aventura. El siguiente es Bloo de Fosters. Ese es el Hogar de Foster para Amigos Imaginarios. El siguiente es Arturo de Desastres del Rey Arturo. Ahora, lo que voy a hacer es ir rápidamente a buscar algunos enlaces para esos tres tipos en el Google Chrome. Escribamos a Jake desde Tiempo de Aventura. Se va a ir un poco, y sí, éste es uno que encontré antes. Voy a copiar esto y voy a crear un enlace alrededor de Jake. El href va a ser eso, los objetivos van a ser subrayado en blanco, y el título va a ser la página de Visitar Jake. Yo voy a hacer lo mismo desde Bloo. Buscar Boo Fosters Inicio, Cromo. Aquí hay uno que encontré antes. Volvamos a copiar esto. Dentro de aquí, vamos a crear un enlace alrededor de Azul. El href será que acabo de copiar. El objetivo será subrayado en blanco, y el título será la página de Visitar Bloo. El siguiente será Arthur. Hagamos lo mismo por Arthur, vamos a crear un enlace a su alrededor. De nuevo con un href, un guión bajo blanco blanco, y el título de la página de Visit Arthur. Ahora necesitamos encontrar un enlace para Arthur. Me encanta Google y [inaudible] .Ahí vamos. Volvamos a copiar eso. Vuelve a Sublime Text y pegarlo en la href. Ese es más o menos nuestro contenido. Ahora, dentro de nuestro pie de página, sólo necesitamos unas cositas. Voy a usar una lista desordenada otra vez con algunos elementos de lista, vamos a enumerar elementos, voy a decir, Made by Rich. Después el siguiente elemento de lista, voy a decir, Hecho durante una clase de Skillshare. Entonces, por último, voy a decir, este elemento de la lista debe estar protegido por derechos de autor, aunque no tenga derecho a copyright, debería ser, y o ampersand copia, punto y coma 2015. Ahora bien, esta es una forma especial de escribir tu símbolo de derechos de autor. Voy a poner un enlace alrededor de Skillshare, y luego voy a empezar a rellenar todos estos detalles. Esos son mis sitios web. Nuevamente, el objetivo debe ser subrayado en blanco y el título debe ser, Visitar el sitio web de Rich. Solo voy a copiar y pegar todo esto para que sea un poco más fácil para el Skillshare. Para los sitios web de Skillshare, el href va a ser skillshare.com. Ese es más o menos nuestro HTML, pero necesitamos ver que está funcionando. Vamos a nuestro buscador, arrastra index.html a Google Chrome, y debería ser algo como esto. Tenemos que encontrar dos imágenes. Simon busca Wreck-it Ralph. Voy a entrar a la pestaña de imágenes. Hay uno realmente super cool que me gusta. Este es él. Voy a usar esto desde nuestra imagen de perfil. Voy a ir a caricatura-héroe. Voy a crear una carpeta nueva para todas mis imágenes. Es genial almacenar tu CSS en tu carpeta CSS y todas tus imágenes en tu carpeta de imágenes. Voy a llamar a esto profile.jpg. Fantástico. Entonces lo siguiente que voy a hacer es buscar una imagen grande realmente genial. Esa podría ser una buena. ¿ Podemos ver si hay algo más? Sí, eso es bueno. Sólo voy a dar clic, “Ver imagen”, y se va a cargar. Si bien se está cargando, solo voy a poner mi imagen de prueba en la carpeta de imágenes, y mantendré la caja de wireframe arriba sólo porque realmente no es parte del sitio, es más algo a lo que hacer referencia. Aquí, voy a guardar la imagen como big-image.jpg. Fantástico. Veamos qué pasa ahora. Tenemos nuestra imagen de perfil, tenemos la gran imagen. Es realmente, realmente grande, y ese es nuestro HTML. A partir de aquí, en realidad podemos empezar a peinar este arte de una manera increíble. Podemos hacer un montón de cosas realmente geniales con él. Si quieres, abre GitHub Desktop y sincroniza tus archivos pero solo voy a estar haciendo eso fuera del video CSS. Enfriar. Nos vemos en el siguiente video. 13. Vamos a escribir el CSS de nuestro sitio web (la parte más divertida): Escribamos algo de CSS. Abre tu carpeta de caricatura-héroe, arrástrala a Sublime Text y abre el archivo de índice, así como tu hero.css. Lo que necesitamos hacer es darle estilo al encabezado y sus elementos, necesitamos darle estilo al contenido y sus elementos, y necesitamos darle estilo al pie de página y sus elementos. Puedes o cambiar entre índice y héroe, o puedes copiar y pegar, lo cual me gusta hacer. A mí me gusta decir copia, y me gusta pegar, y luego me gusta comentarlo. Un comentario es algo que el navegador no verá, y lo escribes así, lo cual es genial. En HTML, puedes escribir un comentario con esta sintaxis, que es realmente genial. Si quieres dejarte algunas notas como : “Oye, echa un vistazo a esto”. Tú también puedes hacer eso. Eso no llega al navegador, y ni siquiera lo nota. A mí me gusta simplemente comentarlo, y luego referirlo desde aquí. Mi cabecera. De lo que quiero hacer con mi cabecera. Yo quiero que sea un color sólido así que voy a decir el fondo-color, quiero que sea un azul pero quiero que sea un azul especial. En Google Chrome, voy a abrir una nueva pestaña y voy a buscar un recolector de color. Normalmente sólo crecí para la primera opción y quiero azul. Ese azul luce bastante bien. Vamos a cambiar el tamaño del navegador. Este de aquí se ve bien. Yo lo voy a copiar. Voy a poner un hash delante de él, y pegarlo. Fantástico, ese es mi color de fondo. Yo quiero que sea un poco de espacio alrededor de los elementos dentro del encabezado, así que voy a darle un relleno. Voy a darle un relleno de, digamos 40 píxeles. Ahora podría escribirlo así, remo derecho podría darle un valor. Yo podría decir remo izquierdo y remo y remo abajo y relleno, lo que sea. Pero hay un atajo. Si quiero que todos sean iguales solo digo relleno, y le doy un valor. Si quiero hacer todos los valores que puedo hacer en una línea. Puedo decir el valor superior, entonces puedo decir el valor correcto, el valor inferior, y luego el valor de la izquierda. Pueden ser diferentes. Si quiero que la parte superior y la inferior sean iguales, y la izquierda y la derecha sean igual, literalmente puedo escribirlo así. Pero porque quiero que sea todo lo mismo, sólo voy a mantenerlo como 40 píxeles. Lo siguiente que quiero hacer es decir mi h1. Ahora podría escribirlo como todos los h1s en el encabezado, pero sé que solo hay una h1 así que sólo voy a mantenerlo corto. Yo quiero que el tamaño de fuente sea de unos 90 píxeles, veremos cómo se ve justo ahora, y quiero que su color sea blanco. Fantástico. Entonces tengo esta imagen dentro de mi encabezado, pero sé que hay otra imagen. Aquí es donde diré la imagen dentro del encabezado, y quería estar en el medio. Quiero decir mi encabezado, vamos a text-align center, y esto alineará mi encabezado y mi imagen. ¿ Qué más quiero que haga mi imagen? Yo quiero que sea redondo. Voy a darle un radio fronterizo y lo voy a hacer 150 pixeles y ya veremos qué pasa. Si eres como, “Qué carajos. ¿ Cómo sabes que fue el radio fronterizo?” Bueno, si no sabes algo, solo Google. Es la forma más fácil de hacer algo. Si Google algo así como las esquinas redondas CSS, encontrarás un montón de información. Haga clic a través de cualquiera de los enlaces, son realmente útiles, te explicarán mucho, y luego simplemente implementarlo en tu sitio. Después de haber guardado, ve a Google Chrome y refresca. Se ve bastante bien. Ya verás que las esquinas lo hacen no del todo redondo, también te darás cuenta de que me pliego en un montón de información extra como sobre Ralph, sus características y sus amigos en la parte inferior, con enlaces. Si no lo has hecho, haz eso. Ahora, quiero que esto sea redondo. Inspeccionarlo. Vamos a aumentar el ancho del inspector. Ya verás que al pasar el cursor sobre la imagen, dice que son 450 píxeles por 450 píxeles. Hay dos formas de hacer esto. Podría o bien buscar un resizer de imagen, usar Photoshop o cualquier otra aplicación de imagen. PicreSize es bastante genial. O podría simplemente dejarlo tal como está, y cambiar el ancho y la altura. Eso es lo que voy a hacer. Voy a ver cómo se ve, y decir ancho. Vamos por 300 píxeles porque 300 píxeles y 150 píxeles van juntos ya que 150 es la mitad de 300. Eso se ve bien. Voy a implementar eso en mi archivo CSS, ancho 300 píxeles. No necesito cambiar la altura, simplemente porque se redimensiona automáticamente con el ancho. Podría cambiar la altura y el ancho, con auto redimensionamiento con altura. Puedo sesgar las cosas y hacer que las cosas sean desproporcionadas. Si configuro un ancho diferente y una altura diferente para una imagen cuadrada. Lo siguiente que quiero hacer es ponerle una frontera. Aquí hay algunas líneas que necesitas saber, pero al igual que hay un atajo para el relleno, hay un gran atajo para frontera. Aquí quiero decir, quiero que mi grosor de borde sea de 10 píxeles, quiero que el estilo de borde sea sólido, y quiero que el color sea un color rojo. Voy a ir a buscar eso. Necesita ser rojo, y así marco esto, el CC0000 se ve bien. Si copio eso, y luego lo pego aquí y guardo, echemos un vistazo a cómo se ve. Se ve bastante bien, y podría ser un poco más grueso así que veamos cómo se ve si es un poco más grueso. Sólo estoy presionando la flecha arriba aquí. Eso se ve bastante bien. Veinte y cuatro, pero entonces, mi ancho, el radio fronterizo está mal. Entonces voy a cambiar mi radio fronterizo hasta que vuelva a quedar bien. Se ve bien. ¿ Qué es eso? 174. Yo sólo voy a copiar todo esto porque eso es exactamente lo que quiero. Fantástico. Entonces voy a ahorrar. Refrescar. Ahora verás que hay un borde el cual Es diferente del ancho real. Mi ancho sigue siendo de 300, pero mi frontera arriba, abajo, izquierda y derecha es de 24. todo, mi altura y ancho de esta imagen es de 348. Lo siguiente que quiero hacer es cambiar todo este texto a algo un poco más superherowy. Voy a usar algún texto por defecto, voy a establecer el HTML y el texto por defecto del cuerpo o font-family a Arial, y si no tienen Arial voy a decir sans-serif. Si no sabes lo que es una familia de fuentes, solo Google. Encontrarás un montón de información. Vamos a ahorrar. Vuelve aquí. Eso se ve un poco más superherowy. Se ve bien. Lo siguiente que tenemos que hacer es deshacernos de este borde blanco alrededor de todo, y también es un atributo HTML y cuerpo. Cambiemos eso. Yo quiero decir relleno. A veces podría ser relleno. Voy a poner eso a cero. Estos son los estilos por defecto que vienen con un navegador. No parece que sea relleno, así que voy a agregar margen. Pongamos eso a cero, quita el relleno. Guardemos eso. Wow, no sé qué acabo de hacer ahí. ¿ Qué de eso? Nueva vista en archivo. Wow. Vamos a ahorrar, asegúrate de cerrar eso. Volvamos a Google Chrome, y voila, desaparecen los pequeños huecos blancos alrededor de toda la página. Ese es más o menos nuestro encabezado, se ve muy bien. Looks Wreck-It Ralphie. Ahora lo siguiente que quiero hacer es, hacer algunas cosas con nuestro contenido. Quitemos el encabezado HTML y podemos referirnos de nuevo al contenido como este ahora, solo por una forma diferente. Este contenido, hay un montón de h2s, listas ordenadas, imágenes, y todo eso. Lo primero que quiero hacer es, abordar los elementos de contenido. Yo quiero darle un max-width solo para que no siempre abarque tan ancho, y también quiero ponerlo en el medio. Puedo decir margen, cero para arriba e abajo, y también para izquierda y derecha. Ahora auto, lo hace realmente bonito, lo redimensiona para ti, pero solo a la izquierda y a la derecha. Guardemos esto. Veamos qué pasa. Vamos a cerrar esto. Las cosas se ven un poco raras, ¿no? Lo que es realmente genial es que cuando esto sucede, podemos inspeccionar y podemos decir ir a nuestro contenido, y digamos max-width. Cambiémoslo a 400 por ahora. Démosle un fondo de color de, guau, seda de maíz, que se ve bien. Vayamos coral. El coral se ve bien. Se puede ver que ese es el ancho máximo. Si aumento eso, verás que hay un espacio igual a la derecha y a la izquierda. Pero ahora esta imagen está haciendo algunas cosas locas. Lo que quiero hacer aquí, es que quiero establecer la imagen grande, .big-image, y quiero decir max-width es 100 por ciento. No estoy dando en un valor absoluto. Veamos qué pasa aquí. No quiero comprar todavía. Gracias. Refrescar. Empezarás a ver eso, oye, realidad está sentado en un porcentaje. Si cambias el tamaño de tu navegador, en realidad lo escala para ti, cual es genial para el móvil. Lo siguiente que quiero hacer es en el contenido que quiero poner un poco de relleno solo para que no siempre esté tocando la izquierda y la derecha. Entonces quiero decir que el relleno es cero y 20 píxeles. Cuando guardo esto, entonces puedo ver que hay un poco de espacio en blanco a la izquierda y espacio en blanco a la derecha. Pero no para mi cabecera. El encabezado se ve perfecto. Lo siguiente que hay que hacer es este título. Lo que me gustaría hacer aquí es abordarlo, y quiero hacer que el font-size sea de unos 16 píxeles. Yo quiero el color de la fuente. Entonces vamos a conseguir que el color sea gris claro. Entonces también quiero que el estilo de fuente sea cursiva para que en realidad se vea como una leyenda. Guardemos esto y veamos cómo se ve. Este es Ralph en acción. Eso es fantástico. Lo siguiente que quiero hacer es simplemente hacer que esto se vea un poco más bonito. Entonces mi ul, no quiero esos discos, así que voy a decir liststyle, ninguno y también le voy a dar un relleno de cero y un margen de cero. Veamos qué pasa. Fantástico. Pero ya verás que el ul y el pie de página también llegaron a cambiar cuando hice esto. Pero eso está bien. Por lo que Jake de Tiempo de Aventura, Bloo de Fosters, Arturo de los desastres del rey Arturo. Pero esos enlaces se ven un poco raros, así que déjame cambiar los enlaces también. Todos los enlaces, en realidad quiero que el color sea rojo porque ese es el color de Wreck-it Ralph, y no quiero que tengan un subrayado. Entonces quiero decir texto-decoración, ninguno. Guardemos esto y veamos cómo se ve. Fantástico. El siguiente que hay que hacer es nuestro pie de página. Cambiemos un poco nuestro pie de página. Yo quiero que sea un muy, muy gris claro con algo de relleno. Digamos que el relleno que iba a establecer en 40 píxeles y 20 píxeles. Ahora no se ve del todo como un pie de página en la parte inferior pero recuerda, es sólo una guía. Pie de página en la parte inferior, digamos que quiero un color de fondo. Ahora bien, ¿cuál debería ser el color de fondo? Vayamos a elegir un color otra vez. De verdad me gustaría un negro, pero lo haré un negro de color realmente claro. Entonces probemos este color. Vamos a copiar esto y poner un hash aquí y pegarlo. A ver cómo se ve. Eso se ve bastante bien, pero sigue siendo bastante ajustado al resto del contenido. Entonces lo que me gustaría hacer es que solo me gustaría establecer un margen, con sólo un margen superior de unos 20 píxeles. Entonces también me gustaría cambiar un poco su ul dentro. Lo que me gustaría hacer aquí es el ul text-align, center. Entonces tomaremos el centro. Pero entonces también me gustaría decir todos los li's dentro del ul pero dentro del pie de página solamente, me gustaria mostrar como en línea. Ahora por el momento, se está mostrando como un bloque. Te lo puedo mostrar aquí. Si tengo que inspeccionar este elemento, se puede ver que en realidad es un bloque entero. Se puede ver por el color azul resaltado. Ahora estoy cambiando la pantalla a inline. Digo que los li están dentro de la ul, dentro de la pantalla de pie de página como en línea. Veamos qué hace esto. Refrescar. Hecho por Rich Made durante una clase Skillshare copyright 2015. Pero está un poco aglomerado, así que lo que voy a hacer es cambiar esto a un bloque inline-block, lo que significa que puedo aplicarle el margen. Entonces margen, arriba, cero, y la izquierda y la derecha, voy a decir cinco píxeles. Voy a guardar, refrescar aquí, y eso se ve bastante bien. Esto, por otro lado, está en el medio. No quiero que eso esté en el medio, así que solo voy a poner el ul de pie de página y simplemente hacerlo text-align, centro para el ul y el pie de página, y refrescar aquí. Ahora, ese es nuestro sitio web. Ahora, compártelo. Vete salvaje, haz lo que quieras, dale estilo como quieras, y luego compártelo. Creo que lo más poderoso de la web es que puedes compartirla. Se puede compartir información. De esta manera es más o menos gratis. Ahora lo que voy a estar haciendo es que te voy a estar mostrando un par de maneras diferentes en las que darle estilo. Mismo HTML, solo CSS diferente. Podríamos poner un poco de imágenes ahí dentro, pero eso es básicamente todo. Una vez que hayas creado tu sitio, una vez que estés contento con él, bueno, cuando estés feliz de compartir algo de ello, ve a tu aplicación de escritorio GitHub y asegúrate de que estás en la rama gh-pages, y luego comprometamos nuestra archivos diciendo, First commits para nuestra página de caracteres o sitios web. Comprometerlo, sincronizarlo. Recuerda lo que tenemos que hacer ahora, una vez que termine de sincronizarse, tenemos que ir github.com. En github.com, tenemos que estar en héroe, tenemos que ir a la sección commit, tenemos que asegurarnos de que estamos en la rama gh-pages. Se escriben archivos HTML. Veamos qué está haciendo GitHub. Todavía se está sincronizando. Se está llevando mucho tiempo. Me pregunto si es porque ahí tenemos algunas imágenes grandes. De acuerdo, ahí vamos. Está sincronizado, volvamos a github.com. Vamos a refrescarnos, y verás First commit para nuestra página de personajes. Aquí vamos. Ahora lo que queremos hacer es entrar en mrra-screencast.github.io. Obviamente, utiliza tu nombre de usuario de GitHub. Ir a héroe de dibujos animados, pulsa Enter. Ya verás que no hay index.HTML y eso se debe a que está recogiendo ese index.HTML como tu primer archivo en ir a buscar. Esa es tu página web. Puedes leerlo en tu teléfono móvil, puedes compartirlo con tus amigos. Se ve bastante bien. Ahí vamos. Ten un baile, toma un poco de té, acariciate en la espalda y dile a tu mamá que acabas de hacer tu primer sitio web y puedes compartirlo. 14. ¡Vaya, qué versátil es CSS!: Está bien, para que veas aquí es donde lo dejamos. Teníamos unos sitios de personajes muy bonitos. Ahora lo que he hecho es que he escrito dos hojas de estilo más. Uno se llama hero-alt-1, y el otro se llamaba hero-alt-2. Entonces, solo cambiando las hojas de estilo, vamos a guardar. Se puede ver lo que pasa, yo no cambié ningún HTML. Ya verás que hay un fondo de azulejo. Esto se hace estableciendo una imagen de fondo esta es una sintaxis especial para subir una carpeta. Entonces de todo lo que voy aquí, voy un CSS, sube una carpeta y luego va y mira en la carpeta de imágenes para el pixel image 100 JPEG. Entonces pondré un fondo repeticiones sobre repeticiones. Entonces consigo algo que se vea así. También notarás una sombra tecnológica. Entonces si inspecciono esto y solo me quito la imagen de fondo, notarás que hay una sombra en ese texto y una sombra en la imagen misma. Esto lo hacen dos cosas diferentes. El h1 tiene una sombra tecnológica, y este es el valor x, este es el valor y, y esta es la cantidad de desenfoque. Entonces el color de la sombra. Nuevamente hay una sombra de caja en la imagen del encabezado. Su valor x, el valor y la cantidad de desenfoque y el color. Entonces esa es la sección superior. He cambiado algunos colores. He enviado un texto, he quitado números, y luego he cambiado la foto y poco. Entonces esa es una versión. Otra versión, solo voy a cambiarlo a dos y guardarlo. Veamos qué pasa ahora. Wow. Entonces es realmente rojo. Sí, realmente rojo. Es muy plano. Es una imagen cuadrada. No hay sombras. Los Aliados tienen fronteras a su alrededor, y todos redondearon cajas. cambiaron los subtitulaciones. ¿Cuáles son estos? Bueno, estos son enlaces, y tienen un color de fondo, y también tienen un ajuste de desplazamiento que se les aplica. Entonces en hero-alt-2 to, te mostraré en las etiquetas A. Ahí hay un color de fondo. Entonces cuando pasan el mouse, y esto se llama pseudo-clase, el fondo cambia el color. Es así como me estoy poniendo ese color más oscuro cuando estoy flotando sobre un enlace. sólo cambiar CSS y absolutamente ningún HTML, ¿puedo llegar a tres páginas totalmente diferentes? Entonces ese es el poder del CSS. Puedes cambiar radicalmente cómo se ven y sienten tus sitios web solo con unas pocas líneas de código y cambiando tus archivos CSS. 15. Agradecimiento y próximos pasos: Es el fin de los proyectos. De verdad espero que te hayas divertido porque eso es lo más importante. Lo siguiente que realmente espero que hayas hecho es aprender mucho. Hemos cubierto HTML, hemos cubierto CSS, hemos cubierto cómo se relacionan entre sí. Hemos empezado a utilizar Sublime Text. Hemos empezado a usar GitHub. Hemos utilizado Google Chrome y hemos empezado a inspeccionar elementos. Hay mucho más en todos estos temas. Si lo has disfrutado, aprende un poco más todos los días, escribe HTML y CSS todos los días, aunque solo sean dos líneas. Ayudará a tu cerebro a mantenerse fresco, pero lo más importante, comparte tus proyectos con otras personas. Entonces en una galería de proyectos, publique enlaces, conteste preguntas, haga preguntas, y recuerde que Google es su amigo. El web está construido por personas que escriben HTML y CSS. Toda la web se plantea en HTML y CSS. Ése son sus primeros puertos de llamada, de lo contrario, pregúntale a un humano real. Genial, espero que te hayas divertido. Me he divertido haciéndolo. Cuidado con algunos videos más.