No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Navbar: HTML

18/22
Recursos

Aportes 28

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

hace tiempo pensaba que Teff no explicaba las cosas muy bien y hacia todo muy complicado, sigo pensando lo mismo pero me he puesto a pensar que si no fuera por lo complicado que son sus explicaciones no me habria dado a la tarea de analizar y encontrar mejores maneras. en palabras cortas, he aprendido a verle el lado positivo a algo que aparentemente era negativo y aprender de ello.

Se le salió una llanta a mi carrito 😨

¿Trabajar con CSS separo o junto a mi HTML?
Normalmente Rexmaster se encarga de los comentarios con mucho texto, en esta ocasión seré yo.
Veo muchos comentarios sobre personas que no entienden porque la profesora no trabaja en CSS separado, pues esto es una buena practica. Lo que debemos entender todos es que las buenas practicas no son palabra del señor, sino que tienen un proposito, un contexto, un sentido.
Dicho esto, tener el CSS separado sirve cuando trabajamos sitios web clásicos, donde queremos controlar los estilos de todas las paginas desde un mismo docimento CSS.
Ahora bien, las cosas ya no se manejan de esta forma. Con la expasion de la web, la aparicion de las SPA el enfoque es de trabajar con componentes.
De tener el HTML, CSS y JS junto pero no revuelto en elementos para su reutilización. Y de hecho es asi como trabaja React y Vue.
No solo eso, sino que incluso ahora JS cuenta con Web Components nativo, mira tú.
El curso se trabaja con el CSS dentro del HTML pues como se explica en el video numero 4 luego cada archivo HTML se convertira en componentes. Gracias por tu atención si llegaste hasta aquí, a diferencia de Rex yo no tengo destreza uzando imagenes y estilos en comentarios xd

li*5

atajo en VSC para no tener que copiar y pegar

Tranquilo, el ul lo arreglaran 😃

Claramente estamos ante un gran profesional que maneja y sabe muy bien lo que esta haciendo, es verdad que realiza el proceso demasiado rápido, casi mecanizado, propio de alguien que lleva tiempo realizando una acción.

Sin embargo, creo que el mayor problema es que se olvidó que estaba enseñando, y va enumerando los pasos y acciones para ella misma, como cuando esta haciendo algo y hablas en voz alta para no perderte.

No niego que se aprende al corregir y buscar fuentes externas como debiese ser, pero hay procesos de etiquetas o estilos que ni idea que se está haciendo- no se explica el proceso que se está llevando a cabo, tú lo vez en tu navegador, pero la profesora dice un par de cosas para si misma. De hecho ella lo dice, lo tenemos automatizado, y no es así, quizás hemos realizado los mismo proceso a lo largo de este y el curso anterior, pero de ahí a tenerlos completamente integrado es mucho trecho.

Supongo que futuro estaremos igual, y genial, por lo pronto se sigue aprendiendo, aunque el curso fue grato hasta la clase 14.

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

Muchos de los estudiantes venimos acostumbrados al uso de HTML semántico del profesor Diego De Granda. Se le entiende muy bien porque va paso a paso explicando y planea cada clase. Al llegar a los cursos de Frontend Developer y a este que es el práctico, observo que la profe Estefany explica y usa varias propiedades de CSS y eso es positivo. He aprendido mucho. Ella es ágil y resuelve rápido los problemas que se le presentan. Pero hay algo que no me ha gustado y es lo mucho que cambia el código HTML después de haberlo maquetado en clases anteriores y los saltos que hace desde el html y luego la etiqueta style en desorden. Se confunde mucho y se come letras en las palabras y eso genera confusión en los estudiantes que la seguimos paso a paso. Aparte veo que usa mucho div cuando es claro que nos hablan de "buenas prácticas, pero es algo que he ido comprendiendo a lo largo del tiempo cuando el código se hace más extenso y eso nos lleva a usarlo. Pero ahorita que estamos aprendiendo muchos desde cero debería usar más HTML semántico.

Ya me adelante un poquito con el diseño del navbar 🚀
🌐 Les comparto en GitHub el código que use: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:


.
Vista Móvil:

ul>li*6>a ¿Que significa esto? esto es sintaxis de emet, una extension que viene por defecto en VSCODE donde los > significan poner un elemento hijo (elemento padre; >; elemento hijo). Tambien puedes poner ul>li{$}*5, donde los corchetes signican el contenido que le pondremos en su interior y el simbolo de dinero tambien son sintaxis emet por si quieres hacer una lista numerica, tambien lo puedes cambiar por palabras o agragar mas simbolos de dinero para tener mas digitos

