No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
10H
37M
16S

Maquetado del Footer

15/18
Recursos

Ya estamos en el final de nuestro proyecto clon de Google. 隆Hasta ahora ha sido bastante divertido! 驴Verdad? Justo ahora vamos a maquetar la estructura del pie de p谩gina o footer. Los estilos los aplicaremos m谩s adelante. 隆Directo a nuestro archivo HTML!

Pasos para poner la estructura del footer

  1. Primero abrimos nuestra etiqueta footer. Necesitamos seccionarla en dos partes: contenedores izquierdos y derechos.
  2. Creamos dos listas no ordenadas (ul) con cuatro y tres elementos (li) respectivamente.
  3. Creamos una etiqueta ancla (a) a cada elemento (li) de nuestra lista.
  4. Asignamos la clase footer-left a la primera lista y footer-right a la segunda.
  5. Ahora solo agregamos el texto dentro de cada una de los elementos (li) de las listas.
15.png

Tip: puedes usar emmet para abreviar la creaci贸n de las listas. De esta manera: <ul2>li4>a>.

Deber铆amos tener una imagen as铆 en nuestro navegador:
image.png

Por ahora, es funcional. 隆En la siguiente clase la dejaremos mucho m谩s bonita!

Contribuci贸n creada con aportes de: Kivindlg y Jos茅 Miguel Veintimilla.

Aportes 71

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淓mmet鈥, 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.

Con 茅ste curso me quedo preocupado de la facilidad con la que se puede clonar un sitio y usarlo para phishing 馃槗

隆Ya casi!
Este proyecto esta a un pelo de ser un clon de Google 馃槷

Muy buen curso!, es de practica el aprendizaje

Que importante es ir comentando el c贸digo鈥 Para hacerlo r谩pido: Cntrl+Shift+a este para Linux

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

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 !

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

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

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;
}

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) 鈥

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

Mi footer:

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

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.