Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

Maquetación de la pantalla de login: Estructura HTML

30/43
Recursos

En esta clase vamos a continuar con la construcción de nuestro proyecto PlatziVideo. Para esto vamos a reutilizar la estructura y estilos del menú desplegable que construimos en las siguientes clases:

Aportes 178

Preguntas 24

Ordenar por:

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

Metodología BEM :
Separa los bloques, elementos y modificadores.

-Bloque: login
-Elemento: login__cotnainer
-Modificador: Login__container–form, –social-media y --register

Me parece que se debe tener cuidado con el código que se hace fuera de cámara ya que esto puede confundir a muchos, se qué se esta trabajando con el header que se hizo con anterioridad pero aquí ya tiene el proyecto más organizado y en carpetas, eso nunca se ve y si que llega a confundir un poquito, por lo demás el curso va bastante bien y fluido.

Para seguir esta clase, se trabaja con el codigo del archivo header que hicimos anteriormente. Antes de comenzar, lo adaptamos a la metodología BEM.

Aquí comparto el archivo para comenzar desde el mismo punto donde comienza la clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Header</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
</head>
<style>
    body {
        margin: 0px;
        background-color:  #21C08B;
        font-family: 'Muli', sans-serif;
    }
    .header {
        background-color: #21C08B;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-left: 30px;
    }
</style>
<body>
    <header class="header">
    <img class="header__img" src="logo-platzi-video-BW2.png" alt="">
    </header>
    <section class="login">
        <section class="login__container">
            <h2>Inicia sesión</h2>
            <form class="login__container--form">
                <input class="input" type="text" placeholder="Correo">
                <input class="input" type="password" placeholder="Contraseña">
            </form>
        </section>
    </section>
</body>
</html>

Qué desgastante es cuando no te explican como se llega a la situación inicial del video y tener que ver los comentarios de los alumnos para ver que pasó.
Encima, al abrir los archivos del repositorio el HTML nos se despliega de la misma situación inicial que muestra la profesora. El Logo no se muestra correctamente, por lo que tengo que hacer un trabajo adicional.
No es didáctico.

Esta una guía para entender un poco más la metodologia BEM
https://9elements.com/bem-cheat-sheet/

Nose !! muy educada y extremadamente bella la profe.. pero avece siento que me confunde...

Hola, sugiero que al inicio del curso se elabore una carpeta con todos los proyectos con los cuales el maestro va a trabajar y dar a entender a los alumnos que iremos cambiando de archivos html. Si bien es comprensible lo que hace la profesora, no viene mal un poco mas de claridad al momento de elaborar nuevos archivos o ir brincando en anteriores.

Yo pienso que no se esta usando correctamente la metodologia BEM:
Bloque es el login
Elementos: boton, input

La documentacion dice:
Bloque: Entidad independiente que es significativa por sí misma
Elemento: No tienen un significado independiente. Cualquier elemento está semánticamente vinculado a su bloque.
Modificadores: Para cambiar la apariencia, el comportamiento o el estado

Aún estoy un poco desconcertado, como es posible que después de un año no solucionen este incoveniente de la clase mal editada, aún no sé que hacer. Si bien, varios compañeros de la comunidad han compartido el código, la clase debería estar bien desde el principio, no supe si hacer un nuevo archivo html, continuar con el primero que habíamos empezado o que. No me parece justo. Creo que de verdad pagamos un servicio de calidad como para que salgan con esto.

Según yo en el login__container–form form no es un modificador

            <form action="" class="login__container--form"></form>

Debería de ser login__form porque form es un hijo, los modificadores serían como selected o algo así

            <form action="" class="login__form"></form>

PORFAVOR … sean ordenados en sus VIDEOS … esto no cuadra con los anterior visto

saludos

Código desarrollado en clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"content="ie=edge">
    <title>Header</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap"rel="stylesheet">
</head>
<style>
    body {
        margin: 0px;
        background-color:  #21C08B;
        font-family: 'Muli', sans-serif;
    }
    .header {
        background-color: #21C08B;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-left: 30px;
    }