Buena tarde, en mi opinion tengo que decir que el desarrollo es un proceso muy complicado es necesario documentarnos con varias fuentes, en cuanto al curso seria bueno trabajar con Proprocesadores de tipo sass o similares.

Veo comentarios un poco negativos de este curso. Dos cosas: claramente al inicio del curso JuanDC menciona que no se van a usar buenas practicas con el fin de facilitar la enseñanza y en segundo lugar no me parece tan desorganizado el curso.
No todo lo debe dar el docente pues uno debe ir mas alla de lo que dice.

Para VSCode en Windows, la combinación de teclas:

Shift + Alt + Flecha hacia Abajo

Copia la línea en la que se encuentre el cursor o las líneas en las que estemos seleccionando justo debajo de donde nos encontramos.

Escriban lo siguiente para agilizar las listas

ul>li*6>a

El resultado:

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

Gracias EMMET

no ocupen ‘/’ en href, es mejor solo ‘#’

Me pasa lo mismo xD…
“Por decirlo en español lo copie es spaninglis”

Estos son mis apuntes de esta clase:
Debes tener en cuenta que la estructura será:
.Nav
Icono (img) que se utilizara en la visualización mobile.
Div
Logo
ul
li
li
li
li
li
div
ul
correo (li)
li (img
div)

Ok, normalmente si un maestro enseña o explica mal, se lo hago ver, pero en este caso no es así.
En este caso puedo decir que me gusta el curso pero porque yo ya tengo una base de CSS, si fuera completamente nuevo diria que este curso no es recomendable para alguien que apenas empieza.

Creo que el truco del asunto es ponerle reto a todo, y mas si es un curso practico. Se supone que aquí estas poniendo a prueba lo que ya aprendiste. Ahora tocar hacer, romper, hacer de nuevo.
.
En mi caso, aun cuando explico el porque estaría haciendo el CSS en en HTML, decidí hacerlo aparte y asumir que tenia que hacer ajustes a medida que iban pasando las clases.
.
Aquí estoy en la clase 11, con un solo archivo CSS y con todo el proyecto tal cual como lo están en los mokups, me llevo mas tiempo si, pero he asentado mas los conocimientos.
.
Creo que los que se quejan tanto y no ven los diferentes contextos, es porque les hace falta la madurez necesaria

Vamos chicos, no hay que ser tan duro con la profesora, miren en mi experiencia lo que yo hago cuando no comparto una idea, una actitud, o simplemente en la forma de hacer las cosas… lo que hago es lo siguiente (en este caso):
.

  • Hago todo igual como lo hace la profesora.
  • Después de esto, analizó lo que se ha hecho o lo que hizo la profesora (cómo coloco los elementos, que etiquetas ocupo, la semántica, los estilos, etc.).
  • Luego, una vez que se halla analizado el procedimiento y lo que se aplicó, genero mi propio criterio, obviamente para este caso tú tienes que tener al menos las bases del conocimiento o del tema (HTML y CSS en este caso).

.
Entonces es ahí donde se aplica el conocimiento y tu propio criterio, esa es la súper incógnita:

  • ¿Cómo es que tú mejorarías ese código?, o más bien
  • ¿Cómo crees tú que debería estar escrito ese código?.

.
Y eso es aprender, si no analizas, si no te equivocas, si no lo intentas, jamás vas a aprender, solo vas a hacer un copy/paste de alguien más.
.
NOTA: Debemos recordar, que venimos a aprender, no venimos por el paso a paso o la receta mágica.
.
Probablemente, algunos de ustedes dirán… que por eso pague y que por eso merezco que me digan el paso a paso o esa “receta mágica” o que soy un conformista, cada quien puede opinar lo que lo piensa y está bien, únicamente hago mi aportación a este tema y probablemente tengan un plan para esta forma de trabajo, sé paciente y esperemos en los siguientes cursos exista una conexión con esta forma de trabajo y podamos entender, que es lo que veremos o a lo que nos vamos a enfrentar.

el tema aca es que la profe no esta enseñando, esta narrando lo que esta haciendo, no hay una secuencia logica de lo que viene, deberia haber un indice logico de lo que sige porque si no todo es como una sorpresa y no da chance de entenderlo

¿Conoces EMMET?
Es una forma de agilizar como escribes HTML. Haz la siguiente prueba en Visual Studio. Si tienes un ul, con 7 li, cada uno con un hijo a, escribe:
ul>(li>a)*7
Dale al enter y ¡Sorpresa!

