HTML y CSS para principiantes: ¡Construye tu propio blog personal!

1. ¡Te damos la bienvenida al curso!: Bienvenido al principiante HTML y CSS. Me emociona tenerte conmigo en este curso. Mi nombre es Chris, y soy desarrollador web y también creador de cursos online con experiencia impartiendo clases a miles de estudiantes certificados. Este curso te presentará tanto HTML como CSS, a los principales bloques de construcción, sitios web de grúas. Si esto es nuevo en, tú, no te preocupes. Este curso ha sido diseñado para principiantes, y he creado este curso con cálidas minas de oro. Tomemos a los principiantes y les demos las habilidades y confianza para seguir adelante y crear sus propios sitios web desde cero. Al final de este curso, construirás tus propios proyectos de blog personales totalmente personalizados con múltiples páginas. El proyecto tendrá una página de aterrizaje de tamaño completo para dar un poco de información sobre usted o su bloque. El tema y el diseño en este blog depende completamente de ti. Te animo a que propongas tus propias ideas. Esto luego enlazará a otras páginas, incluyendo tu propia página de blog. Ahora solo crearemos el sitio para que se vea bien en las pantallas de computadora. También nos aseguraremos de que el diseño también sea receptivo. Esto significa que cambiará estilos y disposición. Las pantallas de diferentes tamaños para verse bien en tamaños móviles y tabletas también. Todas las habilidades que aprenderás se pondrán en práctica de inmediato para reforzar todo y además darte un ejemplo del mundo real de cómo se usan. Después de terminar este curso, tendrás la confianza y también las habilidades para construir más sitios web desde cero usando HTML y CSS junto con algunos recursos y fervor rennin para quitarte, para mantenerte aprendiendo mucho después de terminar. Esto es solo una muestra de lo que aprenderás a lo largo de este curso. Inscribirse en el curso y comenzar su viaje hacia el apasionante mundo de la construcción de sitios web. 2. Herramientas necesarias: Si eres nuevo en construir un sitio web, puede ser común pensar que un tema técnico como este necesitará una computadora súper potente y un montón de herramientas o software. Este no es el caso, sin embargo, mientras tu computadora pueda ejecutar un programa como Word, y también navegar por Internet, estás bien para ir. Para seguir junto con este curso, solo hay dos cosas principales que necesitarás, y ambas son gratuitas de usar y descargar. Primero es algo que probablemente ya tengas si estás viendo este curso, y este es un navegador web. Estaré usando Google Chrome para este curso y también es el que recomendaría. Echaremos un vistazo a las herramientas para desarrolladores de Chrome más adelante en este curso también. Si tienes alguno de los otros navegadores web principales, como Firefox, Safari, Internet Explorer, o el nuevo Microsoft Edge, esto está completamente bien de usar también. Es posible que desee descargar más de uno para probar su sitio web en diferentes navegadores. Siguiente arriba es un editor de texto. Este es un lugar donde escribirás tu código. Aquí, puedes ver algunos editores de texto populares disponibles, y también los enlaces a cada uno. En primer lugar, está Visual Studio Code, que usaré, y también está disponible para Mac, Windows o Linux. Es gratis para descargar y usar. Atom también es popular y está construido por GitHub. Tiene un buen back-in. Está disponible para Mac, Windows y Linux, y también de uso gratuito. Sublime Text también ha sido popular desde hace mucho tiempo y es un gran editor de texto web. Este es el único aquí donde hay un costo para adquirir una licencia. No obstante, es gratuito para descargar y también para evaluar. Actualmente, no hay límites de tiempo en el periodo de evaluación. Nuevamente, está disponible para Mac, Windows y Linux. Bracket también es popular y tiene una buena vista previa de la vida, lo que significa los cambios como se muestra en el navegador a medida que escribes, sin tener que refrescar la página. Esto también está disponible para Mac, Windows y Linux también. En realidad se puede escribir un sitio web con cualquier programa de texto, como Word, pero hay muchos beneficios al usar un editor dedicado para la web, como codificación de colores, resaltado de flechas, y autocompletado, por nombrar algunos. Como dije antes, estaré usando el primero aquí llamado Visual Studio Code. Dirígete a ahí u otro de tu elección y descarga el software para tu plataforma. Una vez hecho esto, vuelve en el siguiente video y echaríamos un vistazo más de cerca a lo que es HTML y CSS. 3. ¿Qué es HTML y CSS?: Durante este curso, estaremos construyendo nuestro proyecto y aprendiendo sobre HTML y CSS. ¿ Qué es exactamente HTML y CSS? Bueno, empezamos con HTML. HTML significa marcado de hipertexto language.HTML es el lenguaje de marcado estándar para crear sitios web y aplicaciones. Actualmente, la última versión es HTML5 y en cada versión que se introduce, se agregan nuevas características. Hablaremos de estos también para el curso. Los elementos HTML son los bloques de construcción de una página web. La mayoría de los elementos consisten en una etiqueta de apertura y cierre con algún contenido en el medio. lo que este ejemplo en la parte inferior es una etiqueta p, y esto se utiliza para agregar párrafos de texto. Tenemos la etiqueta de apertura a la izquierda y luego una etiqueta de cierre a la derecha con la slash hacia adelante. Después colocamos algún contenido en el medio. Para este ejemplo, es simplemente algún texto. También podemos agregar algunos atributos a estos elementos HTML y brinda alguna información adicional. Agregamos estos atributos a la etiqueta de apertura. lo que podemos ver con el ejemplo en la parte inferior, hemos agregado un ID atributos a este párrafo de texto y después le dimos a su ID un nombre de texto de encabezado. Podemos entonces utilizar este nombre de texto de encabezado. Posteriormente para agregar algo de CSS o incluso trabajar con él usando JavaScript. A continuación tenemos CSS. CSS es sinónimo de hojas de estilo en cascada. Se trata de un lenguaje de hoja de estilo utilizado para describir el aspecto y también el formato de un documento web escrito en un lenguaje de marcado, como HTML. CSS se utiliza para estilizar, posicionar y maquetar. CSS3 es la última versión, que incluye muchas características nuevas, como agregar transformaciones y animaciones, por mencionar algunas. Entonces a medida que pasemos por el curso, aprenderemos mucho más sobre HTML y CSS, pero por ahora, solo recuerda que HTML proporciona el contenido de la página web. Entonces usamos CSS para cualquier estilo y diseño. 4. ¡Elige tu tema!: Estamos casi listos para saltar a empezar a construir nuestro proyecto y comenzar a aprender sobre HTML y CSS. Justo antes de hacer esto, me gustaría tomarme un momento para pensar en un tema para su proyecto. En la pantalla aquí, este es un proyecto en el que voy a construir. El cual será un blog personal de viajes. Por supuesto, eres libre de seguir conmigo, y seguir con el mismo tema de los viajes. No obstante, les animaría a tomarse un momento para pensar en algo personal para ustedes. Podría ser algo como un libro deportivo, un blog sobre desarrollo web o codificación en general, o incluso sobre tu comida favorita por ejemplo. El proyecto que construirá se puede personalizar para adaptarse prácticamente a cualquier tipo de blog que se te ocurra. Adelante y sé tan creativo como te guste. A lo mejor anota algunas ideas y una vez que tu idea haya sido finalizada. Después podremos pasar al siguiente video donde iniciaremos nuestro proyecto. 5. Comienza un proyecto web: Ahora vamos a saltar directamente a construir nuestro proyecto de blog. El landing page será la principal página de entrada de la página web. Tiene sentido comenzar aquí. También es la página más sencilla y enlazará con el resto de las páginas que creamos también, como el blog y la página sobre mí. Crear un nuevo proyecto de sitio web es relativamente simple. Empezamos con una nueva carpeta de proyecto. Esta carpeta contendrá entonces todos los archivos para nuestro sitio web, como las diferentes páginas y también las imágenes. Voy a colocar la mía en el escritorio para un fácil acceso. Puedes agregar el tuyo en cualquier lugar que encuentres más conveniente. Tal como los documentos. Sí, voy a control-click o hacer clic derecho y crear una nueva carpeta. Voy a llamar a esto el bloqueo de problemas. Por lo que las pantallas son de todos modos, encontrar conveniencia. Ya deberías haber descargado Visual Studio Code ya, o un editor alternativo. Para abrir este proyecto en el editor todo lo que necesitas hacer es seleccionar tu editor de código y luego ir al archivo. Puedes seleccionar tu carpeta desde ahí. O simplemente puede arrastrar en la carpeta del proyecto y comenzar a trabajar. Por lo que ahora ves la carpeta del proyecto dentro de la barra lateral. Podemos ver el título de Blogger de Viajes. Ahora es el momento de crear el nuevo archivo para contener el código de nuestra página de destino. Tradicionalmente, la página principal o la página predeterminada de un sitio web se llama la página index.html. Vamos a crear esto ahora. Por lo que puedes ir a Archivo y Nuevo Archivo o Comando o Control N para crear una nueva página web. Se quiere guardar esto de inmediato como la página index.html. Asegurándose de que esto tenga la extensión HTML al final, porque la página web será un HTML. También asegúrate de que esto esté ahorrando dentro del proyecto de blog de viajes también. Está guardado y ahora verás la nueva página dentro de la carpeta del proyecto, en la barra lateral. Sólo voy a escribir Hola en el index.html y luego guardar eso. Si quieres abrir esta página web arriba en el navegador para ver los contenidos, todo lo que tenemos que hacer es abrir la carpeta del blog de viajes y luego hacer doble clic en el index.html. Ya podemos ver Hola! Dentro del navegador. Entonces esto es solo texto plano en lugar de HTML válido. Pero felicitaciones por conseguir que la primera página web se abra dentro del navegador. Ahora este proyecto está configurado. Pasemos ahora a ver cómo estructurar correctamente una página web. 6. Estructuración de páginas HTML: hora de crear páginas HTML, que van a ser leídas por el navegador, es realmente importante estructurar nuestro código correctamente. El primero que tenemos que hacer en nuestra página de índice es agregar una declaración doctype. Esto declara qué versión de HTML estamos usando. HTML5 es la última versión, y el doctype se ve así. Abre las etiquetas, usa un signo de exclamación y luego doctype y HTML. Doctype s las primeras versiones de HTML, eran mucho más largas y más complicadas, pero HTML5 ahora es agradable y simple. El doctype no distingue entre mayúsculas y minúsculas. Pero siempre me gusta escribirlo en mayúsculas de todos modos, entonces tenemos las raíces elementos HTML y eso se ve así. Por lo que la mayoría de los elementos HTML, hay una etiqueta abierta y también una etiqueta de cierre que comienza con la barras inclinadas hacia adelante. Este es el elemento de ruta principal, lo que significa que se debe agregar todo lo demás entre estas etiquetas, siendo el doctype la única excepción. Dentro de la etiqueta de apertura, voy a agregar un atributo de lenguaje. Un atributo es solo alguna información adicional sobre los elementos. Voy a estar creando un sitio en inglés, así que el código del idioma es “en”. Entonces agrega los atributos del lenguaje que solo voy a establecer en “" en”. Si quieres utilizar un idioma diferente, puedes encontrar una lista completa buscando códigos de idioma HTML y luego selecciona tu idioma desde allí. Este elemento HTML principal ahora contiene dos elementos anidados en su interior. En primer lugar, tenemos la sección de “cabeza”. Justo así. De nuevo, esto tiene las etiquetas de “apertura” y también las de “cierre”. El apartado contiene datos a veces referidos como metadatos, que es información sobre el documento HTML. Esta información no se muestra dentro del navegador, pero proporciona información importante sobre su sitio web, como el título del sitio, la descripción, y también enlaces sobre archivos a los que veremos más adelante. Entonces otra sección es el cuerpo. Por lo que la etiqueta de cuerpo de apertura y luego la etiqueta de cierre con la varilla hacia adelante. Entonces al igual que un humano tendría la sección de cabeza arriba y luego la sección de cuerpo. Esta sección contiene todo el contenido de los sitios web que se muestra dentro del navegador, como cualquier texto o cualquier imagen. Entonces básicamente el cabezal contiene los datos de nuestro sitio web los cuales no se muestran. Y el cuerpo es para el contenido de nuestro sitio web el cual se muestra en el navegador. Ahora podemos agregar algunos contenidos en un costado de la sección del cabezal. En primer lugar están los metadatos. Añadamos el metaelemento. El metatag no contiene etiqueta de cierre. Dentro de aquí podemos agregar un atributo llamado el conjunto de caracteres. Aquí podemos especificar la codificación de caracteres para la página web. El más comúnmente utilizado se llama UTF-8. Se puede encontrar la lista de juegos de caracteres disponibles dentro de los recursos. El último metatag que voy a añadir es para la ventanilla. Entonces de nuevo, abre la meta etiqueta esta vez, el nombre es igual a “viewport”. El viewport es el área visible de la página web. En el pasado solía ser sólo una pantalla de computadora. Pero desde los teléfonos inteligentes y las tabletas, el tamaño de la ventana gráfica ahora puede variar considerablemente. Por eso es importante esta etiqueta de viewport. En primer lugar, agregamos el contenido y establecemos el ancho del contenido para que sea igual al ancho del dispositivo. Esto permite que el ancho de la página sea igual al ancho del dispositivo en el que se está viendo. Después separados por una coma, podemos agregar la escala inicial para ser igual a 1. Esto establece el nivel de zoom cuando se carga la página por primera vez. Esto puede ayudar a mantener el zoom consistente al girar dispositivos de paisaje a retrato, por ejemplo. Por último, voy a añadir el título del sitio justo debajo. Por lo que esto tiene la apertura y las etiquetas de título de cierre. Con la varilla delantera para la etiqueta de cierre, entonces podemos tener el título dentro. Entonces voy a llamar a mi “Blog de Viajes de Chris Dixon”. Entonces da esa caja fuerte. Por lo que este elemento de título se mostrará dentro del navegador. Entonces si pasamos a Google Chrome y golpeamos refrescar, ahora vemos que el título aparece en la pestaña superior ahí. Entonces esta es la estructura básica que necesitamos para cualquier página HTML. Si todo esto es nuevo para ti no te preocupes por memorizar todos los temas aún. Usaremos la misma estructura en todas nuestras páginas. Por lo pronto se volverá más familiar. Sé que esta parte puede parecer un poco aburrida. Todavía no estamos viendo nada en la pantalla. Pero pasaremos ahora a agregar algo más de contenido en la página de aterrizaje. Por lo que a continuación agregaremos la sección de cabecera, que contendrá el título del sitio y también los enlaces de navegación a otras páginas. 7. Creación del encabezado: Ahora es el momento de comenzar a agregar un encabezado de sitio. Este encabezado contendrá el título del sitio y también los enlaces a otras páginas. También podemos reutilizar código y tener un encabezado consistente en todas nuestras páginas. Para comenzar eso, inicia en la página index.html y agrega esto entre las etiquetas de cuerpo. Justo debajo de la abertura para el cuerpo. Podemos abrir las etiquetas de encabezado y de nuevo, como la mayoría esencialmente apertura y también el cierre interior. El elemento de cabecera no es obligatorio. No obstante, es un elemento proporcionado cadenas, hey, HTML5. Por lo tanto, tenga sentido hacer uso de ella. El elemento real en sí no se mostrará en la pantalla. Por lo que guardamos y refrescamos. Todavía no podemos ver ningún contenido dentro del navegador. Pero en cambio describe al navegador qué contenido contendrá. Vamos a seguir adelante y agregar algo de contenido entre las etiquetas de encabezado. Comience con el nombre del sitio en la parte superior de la página. Vamos a agregar esto dentro de las etiquetas H1. Por lo que H uno es un encabezamiento elementos. Se agregan encabezamientos con etiquetas de la página uno justo a través de H6. Siendo H1 el nivel superior de los más importantes citados en y H seis siendo el menos importante. El texto que se muestra también es más grande para H1 y luego se vuelve poco a poco más pequeño hasta H6. Nuestro título de sitio es una pieza importante de información. Por lo que este es un buen uso para la etiqueta H1. Voy a añadir el título del sitio en medio del blog de viajes de Chris Dixon. Simplemente dale ese guardar y luego podremos dirigirnos al navegador y luego refrescar. Ahora vemos el encabezado en la parte superior de la página. Haremos uso del sobretamaño de las rúbricas a medida que pasemos por estos proyectos. A continuación, podemos agregar los enlaces de navegación a las otras páginas. También tenemos unos elementos circundantes para estos dos llamados nav. Entonces justo debajo de H1, voy a crear los elementos de navegación con la etiqueta de apertura y cierre. Tanto el nav como el encabezado, son lo que llamamos elementos semánticos. Significa que describen el contenido dentro de ellos. Esto se debe a que un motor de búsqueda como Google puede ver estos elementos y saber exactamente cuáles son. Por lo que el encabezado contendrá estos encabezado del sitio y el nav contendrá la navegación del sitio y así sucesivamente. La mayoría de las veces creamos nuestros enlaces usando una lista. Por lo que no navegamos, podemos crear una lista desordenada mediante el uso de las etiquetas UL. Un ordenado simplemente significa que cada elemento de la lista no será numerado. Por ejemplo, 123, y así sucesivamente para cada elemento. Después para crear cada elemento en la lista, o en nuestro caso, la lista de páginas. Agregamos las etiquetas LI y luego dentro del objetivo podemos agregar el nombre de cada uno de nuestros enlaces. Voy a empezar con la página de inicio. Entonces nuestro segundo enlace, nuevo dentro de las etiquetas LI va a ser la página sobre mí y la tercera va a ser para el libro. Por lo que el nombre que añadimos entre estos ítems de la lista, va a ser el nombre que veamos en la pantalla. Si vas a repasar y refrescas el navegador. Ahora vemos a casa sobre mí y también el blog. Se puede ver por defecto que es una viñeta junto a cada elemento de la izquierda. Si quieres que esta lista sea numerada, por ejemplo 1,2,3, podemos cambiar las etiquetas UL. ¿ Tenemos aquí dos OL para una lista ordenada? Esto se ve muy diferente al sitio de meta, sin embargo, que miramos antes. Esto se debe a que sólo hemos agregado el contenido HTML. El estilo y el diseño CSS harán que esto se vea mucho más bonito en un video posterior. 8. HTML semántico y diseño: Quiero dar un paso rápido atrás de agregar a este sitio web, y tomar un momento para mirar lo que llamamos elementos semánticos. Los elementos semánticos son simplemente elementos que describen claramente su contenido, no sólo al navegador sino también a otros desarrolladores, mirando tu código. Ya en nuestra página de índice, hemos utilizado algunos tanques semánticos, tanto el encabezado como el nav se clasifican como semánticos, ya que le digo al navegador que el contenido entre ellos, cabecera cebra o una sección de navegación. Este es un diagrama de un sitio web típico. El cuerpo contiene todo el contenido que vemos en la pantalla, como ya sabemos. Aquí vemos algunas secciones típicas de un sitio web. Cada sección tiene un div elementos. Un div es una sección o una división utilizada para agrupar contenidos juntos. Como puedes ver aquí, usamos uno para cada parte del sitio web, cada uno con un atributo id, por lo que podemos agregar un estilo usando CSS. Es así como se han hecho las cosas desde hace mucho tiempo y siguen siendo. Los elementos Div están perfectamente bien de usar. De hecho, los usaremos durante este proyecto también. Aquí agregamos algunos elementos div más, esta vez anidados dentro de los existentes. Nuevamente, esto está bien y también muy común. No obstante, desde HTML cinco, ahora tenemos algunos elementos alternativos para usar, igual que puedes ver aquí. En lugar de usar una etiqueta div genérica, ahora podemos usar estos elementos semánticos o descriptivos. Tanto el div como también todos los nuevos elementos que se ven aquí, aún tienen una abertura, y también una etiqueta de cierre para rodear el contenido, igual que el encabezado y el nav que antes mirábamos. También hay principal, que contiene el contenido principal de la página web. Esto no es para ser utilizado para ningún contenido que se repita en otras páginas como las barras lateral. Por ejemplo, el elemento aparte que vemos a la derecha se utiliza a menudo para barras de lado, y generalmente se repite en todo el sitio web, por lo tanto es mejor mantenerse separado del contenido principal. Como puedes ver, también hay un elemento para el pie de página ahora también. Entonces este es el ejemplo que hemos visto antes, pero esta vez con los elementos semánticos más nuevos. Aquí puedes ver un elemento de artículo el cual es ideal para usos como una publicación de blog o un widget, que tiene contenido autónomo. También hay un elemento de sección a continuación también. Esto, como suena, define la sección de nuestro documento web. Esto es para agrupar el contenido relacionado. También tenemos ahora el elemento nav, que ya hemos visto. Esto es para secciones de navegación. Tenga en cuenta que hemos colocado esto dentro del encabezado para este ejemplo. No obstante, esto no es necesario. Puedo ser colocado fuera del encabezado o incluso anidado dentro de las áreas también. También podemos llevar las cosas aún más allá reutilizando elementos, como el encabezado o el pie de página para definir las secciones de encabezado y pie de página de un artículo, o incluso reproducir secciones dentro de otros elementos, como la barra lateral. Recuerda sin embargo, esta es solo una forma común de usar estos. No se nos obligan de ninguna manera en particular, y el caso de uso también diferirá dependiendo del estilo de sitio web en el que estés construyendo. 9. Enlaces, anidación y sangría: Hemos agregado nuestra lista de páginas a la navegación. Pero si haces clic en ellos, no parece que pase nada. ¿ Es porque sólo los hemos agregado como lista en lugar de decirle al navegador que deben enlazar a otras páginas? Esto lo hacemos agregando un elemento A que significa ancla. Esto se puede agregar entre las etiquetas LI, así como esto. Voy a cortar primero el texto de inicio y luego agregar las etiquetas A. Esto tiene una etiqueta de apertura y una etiqueta de cierre y luego podemos pegar el texto de nuevo dentro. Voy a hacer lo mismo por el sobre mí. Voy a cortar el texto y añadir el elemento A y pegar esto de nuevo dentro y luego lo mismo para el blog y darle a eso un guardado. Entonces podemos agregar un elemento a la etiqueta A llamada la HREF. HREF simplemente nos permite agregar una ubicación a la que enlazar. Estaremos enlazando a otras páginas, así que vamos a añadir aquí los nombres de nuestras páginas. Agrega el atributo HREF dentro de la etiqueta de apertura. El index.html volverá a enlazar a la página de inicio, por lo que este va a ser index.html. Esta es una ruta de archivo relativa. Voy a dejar la página sobre mí vacía por ahora ya que esto será un reto para ti más adelante en el curso. no hemos creado la página del blog, pero lo agregaremos pronto. Para prepararme para esto, también voy a agregar el HREF dentro de aquí y esto va a enlazar a la página blog.html. Dale a eso un guardado y luego si pasamos al navegador y golpeamos refrescar, ahora podemos ver que el hogar y el blog ahora se convierte en un enlace. Podemos ver el subrayado y también el cursor cambia a un símbolo de mano para mostrar que se trata de un enlace. Demos click en el “Blog” y puedes ver la página no se encuentra porque aún no hemos creado la página del blog. Volvamos atrás y el enlace Inicio debe mantenernos en la misma página. Con estos enlaces funcionando ahora, quiero echar un vistazo rápido a la anidación y sangría. Ya hemos utilizado ambos dentro de nuestro editor de texto. Ya hablamos de cómo podemos anidar elementos dentro de una lista, igual que anidar el NAV dentro de la sección de encabezado. Con los enlaces NAV que acabamos de agregar, esto también es realmente importante. Si echamos un vistazo más de cerca a este elemento de la lista, vemos que tenemos el texto de inicio en el medio. Después trabajando hacia afuera, vemos las etiquetas A a cada lado de este texto. En tercera fila, tenemos las etiquetas LI circundantes en el exterior. Estos son entonces rodeados por las etiquetas UL y así sucesivamente. No anidar correctamente es un error común de principiante y uno que a menudo hace que su sitio web no se muestre como se pretendía. Esto es algo para tener cuidado y algo que puede evitar cualquier problema. sangría es cuántas veces o espacios se establece cada línea desde la izquierda. Tu editor de texto puede hacer esto automáticamente por ti, como puedes ver el mío tiene. A menudo verás sangría el equivalente de dos o cuatro espacios dependiendo de tu preferencia. Por ejemplo, podemos ver tanto las etiquetas del cuerpo sangradas en el mismo nivel con esta línea aquí. Entonces por dentro, vemos las siguientes que te encuentras, que son las dos etiquetas de encabezado, y ambas están en línea también. Esto luego continúa dependiendo de cuántos elementos estén anidados dentro de una lista. No hay norma que debemos seguir al sangrar. Una ley es justo por la preferencia personal. No obstante, el uso correcto y consistente hace que tu código sea más legible y también podemos ver más claramente qué contenido está anidado en su interior. 10. Etiquetas Div y texto: Pasemos ahora a añadir el contenido HTML final a esta página de destino. Recuerda cuando miramos las diapositivas hace unos videos. Miramos elementos descriptivos y también usando elementos div. Bueno, voy a crear un elemento usando un div como contenedor para este texto principal de “Hola, soy Chris, sígueme en mi viaje por el mundo”. Empecemos por pasar al index.html. Debajo de la etiqueta de cabecera de cierre voy a crear esta sección div. Por lo que la etiqueta de apertura y también la etiqueta de cierre. Entonces podemos anidar aquí dentro un elemento p. El elemento p representa un párrafo de texto y podemos usarlo para agregar nuestro texto dentro. Entonces voy a añadir mi texto dentro de aquí. Por supuesto, agrega los textos que se adapten a tu blog. Puede ser absolutamente cualquier cosa que quieras. Entonces “Hola, soy Chris, sígueme en mi viaje alrededor del mundo”, y luego dale a eso un “Guardar”. Ve al navegador, y luego pulsa “Refrescar”. Ahora podemos ver que se está agregando la línea de texto. También podemos agregar más de un elemento p también y esto separará cada bloque de texto en una nueva línea, también con algún espaciado en el medio. Entonces este es ahora todo el contenido que ves en la pantalla. En comparación con el blog terminado aunque no se ve muy bonito. Pronto entraremos en el estilo con CSS. En primer lugar, hay algunos elementos que puedes agregar al HTML para cambiar el texto. Verás en esta versión terminada algunas cosas. En primer lugar, detectar una división en dos líneas. También se enfatiza la palabra 'mundo'. Todo esto se hace con etiquetas HTML. En primer lugar, para dividir el texto en una nueva línea, simplemente agregamos un elemento de ruptura donde queremos que ocurra este descanso. Voy a añadir el mío justo después del nombre de Chris. Entonces ve a las etiquetas p. Entonces podemos agregar un elemento de ruptura. Este es uno de los pocos elementos que no tiene etiqueta de cierre, así que estamos bien dejarlo igual que está ahí. Ahora si refrescamos, vemos después de la palabra Chris, que se ha creado la segunda línea. El motivo por el que esto no tiene una etiqueta de cierre es simplemente porque no agregamos ningún contenido dentro. Se acaba de agregar dondequiera que lo necesitemos. Ahora podemos agregar algunas etiquetas alrededor del mundo texto, por lo que destaca. En primer lugar, podemos envolver la palabra mundo con etiquetas m. Por lo que la m tag justo antes, y también la etiqueta de cierre justo después. El elemento m agrega énfasis extra en el texto y normalmente se muestra en el navegador como cursiva. Podemos ver guardando eso y luego refrescando el navegador. Ahora podemos ver que la palabra ha cambiado a cursiva. También, podemos agregar un elemento fuerte. Podrás rodear toda esta sección m con las etiquetas fuertes. Entonces agrégalo justo antes de la etiqueta de apertura y luego justo después de la etiqueta m de cierre. El elemento fuerte le da a los textos una fuerte importancia. Esto también se muestra típicamente en negrita. Nuevamente, esto enfatiza la importancia de entender cómo funciona la anidación. Como tenemos la palabra en el centro, y luego la etiqueta m que lo rodea y luego finalmente las etiquetas fuertes en el exterior. Después vuelve al navegador y luego refresca. Se puede ver que el texto es un poco más audaz. Puede ser difícil ver el elemento fuerte en este momento pero será más visible más adelante cuando aumentemos el tamaño del texto y además añadamos una imagen de fondo. Entonces con todo HTML ahora en su lugar. Pasemos ahora a agregar algo de estilo a esta página. 11. CSS interno y fuentes de Google: A pesar de que estamos aprendiendo mucho sobre HTML hasta ahora, sitios web realmente no comienzan a verse bien hasta que agregamos algo de estilo, los estilos CSS pueden cambiar nuestra apariencia de sitio web de algo como lo que actualmente tenemos aquí a entonces algo como esto, que es el sitio de meta. Una ola, me refiero a CSS, es agregar etiquetas de estilo a la sección principal de nuestros documentos. Si abre el editor de texto y luego ve al index.html. Vuelve a subir a la sección de cabeza superior, y luego justo debajo del título podemos agregar los elementos de estilo. Justo así. Esto tiene la apertura y también la etiqueta de cierre. Podemos agregar cualquier estilo que queramos entre estas dos etiquetas. Esta forma de hacer las cosas se llama CSS interno. Esto se debe a que los estilos sólo están destinados a ser utilizados internamente en esta página. Posteriormente también cubriremos una forma alternativa de hacerlo. Entonces necesitamos elegir qué elementos queremos darle estilo, mediante el uso de un selector. Un selector puede ser un nombre el de los elementos que ya hemos utilizado, como encabezado, p o li, por ejemplo. Voy a empezar seleccionando el HTML, así que agrega HTML ahí. Dado que el HTML es un elemento raíz, todos los estilos que agreguemos aquí se aplicarán a todo el sitio. Cualquier regla de estilo CSS para el selector necesita colocarse dentro de un par de llaves, así como esto. Ya que es selector HTML aplica a toda la página, un buen uso para esto tal vez para agregar la fuente que se desea utilizar. Para mantenerlo consistente en todo el sitio web, podemos usar la propiedad font-family para establecer la fuente. Puedes ver el editor de texto automáticamente nos da algunas sugerencias para que las utilicemos. Voy a elegir a Arial como ejemplo con el punto y coma al final. Notarás que aparecen tres nombres diferentes, y este es el orden de prioridad. En primer lugar, tenemos a Arial, y esta es la fuente que usaremos si el navegador lo soporta. De no ser así, pasará a Helvética, que es la segunda prioridad. Si ni Arial ni Helvetica están disponibles, se utilizará el apellido genérico, como serif o sans-serif. Esta es una forma de agregar fuentes, otra es visitando un sitio web de fuentes y seleccionando una desde allí. Puedes hacer una búsqueda de fuentes web si quieres echar un vistazo más de cerca a algunos más, una popular son las fuentes de Google. Voy a salir al navegador web y luego buscar fuentes de Google, y este es el sitio web que estaré usando para mi blog. Bajemos a fonts.google.com. Se pueden ver algunos de los populares. Puedes hacer una búsqueda o también acostarte por categoría. El que voy a usar para mi blog se llama arenas movedizas. Voy a hacer una búsqueda para esto y luego golpear “Enter”, y se puede ver la arenas movedizas aparece en la búsqueda. Por supuesto, siéntete libre de elegir uno diferente si lo prefieres. En esto, sólo tenemos que hacer clic en el símbolo rojo más. Después para agregar esto a nuestra página web, bajamos al fondo y ampliamos. Después tenemos el enlace a la hoja de estilo CSS. Este es un enlace a las fuentes de Google, lo que nos permite utilizar esto en nuestro proyecto. Entonces copia este enlace completo. Voy a usar Command o Control C para copiar esto y volver a salir al index.html, y luego tenemos que pegar esto dentro de la sección de cabecera. Voy a añadir esto, solo sopla el título y pega eso. Tenemos que hacer esto porque no estamos usando una fuente web estándar. Necesitamos enlazar a Google para que esto esté disponible dentro de nuestro código, volver a las fuentes de Google. Entonces necesitamos copiar la línea de CSS, que es para la font-family que hemos visto antes. Entonces copia esto y luego si entramos en la sección de estilo, voy a reemplazar la font-family, que usamos antes y pegamos en esta arenas movedizas. Ahora esta fuente no estándar debería funcionar ya que tenemos el enlace anterior. Vamos a dar ese guardar y luego refrescar el navegador, para volver al proyecto y luego refrescar. Ahora podemos ver que el estilo del texto ha cambiado. Esto significa que ahora la fuente está funcionando. A continuación, podemos entonces cambiar el color de la fuente. Simplemente agregamos una propiedad de color para hacer esto. Todavía dentro del selector HTML, va a agregar una nueva línea, que va a ser para el color. De nuevo, mientras escribes esto, verás algunas sugerencias por parte del navegador. Puedes elegir cualquiera de estos colores que prefieras, o puedes usar un selector de color para una mayor gama de colores. Si volvemos al navegador y luego nos dirigimos a Google, voy a buscar selector de color HTML. Uno popular es el de W3Schools, así que voy a seleccionar eso. Aquí podemos seleccionar el color que nos gusta y también ver muchos tonos y variantes diferentes de este color. Simplemente selecciona uno desde el lado izquierdo, y luego podemos reducirlo a un tono más claro u oscuro. A la derecha, nos dan los tonos en lo que se llama formato hex. Esto es lo que se puede ver en el lado derecho, y esto son seis dígitos con el prefijo hash. Entonces podemos usar este color hexadecimal dentro de nuestro CSS. Voy a utilizar un valor de color para mi texto de 1a1a1a. Entonces volvamos al CSS y luego con el prefijo hash, voy a agregar 1a1a1a con el punto y coma al final. Tenemos que asegurarnos de que cada línea termine con un punto y coma y este es el caso de todas las propiedades CSS. Dale a eso un guardado y luego si actualizamos nuestro proyecto dentro del navegador, esto no debería cambiar el color dentro del navegador. El cambio es muy sutil, por lo que puede ser difícil de decir. Si quieres volver a comprobar esto está funcionando, podemos cambiarlo a un color diferente, como el rojo y luego refrescar, y ahora podemos ver claramente que el texto se cambia. Simplemente voy a deshacer ese cambio y luego volverlo a poner a cómo era. Bien hecho si has logrado que todo esto funcione. De lo contrario, revisa cuidadosamente tu código para detectar cualquier error de escritura. A continuación, también querré mostrarte cómo usar clases e identificaciones para seleccionar nuestros elementos. 12. Clases e identificaciones: Hemos mirado la selección de elementos por su nombre de etiqueta, como HTML, encabezado o url. También hay otras formas de hacer esto mediante el uso de clases e ID. Las clases y los identificadores son atributos, que podemos agregar a los elementos. Empecemos por mirar cómo podemos usar una identificación. Si bajamos a la etiqueta de apertura para el encabezado, podemos agregar un atributo ID y darle a éste un nombre de nuestra elección. Voy a llamar a esto los fondos y ahorrar. Ahora podemos usar este nombre de fondo con el prefijo hash. Justo debajo de los calibradores HTML. Debido a que es una identificación, podemos usar lo áspero y luego seleccionarlo con el nombre de los fondos. Una de las razones por las que haríamos esto es porque si tomamos el encabezado como selector, entonces los estilos se aplicarían a todos los encabezados de la página y conciencia de dominio. Si pasamos al sitio terminado, quiero que este fondo agregue el color de fondo gris, que puedes ver aquí. Se nos proporciona una propiedad de fondo para hacer esto. De vuelta en el CSS, podemos agregar el fondo. Voy a dar mi rodilla color hex de d8. También tenemos acceso a la misma gama de colores que antes con texto. Guarda eso, luego pasa al navegador y actualiza el proyecto. Ahora podemos ver el fondo gris ha aparecido detrás de todo el encabezado. Si nos fijamos en los sitios terminados, también podemos ver que el mismo fondo gris también está detrás del texto. No obstante, este no será un buen caso de uso para una identificación. Se supone que un ID solo se usa una vez para una sección única. Si quisiéramos usar los mismos estilos más de una vez, podríamos cambiar este ID para que sea una clase. Abajo en el encabezado podemos cambiar ID para que sea igual a clase. Entonces podemos agregar la misma clase al texto p a otros fondos a estos dos. Por lo que la clase p también es igual al fondo. Entonces cuando se cambie el selector CSS de un duro a ser un punto. Es así como seleccionamos las clases. Ahora si guardamos eso y volvemos al navegador, presiona refrescar. Ahora tenemos los fondos grises en el encabezado y también el texto. Entonces esta es la diferencia entre usar clases e identificadores con CSS. 13. Introducción a Flexbox y al diseño responsivo: El flexbox CSS es una forma relativamente nueva de diseñar y alinear elementos en un sitio web. Pretende hacer el proceso mucho más sencillo de lo que ha sido en el pasado. En el pasado, hemos utilizado hacks y métodos como; tablas, flotadores, o CSS complicado para lograr la capa que deseas. El flexbox ha vendido esto al proporcionarnos algunas formas simples, pero efectivas de diseñar y posicionar artículos. Empezamos definiendo un contenedor flex, como puedes ver aquí. Esto nos permite establecer cómo queremos que aparezcan los elementos flex dentro. Podemos establecer la dirección, la alineación, y cuánto espacio hay entre sí, por nombrar algunos. Además, tenemos el control de los elementos flex individuales también. Por ejemplo, podemos establecer el orden en el que desea que aparezcan, la alineación, y también establecer cómo deben crecer, o reducirse dependiendo del espacio disponible. ¿ Qué significa todo esto para nuestro blog? Bueno, básicamente, se utilizará para diseñar nuestra página web para que sea más adecuada a diferentes vicios del sitio. Cambiar el diseño para diferentes tamaños de pantalla se conoce como diseño web responsive. Vamos a hacer que nuestro blog responda diferentes dispositivos del sitio para una mejor experiencia de usuario. Por encima de la izquierda, tenemos un dispositivo de pantalla pequeña, como un móvil o tabletas pequeñas. El contenido aquí se suele apilar encima de cada otro verticalmente. No obstante, como podemos ver a la derecha, ya que tenemos más espacio disponible en pantalla, podemos agregar más contenido lado a lado. Para lograrlo, simplemente configuramos nuestros contenedores flex, como el encabezado en la parte superior, y otro contenedor para el resto de nuestro contenido que queremos controlar. Aquí, estoy usando un div. Para lograrlo, podemos establecer una propiedad CSS de dirección. Entre esas, la dirección flex nos permite establecer los elementos secundarios para que sean cualquiera de las columnas, cual se apila uno encima del otro, una fila, que es de izquierda a derecha. Para cambiar una propiedad CSS de columna a fila usará una consulta de medios, pero más sobre eso más adelante. Esto es sólo una visión general básica de la flexbox CSS. Tiene muchas más propiedades y opciones de las que podemos ver aquí. También veremos algunos más de estos durante los proyectos, pero por ahora pongamos esto en práctica agregándolo a la sección pesada. 14. CSS de la cabecera, margen y relleno: Ahora tenemos una mejor idea de cómo usaremos el flexbox para disenar nuestra página web. Ahora vamos a trabajar en la sección de encabezados. Entonces vamos a abrir el editor de texto. Entonces vamos a estar diseñando el sitio con un primer enfoque móvil. Esto significa, empezaremos a disenar primero los sitios para un dispositivo móvil, luego construiremos sobre esto para dispositivos más grandes a medida que se disponga de más espacio. Para ello, voy a encoger el navegador para simular un dispositivo más pequeño. Entonces eso se ve bien. Voy a cerrar esta barra lateral, sólo para darnos un poco más de espacio. Entonces dentro de la sección de estilo. Empecemos agregando el selector de encabezado, al CSS. Entonces justo debajo de los fondos, va a agregar el encabezado dentro de aquí, con las llaves. Entonces con dispositivos más pequeños quiero alinear todo el texto en el centro. Podemos hacerlo agregando una propiedad text-align. Voy a poner esto en el centro. Así que guarde eso y refresque. Ya podemos ver el texto está dentro del centro del encabezado. También tenemos la opción de izquierda y derecha. A continuación, como hemos visto en las diapositivas de flexbox, queremos que set header sea un contenedor flex. Podemos hacerlo estableciendo el tipo de visualización, para que sea igual a un flex. Los lodos refrescan el navegador. Verás el contenido ahora se muestra a continuación, lo que sea. Esto es, porque por defecto la dirección del flex está establecida en fila. Es así como queríamos buscar dispositivos grandes. Pero con dispositivos más pequeños, podemos volver a ajustar esta dirección flex a columna. Entonces dentro de la sección de encabezado, agreguemos la propiedad de dirección flex. Después cambia esto de nuevo a columna. Dale a eso un ahorro. Veamos cómo se ve esto. Genial. Por lo que ahora se puede ver el contenido se apila uno encima del otro. Por lo tanto, ten en cuenta a medida que recorres los sitios. Estas son las propiedades CSS, que estoy agregando para mi blog. No siéntete libre de realizar los cambios que quieras que mejor se adapte a tu página web. Entonces a continuación voy a agregar algo de CSS a este título de encabezado h1, contenido dentro del encabezado. Por lo que ya hemos mirado cómo podemos darle estilo a esto agregando una clase o un id, a este h1. O [inaudible] h1 es así. Entonces vamos a añadir el encabezado h1. Esto asegura que seamos específicos y solo apuntamos al h1 dentro del encabezado. Esto también funciona para más elementos también. Voy a agregar algún margen y relleno a esto para espaciar. Antes de hacer esto, echemos un vistazo rápido a qué margen y relleno es? Digamos que estamos colocando en un elemento de artículo en nuestro sitio. Yo quisiera que agradable igual espacio alrededor, como vemos aquí. Si solo agregamos en este artículo, por defecto, puede verse más parecido a esto. Abonado contra el contenedor exterior. Para mantener algo de espacio en el exterior del elemento. Podemos agregar algún margen, igual que puedes ver aquí. Además, podemos agregar espacio al interior de los elementos. Esto se llama relleno. Por ejemplo, si añadimos una imagen dentro de aquí, relleno se aplicaría dentro del artículo, creando espacio alrededor de la imagen como podemos ver aquí. Entonces básicamente, el margen está fuera de los elementos y el relleno está dentro. Entonces ahora sabemos la diferencia entre margen y relleno. Podemos ver esto en acción con el encabezado h1. Si miramos el encabezado dentro del navegador, podemos ver que hay algún espacio ya por encima de estos elementos h1. Esto está siendo aplicado por el navegador como predeterminado. Podemos quitar esto por repentinamente margen volver a cero. Entonces agrega esto dentro del encabezado h1, dale a eso un guardar y luego refresca. Ahora puedes ver que se ha movido hacia arriba, por lo que se ha eliminado el margen predeterminado. Por lo que esto elimina el espacio predeterminado arriba, pero deja todo atado. Podemos agregar algo de espacio extra en el interior aquí, agregando un volumen de relleno. Entonces justo debajo del margen, voy a agregar algo de relleno. [ inaudible] mía a 15 píxeles. Pero por supuesto, haz lo que se adapte a tu blog. Entonces refresca. Ahora puedes ver tenemos un bonito espacio acolchado entre los elementos. Lo último que quiero hacer en este video es quitar las balas predeterminadas, a la izquierda de los ítems de la lista y también centrar el texto. Ahora podemos apuntar a los ítems de la lista usando el selector LI. Para eliminar estas viñetas, todo lo que necesitamos hacer, es establecer la propiedad de estilo de lista para que sea ninguna. También hay opciones para los cambios a otros estilos. Tal como un cuadrado o incluso una imagen. Entonces dale a eso un guardado y luego refresca. Ahora podemos ver que las balas han sido retiradas. Ahora espaciemos esto. Voy a aplicar algo de relleno. Justo debajo del estilo de lista. Voy a establecer que esto sea un valor de 10 píxeles. Por lo que ahora tendremos un buen espaciado alrededor de cada uno de los enlaces. Entonces las cosas están empezando a verse un poco mejor ahora. Pero podemos ver que los elementos nerviosos aún no están en el centro. Entonces, ¿por qué está arriba? Para entender mejor, necesitamos ir a las herramientas de desarrollador del navegador. Entonces solo voy a expandir un poco más el navegador. Entonces voy a controlar o hacer clic derecho y luego bajar a inspeccionar. Entonces si hacemos click en esta pequeña flecha de la esquina. Después pase el rato hasta que veamos la UL aquí arriba. Podemos ver tenemos esta sección verde en el lado izquierdo, que parece estar empujando todo, esta sección verde. Si nos desplazamos hacia abajo hasta el fondo, podemos ver la parte verde es el relleno. Por lo que esto significa que el relleno se está agregando por defecto, dentro del navegador. Entonces todo lo que necesitamos hacer es anular esto dentro del CSS. Podemos hacerlo seleccionando la lista desordenada. Después ajustando el relleno a cero. Entonces dale esa actualización. Ahora se puede ver que los enlaces ahora están bien en el centro. Por lo que ahora nuestro encabezado empieza a verse mejor. Ahora hagamos que esto se vea aún mejor pasando a agregar nuestra imagen de fondo. 15. Dónde encontrar grandes imágenes de stock: Durante la construcción de este proyecto y también futuros proyectos. Siempre te encontrarás con la necesidad de encontrar algunas imágenes de alta calidad para usar en tu sitio web. Este blog no es diferente, y aquí quiero mostrarte algunos recursos para encontrar algunas imágenes de buena calidad. El primero es pixabay.com, y este es un sitio web donde puedes encontrar imágenes en stock gratuitas, y éstas aparecen listadas bajo la licencia Creative Commons. Esto significa que es gratuito para uso comercial, y no necesitamos agregar ninguna atribución a la oferta ni al sitio web. Encontrar imágenes es sencillo. Podemos utilizar la facilidad de búsqueda o incluso hacer click en el Explore. Entonces, por ejemplo, si quisiéramos una foto de un tigre, podríamos hacer una búsqueda, y luego si seleccionamos una, todo lo que tenemos que hacer es dar click en la descarga gratuita. Aquí puedes ver alguna información sobre la licencia. Se puede ver que la imagen es gratuita para uso comercial y no necesitamos escribir ninguna atribución. Por lo que este es un buen sitio web para usar para imágenes de alta calidad. Otro es un sitio web llamado Unsplash, y puedes encontrar este arte Unsplash.com. Las imágenes que puedes encontrar aquí también son gratuitas de usar y nuevamente, puedes tener facilidad de búsqueda fácil o dar clic en las imágenes y luego presionar el botón de descarga. También notarás que hay un popup diciendo que no se requiere el crédito pero se agradece dar a los fotógrafos algo más de exposición, y hay algún texto a continuación para incrustar en la página web si no querías en esto. Otro gran recurso es el sitio web Wiki media Commons. Todos los días hay una nueva imagen del día que puedes usar y todo lo que necesitas hacer es hacer click en la pestaña de imágenes en la parte superior, luego poder seleccionar imágenes por categoría. Las imágenes de aquí son gratuitas de usar, y también puedes conocer más información sobre la licencia en el lado izquierdo y la sección Bienvenida. Esto simplemente básicamente tiene algo de información, diciéndote cómo las imágenes son libres de usar. Por último, tenemos un sitio web llamado Shutterstock.com. Es posible que ya hayas escuchado esto como probablemente el más grande, y sí tiene la más amplia gama de imágenes disponibles. También puedes descargar cosas como pistas musicales y videoclips a. No obstante, hay un costo para esto. Shutterstock es uno de los de aquí que no es gratis. Puedes consultar los planes de precios a haciendo clic en el enlace aquí. Otra forma de encontrar imágenes es una búsqueda en Google. Por lo que eso también se busca a nuestro tigre. Pero una de las cosas a tener en cuenta es el acuerdo de licencia. Si hacemos clic en las imágenes, una de las formas de filtrar esto hacia abajo a unas que son libres de usarlo pasando al enlace del menú de herramientas y por lo tanto ir a los derechos de uso y los etiquetados para su reutilización con modificación. Si seleccionamos esto no emitido ahora llena las imágenes a las que estamos disponibles de forma gratuita para usar. Pero finalmente, siempre revisa la licencia y el acuerdo antes de descargar cualquier imagen para comprobar que estás bien para usarlas para tu caso de uso. Entonces todo lo que necesitas hacer ahora es seleccionar una imagen que vas a usar para el fondo de tu blog, y luego tener esto disponible para usar en el siguiente video. O si solo quieres seguir conmigo, la imagen se utiliza en este curso proporcionado dentro de la sección de recursos. 16. Imágenes de fondo y posicionamiento en flexbox: Ahora debes tener imágenes uniformemente proporcionadas con el curso, o tus propias imágenes que quieras usar. Para agregar estas imágenes a tu proyecto, todo lo que necesitamos hacer es agregarlas a la carpeta del proyecto. Estos se pueden colocar en cualquier lugar, pero voy a agregar estos dentro de una carpeta de imágenes solo para mantener las cosas organizadas. De vuelta en el escritorio Voy a abrir los proyectos. Aquí puedes ver tengo las imágenes las cuales están disponibles como parte de este curso. No te preocupes si solo tienes la imagen de fondo por ahora. Todo el resto de estas imágenes se van a utilizar más adelante en el curso para el blog. Dentro de esta carpeta de blog de problemas, voy a hacer clic derecho y crear una nueva carpeta llamada imágenes, y luego voy a arrastrar todos estos dentro de la carpeta de imágenes. Por ahora sólo estaremos usando esta imagen de fondo para la página de Londres. Por supuesto que el tuyo podría llamarse algo completamente diferente, así que solo ten eso en cuenta cuando escribamos esto dentro del proyecto. Ahora si vamos a la página index.html, si nos desplazamos hacia abajo hasta el fondo, sopla todo el CSS. Tendremos este texto de “Hola, soy Chris, sígueme en mi viaje alrededor del mundo”. Voy a sumar dos clases. El primero va a ser para el contenedor div circundante. Esta clase se va a llamar imagen de viaje, por lo que este es el nombre de la clase para el contenedor. Después una segunda clase para estos textos de textos de Journey. Como puedes ver aquí tenemos dos clases separadas solo separadas por espacio y esto está perfectamente bien de usar. Ahora tenemos agregadas estas clases, podemos agregar la imagen al contenedor de imagen de viaje usando el CSS. Volver a la sección Estilo. Recuerda que esta es una clase por lo que necesitamos usar los puntos. Queremos apuntar a la imagen de viaje. Podemos agregar una imagen de fondo en CSS con la propiedad background, luego usamos una URL para proporcionar un enlace a la ubicación del archivo. Esto se almacena dentro de la carpeta de imágenes y la imagen se llama fondos dot JPEG. Por supuesto que si el tuyo se llama algo diferente necesitarás cambiar eso. Entonces vamos a añadir algunas propiedades en primer lugar, de no repeticiones. Por defecto, las imágenes se repetirán horizontal y verticalmente. No agregamos repetición porque queremos solo una imagen de tamaño completo. Entonces sensor central. Esto sensor la imagen tanto en el eje X el eje Y por defecto para reemplazarla en la parte superior izquierda. Esto mueve la imagen de nuevo al centro. Entonces finalmente vamos a agregar fijo al final, esto mantiene fija la posición de la imagen cuando nos desplazamos y echaremos un vistazo a estos en tan solo un momento. Dale a eso un guardado, entonces si pasamos al navegador y luego actualizamos, seguimos viendo que no se ha mostrado ninguna imagen en la pantalla. Esto se debe a que la imagen de fondo sólo será la altura del contenido dentro de este div, que es el texto, y este texto sin embargo oculta la imagen por el fondo gris. Si pasamos temporalmente al estilo y quitamos el fondo, cortamos y guardamos y luego actualizamos. Podemos ver que el fondo apenas ha aparecido en la pantalla. Vamos a añadir esto de nuevo. Para evitar esto, podemos establecer la altura de la imagen de viaje en el CSS utilizando la propiedad mínima alta, y podemos agregar esto justo debajo de la propiedad de fondo. Para desplazarse de nuevo hacia abajo a la imagen de viaje, y luego podemos agregar la altura mínima de 100 vh. altura mínima puede ser un valor de píxel, un porcentaje, o por 70 a 100 vh. Este conjunto dice ser 100 por ciento de la altura de la ventana gráfica. El viewport es una pantalla visible del dispositivo. Guarde eso, y ahora si actualizamos, ahora vemos que la imagen está en la pantalla. Algo a notar al desplazarse hacia abajo en el navegador, que la imagen está en una posición fija. Esto se debe a que pusimos esto para que se arregle. Si fuera a quitar esto, podemos ver al refrescar el navegador que la imagen se desplaza con el resto de la página, pero quiero mantener la mía fija ya que me gusta mirar esto. Sigamos con silencio esta sección de imagen. debajo de las alturas mínimas, voy a agregar la propiedad de tamaño de fondo. Pondremos esto para cubrir. El tamaño de fondo se puede ajustar a encubierto para que la imagen cubra todo el área de fondo, y luego vamos a configurar el tipo de pantalla para que sea flex, igual que hemos mirado en el encabezado. Este también va a ser el contenedor flex para nuestros textos, así que guarde eso y si refrescamos, ahora podemos ver que el texto ahora se coloca encima de la imagen en lugar de sentarse encima, como era antes. Ahora podemos usar el flexbox para alinear este texto en el centro, tanto horizontal como verticalmente. Para establecer la línea de texto como verticalmente, podemos establecer la propiedad de elementos de línea. Añadamos esto justo debajo del tipo de pantalla. Alinee los elementos en el centro, y echemos un vistazo a esto. Refrescar. Ahora podemos ver que esto está alineado verticalmente a la imagen. Ahora, para enviar el texto horizontalmente, podemos usar otra propiedad flexbox de justify content y también configurar esto para que sea sensor, así que guarde y dé esa actualización. Ahora podemos ver que el texto se ha movido ahora hacia el centro de la imagen. Ahora puedes ver lo fácil que es alinear texto usando el flexbox. A continuación remataremos agregando los estilos finales para la vista móvil. 17. Estilo final para pantallas pequeñas: Por lo que ahora también podemos agregar un poco de estilo al texto. Obtenemos este texto, una clase de texto de viaje. Añadamos esto al CSS justo a continuación. Entonces, comencemos agregando la línea de texto de sensor. Hace un poco más pequeño. Después quieres aumentar el tamaño de fuente para ser 2ems. Aquí utilizamos un m como tamaño de fuente. También podemos usar tamaños fijos, como píxeles pero em es unidad escalable, un em es igual al tamaño de fuente actual. Tan siniestro 2em hace que sea el doble del tamaño que normalmente sería. Entonces echemos un vistazo refrescando y ahora puedes ver que el texto es mucho más grande. Entonces agreguemos algo de relleno al texto y esta vez quiero agregar 1.5em, y esto funciona igual que el tamaño de la fuente es ser 1.5 veces el relleno, que normalmente sería. Entonces ahora puedes ver que tenemos algo de espacio alrededor del texto. Por último el frontero-radio, y una vez que esa mente sea de diez píxeles. Entonces si refresco, esto nos da un bonito borde redondeado en el exterior del contenedor. Por lo que las cosas empiezan a verse un poco más bonitas. También queremos hacer algo sobre estos enlaces al color no encaja con el resto del sitio y quiero quitar el subyacente también. Si recuerdas estos enlaces, un conjunto con la etiqueta a. Por lo que apuntamos al selector en un CSS. Por lo que debajo de los textos de viaje podemos agregar el a. para quitar el subrayado, podemos establecer la decoración del texto para que se conozca y esto eliminará la línea de debajo de cada uno de los enlaces, y luego también podemos establecer el color como miramos y que mucho el resto del sitio enviando esto al valor hexadecimal de 1a1a1a, luego refrescar y ahora esto se ve mucho más consistente con el resto de los sitios. Lo último que queremos hacer ahora en este video es hacer que este fondo gris sea un poco transparente, que el fondo se pueda ver a través de él. En primer lugar, voy a pasar al CSS y hasta la propiedad de fondo. Voy a agregar un comentario, que se puede usar con una barra inclinada hacia adelante, luego estrella antes, y luego lo contrario de una estrella y una barra hacia adelante, luego comentar esta línea. A Common es una forma de decirle a un navegador que ignore este código. También podemos usar comentarios para escribir notas, tanto para nosotros como para otros desarrolladores. Para agregar esta opacidad transparente, podemos usar un color RGBA en lugar del tipo hex, que acabamos de utilizar. Para convertir este tipo hex coloreado a RGBA. Podemos utilizar una herramienta en línea para esto. Por lo que voy a ir a Google y hacer el navegador un poco más grande y quiero buscar hex a RGBA y sus diversas herramientas que puedes usar. Voy a utilizar el hex color tool.com. No necesito entrar un color. Entonces el valor hexadecimal que usamos antes era d8d8d8, y esto luego lo convertirá a un valor RGBA. Entonces copiar esto y pasar a los fondos puede pegar esto para establecer el fondo al nuevo valor de RGBA, seguido del punto y coma. Los colores RGBA tienen cuatro valores. Establecemos los valores de rojo, verde y azul para comenzar. Entonces el último valor es para la transparencia y este es un valor entre cero y uno. Zero Ser totalmente transparente. Por lo que quiero poner el mío para que no sea 0.7, nos da guardar y luego refrescar el navegador. Por lo que ahora podemos ver detrás del texto tenemos los fondos semitransparentes y la imagen empieza a confirmar. Por lo que ahora hemos terminado el estilo para la vista móvil de pantalla pequeña. A continuación, vamos a echar un vistazo a las consultas de medios para permitirnos agregar estilos para que solo se apliquen en dispositivos más grandes. 18. introducción a las preguntas de medios: Ahora cómo se ven las cosas las queremos en dispositivos más pequeños. Ahora podemos empezar a ensanchar el navegador para simular cómo se verán las cosas en dispositivos más grandes. Entonces podemos usar una consulta de medios para aplicar únicamente CSS cuando el navegador es más ancho de lo que establecemos. Básicamente las pantallas más pequeñas se verán de una manera y las pantallas más grandes pueden tener diferentes diseños y estilos. Si volvemos a Inspect y abrimos las herramientas de desarrollador, podemos hacer clic en esta división aquí y hacer el sitio web más pequeño o más grande y también podemos ver en la parte superior allá que podemos ver el ancho del navegador. Esto nos permite ver un ancho de pantalla donde nuestro contenido empieza a parecer fuera de lugar para dispositivos más grandes. Podemos ver para dispositivos más pequeños este enfoque de ancho completo funciona bien. No obstante, si estiramos el navegador alrededor de 1000 píxeles, parece que es un poco más ancho, las cosas comienzan a verse un poco estiradas y necesitan un cambio. Aquí es donde entran en juego las consultas de los medios. Las consultas de medios nos permiten aplicar únicamente ciertas propiedades CSS si una condición es verdadera. Por ejemplo, podemos cambiar estilos o diseños para dispositivos en paisaje o retrato o podemos establecer un ancho mínimo o máximo para aplicar la consulta de medios. También hay muchas más condiciones que podemos establecer y habrá más enlaces en la descarga de recursos para ver algunas de estas también. Vamos a ir a las hojas de estilo y comienza a agregar estos a nuestro sitio. Abramos el código de Visual Studio y agregamos nuestra consulta de medios. Para establecer una consulta de medios, podemos usar el tipo de medio libre CSS usando @media. Abajo en el fuelle inferior están todos nuestros estilos, va a agregar @media y luego al igual que el estilo de arriba, este tenía su propio conjunto de llaves. Entonces después de @media podemos agregar algunos corchetes para agregar la condición donde se aplicará esta consulta de medios. Quiero que estos estilos se apliquen una vez que el navegador alcance un ancho mínimo de 1,000 píxeles. Recuerda desde antes empezaba a lucir poco sobrecargada de este tamaño. Es por ello que lo he establecido en 1,000 píxeles. Siéntase libre de cambiar su tamaño dependiendo de su sitio. Entonces podemos agregar nuestros estilos CSS dentro de estas llaves, igual que siempre lo hemos hecho. Voy a empezar ajustando el peso máximo para el cuerpo a alrededor de 1,600 píxeles. Esto evitará que el contenido se estire demasiado cuando lleguemos a monitores realmente grandes. Podemos hacer esto dentro del cuerpo. Voy a establecer el ancho máximo de 1,600 píxeles. Esto restringirá el tamaño del sitio web para que las cosas no se estiren realmente en monitores grandes. A continuación podemos establecer los valores de margen. Voy a hacer esto con margen cero auto. Cero no agrega margen a la parte superior e inferior. También hará automáticamente que el margen de la izquierda y la derecha sea igual significando que el sitio web estará en el centro de la página cuando sea más de 1,600 píxeles. Guarda eso y no notarás ninguna diferencia en mi versión porque la pantalla es bastante pequeña. Pero el margen cero auto hará que esto esté en el centro en monitores grandes. Ahora recuerda de las diapositivas antes hablamos de cómo se pueden usar las consultas de medios para cambiar los diseños usando flexbox. Bueno, ahora es el momento de ver estos en acción. Más de 1,000 píxeles, podemos cambiar la dirección del flex en el encabezado a fila, justo debajo del cuerpo y también asegurarnos de que esto aún esté dentro de las llaves de la consulta de medios. Vamos a apuntar al encabezado y luego establecer la dirección del flex para que sea fila. Después ve y refresca. Esto significa que en pantallas grandes, nuestro contenido de encabezado ya no está apilado uno encima del otro. Ahora vemos que el contenido está lado a lado. Si retrocedemos por debajo de los 1,000 píxeles, podemos ver que los estilos originales siguen aplicándose por lo que estos se abastecen como una columna. Volver a los dispositivos más grandes. Esto es mejor pero los elementos de la lista todavía están apilados. Se vería mejor si los ítems de la lista estuvieran en línea. Podemos cambiar el tipo de visualización para que sea inline-block para lograrlo. Vamos a apuntar al encabezado, enumerar elementos y luego todo lo que tenemos que hacer es establecer el tipo de visualización para que sea inline-block. Guardaremos eso y luego refrescaremos. Ahora puedo ver tenemos los ítems de lista en línea. Por defecto, el tipo de visualización de elementos de lista se establece en bloque, lo que significa que los elementos comenzarán en línea. bloque en línea permitirá que este elemento en particular sea juzgado uno al lado del otro. Sigamos trabajando dentro de esta sección de encabezado. Debajo del encabezado li, voy a apuntar a dos elementos, primero el encabezado h1, que es el título principal del sitio y luego separado por una coma, también podemos apuntar al encabezado nav. Esta es solo una forma conveniente de apuntar a dos elementos separados y aplicar los mismos estilos a ambos. Voy a establecer el valor flex para que sea uno. Establezca el flex en uno tanto para el h1 como también el nav asegurará que ambos tomen una cantidad igual de espacio. Guarda eso y luego refresca y ahora podemos ver el encabezado, título, y también la navegación ocupa el mismo espacio. El valor flex describe cómo un artículo crecerá o se encogerá para ajustarse al espacio disponible. Si por ejemplo, configuramos el nav para que tenga un valor flex de dos, intentaría ocupar el doble del espacio disponible del h1. Ahora cada elemento está ocupando la misma cantidad de espacio, podemos fluir el encabezado hacia la izquierda y también fluir los enlaces de navegación hacia la derecha. Empecemos con el rumbo de nivel 1. Encabezado, h1, hemos usado text-align antes para el centro. Pero esta vez vamos a establecer la alineación para que sea la izquierda y luego refrescar y ahora podemos ver que el rumbo se empuja hacia la izquierda. También se puede hacer lo mismo con el encabezado nav. Pero claro que esta vez necesitamos establecer la línea de texto para que sea la correcta. Dale a eso un guardado y ahora deberíamos ver los eslabones del lado derecho. Esto ahora nos da un encabezado de aspecto agradable, cada lado ocupa una cantidad igual de espacio y fluye hacia el borde de la página. Si cambiamos el tamaño del navegador por debajo de los 1,000 píxeles, podemos ver que los estilos originales siguen aplicándose. Todavía tenemos el encabezado apilado uno encima del otro. Ahora esa es nuestra página de aterrizaje todo completo. Enhorabuena por llegar hasta aquí, y nos vemos en el siguiente video. 19. Hojas de estilo externas: En lo que va de nuestra página web hemos agregado estilos dentro de esta sección de cabeza, entre las etiquetas de estilo. Esto se conoce como una hoja de estilo interna y es una forma de peinar una página en particular. También hay otro tipo que podemos utilizar llamadas hojas de estilo externas. El CSS lo escribirá exactamente igual, pero lo colocará en su propio archivo separado. Esto tiene algunos beneficios; primero , reduce el tamaño del archivo HTML. También nos permite separar el HTML del CSS para un fácil mantenimiento. Además, también podemos reutilizar los mismos estilos en múltiples páginas. Para agregar unas hojas de estilo externas todo lo que necesitamos hacer es crear un nuevo archivo dentro de nuestro proyecto. Abramos la carpeta del proyecto. Esto se puede colocar en cualquier lugar, pero voy a agregar una carpeta CSS. Esto es útil si quieres agregar más hojas de estilo más adelante, así que vamos a crear una nueva carpeta llamada CSS. Entonces podemos agregar nuestro nuevo archivo CSS dentro de un Visual Studio. También abriremos la barra lateral y luego hacemos clic en la carpeta CSS y luego hacemos clic en nuevo archivo. Vamos a llamar a esto el style.CSS. El nombre del archivo depende de nosotros pero debe tener la extensión de punto CSS. Ahora incluye todos los estilos de la sección de cabecera de nuestra página de índice. Desde HTML, seleccione todos los estilos, incluyendo la consulta de medios hasta el final. Así que corta los estilos y luego guarda eso y pégalo dentro del nuevo estilo. Archivo CSS. Dale a eso un Guardar y ahora si vamos hacia atrás a la página de índice, ya no necesitamos las etiquetas de estilo, para que las podamos quitar. Algo que sí necesitamos es un nuevo enlace. Este enlace va a enlazar a nuestra hoja de estilos y es similar al que tenemos arriba, el enlace a nuestras fuentes de Google. Agrega este enlace en, es solo una etiqueta de apertura, no hay etiqueta de cierre, luego en los atributos rel. Esto especifica la relación entre los documentos actuales y los documentos vinculados. En este caso, es una hoja de estilo. Después agregamos un segundo atributo, que es el href. El href es la ubicación de nuestro archivo, y es el mismo atributo que utilizamos en estos enlaces a continuación. Debido a que esto está en la carpeta CSS, vamos a agregar el css/style.css. Ahora si guardamos eso y pasamos al navegador, abriremos el proyecto y luego actualizaremos. Ahora podemos ver que los estilos aún han entrado en vigor, pero falta la imagen de fondo. Si pasamos al archivo style.css, y luego si localizamos la imagen de fondo, podemos echar un vistazo por qué. Todo depende de la URL de la imagen. La ruta del archivo estaba bien antes porque el estilo estaba en la página de índice. Esta ruta de archivo es relativa al archivo en el que estamos, esto significa que desde la página de índice, solo necesitábamos entrar a la carpeta de imágenes y la imagen estaba ahí para nosotros. Ahora este estilo está dentro de la carpeta css. Necesitamos usar la barra de puntos frente a la ruta del archivo. Esta barra de puntos le dice al navegador que busque un nivel, lo que significa que saltará de la carpeta CSS y al nivel raíz donde está la página de índice. Una vez que hayamos vuelto al nivel de la página de índice, podremos volver a la carpeta de imágenes como antes. Guarda eso y refresca, ahora deberíamos ver que la imagen de fondo está de nuevo en su lugar y nuestra hoja de estilo externa ahora está funcionando. 20. Añadir la página del blog: Con la página de Londres ya terminada, ahora pasemos a crear la página del blog. Gran parte de la estructura básica, como la sección de cabecera, es similar en toda la página web. También estaremos reutilizando el mismo habitue. Esto significa que podemos duplicar o copiar y pegar la página de índice existente para empezar. Hagamos eso más en nuestro editor de textos. Voy a Comando o Control C, y luego Comando V para copiar y pegar esta página de índice, y luego queremos renombrar este archivo, el blog dot HTML. Recuerda también, ya que construimos esta página de blog aunque te he mostrado técnicas para usar mientras las aplicas a mi sitio, siéntete libre de personalizarlas si deseas guardar tu proyecto. Ahora tenemos dos páginas HTML, tenemos nuestra página de índice para la página de Londres, y luego la página de blog, que vamos a enlazar. De hecho, todo el código HTML que tenemos para la página de Londres también se aplicará al blog. Si echamos un vistazo a la versión terminada y luego seleccionamos el blog, la página es igual que la página de Londres con un blog que acaba de agregar a continuación en la parte inferior. La imagen tampoco es del tamaño completo de la pantalla, pero esto es algo que podemos arreglar en el CSS. Volvamos al blog dot HTML. Si recuerdas de antes, también tenemos el enlace a este blog dot página HTML ya en su lugar, esto significa que ahora deberíamos poder hacer clic en el enlace en el navegador para ver el blog. Selecciona un blog en la parte superior, y aunque esta es la misma página, podemos ver que esta ahora está seleccionado el blog dot HTML. Aquí también podemos ver los beneficios de cambiar a unas hojas de estilo externas. Ahora tenemos dos páginas HTML que comparten los mismos estilos. A continuación comenzaremos a crear algunos artículos para mostrar las entradas del blog. 21. Creación de publicaciones del blog: En este video, me voy a concentrar en crear las entradas del blog. Como puedes ver aquí en el sitio final, si cambiamos el tamaño del navegador, vemos el interruptor de diseño para pantallas pequeñas a ancho completo. Ya sabemos que podemos lograr esto usando flex-box. Para ello, voy a crear elementos div con la clase de goma para rodear tanto el blog como también la barra lateral. Después podemos establecer el estado para que sea los padres flex y cambiar el contenido de columna a fila en dispositivos de diferentes tamaños. Vamos a configurar esto ahora. Pasemos al blog dot HTML y luego vayamos justo debajo de este div con la clase de imagen de viaje. Voy a crear un nuevo div. Las etiquetas de apertura y cierre y después nos dan una clase de envoltorios. Entonces vamos a tener dos secciones dentro de esto, va a ser una sección principal que va a rodear las entradas del blog. Entonces va a ser una sección lateral, que va a ser para la barra lateral. Vamos a crear estas dos secciones ahora. En primer lugar tenemos la sección principal. Entonces justo debajo de esto tenemos la sección lateral. Agrega estos ambos en y asegúrate de que estén anidados dentro del div con la clase de wrapper main en el lateral junto con el artículo, que usaremos a continuación para todos los elementos HTML semánticos que miramos antes. Ahora podemos agregar el artículo para ser el contenedor para las entradas del blog. Todas las entradas de blog que creemos estarán dentro de esta sección principal. Añadamos nuestro artículo. Además, voy a reutilizar la clase de fondo para darle a la publicación del blog el mismo fondo gris consistente que ya hemos usado. Añadamos esta clase de fondos. Ahora es sólo un caso de construir esta entrada de blog con elementos que ya hemos utilizado. Empecemos con el encabezado. la sección de encabezado se va a incluir información como el nombre de la entrada del blog, también alguna información sobre el autor y las etiquetas. Añadamos el encabezado en la parte superior. A continuación, dentro de aquí voy a añadir una h 2. Esto va a ser un poco más pequeño que el título principal de la parte superior de la página. Este va a ser el nombre de la entrada del blog, como puedes ver aquí. A modo de ejemplo, solo voy a llamar a esto la entrada del blog 1, y luego voy a crear una lista desordenada para luego crear la información sobre la entrada del blog como la base de datos creada, las etiquetas, y también la oferta. Justo por debajo del encabezado de nivel 2, agreguemos la lista desordenada. A la par de algunos artículos de lista, vamos a empezar a ofrecer. Entonces voy a usar las etiquetas em para agregar un poco de énfasis extra al nombre del autor. Entre em, voy a añadir mi nombre. Vamos a darle un ahorro y ver cómo se ve. Si volvemos al proyecto, selecciona el blog, y luego desplázate hacia abajo. Ahora tenemos al autor mostrado en la parte inferior así como el título de la entrada del blog. Todo lo que quiero hacer ahora es simplemente copiar, este ítem de lista y pegarlo en dos veces más. El segundo va a ser para las etiquetas. Voy a añadir sólo unas etiquetas dentro de aquí. Eso está bien y entonces la tercera y última se va a crear fecha. Vamos a sumar hace cinco días como ejemplo y darle un ahorro y ver cómo se ve esto. Voy a establecer toda la información del encabezado, fuera de esta sección de encabezado, pero aún dentro del artículo. Ahora voy a crear una nueva sección. Esto va a ser para todo el resto de la información del blog, como la imagen y también el texto. Antes hemos mirado la adición de una imagen a través de la propiedad de fondo CSS. También podemos agregar imágenes usando la etiqueta de imagen HTML. Esta es una etiqueta de autocierre, lo que significa que no hay etiqueta de cierre para ella. Entonces todo lo que necesitamos hacer es agregar los elementos de la imagen y luego agregar una fuente. El origen va a ser la ubicación de la imagen. Recuerda desde antes que agregamos todas las imágenes dentro de una carpeta de imágenes, seleccionamos la carpeta de imágenes, y luego quiero empezar con la imagen Venice.JPG. Si no estás usando las imágenes proporcionadas con este curso, ahora sería un buen momento para ir y agarrar 4-5 imágenes diferentes y colocarlas dentro de tu carpeta de imágenes. También voy a agregar un atributo ALT de imagen de Venecia. Esto es básicamente un retroceso para si se puede mostrar la imagen. También es leído por los lectores de pantalla. Por lo general se recomienda poner este texto alternativo en caso de que la imagen no se pueda mostrar. Debajo de esto desea agregar el texto para el bloque dentro del p-type. Por supuesto, siéntete libre de escribir una entrada de blog si quieres. Pero sólo voy a añadir un texto de muestra, y podemos hacerlo visitando un sitio llamado Lorem Ipsum. Simplemente hago una búsqueda de Lorem Ipsum y luego selecciono lipsum.com. Esto nos dará alguna muestra o texto ficticio que podemos utilizar en la página web. Todo lo que necesitamos hacer es bajar y seleccionar tantos párrafos como queramos. Simplemente voy a cambiar esto a dos párrafos y luego hacer clic en generar. Entonces esto nos da algún texto de muestra el cual podemos copiar y usar dentro de nuestro proyecto. Pega esto justo entre las etiquetas p y da un save. Veamos cómo se ve esto ahora. Si volvemos al blog y refrescamos. Genial. Además del encabezado también tendremos la imagen y también el texto de muestra a continuación. Lo último que queremos hacer es agregar un enlace a la sección Read More. Como se puede ver en el sitio terminado aquí. Justo debajo del texto de muestra y crea un poco de espacio aquí. Yo quiero usar etiquetas A porque esto va a ser un enlace con la href y solo voy a mantener esto vacío por ahora. Esto será útil para enlazar a las entradas completas del blog en su propia página separada y luego el cierre de una etiqueta. El texto de Leer más. Echemos un vistazo a esto ahora en el navegador, refresca. Nunca va ahora tendrá el enlace en la parte inferior. Este artículo ahora en su lugar, simplemente voy a copiar y pegar esto en unas cuantas veces más. Copia el artículo completo, luego pegarlo en una vez más. Sólo voy a cambiar a las entradas del blog 2 y también cambiar la imagen de Venecia a hike.JPEG. Entonces navega artículo haz un poco de espacio y pega otra vez, así que blog post gratis. Esta vez la imagen va a ser lago. Digamos que voy a hacer esto una vez más. Es genial que los artículos lo peguen y cambien esto para ser entrada de blog 4 y la imagen final que voy a usar es el elefante. Guarda eso y agrega tus imágenes en y luego ve al navegador una vez hecho eso, y comprueba esto para las entradas del blog. Entonces el primero, el segundo, el tercero, y también el cuarto, cada uno con su propia imagen única. Ahora podemos ver las cuatro entradas de blog en su lugar. El estilo necesita un poco de trabajo y el diseño aún no responderá. Pero esto está bien, por ahora lo arreglaremos en un video posterior. 22. Iconos de redes sociales en la barra lateral: Ahora tenemos la sección principal completada con la entrada del blog en su lugar. Ahora, queremos pasar a la barra lateral y agregar algunos botones de redes sociales. Los botones de redes sociales no son demasiado difíciles de aplicar. Se trata de ciertos sitios web que nos permiten utilizar iconos de redes sociales en nuestro sitio de forma gratuita, como Font Awesome que voy a utilizar en este sitio. Empecemos por crear una nueva sección para la barra lateral. Vayamos al blog.html. Cerraremos esta barra lateral para darnos un poco más de espacio. Recuerda desde antes, ya hemos creado la sección lateral para la barra lateral. Todo lo que tenemos que hacer es añadir una nueva sección. Entonces dentro de la etiqueta de apertura de la sección, voy a añadir algunas clases. En primer lugar, voy a añadir uno llamado widgets de barra lateral. Esto nos permitirá darle estilo con el CSS pronto, y también la clase de fondo para mantener el color de fondo consistente en todo el sitio. Entonces voy a añadir un encabezado usando las etiquetas h2. Entonces un texto de sígueme en. Entonces podemos agregar nuestros iconos de redes sociales a continuación. Voy a añadir un nuevo elemento llamado el hr. Esto es para una línea horizontal, que podemos ver si vamos al navegador y luego actualizamos. Subiremos a la barra lateral. De hecho, estaba abajo en la parte inferior porque aún no hemos agregado ningún diseño. Veremos el texto de sígueme y también la línea que cruza la parte inferior. Esto separará el texto de los iconos una vez que los pongas en su lugar. Como mencioné antes, estaré usando un sitio llamado Font Awesome para proporcionar los iconos de las redes sociales. Podemos encontrarlos visitando fontawesome.io luego para empezar. Hacemos clic en el icono de Comenzar en la parte superior y luego nos desplazamos hacia abajo. Si baja a Descargar y Personalizar, clic en el botón Descargar. También hay una versión de pago pero todo lo que tenemos que hacer es dar click en no gracias. Simplemente descarga Font Awesome 4, eso sólo debería tomar un momento para descargar. Una vez hecho esto, podemos ir a las descargas y luego descomprimir el paquete Font Awesome. Este lugar en el escritorio por ahora y luego renombrar este simplemente Font Awesome. Eliminar el número de versión. Entonces si entramos en nuestros proyectos de blog de viajes, podemos colocar esto dentro de la carpeta CSS así como así. Esto se debe a que esta es solo una hoja de estilo como ya hemos agregado para nuestros propios estilos personalizados. Añadamos esto igual que antes dentro de la sección de cabeza. Abramos nuevamente el proyecto. Vuelve a la sección del cabezal y agrega estos justo encima de las hojas de estilo personalizadas. Añadamos el enlace, atributo rel de hojas de estilo. Entonces el href para enlazar al archivo el archivo está dentro de la carpeta CSS. Entonces dentro de la carpeta CSS, tenemos la carpeta de Font Awesome so forward slash. Esto también tiene su propia carpeta CSS dentro de ella. Podemos ver eso seleccionando el CSS, Font Awesome, y luego como una carpeta CSS secundaria dentro de ahí. Entonces el nombre del archivo al que queremos enlazar es fontawesome.min.css. El orden de vincular estas hojas de estilo también es importante. Siempre queremos nuestras propias hojas de estilo personalizadas en la parte inferior. Esto asegura que nuestros propios estilos que agregamos se agreguen en último lugar. Por lo tanto, anulará cualquiera de los otros estilos de las hojas de estilo anteriores. Ahora tenemos los iconos añadidos a nuestro proyecto. Volvamos a Font Awesome y veamos cómo usarlos. Volver a fontawesome.io. Deberíamos deshacernos de eso. Entonces si subimos a los íconos, podemos hacer una búsqueda de cualquiera de los iconos disponibles. Por ejemplo, busquemos Facebook. Podemos ver los resultados de búsqueda aparecen en la parte inferior. Voy a usar el funcionario de Facebook, haz click en eso. Entonces si te desplazas hacia abajo, podemos ver un elemento HTML que podemos usar. Copia este elemento i y luego vuelve a la blog.html. Si bajamos al apartado de lado. Entonces justo debajo de la regla horizontal, voy a añadir un div esta vez con una clase de social. Podemos usar esto en el CSS. Cierre del div. Entonces todo lo que necesitamos hacer es pegar en los nuevos elementos. Guarda eso. Comprobemos que esto está funcionando bien al refrescar. Se puede apenas ver el icono de Facebook hacia abajo en la parte inferior. Quiero pegar esto en tres veces más. El segundo va a ser fa-instagram. Puedes hacer una búsqueda en el sitio web de Font Awesome para cualquiera de estos enlaces. El siguiente voy a usar twitter-square. Entonces finalmente el pinterest-cuadrado. Consulta que hemos deletreado todo esto bien al refrescar el navegador. Genial, por lo que ahora podemos ver los cuatro iconos en la parte inferior. Son bastante pequeños al minuto, pero podemos hacerlos un poco más grandes con una clase Font Awesome de fa-2x que voy a pegar esto en los cuatro enlaces. Esto hace que los iconos dupliquen el tamaño que normalmente serían. Ahora se ve mucho mejor. He colocado estos iconos en la barra lateral. No voy a enlazar a ninguno de mis sitios de redes sociales. Puedes seguir adelante y hacer esto rodeando el elemento i con el elemento a y proporcionar un enlace al igual que lo estamos haciendo en los enlaces de la sección de encabezado anterior. Después puedes agregar un atributo href como hicimos en el encabezado. El atributo href es igual al que hemos utilizado en cualquiera de los enlaces de navegación anteriores. No obstante, es un enlace externamente. Sí necesitamos enlazar a la URL completa. Una vez que hayas terminado, asegúrate de darle un ahorro a eso. Ahora nuestra página de blog viene bien. A continuación terminaremos el HTML agregando los últimos widgets de la barra lateral. 23. introducción a tablas y entidades HTML: Echando un vistazo a esta versión terminada de mi sitio, ahora voy a añadir los widgets de barra lateral con los países a visitar. Este es un widget se adaptaría a mi blog. Por supuesto puedes elegir pronto finanzas si lo prefieres. No obstante, las técnicas que cubriremos en este video son fundamentos útiles de conocer. El diseño del widget se creará con una tabla HTML. Las mesas solían ser utilizadas hace mucho tiempo para colocar nuestros sitios web. Esto fue antes de que CSS asumiera el control para el posicionamiento del diseño. También mucho antes del flexbox, que ahora estamos usando. El uso de tablas para el diseño ahora se considera mala práctica. No obstante, sigue siendo útil para disponer datos como nuestra lista de países o incluso algo como una tabla de puntuaciones o resultados. Para empezar, agreguemos nuestra sección de barra lateral, justo debajo de la sección de redes sociales. Agrega una nueva sección dentro aquí y luego dentro de la etiqueta de apertura podemos agregar algunas clases. Al igual que antes voy a usar es consistente widgets de barra lateral en segundo plano. Pasaremos a usar rodillas más adelante en el curso. Dentro de la sección, podemos entonces agregar una tabla con los elementos de la tabla. Esto también tiene una etiqueta de apertura y cierre. Dentro de aquí podemos empezar a crear nuestra mesa. En el interior de aquí podríamos agregar algunos encabezamientos de mesa. Por ejemplo, en una tabla de usuarios, esta será la fila superior en negrita, que son el nombre, un apellido y un correo electrónico por ejemplo, en la parte superior de cada columna. Vamos a crear este encabezado con el thead. Dentro de aquí utilizamos los elementos tr. Tr se utiliza para crear una nueva fila, podemos usar más de una fila por solo necesitamos el título de los países para visitar. Yo sólo voy a mantener esto como una fila. Entonces junto a ella dentro de aquí, se ven los elementos. Esto se utiliza para los datos del encabezado. Etiqueta de apertura y cierre y que dentro de aquí podemos preguntar el texto que queremos agregar como encabezamiento. También voy a lugares dentro de un psique h2 dentro, solo para mantener el nombre consistente con el widget sobre redes sociales. Añadamos al h2 aquí con el texto de los países a visitar. Entonces justo después de esta sección de cabeza de tabla abajo aquí, también podemos agregar el cuerpo de la mesa con tbody. Si estás luchando por recordar todas estas etiquetas, no te preocupes. Ahí hay una sección de cabeza y también una sección de cuerpo, igual que ya hemos utilizado en su página web, donde tenemos la sección de cabeza en la parte superior y luego la sección de cuerpo justo debajo. Desplázalos de nuevo hacia abajo hasta la mesa. Podemos entonces empezar a agregar algunos datos a este cuerpo de la tabla, como los países que quieren visitar. Al igual que este encabezado de tabla, los datos del cuerpo se colocan dentro de las filas dos. Utilizamos el mismo tr para cada fila. Cada celda dentro de la fila utiliza td, para los datos de la tabla. Aquí podemos empezar en nuestros países o cualquier dato que quieras poner en tu mesa. Voy a empezar con el país de México. Entonces dentro de la misma fila, voy a agregar un nuevo td para algunos datos de tabla más. Entonces dentro de aquí, llegó a usar el símbolo ampersand, el duro entonces uno, cero, cero, cero, tres, seguido del punto y coma al final. El primer celular es para el nombre del país. El segundo puede parecer un poco extraño. Esto es lo que llamamos una entidad HTML. Se utilizan entidades HTML para mostrar caracteres o símbolos, igual que la garrapata que vemos en los sitios terminados, justo por aquí a la derecha. También se utilizan entidades para reemplazar ciertos símbolos, como el menor que o el mayor que símbolo. Al igual que esto. Si fuéramos a utilizar sólo menos que o mayor que el símbolo, el navegador puede pensar que este es el inicio de una etiqueta HTML. Esto podría causar problemas. A modo de ejemplo, menos de lo que se reemplaza por ampersand lt, seguido de un punto y coma. Vamos a darle a eso un guardado y luego ver esto en el navegador. Si nos refrescamos, volvemos a la mesa, podemos ver que ahí está nuestra garrapata, que es este código de aquí. Entonces nuestro menos que símbolo, podemos ver arriba justo aquí. Podemos usar un símbolo mayor que el reemplazando lt sería gt luego refrescar. Ahora se puede ver que el símbolo es ahora el mayor que. Quitemos esto. También tienen acceso a muchos más símbolos Unicode, al visitar un sitio web llamado unicode-table.com. Aquí podemos ver una lista de algunos de los personajes populares que podemos utilizar. O podemos hacer una búsqueda a, y tenemos que hacer para agregar estos en, es seleccionarlo y luego copiar el código HTML y agregar esto a nuestro proyecto. Ahora podemos ver la info en esta primera fila. Todo lo que voy a hacer ahora es copiar y pegar en algunas filas más. Copia la sección tr. Cuántas veces pegues esto depende de la información que necesites para tu tema, pegarlo abajo y luego cambiar el país. El siguiente que vamos a sumar es Egipto. Entonces vamos a seguir con el del país, continuación voy a añadir España, después China. También voy a quitar la garrapata porque no estoy en China, pegarlo más, cambia a Portugal, República Dominica, y luego Tailandia. Por supuesto agrega tantas filas como quieras para tu blog. Debería agregar uno o dos más en, después de Tailandia me voy a Francia, y sólo un par más, agregaremos Canadá. Yo quiero quitarle la garrapata a Canadá. Entonces finalmente la última fila voy a añadir Australia. Dale a eso un ahorro, y luego vamos a echar un vistazo a esto en un navegador. Eso se ve bien. Ahora podemos ver nuestra lista de países todos en sus propias filas separadas. También tenemos la entidad HTML como garrapata. Con esta tabla ahora terminada se completa ahora la sección A lateral para mi blog. Además, este es el contenido HTML final ahora agregado. Ahora podemos pasar al siguiente video. Agregaremos un poco de estilo CSS a lo largo veremos en pseudo-clases. 24. Estilo de blog y pseudoclases: En la versión terminada para dispositivos más pequeños, se pueden ver algunas diferencias a lo que tengo hasta ahora sin CSS. La versión final, como se puede ver aquí, tiene el texto centrado, tiene una imagen de ancho completo, y generalmente mejor espaciado. Estirando el navegador más ancho, también podemos ver que la consulta inmediata se utiliza para cambiar la vista de la publicación que se está apilando uno encima del otro, a tener las entradas del blog y la barra lateral lado a lado. Para hacer este cambio de diseño en una página blog.html, ya tenemos un div circundante con la clase de wrapper, que está justo por encima de la sección principal aquí. Este será nuestro contenedor flex. Entonces todo lo que necesitamos hacer es cambiar la dirección del flex de columna a fila, para pantallas más grandes. Esto no es nada nuevo, ya hemos visto esto para el encabezado. Empecemos en el estilo dot CSS para que esto funcione. Fuera de la consulta de medios, podemos apuntar a la clase de envoltura. Agregue estos justo encima de la consulta de medios, lo que dot wrapper, porque es una clase. Entonces como acabamos de mencionar cuando se establece el tipo de pantalla para que sea de flex, con una dirección flex de columna. Debido a que esto está fuera de la consulta de medios, esto significa que la dirección flex de columna se aplicará en las pantallas más pequeñas. En tan solo un poco, podemos cambiar esta dirección de flex de nuevo a fila dentro de la consulta de medios. Ahorremos y veamos cómo se ve esto. Escale el navegador hacia abajo para que puedas tener una mejor idea. Ahora voy a añadir un poco de relleno y margen, solo para darle al artículo un poco de espaciado. Vamos a seleccionar el artículo y también la clase de widget de barra lateral. Esta es la clase que le das a todos los componentes de la barra lateral. Voy a añadir algo de relleno en el interior, de 15 píxeles, y luego también algún margen, de 15 píxeles en la parte superior e inferior, y luego cero en la izquierda y la derecha. Esto agregará algo de relleno dentro del div y luego algún margen arriba y abajo para separar las entradas del blog y también los widgets. Vamos a dar esa actualización. Ahora se puede ver este margen se ha aplicado entre cada uno de los puestos. Recuerda, cada una de estas entradas de blog también tiene su propia sección de encabezado. Vamos a agregar un color de fondo para este encabezado de blog, pero no queremos usar el selector de encabezado porque esto también apuntaría al encabezado en la parte superior de la página. Para ello, justo debajo de esta sección del artículo, vamos a apuntar al encabezado del artículo, así como así. Usando este símbolo mayor que, seleccione sólo hijos directos. En este caso, esto sólo se dirigirá a los elementos de cabecera, que es un hijo directo de un artículo. Después estableceremos el color de fondo para que sea el valor hexadecimal de d8d8d8, guardar y refrescar. Ahora puedes ver esta sección de encabezado tiene un fondo ligeramente más oscuro. Entonces la imagen, si estiramos un poco más el navegador, podemos ver que la imagen no encaja del todo el ancho de la página. Para solucionar esto, podemos seleccionar todas las imágenes y establecer el ancho para que sea del 100 por ciento. Después refresca y echa un vistazo a esto, y ahora podemos ver los flujos de imagen para ser 100 por ciento del contenedor. También voy a añadir un poco de margen a los iconos de Font Awesome. Si hacemos el navegador un poco más pequeño y nos desplazamos hacia abajo, solo voy a agregar algún margen a la izquierda y a la derecha, solo para espaciar un poco más estos iconos. Recordar Font Awesome tenía los elementos i, por lo que podemos seleccionarlo con i, así margen cero en la parte superior e inferior, y cinco píxeles en la izquierda y la derecha, para luego refrescar. Ahora podemos ver que tenemos mejor espaciado entre los iconos. Nuestro estilo mobile-first está casi completo, pero antes de seguir adelante, quiero presentarte a pseudo clases de CSS. Las clases pseudo se utilizan para aplicar el estilo a un determinado estado. Un ejemplo común es cambiar el color de un enlace cuando un usuario pasa por encima de él. Podemos seleccionar los enlaces con los elementos a, y luego usamos dos puntos y luego agregamos al nombre del pseudo selector, que en este caso se sitúa el cursor. Cada vez que el usuario pasa por encima de un enlace, vamos a cambiar el color del enlace. Entonces pongamos esto en un color azul y vamos a ir. Volvamos a subir a la sección superior, y ahora podemos ver cuando pasas por encima de cualquiera de estos enlaces ahora se pone azul. Entonces, por fin, voy a mirar al seudo-selector nésima niño. Si nos desplazamos hacia abajo a la mesa de los países visitantes, quiero añadir un poco más de relleno a la izquierda de estas garrapatas. Si solo apuntamos a los elementos td en el CSS, esto también se aplicará al elemento td para el país. Para agregar este relleno solo al segundo de cada fila, usamos la pseudo-clase secundaria enésima. Esto toma un número como parámetro entre paréntesis. Este número en nuestro caso será el número 2 para seleccionar los segundos elementos td. Echemos un vistazo a cómo podemos hacer esto. Vamos a apuntar al td, y otra vez separados por un colon, podemos agregar nth niño. Como mencioné antes, queremos seleccionar al segundo hijo y luego queremos agregar algo de relleno solo a la izquierda de 30 píxeles. Ahorremos y veamos cómo se ve esto. Ahora podemos ver que las garrapatas se moverán ligeramente hacia la derecha. Esto sólo se aplica al segundo td, no tenemos relleno adicional en el primero; los países, que también son hover que tiene primer hijo y último hijo. Podrás conocer más sobre estos en la descarga de recursos. Esto ahora termina los estilos que quiero agregar a la vista mobile-first para mi blog. Esperemos que ahora tenga un blog de gran aspecto también para pantallas pequeñas. Ahora es el momento de seguir adelante y agregar los estilos finales para dispositivos más grandes. 25. Estilo del blog para dispositivos más grandes: Ahora tu blog debería estar dando forma muy bien. Tenemos estilo CSS ahora completado para dispositivos móviles, y ahora es el momento de completar el CSS para pantallas más grandes incluyendo un cambio de diseño dentro de la consulta de medios. Si recuerdas del último video, configuramos el contenedor o el contenedor para que tenga el tipo de pantalla de flex y la dirección flex de columna, que apile todos los elementos uno encima del otro. Para pantallas más grandes, quieres que las entradas del blog y también la barra lateral tengan una dirección flex de fila. Hagámoslo dentro de la consulta de medios. Justo debajo del encabezado nav, voy a añadir un comentario. Recuerda desde antes que mencionamos que se pueden agregar comentarios para agregarnos notas. Esto es ignorado por el navegador web. Entonces esta es la sección de blog ahora. Vamos a seleccionar el contenedor y cambiar la dirección del flex para que sea fila y luego refrescar. Ahora podemos ver al instante que las entradas del blog y la barra lateral están ahora en fila. Ahora vamos a establecer la propiedad flex. Vamos a establecer la sección principal, que es esta parte del blog, para tener un valor flex de tres, y luego la barra lateral a un valor flex de uno. Esto significa que la sección de blog ocupará tres veces el espacio disponible de la barra lateral. Hagámoslo ahora con el selector principal. Recuerda esto son las entradas del blog, el valor flex de tres, y luego la sección lateral puede tener el valor flex de uno. Eso lo guardaremos, le daremos una actualización, y ahora se puede ver que el tamaño ha cambiado. Voy a añadir algún margen a la izquierda de la barra lateral también solo para crear un poco de espacio entre una barra lateral y las entradas del blog, así margin-izquierda de 15 píxeles. Está bien. Bien. Eso se ve mucho mejor ahora. Ahora voy a añadir algo de CSS para el encabezado de la entrada del blog. Podemos apuntar esto con encabezado de artículo. Por lo tanto, esto sólo se aplica al encabezado dentro del artículo. Voy a usar la propiedad flex box de justificar contenido. Esto define cómo queremos que los elementos se espacien. Uno de los ejemplos es el espacio entre. Guarda eso y dale una actualización. Ahora podemos ver esto suma espacio entre el título y también la lista desordenada. También podemos cambiar esto por espacio alrededor. Echemos un vistazo a esto. Ahora conseguiremos igual espacio alrededor de los elementos. Si hubiera más elementos dentro de este encabezado, también estarían igualmente espaciados. Justificar el contenido sí tiene algunas opciones más también y hay algunos enlaces disponibles dentro de los recursos. Ahora ese es mi blog ahora terminado, y estoy contento con cómo las cosas están empezando a buscar pantallas más pequeñas y también pantallas más grandes. Vamos a reducir el navegador y ver la consulta de medios en acción. Una vez que llegamos a 1000 píxeles, sí obtenemos un cambio de diseño, así que eso es genial. Te animo a que sigas trabajando en tu propio CSS también y cambies las cosas para que te convengan. Incluso juega con el tamaño de las consultas de medios y los diseños si funciona mejor para tu contenido. Incluso con este blog ahora completo, todavía quiero cubrir algunas cosas que son útiles para que sepas. Cubriré estos en los próximos videos. 26. Soporte de navegador: Todos hemos blogueado ahora terminado. Ahora voy a dar un pequeño paso atrás y codificar, y cubrir algunas cosas que pueden resultar útiles durante la construcción del blog, usamos mucho HTML y CSS. Uno de los retos de desarrollar sitios web es el hecho de que diferentes navegadores pueden mostrar nuestros sitios web un poco diferente. Siempre es mejor probar tu sitio web en varios navegadores, como Chrome, Safari, Firefox e Internet explorer, junto con navegadores de dispositivos más pequeños para comprobar que se ve bien en el Mall. Además, otra consideración es que algunos usuarios estarán usando diferentes versiones del mismo navegador. Puede tener la última versión, mientras que algunos tendrán una versión más antigua. Hay disponible un sitio web útil llamado caniuse.com. Encabezemos o a eso. Este sitio web nos da información sobre los navegadores pausa para diferentes versiones. Por ejemplo, si empezamos por buscar flexbox, y nos desplazamos hacia abajo, podemos ver debajo del deporte del navegador que en su mayoría es verde. Por ejemplo, está disponible en todas las versiones de Chrome, y es totalmente compatible. Lo mismo para Firefox y la mayoría de los navegadores. Ahora echemos un vistazo a la grilla. Búsqueda de rejillas. Si nos desplazamos hacia abajo hasta el soporte del navegador, esta propiedad de cuadrícula CSS es nueva dentro de flexbox. Se puede ver algún rojo, lo que significa en soportados y algunos puntos parciales en diferentes navegadores. Esto significa que debemos tener un poco más de cuidado cuando lo use como alguien usa puede no tener soporte completo para esto. Dentro del navegador. Hay algunas herramientas, y las distintas opciones disponibles para ayudar con el spot del navegador. Si esto es algo que le interesa, existen algunos enlaces útiles en los recursos a consultar. Vale la pena revisar sitios como este, junto con las pruebas en diferentes navegadores para mejorar la experiencia del usuario. 27. Introducción a las herramientas de desarrollo del navegador: la par de las pruebas en diferentes navegadores que mencionamos en el último video, también es útil probar cómo se ve un sitio en varios dispositivos. La mayoría de nosotros no tenemos muchos tipos de tabletas y teléfonos redondos para probar, por lo que Google Chrome nos ayuda con esto. Si pasamos a un sitio web, el teléfono de cualquiera, y luego si hacemos clic en la opción “Inspeccionar” para abrir las Herramientas de Desarrollador. Ten en cuenta que otros navegadores también tendrán su propia versión de las herramientas de desarrollador también, pero pueden funcionar ligeramente diferentes a esto. Si hacemos clic en el icono con el teléfono móvil y la tableta, que está justo en la parte superior aquí, podemos simular cómo se ve un sitio en diferentes dispositivos. En lugar de tenerlo Responsive o varios dispositivos para seleccionar. Por ejemplo, si hace clic en el iPhone 6, podemos ver exactamente cómo se renderizaría esto en un iPhone 6. Se puede ver con las consultas de los medios, esto significa que todo todavía se ve bien. Esto se debe en particular a que hemos diseñado este sitio para ser móvil primero y construido encima de él para dispositivos más grandes. También podemos seleccionar un iPad grande y ver cómo se ve esto. Eso se ve todo bien ahí. Si no tienes muchos dispositivos alrededor para probar, esta es una buena herramienta para ver cómo se ven los sitios web en dispositivos de diferentes dimensiones. Sólo voy a volver a hacer clic en este ícono para volver a la vista de escritorio. Otra herramienta útil que ya hemos mirado en este curso, es la capacidad de seleccionar un elemento haciendo clic en esta flecha. Esto es útil para encontrar cualquier problema y depurar. Por ejemplo, si te preguntas por qué algún CSS no está surtiendo efecto, entonces podemos pasar el cursor sobre cualquier elemento del sitio y echar un vistazo a todas las propiedades CSS que han surtido efecto. Por ejemplo, si hacemos click en el encabezado nivel 1, sobre el lado derecho, podemos ver el encabezado h1. También podemos ver el margen, el relleno, y también ver de qué hojas de estilo vienen estas. Esto es útil en sitios más grandes que pueden tener más de una hoja de estilo. También podemos quitarlos temporalmente y ver cómo se ve el sitio con o sin ellos. También podemos añadir diferentes estilos en. Cambiemos el color para que sea rojo, y puedes ver que los cambios se reflejan instantáneamente en los sitios. No obstante, no te preocupes demasiado por romper el sitio. Una simple actualización devolverá todo a la normalidad. Las herramientas de desarrollador son realmente útiles y pueden hacer mucho más. Pero mucho de esto es para casos más avanzados. Aquí no lo cubriremos, pero estoy seguro a medida que avanzas por tu viaje de diseño web o desarrollo, pasarás mucho más tiempo aquí dentro. A continuación, quiero mostrarte un gran plugin de editor de texto llamado Emmet, que realmente acelerará tu codificación y facilitará mucho las cosas. 28. Acelerar la codificación con Emmet: Durante los proyectos del curso de grandeza, hemos codificado a mano todos los elementos en HTML. Esta es una forma perfecta de ganar práctica y memorizar cómo funcionan las cosas. No obstante, una vez que has tenido más práctica y sabes cómo funcionan las cosas, a veces puedes sentir que necesitamos acelerar nuestra codificación y cuanto más productivo. Aquí es donde entra en juego Emmet. Emmet es un plug-in para los editores de texto más populares, lo que realmente ayudó a acelerar nuestra codificación y hacer que el trabajo fuera más eficiente. Si vamos a la sección de descargas, podemos ver que el Emmet está disponible para la mayoría de los editores de texto populares. Te animaría a seguir adelante y descargar para tu editor de texto en particular. También a menudo la mayoría de los editores de texto, tienen una Sección de plugin en las preferencias, que le permiten instalar plugins más fácilmente. No obstante, si estás usando código de Visual Studio como yo, ya está incluido de forma predeterminada. Voy a ir a una de las páginas HTML. Voy a desplazarme hacia abajo hasta el cuerpo. Emmet nos proporciona algunos atajos de teclado, que realmente nos permiten acelerar nuestra codificación. Por ejemplo, cuando iniciamos este proyecto por primera vez, escribimos toda la sección html, incluyendo la sección de cabecera, los metadatos, el cuerpo, y también las etiquetas html circundantes. Emmet nos proporciona una forma fácil de hacer esto. Todo lo que necesitamos hacer es escribir html:5. Entonces podemos ver, obtenemos el auto completo, diciendo que esta es una abreviatura de Emmet. Todo lo que necesitamos hacer ahora es presionar Enter o tab, y luego tenemos una estructura HTML básica en su lugar. Yo sólo voy a quitar esto y tratar de mirar algunos ejemplos más. El que nos ahorrará mucho tiempo. En lugar de escribir ningún elemento. Al igual que lo hacemos durante este curso con la etiqueta de apertura y cierre. Todo lo que necesitamos hacer es escribir el nombre de los elementos y nuevamente presionar Enter o Tab y esto llena la etiqueta de apertura y cierre para nosotros ahorrándonos mucho trabajo. Podemos ir aún más allá. Por ejemplo, si quisiéramos crear una lista desordenada con un elemento de lista ya dentro, podrías hacer ul, el símbolo mayor que y luego li. Presiona Enter, y podemos ver esto automáticamente agrega el li dentro de la lista. Si quisieras más de un elemento de lista, podríamos hacer ul, el mayor que símbolo y un li, igual que hemos hecho antes. Después del símbolo de estrella, podemos agregar tantos elementos de lista como quieras. Entonces, por ejemplo, si queremos cinco, podríamos hacer esto. Por supuesto es mucho más que puedes hacer. De verdad te animo a tener una jugada alrededor esto y usar una vez que te pongas más cómodo con HTML. Entonces voy a quitar esto. Si sí quieres profundizar aún más en esto y conocer más de los atajos. Hay una buena documentación en sitios web la cual puedes mirar y conocer más sobre las abreviaturas. Es así como podemos usar Emmet a la velocidad de codificación. A continuación, echaremos un vistazo a los elementos de bloque versus en línea. 29. Elementos en bloque vs. en línea: Hemos utilizado muchos elementos durante este curso sin pensar demasiado en cómo se muestran en la pantalla. Por lo general, los elementos HTML pertenecen a dos grupos, ya sea en bloque o en línea. Un elemento de nivel de bloque comienza en una nueva línea en la página web y ocupa todo el ancho disponible. Ejemplo de ello es el elemento P para mostrar texto. Como se puede ver aquí, se extiende hasta el ancho completo del espacio disponible. Un elemento div también es un elemento de nivel de bloque también, junto con muchos más a los que echaremos un vistazo pronto. Siguiente arriba está en línea. Un ejemplo de un elemento en línea es el elemento de imagen. Los elementos en línea no comienzan en una nueva línea por lo tanto, se pueden colocar uno al lado del otro, como se puede ver aquí. También se pueden colocar dentro de un elemento a nivel de bloque también. Así es como a menudo hacemos las cosas cuando usamos un div circundante. El elemento div es nivel de bloque, y esto puede contener tanto elementos de bloque como en línea dentro de él. Si pasamos a la página web de Mozilla, podemos ver una lista de elementos de bloque y en línea en la parte inferior. Desplazándose hacia abajo hasta la lista de elementos de nivel de bloque podemos ver el pie de página, la forma, un lado, artículo, etiquetas de párrafo y tablas por nombrar algunos, son todos elementos de nivel de bloque. Por lo tanto, comenzando en una nueva línea por valores predeterminados. Entonces tenemos los elementos en línea. De nuevo, podemos desplazarnos hacia abajo hasta la parte inferior y ver los elementos en línea como una lista. Se trata de cosas como botones, entradas, em, y también imagen, como acabamos de ver antes. Estos enlaces están disponibles en los recursos si quieres echar un vistazo más de cerca. Bloquear y en línea es una forma tradicional de categorizar un elemento. En HTML5, hay algunas categorías más disponibles como flujo y fraseo. Estos, sin embargo, tienen reglas y definiciones mucho más complejas, por lo que tal vez sólo forma de bucear en una vez te vuelves realmente cómodo con HTML. Por supuesto, también hay enlaces a esto en los recursos si quieres echar un vistazo a esto. Pero entender la diferencia entre bloque y línea es realmente importante cuando se trabaja con HTML. Te ayudará a dispensar mejor tu contenido y también te ayudará a entender por qué las cosas se están colocando en una página de cierta manera. 30. Desfío final: Enhorabuena por llegar al final de este curso. Antes de irnos, quiero dejarlos con un reto final. Me gustaría que volvieras a tu proyecto y le agregaras. Recuerda que creamos el enlace 'sobre mí' en la parte superior de la página. Bueno, me gustaría que volvieras y crearas tu propia página 'About Myo' y luego enlazaras a ella desde el menú principal de navegación. Esto es todo lo que ya hemos cubierto. Si te quedas atascado, solo mira el resto del proyecto y estoy seguro que encontrarás las respuestas. Hacer este reto solo, sin mi ayuda realmente te hará pensar en las cosas y también reforzará lo que has aprendido hasta ahora. Además, si te sientes particularmente creativo, sigue adelante y agrega una sección de pie de página también en cada página. Buena suerte y no puedo esperar a ver lo que ustedes crean. 31. Paso final: Enhorabuena, has llegado al final de este curso. Esperemos que por ahora, deberías estar más cómodo construyendo sitios web de gran aspecto usando tanto HTML como CSS. Ahora debes saber lo suficiente para seguir adelante y completar proyectos más desafiantes también, para construir sobre lo que ya has aprendido hasta ahora en este curso. Juntos, hemos construido un sitio web de blog con tu tema de elección. Espero que también hayas logrado completar el reto de añadir también la página Acerca de mí, o tal vez incluso agregar la sección de fotos. Me encantaría que también compartieras tu proyecto, para que tanto yo como compañeros los veamos. Esta es una gran manera de tanto mostrar tus habilidades junto con inspirar a otros estudiantes también. Este no es el final de tu viaje sin embargo. Construir sitios web es un proceso de aprendizaje continuo, pero también puede ser muy gratificante. La mejor manera de seguir aprendiendo es construyendo más sitios web y seguir desafiándote en el camino. Si no tienes ningún proyecto con el que practicar, intenta inventar uno, o incluso copiar uno de tus sitios web favoritos. Una vez que te pongas cómodo con HTML y CSS, entonces te animaría a aprender un nuevo idioma, como JavaScript para realmente dar vida a tus sitios web. Por ahora sin embargo, un enorme agradecimiento de mi parte por tomar este curso, y espero que lo hayan disfrutado, junto con aprender algunas nuevas habilidades en el camino. 32. Sigue mi video en Skillshare: Enhorabuena enorme de mi parte por llegar al final de esta clase. Espero que realmente lo haya disfrutado y haya adquirido algún conocimiento de ella. Si has disfrutado de esta clase, asegúrate de revisar el resto de mis clases aquí en Skillshare. Además, sígueme para cualquier actualización y también para estar informado de cualquier nueva clase a medida que estén disponibles. Gracias una vez más. Buena suerte. Ojalá te vuelva a ver en una futura clase.