Maquetado del Footer

se puede utilizar la siguiente opción para ahorrarnos tiempo

<ul*2>li*4>a>

Los cuatro estados de enlaces son:

a:link - un enlace normal no visitado
a:visited - un enlace que el usuario ha visitado
a:hover - un enlace cuando el usuario pasa el mouse sobre él
a:active - un enlace en el momento en que se hace clic

Short para crear los menús del footer

ul>li*4>a
ul>li*3>a

Quiero aprovechar a hacer un aporte del cual tal vez puedan sacar utilidad, es posible que hayan visto que a veces el profesor usa combinaciones como li*4 para generar etiquetas de forma más rápido, bueno, esto es un plugin que ya trae Visual Studio Code por defecto llamado “Emmet”, este plugin fue la sensación en su día cuando salió porque permitía escribir código HTML más rápido y casi casi que programando, en editores como Sublime Text o Atom tenías que instalarlo por aparte, pero en Visual Studio Code ya viene instalado por defecto.

Les recomiendo mucho aprender sobre emmet:

https://code.visualstudio.com/docs/editor/emmet

Con los comandos: Shift + Alt + F se indenta solo el archivo HTML en visual studio code

Tambien pueden utilizar una opcion que se llama Multi Click Selector que les permite seleccionar en varias lineas y escribir simultaneamente en cada una de ellas presionando control y haciendo click en la linea que quieren escribir.
Ejemplo:

Iniciaria asi

y luego algo asi quedaria algo asi.

¡Ya casi!
Este proyecto esta a un pelo de ser un clon de Google 😮

Que importante es ir comentando el código… Para hacerlo rápido: Cntrl+Shift+a este para Linux

Muy buen curso!, es de practica el aprendizaje

Reto Completado.

**Mobile:
**

Tablet:

Desktop:

Si necesitan mas ejemplos acerca de Emmet para codificar html de manera mas facil aca les dejo la pag oficial donde se encuentran su documentacion completa con ejemplos:
Emmet

Poco a poco vamos ampliando la mente y entendiendo como va funcionando todo.

Es excelente las herramientas de inspección que utiliza en el navegador

super vamos ya casi 😄

por que en el <footer> no lo secciono con <section>? como en header y main ? o es opcional ???

Un footer cortito !

Comparto un tutorial del uso de margin… https://www.youtube.com/watch?v=Azfj1efPAH0&list=LL&index=2&ab_channel=KevinPowell
Creo que es una forma mas simple de ubicar texto solo con margin margin-left margin-right : auto, adicional a la propiedad .footer-style li:nth-of-type(n) …

Una buena práctica es que los caracteres especiales se escriban con entidades HTML y no con simplemente con las funciones del teclado como:

• & ntilde; (sin espacios) -> ñ

• & aacute; (sin espacios) -> á

• & eacute; (sin espacios) -> é