Mi codigo…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav>
        <img src="./icons/proximo.png" alt="menu" class="menu">
        <div class="navbar-left">
           <img src="./" alt="logo" class="logo">
           <ul>
               <li>
                   <a href="/">All</a>
               </li>
               <li>
                <a href="/">Clothes</a>
            </li>
            <li>
                <a href="/">Electronics</a>
            </li>
            <li>
                <a href="/">Furnitures</a>
            </li>
            <li>
                <a href="/">Toys</a>
            </li>
            <li>
                <a href="/">Others</a>
            </li>
           </ul>
        </div>
        <div class="navbar-right" >
            <li>[email protected]</li>
            <li class="navbar-shopping-cart">
                <img src="./" alt="shopping-cart">
                <div>2</div>
            </li>

        </div>
    </nav>
    
</body>
</html>

Excelente clase! Excelente profe!
Se que es dificil quitar una muletillla, pero seria bueno que reemplazaras la palabra “Basicamente”

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
:root {
–white: #FFFFFF;
–black: #000000;
–very-light-pink: #C7C7C7;
–text-input-field: #F7F7F7;
–hospital-green: #ACD9B2;
–sm: 14px;
–md: 16px;
–lg: 18px;
}
body {
margin: 0;
font-family: ‘Quicksand’, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 0 24px;
border-bottom: 1px solid var(–very-light-pink);
}
.menu {
display: none;
}
.logo {
width: 100px;
}
.navbar-left ul,
.navbar-right ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
height: 60px;
}
.navbar-left {
display: flex;
}
.navbar-left ul {
margin-left: 12px;
}
.navbar-left ul li a,
.navbar-right ul li a {
text-decoration: none;
color: var(–very-light-pink);
border: 1px solid var(–white);
padding: 8px;
border-radius: 8px;
}
.navbar-left ul li a:hover,
.navbar-right ul li a:hover {
border: 1px solid var(–hospital-green);
color: var(–hospital-green);
}
.navbar-email {
color: var(–very-light-pink);
font-size: var(–sm);
margin-right: 12px;
}
.navbar-shopping-cart {
position: relative;
}
.navbar-shopping-cart div {
width: 16px;
height: 16px;
background-color: var(–hospital-green);
border-radius: 50%;
font-size: var(–sm);
font-weight: bold;
position: absolute;
top: -6px;
right: -3px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 640px) {
.menu {
display: block;
}
.navbar-left ul {
display: none;
}
.navbar-email {
display: none;
}
}
</style>
</head>
<body>
<nav>
<img src="./icons/icon_menu.svg" alt=“menu” class=“menu”>

<div class="navbar-left">
  <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

  <ul>
    <li>
      <a href="/">All</a>
    </li>
    <li>
      <a href="/">Clothes</a>
    </li>
    <li>
      <a href="/">Electronics</a>
    </li>
    <li>
      <a href="/">Furnitures</a>
    </li>
    <li>
      <a href="/">Toys</a>
    </li>
    <li>
      <a href="/">Others</a>
    </li>
  </ul>
</div>

<div class="navbar-right">
  <ul>
    <li class="navbar-email">[email protected]</li>
    <li class="navbar-shopping-cart">
      <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
      <div>2</div>
    </li>
  </ul>
</div>

</nav>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav>
        <img src="./icons/icon_menu.svg" alt="menu" class="menu">

        <div class="navbar-left">
            <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

            <ul>
                <li>
                    <a href="/">All</a>
                </li>
                <li>
                    <a href="/">Clothes</a>
                </li>
                <li>
                    <a href="/">Electronics</a>
                </li>
                <li>
                    <a href="/">Furnitures</a>
                </li>
                <li>
                    <a href="/">Toys</a>
                </li>
                <li>
                    <a href="/">Others</a>
                </li>
            </ul>
        </div>

        <div class="navbar-right">
            <li>[email protected]</li>
            <li class="navbar-shopping-cart">
                <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
                <div>2</div>
            </li>
        </div>
    </nav>
</body>
</html>

a darle con todo hasta el final!

Codigo HTML:

<nav>
        <img src="./icons/icon_menu.svg" alt="menu" class="menu">
        <div class="navbar-left">
            <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">
            <ul>
                <li>
                    <a href="#">All</a>
                </li>
                <li>
                    <a href="#">Clothes</a>
                </li>
                <li>
                    <a href="#">Electronics</a>
                </li>
                <li>
                    <a href="#">Furnites</a>
                </li>
                <li>
                    <a href="#">Toys</a>
                </li>
                <li>
                    <a href="#">Others</a>
                </li>
            </ul>
        </div>
        <div class="navbar-right">
            <li>[email protected]</li>
            <li class="navbar-shopping-cart">
                <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
                <div>2</div>
            </li>
        </div>
    </nav>