</style>
<body>
    <header class="header">
    <img class="header__img"src="https://static.platzi.com/media/tmp/class-files/git/curso-frontend-escuelajs/curso-frontend-escuelajs-maquetacion-login-HTML/maquetacion-login-HTML/assets/logo-platzi-video-BW2.png"alt="">
    </header>
    <section class="login">
        <section class="login__container">
          <h2>Login</h2>
          <form class="login__container--form">
            <input class="input" type="text" placeholder="Email"/>
            <input class="input" type="password" placeholder="password"/>
            <button class="button">Log In</button>
            <div class="login__container--remember">
                <label >
                    <input type="checkbox" id="checkbox" value="checkbox">Remember me
                </label>
                <a href="/">I forgot my password</a>
            </div>
          </form>
          <section class="login__container--social">
              <div>
                  <img src="https://static.platzi.com/media/tmp/class-files/git/curso-frontend-escuelajs/curso-frontend-escuelajs-maquetacion-login-HTML/maquetacion-login-HTML/assets/google-icon.png" alt="google icon">Sign In with Google
              </div>
              <div>
                  <img src="https://static.platzi.com/media/tmp/class-files/git/curso-frontend-escuelajs/curso-frontend-escuelajs-maquetacion-login-HTML/maquetacion-login-HTML/assets/twitter-icon.png" alt="icon twitter">Sign In with twitter
              </div>
          </section>
          <p class="login__container--register">You don't have account,<a href="/"> Register</a></p>
        </section>
    </section>
    <footer class="footer">
        <a href="/">Terms</a>
        <a href="/">Privacity</a>
        <a href="/">Help</a>
    </footer>
</body>
</html>


La verdad si es confuso que inicie diciendo que ya tenemos el header, empezando porque el proyecto sobre el que esta trabajando es uno nuevo, no el que trabajamos en clases anteriores, entonces debería ser un poco más clara y especifica. Además es un curso básico, y los que no tienen mucho conocimiento quedan perdidos.

En mi caso como un tema de reto personal, quise hacerlo solo con mirar la página, creo que me salió bastante bien, no idéntico, pero sí responsive al mobile, y si dan clic en el logo, vuelven a mi versión de la página principal que está implementada también a mi manera:

Pueden visitar la página aquí:
Platzi Video Login

Diferentes tipos de input:
<input type=“button”>
<input type=“checkbox”>
<input type=“color”>
<input type=“date”>
<input type=“datetime-local”>
<input type=“email”>
<input type=“file”>
<input type=“hidden”>
<input type=“image”>
<input type=“month”>
<input type=“number”>
<input type=“password”>
<input type=“radio”>
<input type=“range”>
<input type=“reset”>
<input type=“search”>
<input type=“submit”>
<input type=“tel”>
<input type=“text”>
<input type=“time”>
<input type=“url”>
<input type=“week”>

Más información…

¿En que momento hicismo esto? Me saco de onda todo esto

Si han llegado hasta aquí por el JS Challenge y aún tienen lagunas, les recomiendo tomar estos cursos también:

HTML y CSS

HTML y CSS 2019

No entendí de donde sacaron este código, no es continuo a la clase anterior de grid

Para los que se preguntan (me incluyo) de donde salio el archivo:
iniciar-sesion.html , asumo que sera el archivo llamado header.html que es el mas parecido… sin embargo hay algunas lineas que no cuadran o faltan, yo las agregue guiándome del archivo adjunto llamado **iniciar-sesion.html **ubicado en Archivos y Enlaces

debería seguir una secuencia el curso, al menos quienes estamos aprendiendo nos perdemos por donde van, se que eso ayuda hasta cierta parte a moverse y buscar documentación pero no cuadra el vídeo con lo que se va viendo, espero que corrigan o ayuden de platzi esta parte, al menos existe una forma de compartir el código de quienes ya tienen más experticia en el área porque de una cosa a otra no se sabe donde queda uno

Gracias a los comentarios de los compañeros pude entender sobre este código, de no ser por ellos me habría estallado la cabeza. Creo que no hay que dar por sentado ciertas cosas ni ir demasiado rápido. Por lo demás se me está haciendo ameno.