<footer>
    <ul class="footer-left">
      <li>
        <a href="">Publicidad</a>
      </li>
      <li>
        <a href="">Negocios</a>
      </li>
      <li>
        <a href="">Nosotros</a>
      </li>
      <li>
        <a href="">Como Funciona la Busqueda</a>
      </li>
    </ul>
    <ul class="footer-right">
      <li>
        <a href="">Privacidad</a>
      </li>
      <li>
        <a href="">Condiciones</a>
      </li>
      <li>
        <a href="">Preferencias</a>
      </li>
    </ul>
  </footer>```

Ya falta poco!!! me estoy haciendo adicto a platzi! a ver la siguiente clase!! Platzisalu2!

excelente, listo para dar los estilos, que en el primer reto del curso se me complico

Muy bien, cada vez más fácil se hace el comprender el uso correcto de cada elemento en el cuerpo.

Excelente, ya tenemos la estructura base el Footer.

Challenge accepted! Muy buena lección.

Esta parte del footer la hice antes de ver la clase, siento que ya he aprendido bastante

en mi ejercicio al contenedor del footer le puse position: absolute para que se fuera al final de la pagina

es muy divertido por que tengo altos conocimientos en css sin, embargo sigo aprendiendo truquitos dé los profes para usar en mis proyectos, estos cursos van de maravilla para novatos y avanzados en el tema

Mi footer:

Les recomiendo ver los atajos EMMET que ya están en VSCode

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

pueden usar
Ctrl+Shift+Alt+[flecha hacia abajo] para copiar y pegar una linea hacia abajo en Visual Studio Code

Genero una tabla en una pagina php con estilos en css, la quiero imprimir con chrome crtl+p en un principio la vista preliminar de la impresión salía a blanco y negro ya solucione eso, más sin embargo en pantalla la tabla genera un scroll tanto en el eje x como el eje y.
Solo imprime la parte en donde posicione el cursor y no la tabla entera en múltiples paginas. ¿En el CSS puedo solucionar esto?

Esta me funcionó en Vscode: ul>li*4>a

    <footer>
        <ul class="footer-left">
            <li><a href="#">Publicidad</a></li>
            <li><a href="#">Negocios</a></li>
            <li><a href="#">Acerca</a></li>
            <li><a href="#">Como funciona la busqueda</a></li>
        </ul>
        <ul class="footer-right">
            <li><a href="#">Privacidad</a></li>
            <li><a href="#">Condiciones</a></li>
            <li><a href="#">Referencias</a></li>
        </ul>
    </footer>```

Genial estamos a punto de terminar.

Si usas sublime text 3 para hacer los atajos de varios elementos primero tienes que apretar shift+control+P e instalar: Package Control: Install Package.

Despues haces lo mismo pero te va abrir un panel de plugins y añades emmet y lo instalas.

Y al final puedes hacer eso mismo de ul2>li4>a ó lo que necesites.

Realicé el footer antes de ver el video y el resultado es bastante bueno, lo único que me falta aprender es cómo mantener el footer abajo, porque siempre se me sube jajajaja
.-.-.-.-.-.-.-.
HTML

	<footer>
            <div class="footer-country">
                <p>Dinamarca</p>
            </div>
            <div class="footer-links">
                <span class="footer-links-left">
                    <a href="">Sobre Google</a>
                    <a href="">Publicidad</a>
                    <a href="">Empresa</a>
                    <a href="">Cómo funciona la Búsqueda</a>
                </span>
                <span class="footer-links-right">
                    <a href="">Privacidad</a>
                    <a href="">Términos</a>
                    <a href="">Configuración</a>
                </span>
            </div>
        </footer>

CSS

main footer {
    background-color: #f2f2f2;
    width: 100%;
    height: 95px;
    font-size: 15px;
}

main footer div p{
    color: #6f6f6f;
    width: 100%;
    height: 47.5px;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 30px;
}

main footer div a{
    color: #6f6f6f;
    margin-right: 25px;
}

main footer .footer-country {
    display: flex;
    height: 47.5px;
    border-bottom: 1px solid #dadce0;
}

main footer .footer-links {
    height: 47.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px 0 30px;
}

Que belleza

Yo lo estoy trabajando un poco diferente, sin usar ul y li. Saben si genera algun inconveniente hacerlo de esta forma?

<footer>
        <div class="footer-izq">
            <a href="">Publicidad</a>
            <a href="">Negocios</a>
            <a href="">Sobre Google</a>
            <a href="">Como funciona la busqueda</a>
        </div>
        <div class="footer-der">
            <a href="">Privacidad</a>
            <a href="">Condiciones</a>
            <a href="">Preferencias</a>
        </div>
    </footer>

Mi maquetado del footer:

💪💚