En SEO andamos mal, los elementos section son para contenidos tematicos y no para elementos o bloques de contenido independientes, ubisese sido mejor usar un article como contenedor principal y los section para dividir el formulario de la sección de iconos. Además los section no puden tener como etiquetas hijas directamente a otros section, los article sí, en mi humilde opinión!!

Parece que hay video previo a este pero no está. hay que hacer las carpetas y asignar los nombres a los archivos. Aquí usarás el header.html que si se hizo anteriormente.

De donde salio el iniciar-sesion.html con todo el style ya codeado?

Si no encuentran los iconos en icons8, pueden buscar en fontawesome

En mi opinión el curso está excelente. Comparto el comentario que hacen muchos. Deben tomar cursos previos más básicos. Tampoco queramos todo peladito y a la boca. En la industria nuestros jefes dirán quiero esto y a ver cómo le haces, no se pondrán a explicar con manzanas. Incluso desarrolladores con mas experiencia tienen que acudir a hacer preguntas o investigar. Por algo existe Stack overflow por ejemplo. Ese trabajo extra que a lo mejor hacemos es donde se puede aprender mucho y es más satisfactorio hacerlo por tu cuenta.
Me atrevo a decir que la profesora a parte de HERMOSA es muy buena en lo que hace.
No digo esto con intención de ofender. Aclaro!!!
Saludos compañeros.
lml

De mucha utilidad: para agregar, modificar y basicamente usar íconos facilmente, vayan a https://ionic.io/ionicons, elijan el ícono que quieran y apliquenlo en su HTML sin descargarlo. Deben leer el Usage para saber utilizar esta herramienta, pero es tan simple como solo agregar un <script> al final de la página y luego para llamar el ícono que quieran, y si desean, pueden modificarlo en CSS! (aquí se encuentran el logo de Google y Twitter).

Mientras hacia esta clase revise la propiedad linear-gradient y algo que me causo curiosidad es esta no sirve con background-color, en cambio esta funciona con background-image. Estuve revisando el porque de este comportamiento y encontré lo siguiente:

Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background.
For this reason, linear-gradient won’t work on background-color and other properties requesting <color>.

De modo que este se comporta como una imagen y no se puede inplementar con la propiedad debackground-color u otra propiedad con color.

creo que muchos de nosotros estuvimos o estamos confundidos en cada inicio de una nueva parte del proyecto que hace la profesora, pero lo que hace la profe es aplicar lo que explicó acerca de los componentes, es decir el codido del header (que normalmente pasa en todas las paginas web) se reutiliza en todas las secciones de la pagina, es decir ese pedazo de cogido del header y normalmente del footer (aunque no en todos los casos) es el mismo y siempre van a ir en cada una de las secciones, es por eso que las etiquetas son únicas.
Como consejos deberíamos ir creando nuestros html con los mismos componentes header y footer

esta estuvo raro el inicio pero tranquilos solo es el header en un nuevo documento

Hola, tengo una pregunta, ¿Ustedes saben porque acá ella usa o tiene su css en la misma hoja de html? pregunto esto porque en otros curso he visto que aconsejan tenerlas en archivos distintos.

Después de haber llevado los cursos con el profesor De Granda, no sé si este curso deba de seguir en platzi. Creo que deberpia ser actualizado por uno que sea más didáctico y con mejores prácticas. No veo bien eso de poner el texto al aire en dentro de los div. Menos de no explicar bien qué se está haciendo con los archivos. Y eso de que “hay que investigar”…

El código no valida en w3. org, deberían revisar el contenido que enseñan, porque lo que están enseñando es incorrecto

Porque no siguio el codigo que veniamos trabajando?hay cosas que faltan.

Así me va quedando la estructura

Recomendación es usar input type:submit

<input type="submit" value="Iniciar sesión">

Tengo una pregunta en la metodología BEM un buttono el inicio de sesión que serian elementos o modificadores díganme si estoy mal pero el iniciar sesión es un modificador y el button en un elemento estoy en lo correcto ?