<footer>
        <ul class="footer-left">
            <li>
                <a href="">Publicidad</a>
            </li>
            <li>
                <a href="">Negocios</a>
            </li>
            <li>
                <a href="">Acerca de</a>
            </li>
            <li>
                <a href="">Como funciona la busqueda</a>
            </li>
        </ul>
        <ul class="footer-right">
            <li>
                <a href="">Privacidad</a>
            </li>
            <li>
                <a href="">Condiciones</a>
            </li>
            <li>
                <a href="">Preferencias</a>
            </li>
        </ul>
    </footer>```

Pueden usar Prettier para su Editor y todo les queda muy cool 😄

bien bien vamos ya casi ya casi lo termino y valla que estuvo bueno

A darle!

Shortcut para generar li con etiquetas a

<ul>
	(li>a)*4
</ul>
<ul>
	(li>a)*3
</ul>

Para identar en vs puden usar:
tab
o identar al revés:
shift + tab

Las indentaciones en VSC se puede hacer de la siguiente manera:
Shift + Alt + F

Lo tenemos de un pelo

Me faltaron cosas sin ver el video para cuadrar bien el footer toca seguir estudiando.

Un footer simple! 😀

Wuu ya casi acabamos

excelente ya estamos cerca de finalizar

A practicar más

Un atajo pero un poco mas largo seria asi:

footer>(ul.footer-left>(li>a{Publicidad})+(li>a{Negocios})+(li>a{Cómo funciona la Búsqueda}))+(ul.footer-right>(li>a{Privacidad})+(li>a{Condiciones})+(li>a{Preferencias}))

ya casi terminamos.

Paso a paso de la clase N° 15

• Paso 1
  
  
• Paso 2
  
  
• Paso 3
  
  
• Paso 4
  
  
• Paso 5
  
  
• Paso 6
  
  
• Paso 7
  
  

Se coloca un asterisco después del tago que queremos duplicar o multiplicar según el número de veces que deseamos. Ejemplo: <li*5> y se crean 5 elementos <li> (de lista).

Es buena practica poner un una ancla lo siguiente:

<code> <a href="" title="" alt=""></a>

Eso ayuda para las personas que tienen dificultad visual y que estan usando un sistema de ayuda vocal. Espero que ayude y nunca pares de aprender

En VSC, una forma fácil de replicar elementos de código, por ejemplo, el li con un a completo como el del ejemplo

      <li>
        <a href=""></a>
      </li>

es el sigueinte.

Seleccionamos todas las líneas de código, y presionar Shift + Alt + Flecha Abajo para duplicar por completo (incluyendo saltos de línea) el código seleccionado.

También funciona para líneas individuales.

Solo una pequeña observación, se dice unordered, no unordened

Yo lo hago de esta manera para ahorrar tiempo.
Espero les sirva de ayuda 😉

Así es el resultado!

<footer>
        <p>Honduras</p>
        <div>            
            <ul>
                <li class="footer__first-item"><a href="">Advertising</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">About</a></li>
                <li><a href="">How Search works</a></li>
            </ul>
            <ul>
                <li><a href="">Privacy</a></li>
                <li><a href="">Terms</a></li>
                <li><a href="">Settings</a></li>
            </ul> 
        </div>
    </footer>

Genial.

Ya casi.

Para ahorrar tiempo c:

ul*2>li*4>a

Que fácil escribir código así:

Pero faltó la parte donde dice México.

xD google!

    <footer>
        <ul class="footer-left">
            <li><a href="https://about.google/?utm_source=google-CL&utm_medium=referral&utm_campaign=hp-footer&fg=1">About</a></li>
            <li><a href="https://ads.google.com/intl/en_cl/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Advertising</a></li>
            <li><a href="https://smallbusiness.withgoogle.com/intl/es-419_cl/help/#!/">Business</a></li>
            <li><a href="https://www.google.com/search/howsearchworks/?fg=1">How search works</a></li>
        </ul>
        <ul class="footer-right">
            <li><a href="https://policies.google.com/privacy?hl=en-CL&fg=1">Privacy</a></li>
            <li><a href="https://policies.google.com/terms?hl=en-CL&fg=1">Terms</a></li>
            <li><a href="">Settings</a></li>
        </ul>
    </footer>

Thanks.

Qué buen curso, sin duda.