Al principio me perdi porque no sabia en que parte estaba y el porque de todos esos cambios de una clase para otra, asi que duplique los archivos de la clase buscador borre el main y reemplace todo como en la clase, y pues asi vamos.
![](

considero que no debió colocar los iconos de google y twitter dentro de un div, existen mejores practicas para poder realizar eso.

Como consejo sugiero que cuando se pongan acentos a palabras, se coloquen como unicode
A continuación dejo un link de ayuda, esto para evitar problemas con la codificación.
HTML Unicode UTF-8

Quizás abría que pulir un poco mas la metodología BEM pero mas allá de eso buena clase!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <title>Platzi Videos</title>
</head>
<body>
    <header class="header">
        <img class="header__img" src="https://raw.githubusercontent.com/platzi/PlatziVideo/feature/react/src/assets/static/logo-platzi-video-BW2.png" alt="Platzi Video">
    </header>
    <section class="login">
        <div class="login__container">
            <h2>Inicia Sesión</h2>
            <form action="" class="login__container--form">
                <input class="input--form" type="text" placeholder="Correo">
                <input class="input--form" type="password" placeholder="Contraseña">
                <button class="button">Iniciar Sesión</button>
                <div class="login__container--remember-me">
                    <label>
                        <input type="checkbox" id="cbox1" value="checkbox">Recuerdame
                    </label>
                    <a href="">Olvidé mi contraseña</a>
                </div>
            </form>
            <section class="login__container--social-media">
                <div><img src="./assets/google-icon.png" alt="Google">Inicia sesión con Google</div>
                <div><img src="./assets/twitter-icon.png" alt="Twitter">Inicia sesión con Twitter</div>
            </section>
            <p class="login__container--register">No tienes ninguna cuenta <a href="">Registrate</a></p>
        </div>
    </section>
    <footer class="footer">
        <a href="">Términos de uso</a>
        <a href="">Declaración de privacidad</a>
        <a href="">Centro de ayuda</a>
    </footer>
</body>
</html>```

Excelente! Es muy importante saber crear formularios 😃

Listo!

Así voy, aún me falta la página de inicio, donde diga mi lista arriba del carrusel, y he sufrido y me he frustrado, pero bueno ahí voy.

Después de ver el curso mobile-first. He decidido hacerlo por mi cuenta para practicar:

Para los iconos es bueno utilizar librerías como Font Awesome las cual tiene una versión gratis bien completa y uno no debe complicarse en buscar imagenes en png y buena calidad.

<i class="fab fa-google"></i>
<i class="fab fa-twitter"></i>

Yo utilicé mi metodología de BEM así.

No sé si quedó peor.

Gracias por los comentarios constructivos. Alguna recomendación para entender mejor esta metodología se agradece.

Saludos platzinautas.

Un pequeño de detalle, que no influye, pero… bueno.

En el input tipo checkbox, el value escrito es Checkbos, creo que iba una X. Aunque es el Value y podria ir _pepito _ o sutanito, pero creo que seria bueno cambiar el codigo fuente en esa linea.

Recuerde, un minimo, minimo detalle.

Abrazos.

CDN de Iconos utilizados en esta clase

<img src="https://img.icons8.com/material-sharp/24/ffffff/google-logo.png"/>
<img src="https://img.icons8.com/android/24/ffffff/twitter.png"/>

Para los que estan confundidos:
Pueden copiar y pegar todo el html de la pantalla donde teníamos el buscador, en otro archivo .html nuevo y de este modo reutilizar el código del header y footer.

El section a partir del cual comienza esta clase estaría reemplazando el código del section anterior.
Espero les sea de ayuda. 😃

nota: Guarden todos los archivos html y css generados en este curso ya que se utilizaran mas adelante en sus respectivas rutas de aprendizaje

practicando ando…
mi página de logueo…

Pensé que seguia la parte de como terminar el carousel, es un poco enredado este curso…

Exclente clase.

Con ganas ya de darle estilo! Ánimo a todos ya queda nada para terminar el curso 😃

Me gusta mucho el diseño de platzivideo

que nos diga que vamos a usar el header del trabajo anterior, por que siguio sin explicar bien lo que se iba a realizar.

Código de la clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Header</title>
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
</head>
<style>
    body {
        margin: 0px;
        background-color:  #21C08B;
        font-family: 'Muli', sans-serif;
    }
    .header {
        background-color: #21C08B;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-left: 30px;
    }
</style>
<body>
    <header class="header">
    <img class="header__img" src="./imagenes/logo-platzi-video-BW2.png" alt="">
    </header>
    <section class="login">
        <section class="login__container">
            <h2>Inicia sesión</h2>
            <form class="login__container--form">
                <input class="input" type="text" placeholder="Correo">
                <input class="input" type="password" placeholder="Contraseña">
                <button class="button">Iniciar seción</button>
                <div class="login__container--remember-me">
                    <label>
                        <input type="checkbox" id="cbox1" value="checkbox">Recuérdame
                    </label>
                    <a href="/">Olvidé mi contraseña</a>
                </div>
            </form>
            <section class="login__container--social-media">
                <div><img src="./imagenes/google-icon.webp" alt="">Inicia seción con Google</div>
                <div><img src="./imagenes/twitter-icon.png" alt="">Inicia seción con Twitter</div>
            </section>
            <p class="login_container--register">No tienes ninguna cuenta <a href="Regístrate"></a></p>
        </section>
    </section>
    <footer class="footer">
        <a href="/">Términos de uso</a>
        <a href="/">Declaración de privacidad</a>
        <a href="/">Centro de ayudao</a>
    </footer>
</body>
</html>

Un buen video para entender mejor sobre la metodología BEM:
https://www.youtube.com/watch?v=bvnzyXGkNY4

El atributo for del label hace referencia al id de un campo del formulario, en este caso, por ejemplo, el del checkbox, al poner el id que tiene el checbox en el for del label, lo que hacemos es asociarlo, mejorar accesibilidad y usabilidad, esto quiere decir que si clicamos en el texto Recuérdame, al estar asociado, es como si hiciéramos click en el checkbox.

Avanzando!!

les comparto mi resultados.

recuerden que esta pagina será su login les recomiendo que el código anterior lo dejen tal cual y empiecen uno nuevo llamado Login así podrán tener una estructura y una indentación excelente desde el inicio.

como lo muestra a continuación mi árbol de este proyecto.

Código Login Html.
<!DOCTYPE html>
<html lang=“es”>

<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”>
<meta name=“author” content=“Cesar Paulino”>
<title>Iniciar Sesión</title>
<link rel=“shortcut icon” href=“icons/favicon.png”>
<link rel=“stylesheet” href=“css/platzi.css”>
<link href=“https://fonts.googleapis.com/css2?family=Muli&display=swap” rel=“stylesheet”>
</head>

<body>
<header class=“header”>
<img class=“header__img” src=“images/logo-platzi-video.png” alt=“Platzi Video”>
</header>

<section class="login">
    <section class="login__container">
        <h2>Inicia sesión</h2>
        <form action="" class="login__container--form">
            <input class="input" type="text" placeholder="Correo">
            <input class="input" type="password" placeholder="Contraseña">
            <button class="button">Iniciar sesión</button>
            <div class="login__container--remember-me">
                <label>
                    <input type="checkbox" name="" id="cbox1" value="checkbos">Recuérdame
                </label>
                <a href="/">Olvidé mi contraseña</a>
            </div>
        </form>
        <section class="login__container--social-media">
            <div><img src="/icons/google-icon.png" alt="Google">Inicia sesión con Google</div>
            <div><img src="/icons/twitter-icon.png" alt="Twitter">Inicia sesión con Twitter</div>
        </section>
        <p class="login__container--register">No tienes ninguna cuenta <a href="">Regístrate</a></p>
    </section>
</section>

<footer class="footer">
    <a href="/">Términos de uso</a>
    <a href="/">Declaración de privacidad</a>
    <a href="/">Centro de ayuda</a>
</footer>

</body>

</html>

utilizando el mismo CSS que hemos estando construyendo en las clases anteriores.

Asi va quedando mi Login:

yo pienso que debería mostrarlo desde el comienzo porque me pierdo y me toca ver el video como mil veces para entenderlo y por favor no hable tan rápido

No, mala edición venía bien y de repente ya no sé que hacer. Quedé perdido

<!--Nunca pares de aprender <3-->


Así va quedando:)

No quedo claro la etiqueta label xq no usar div ???
HELP ME

No sería mejor poner el input de correo como tipo email ?

Teacher Estefany, las clases no tienen un consecutivo de las actividades que se van realizando, saltan de un desarrollo a otro sin culminar lo que se esta trabajando y confunde demasiado a los que aun estamos aprendiendo los temas, si se fija hay varios usuarios que se quejan por el mismo detalle, aquí en “Inicia Sesión” ya me confundí del código que ya había y que nunca cree con anterioridad y he seguido cada clase en orden

Como la interface está en español, en la etiqueta inicial debe de ir _<html lang=“es”> _ para evitar que el navegador (chrome) me lance la notificación de traducir página… eso como tip ya que es algo que siempre se nos pasa por alto.

Excelente clase sobre como maquetar un formulario de login, esperemos que en la de clase de estilización sea lo mas claro posible. Además si estas desde cero sería bueno hacer primero los cursos de Diego de Granda de la escula de Diseño Web.

Descarga de íconos utilizados en la clase:
-ícono de Google
-ícono de Twittter

precisamente, en los saltos del video y los “retos”, es la oportunidad para usar la logica y aplicar sus soluciones… no todo es copiar y copiar codigo de los videos sin saber el porque se escribe eso… logica de programacion amigos

Mi código 😄

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">
    <link rel="stylesheet" href="styles/style.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="header__image-div">
            <figure class="image-container image-container--header-image">
                <img class="header__image" src="images/logo-platzi-video-BW2.png" alt="logo">
            </figure>
        </div>
    </header>
    <main class="login">
        <form>
            <h1 class="login__main-title">Inicia sesión</h1>
            <input class="login__email" type="email" id="email" autocomplete="email" placeholder="Correo">
            <input class="login__password" type="password" id="password" autocomplete="current-password" placeholder="Contraseña">
            <input type="button" value="Iniciar sesión">
            <div class="login__remember-me">
                <label for="checkbox">
                    <input class="login__checkbox" type="checkbox" id="checkbox">
                    <span class="login__remember-me-text">Recordar mi contraseña</span>
                </label>
                <a class="login__forgot-passw" href="#">Olvidé mi contraseña</a>
            </div>
            <div class="login__social-med-login">
                <a href="#">
                    <figure class="image-container">
                        <img class="login__image login__image--twitter" src="images/twitter_icon.png" alt="">
                    </figure>
                </a>
                <a href="#">
                    <figure class="image-container">
                        <img class="login__image login__image--google" src="images/google_icon.png" alt="">
                    </figure>
                </a>
            </div>
            <p class="login__text--noaccount?">¿No tienes ninguna cuenta?<a class="login__link login__link--register" href="">Regístrate</a></p>
        </form>
    </main>
    <footer class="footer">
        <ul>
            <li><a class="footer__link" href="#">Términos de Uso</a></li>
            <li><a class="footer__link" href="#">Declaración de Privacidad</a></li>
            <li><a class="footer__link" href="#">Centro de Ayuda</a></li>
        </ul>
    </footer>
</body>
</html>

Les comparto la estructura html utuilizando la nomenclatura de BEM (Bloque Elemento Modificador) de la mejor forma

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
    <header class="header">
        <img class="header__img" src="../icon/logo-platzi-video-BW2.png" alt="Logo de mi sitio">
    </header>
    <main>
        <section class="login"> <!--Bloque -->
            <div class="login__container"> <!--Elemento-->
                <h2 class="h2--white">Inicia sesión</h2> <!--Modificador-->
                <form class="login__form"> <!--Elemento-->
                    <input class="input" type="text" placeholder="Correo">  <!--Elemento-->
                    <input class="input" type="password" placeholder="Contraseña"> <!--Elemento-->
                    <button class="button">Iniciar sesión</button> <!--Elemento-->
                    <div class="login__rememberme"> <!--Elemento-->
                        <label>
                            <input type="checkbox" id="cbox1" value="checkbox">Recuérdame 
                        </label> 
                        <a class="login__link" href="/">Olvidé mi contraseña</a>  <!--Elemento-->
                    </div>
                </form>
                <div class="login__socialmedia"> <!--Elemento-->
                    <div class="login__socialitem"> <!--Elemento-->
                        <img class="login__socialitemimage" src="../icon/icons8-google-plus-50.png" alt=""> <!--Elemento-->
                        <p class="login__socialparrafo"> <!--Elemento-->
                            Inicia sesión con Google
                        </p>
                    </div>
                    <div class="login__socialitem"> <!--Elemento-->
                        <img class="login__socialitemimage" src="../icon/icons8-twitter-50.png" alt=""> <!--Elemento-->
                        <p class="login__socialparrafo"> <!--Elemento-->
                            Inicia sesión con Twitter
                        </p>
                    </div>
                </div>
                <div class="login__socialitem"> <!--Elemento-->
                    <p>No tienes ninguna cuenta</p>
                    <a class="login__link" href="#">Registarte</a> <!--Elemento-->
                </div> 
            </div>
        </section>
    </main>
    <footer class="footer">
        <a href="/">Términos de uso</a>
        <a href="/">Declaración de privacidad</a>
        <a href="/">Centro de ayudao</a>
    </footer>
</body>

</html>

De pronto al igual que yo mas de un compañero quedo perdido con el código de esa clase, lo importante es seguir aprendiendo y no enojarnos o frustrarnos por cosas así. Yo lo que hice fue copiar la plantilla del código _que se muestran en los recursos y borrar y comenzar al mismo paso de la clase… A ir avanzado en las clases entenderemos mas y como llevar nuestros proyectos bien ordenados. Sigue adelante

Siempre que se trabaja código fuera de cámara puede confundir a algunas personas. Así que solo deben crear un nuevo archivo de HTML con el nombre Loging.html en la carpeta donde estén. Y les dejo el código inicial de la clase para que solo copien y peguen.

<!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" />
    <style>
      body {
        margin: 0;
        background-color: #8f57fd;
        font-family: "Mulish", sans-serif;
      }
      .header {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .header__img {
        width: 200px;
        margin-block-start: 10px;
        margin-inline-start: 10px;
      }
    </style>
    <title>Log in</title>
  </head>
  <body>
    <header class="header">
      <img
        class="header__img"
        src="../assets/logo-platzi-video-BW2.png"
        alt="Logo de Platzi Video"
      />
    </header>
  </body>
</html>

Aprendiendo ando. 😃

Yo lo que hago es que cada clase donde se arma un código nuevo, guardo un archivo con el nombre de esa clase, si en la siguiente clase voy a modificar ese archivo entonces lo copio y le pongo nombre de la siguiente clase, para así tener en diferentes archivos el avance por clase; esto me funcionó para este momento, porque veo que estamos iniciando con el trabajo realizado durante la clase 15.

Es un tip que igual les podría servir.

Lo estoy haciendo todo en una sola pagina creo que luego hat que separarlo

un poco confuso pero me gusta tratra de resolver!

Link del curso roto no reproduce el video

no me la container!

Me estoy fijando que muchos se sienten estancados en este punto del curso, si bien es cierto, no es un curso muy avanzado tampoco puede considerarse basico o para principiantes. Antes de tomar este curso deben saber ya HTML y CSS e incluso saber algo de JS para entender este panorama del desarrollo frontend. Tambien, yo entiendo que la profesora no esta haciendo uso de las mejores practicas que hemos venido aprendiendo en otros cursos pero si ustedes saben eso, ponganlo en practica por ustedes mismos, aqui entiendo que tenemos diferentes archivos con HTML y CSS juntos porque estamos construyendo componentes, mas adelante vamos a juntar imagino yo o quizas aprendemos algo que aun no sabemos.

Aqui les dejo el mio

hay va agarrando forma

aqui estan las imagenes que dejaron en un post anterior, solo que les puse un tamaño de hiegth de 50 px en linea para no se vean tan grandes que despues editare en la secion de styles
Imagen Google
Imagen Twitter

Lo mejor seria continuar codeando en un solo archivo, siento que me perdi en algunas clases, de resto la profesora explica muy bien

This course requires some previous skills, you know what im saying?

Buena clase!

En las páginas oficiales de twitter y google puede descargar sus logos:

Tienen muchas variantes y en formatos como svg

Acá creo que me hizo falta aprender GitHub antes de.

En la seccion de archivos y enlaces esta el codigo trabajado hasta ahora, si no entienden puede verlo o volver a ver la clase.