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

Creación de un buscador

25/43
Recursos

Aportes 446

Preguntas 33

Ordenar por:

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

Como una buena practica es recomendable utilizar las propiedades CSS ordenadas alfabeticamente ejemplo.

/* No ordenado */
        .input {
            border-radius: 25px;
            padding: 0 20px;
            font-size: 16px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid #FFFFFF;
            height: 50px;
            width: 70%;
            outline: none;
        }
	/* Ordenado */
        .input {
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid #FFFFFF;
            border-radius: 25px;
            font-size: 16px;
            height: 50px;
            outline: none;
            padding: 0 20px;
            width: 70%;
        }

Por si se quedaron con la duda de cómo colocar el título y el buscador al centro solo tienen que agregar esto al .main del css:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Feliz 2020! Aquí mi resultado 😃

el outline se puede quitar con “outline: none;” al igual que en el menú desplegable.

    .input {
        outline: none;
        border: 2px solid white;
        border-radius: 30px;
        color: white;
        font-family: 'Muli', sans-serif;
        background-color: rgba(255, 255, 255, 0.1);
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
    }```

Para los que usen VS Code les tengo un truquito.

Ustedes pueden seleccionar cualquier elemento de su código y una vez posicionados usar CTRL + D o CMD + D (Mac) y automáticamente VS Code va a encontrar coincidencias por cada vez que usen este comando, es lo mismo que find & replace pero es mucho mas rápido.

Para transparencias en Hexadecimal
background-color: #FFFFFF80; // El mismo que antes, blanco con 50% de transparencia.

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Agregar una imagen dentro de un input
La imagen será el background del input.

No les pasa que actualizan la pagina de platzi en vez de la del ejercicio 😦

El outline se quita de la siguiente manera:

    .input:focus {
        outline: 0px;
    }

posdata: si quieren encontrar respuesta a sus problemas ,utilizen Stack overflow. Es el mejor amigo del desarrollador.

Si quedaron con la duda de como centrar el menú de búsqueda lo hacen así:
Cambian el dislplay de la clase main a flex, sin embargo eso va a hacer que el buscador quede a la derecha de la etiqueta p, para solucionar eso cambian el flex-direction que es una propiedad de flexbox a “column”; Hecho eso solo queda usar las propiedades justify-content y align-items con el valor center y listo. 😄

.main {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}```

![2020-06-07_20h50_22.png](https://static.platzi.com/media/user_upload/2020-06-07_20h50_22-9d8c1dde-db0f-41e5-af7e-344d93d7283f.jpg)


 
Si quieren agregar un icono a su buscador, pueden hacerlo dándole los siguientes estilos al input:

    background-image: url('../img/icon-carrete.png');
    background-size: 35px;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 20px ;

 

  • Backround-image : Con esto añadimos nuestra imagen, cómo parámetro en url() le pasaremos la ruta de nuestro icono.
  • Backround-size: Con esto le damos el tamaño a nuestro icono.
  • Backroung-repeat: Aquí le decimos que no se repita, por que si no lo hacemos nuestro icono hará un patrón por todo nuestro input; Prueba no colocandolo para que veas la magia.
  • Backround-position-y: Con esto vamos a centrar nuestro icono verticalmente
  • background-position-x: Con número positivos se moverá a la derecha, con negativos se moverá a la izquierda, es justo como un plano cartesiano 😉

No seria mejor creat una clase

* {
    font-family: 'Muli', sans-serif;
}

Para dejar de colocar ese estilo en cada elemnto que tenga letras

.input{
  
    outline: none;
    border-radius: 35px;

  }

Para quitar outline:
:focus {
outline: none;
}

Gran aporte, gracias

<!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/css2?family=Muli:[email protected]&display=swap" rel="stylesheet">
    <title>menu desplegable</title>
</head>
<style>
    body{
        margin: 0px;
        background-color: #8F57FD;
        font-family: 'Muli', sans-serif;
    }
    .header{
        background-color: #8F57FD;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .header__menu{
        margin-right: 30px;
    }
    .header__menu ul{
        display: none;
        list-style: none;
        padding: 0px;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0px 0px 0px -14px;
    }
    .header__menu:hover ul , ul:hover {
        display: block;
    }
    .header__menu li {
        margin: 10px 0px;
    }
    .header__menu li a {
        color: white;
        text-decoration: none;
    }
    .header__menu li a:hover {        
        text-decoration: underline;
    }
    .header__menu__profile {
        margin-right: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .header__menu__profile img {
        margin-right: 8px;
        width: 40px;
    }
    .header__menu__profile p {
        margin: 0px;
        color: white;
    }
    .main {
        height: 300px;
    }
    .main__title {
        color: white;
        font-size: 20px;
    }
    .input {
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 30px;
        color:white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }
    ::placeholder {
        color: white;
    }
</style>
<body>
    <header class="header">
        <img class="header__img" src="D:\cursos platzi\Curso de FrontEnd Developer\logop.png" alt="logo">
        <div class="header__menu">
            <div class="header__menu__profile">
                <img src="./user.png" alt="">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="./">Cuenta</a></li>
                <li><a href="./">Cerrar Sesion</a></li>
            </ul>
        </div>
    </header>
    <section class="main">
        <h2 class="main__title">¿Que quieres ver hoy?</h2>
        <input class="input" type="text" placeholder="Buscar...">
    </section>
</body>
</html>```

Logre centrarlo poniendo la propiedad text-align en el .main

.main{
    height: 300px;
    text-align: center;
}

Muy buen curso, unicamente que mencionaste que no habiamos visto flexbox, pero ya hace 2 o 3 clases que lo mostraste, y de hecho la clase pasada lo utilizamos en el header.

Mi código CSS para la barra de búsqueda:

    /* Search Bar */
    .main {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;    
    }
    .main__title {
        color: white;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .main__input {
        border: 3px solid white;
        background-color: rgb(255, 255, 255, .08);
        border-radius: 30px;
        padding: 5px 15px;
        font-size: 20px;
        font-family: 'Muli', sans-serif;
        color: white;
        width: 70%;
        height: 30px;
    }
    .main__input:focus {
        outline: none;
    }
    .main__input::placeholder {
        color: rgb(207, 207, 207);
        font-family: 'Muli', sans-serif;

    }

Para quitar la linea al darle clic a un input la propiedad es: outline:none;

Mi buscador

Este es mi progreso de esta clase.
CSS

/*INICIO SEARCHBAR*/

.Searchbar {
    display: grid;
    justify-content: center;
    align-content: center;
    height: 45vh;
}

.Searchbar__title {
    color: #FFF;
    text-align: center;
    font-size: 25px;
}

.Searchbar__input {
    background-color: #AB88FF;
    background-image: url(../images/icons8-búsqueda-64.png);
    background-size: 1.5em;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 95%;
    border: 2px solid #FFF;
    border-radius: 25px;
    width: 45vw;
    height: 2em;
    font-size: 20px;
    padding: 0px 15px;
    color: #FFF;

}

.Searchbar__input::placeholder {
    color: #fff;
}


/*FIN SEARCHBAR*/
.input:focus{
     outline:none;
     border-color:rgb(0, 238, 255);
}

ese 255, 255, 255, 0,1
lo primero que se me vino a la mente no fue un color si no una mascara de subred xd.

Tarea:
En la clase .input, aumentar el border-radius: 70px y agregar outline: none;

Hola, les dejo mi código con el buscador centrado en la página

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css2?family=Muli&display=swap" rel="stylesheet">
        <title>Header</title>
    </head>
    <style>
        body {
            margin: 0px;
            background-color: #8F57FD;
            font-family: 'Muli', sans-serif;
        }

        header {
            width: 100%;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header__img {
            width: 200px;
            margin-top: 8px;
            margin-left: 5px;
        }

        .header__menu {
            margin-right: 30px;
        }

        .header__menu--profile {
            margin-right: 8px;
            display: flex;
            align-items: center;
        }
        .header__menu--profile img {
            margin-right: 8px;
            width: 40px;
        }
        .header__menu--profile p {
            margin: 0px;
            color: white;
        }
        .header__menu ul {
            display: none;
            list-style: none;
            padding: 0px;
            position: absolute;
            width: 100px;
            text-align: right;
            margin: 0px 0px 0px -14px;
        }
        
        .header__menu:hover ul, ul:hover{
            display: block; 
        }

        .header__menu li {
            margin: 10px 0px; 
        }

        .header__menu li a {
            color: white;
            text-decoration: none; 
        }
        .header__menu li a:hover {
            text-decoration: underline; 
        }

        .main {
            height: 300px;
        }

        .main__title {
            color: white;
            font-size: 25px;
            text-align: center;
        }

        .input {
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid white;
            border-radius: 28px;
            color: white;
            font-family: 'Muli', sans-serif;
            font-size: 16px;
            height: 50px;
            padding: 0px 20px;
            width: 70%;
            outline: none;
            margin-left: 13%;
        }

        ::placeholder {
            color: white;
        }
        
    </style>
    <body>
        <header class="header">
            <img class="header__img" src="logo-platzi-video.png" alt="Logo Platzi Video">
            <div class="header__menu">
                <div class="header__menu--profile">
                    <img src="user-icon.png" alt="User">
                    <p>Perfil</p>
                </div>
                <ul>
                    <li><a href="/">Cuenta</a></li>
                    <li><a href="/">Cerrar Sesión</a></li>
                </ul>
            </div>
        </header>
        <section class="main">
            <h2 class="main__title">¿Qué quieres ver hoy?</h2>
            <input class="input" type="text" placeholder="Buscar..." name="" id="">
        </section>
    </body>
</html>

Acepto el reto 😉

.input{
      border: 2px solid white;
      border-radius: 30px;
      color: white;
      font-family: 'Muli', sans-serif;
      font-size: 16px;
      height: 50px;
      width: 70%;
      padding: 0px 20px;
      background-color: rgba(255,255,255,0.1);
      outline: none;
    }

Este es el código que yo use


.input{
        background-color: rgba(255, 255, 255, 0.4);
        border: 2px solid #ffffff;
        border-radius: 30px;
        color: #ffffff;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 40px;
        padding: 0px 20px;
        width: 80%;
        outline: 0px;
    }
    ::placeholder{
        color: #ffffff;
    }

Hola, les recomiendo esta pagina llamada Glassmorphism que sirve para darle ese efecto de vidrio o ventana a nuestros componentes 😀, personalmente me gusta mucho como quedan con este efecto. 😋
.

**Quitando el ** outline :

.input {
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 78px;
        color: white;
        font-family: 'Mulish', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }

aquí les dejo mi aporte junto el código.

Código HTML

body {
background-color: #8f57fd;
font-family: ‘Muli’, sans-serif;
margin: 0px;
}

.header {
align-items: center;
display: flex;
justify-content: space-between;
height: 80px;
width: 100%;
}

.header__img {
margin-top: 10px;
margin-left: 10px;
width: 200px;
}

.header__menu {
margin-right: 30px;
}

.header__menu ul {
display: none;
list-style: none;
margin: 0px 0px 0px -14px;
padding: 0px;
position: absolute;
text-align: right;
width: 100px;
}

.header__menu:hover ul, ul:hover {
display: block;
}

.header__menu li{
margin: 10px, 0px;
}

.header__menu li a{
color: white;
text-decoration: none;
}

.header__menu li a:hover{
text-decoration: underline;
}

.header__menu–profile {
align-items: center;
cursor: pointer;
display: flex;
margin-right: 8px;
}

.header__menu–profile img {
margin-right: 8px;
width: 40px;
}

.header__menu–profile p {
color: white;
margin: 0px;

}

.main {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
height:240px;
}

.main__title {
color: white;
font-size: 25px;
}

.input {
background-color: rgba(255, 255,255, 0.1);
border: 2px solid white;
border-radius: 35px;
color: white;
font-family: ‘Muli’, sans-serif;
font-size: 16px;
height: 40px;
outline: none;
padding: 0px 20px;
width: 70%;
}

::placeholder{
color: white;
}

Código CSS
<!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>Platzi Video</title>
<link rel="shortcut icon" href="images/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">
    <div class="header__menu">
        <div class="header__menu--profile">
            <img src="images/user-mascarasteatro.png" alt="User">
            <p>Perfil</p>
        </div>
        <ul>
            <li><a href="#">Cuenta</a></li>
            <li><a href="#">Cerrar Sesión</a></li>
        </ul>
    </div>
</header>

<section class="main">
    <h2 class="main__title">¿Qué se te apetece disfrutar hoy?</h2>
    <input class="input" type="text" placeholder="Buscar....">
</section>

</body>

</html>

La verdad es que le falta una buena actualizacion a este curso. He tenido que buscar tutoriales en otras plataformas para poder corregir errores que salian, para ser el video introductorio a FrontEnd, deja mucho que desear. Sin embargo, ame el proyecto, por eso estoy por aqui retomandolo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected];400;500&display=swap" rel="stylesheet">
</head>
<style>
    body {
        margin: 0;
        min-height: 100vh;
        background-image: linear-gradient(-120deg, #AB88FF 0%, #242229 100%);
        font-family: 'Noto Sans JP', sans-serif;
    }
    .header{
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        background-color: #242229;
        color: aliceblue;
    }
    .header__img {
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;

    }
    .header__menu {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #3a393c;
        width: 100px;
    }
    .header__menu ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        width: 100px;
        background-color: #242229;
        margin-top: 72px;
        text-align: center;
    }
    .header__menu:hover ul, ul:hover  {
        display: block;
    }
    .header__menu li {
        margin: 10px 0px;
    }
    .header__menu li a{
        text-decoration: none;
        color: #fff;
        font-size: 16px;
    }
    .header__menu--profile {
        width: 40px;
    }

    .main {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .main__title {
        color: #ffffff;
        font-size: 25px;
    }
    .input {
        width: 300px;
        border: 2px solid #ffffff;
        border-radius: 25px;
        color: #ffffff;
        font-size: 16px;
        font-family: 'Noto Sans JP', sans-serif;
        background-color: #363537;
        width: 60%;
        height: 50px;
        padding: 0 10px;
        outline: none;
    }
    ::placeholder {
        color: #ffffff;
    }
</style>
<body>
    <header class="header">
        <img class="header__img" src="img/logo.png" alt="logo" srcset="">
        <div class="header__menu">
            <div class="header__menu--profile">
                <img src="./img/person.png" alt="User">
            </div>
            <ul>
                <li><a href="">Account</a></li>
                <li><a href="">Log out</a></li>
            </ul>

        </div>
    </header>
    <section class="main">
        <h2 class="main__title">¿Qué quieres ver hoy?</h2>
        <input type="text" class="input" type="text" placeholder="Buscar...">
    </section>
</body>
</html>
.main{
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.main__title{
    color: white;
    font-size: 25px;
    margin-bottom: 15px;
}

.main__search{
    outline: none;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    width: 70%;
    height: 40px;
    border-radius: 40px;
    color: white;
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    padding-left: 10px;
}

::placeholder{
    color: white;
}
<code>


<!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">

    <title>Este es el proyecto</title>
</head>
<style>

body{

    margin: 0;
    background-color:#5E1DFC ;   
     font-family: 'Muli', sans-serif;


}

.header{
background-color: #5E1DFC;
width:  100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;

}



.header__menu:hover ul, ul:hover {

display: block;


}
.header__img{

width: 200px;
margin-top: 10px;
margin-left: 10px;

}

.header__menu{

    margin-right: 30px;

}

.header__menu--profile

{

  margin-right: 8px;
   
display: flex;
align-items: center;
    cursor: pointer;
    
}

.header__menu--profile img

{

  margin-right: 8px;
  width: 40px;


    
}

.header__menu--profile p{
   margin:0px;
   color:white;
}

.header__menu li {
    margin: 10px 0px;
  }

.header__menu li a {
  
color: white    ;
text-decoration: none   ;
  }

  .header__menu li a:hover {
  
  text-decoration: underline   ;
    }


.header__menu ul{

    display: none;
    list-style: none;
    padding: 0px;
    position: absolute;
    width: 100px;
    text-align: right;
    margin: 0px 0px 0px -14px;



}

.main{

height:300px ;

}

.main__title{

color: white;
font-size: 30px;
}

.input{
border:2px solid white;
border-radius: 25px;
background-color:rgb(255,255, 255,0.1);
font-family: 'Muli', sans-serif;
background-color: transparent;
font-size: 18px;
height: 50px;
font-family: 'Muli', sans-serif;
color: white;
padding: 0px 20px;

width: 70%;
outline: none;


}
::placeholder{

    color: white;
}

</style>

<body>



    <header class="header">
        <img class="header__img" src="logo-platzi-video-BW2.png" alt="Platzi Video">
        <div class="header__menu">
          <div class="header__menu--profile">
            <img src="user.png" alt="User">
            <p>Perfil</p>
          </div>
          <ul>
            <li><a href="/">Cuenta</a></li>
            <li><a href="/">Cerrar Sesión</a></li>
          </ul>
        </div>
      </header>
    
<section class="main">

     
<h2 class="main__title">Que quieres ver hoy? </h2>
<input type="text" placeholder="buscar.." class="input">

</section>

    </body>
</html>
  .input {
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 50px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
            }```
.main {
    height: 300px;
}

.main__title {
    color: #ffffff;
    font-size: 25px;
}

.input {
    background-color: #AB88FF;
   border: 2px solid #ffffff;
   border-radius: 50px; 
   font-family: 'Muli', sans-serif;
   font-size: 16px;
   height: 50px;
   padding: 0px 20px;
   width: 70%;
   outline: none;
}

::placeholder {
    color: #ffffff;
}```

Está quedando genial, pero aun se puede mejorar 🤔

¡listo!

.input {
		color: white;
		background-color: rgba(255, 255, 255, 0.1);
		border: 2px solid white;
		border-radius: 40px;
		font-family: 'Muli', sans-serif;
		font-size: 16px;
		height: 50px;
		padding: 0px 10px;
		width: 70%;
		outline: none;
	}```
.input {
        background-color: rgba(255, 225, 255, 0.1);
        border: 2px solid white;
        border-radius: 25px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 30px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
        padding: 0px 20px;
    }```

Haciendo uso de la pseudo clase focus y el pseudo elemento placeholder podemos hacer que cuando el usuario haga click el placeholder “buscar” desaparezca y vuelva si el usuario no escribío nada y hace click en otro lado.

input:focus::placeholder{ color: transparent; }

Diablos Señorita. Vas muy rápido.

También a considerar la opción autofocus/

<code>
<input class="input" type="text" placeholder="Buscar..." autofocus/>

que nos permite que al momento de cargar la página inmediatamente el cursor se posicione en el input de búsqueda y la opción es para quitar la línea del input se puede realizar con la clase outline: none aunque no se si haya alguna otra forma.

vengo pensando desde el tutorial anterior que los colores no eran los mismos 😂

Reto cumplido 🤠

input:focus{
  outline-style: none;  
}```

Para cambiar el color del placeholder del input en Firefox quedaría así el código.

::placeholder {
    color: #fff;
    opacity: 1; /* Se agrega para Firefox. */
}
/*Solución al reto del outline*/
    .main__input:focus{
        outline: none;
    }

.input{
background-color: rgba(255, 255, 255, 0.1);
border:2px solid white;
border-radius:40px;
color:white;
font-family:‘Muli’, sans-serif;
font-size:12px;
height: 35px;
padding:0px 20px;
width:70%;
outline: none;
}
::placeholder{
color:white;
}

.main {
        width: 100%;
        height: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .main__title {
        color: white;
        margin: 100px 0 50px 0;
        font-size: 2rem;
    }
    .main__input {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        border: 2px solid white;
        border-radius: 30px;
        width: 70%;
        height: 60px;
        padding-left: 20px;
        font-family: 'Gloria Hallelujah';
        font-size: 18px;
        outline: none;
    }
.input{
/*Reto:*/
				border-radius:40px; /*Aumentamos la curvatura del border*/
        outline: none; /*Sacamos el marco azul*/
/*Adicional: Centré el buscador*/
        display: block;
        margin: auto;
/*Lo que vimos en el curso:*/
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16;
        height: 50px;
        padding: 0 20px;
        width: 70%;
    }

Para centrar el contenido de la sección del buscador, colocando los elementos uno sobre otro, se utilizan las siguientes propiedades:

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

Aqui dejo mi codigo

.input{
    background-color:#14d8ad;
    border-radius: 30px;
    border: white  2px solid;
    color:white;
    font-size: 16px;
    font-family: 'Muli', sans-serif;
    height: 30px;
    padding:0px 20px;
    width:70%;
}
::placeholder{
    color: white;
}
.input:focus{
    outline: none;
}

Vamos a ver aqui va el mio 😄

    input{
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 50px;
        color: white;
        font-family: var(--letra-principal);
        font-size: 25px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }

Listo!!

.buscar__input{
    margin-left:15%;
    width:70%;
    border-radius: 50px;
    height:40px;
    border:2px solid white;
    outline: none;
    font-size: 20px;
    padding-left:20px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.3);
    color:white;
    font-family: 'Muli';
}

Aquí mi código.

<!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">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <title>Buscador</title>
</head>

<style>
    body{
        margin: 0px;
        background-color: #8F57FD;
        font-family: 'Muli', sans-serif;
    }
    .header{
        background-color: #8F57FD;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header__img{
        width: 200px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .header__menu{
        margin-right: 30px;
    }    
    .header__menu ul{
        display: none;
        list-style: none;
        padding: 0px;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0px 0px 0px -14px;
    }
    .header__menu:hover ul , ul:hover{
        display:block;
    }
    .header__menu li{
        margin: 10px 0px;
    }
    .header__menu li a{
        color: white;
        text-decoration:none;
    }
    .header__menu li a:hover{
        text-decoration: underline;
    }
    .header__menu--profile{
        margin-right: 8px;
        display: flex;
        align-items: center;
    }
    .header__menu--profile img{
        margin-right: 8px; 
        width: 40px;
    }
    .header__menu--profile p{
        margin: 0px; 
        color: white;
    }
    .main{
        height: 300px;
    }
    .main__title {
        color: white;
        font-size: 25px;
    }
    .input{
        border: 2px solid white;
        border-radius: 30px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        background-color: rgba(255,255,255,0.1);
        outline: none;

    }
    ::placeholder{
        color: white;
    }
</style>

<body>
    <header class="header">
        <img class="header__img"src="./logo-platzi-video-BW2.png" alt="">
        <div class="header__menu">
            <div class="header__menu--profile">
                <img src="./usuario.png" alt="User">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="/">Cuenta</a></li>
                <li><a href="/">Cerrar Sesión</a></li>
            </ul>
        </div>
    </header>

    <section class="main">
        <h2 class="main__title">¿Qué quieres ver hoy?</h2>
        <input class="input" type="text" placeholder="Buscar...">
    </section>
</body>
</html>
    .input{
        border: 2px solid white;
        border-radius: 60px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        background-color: #AB88FF
    }
    .input:focus{
        outline: none;
    }```
.input {
        background-color: rgba(255, 255, 255, 0.1);
        border: 2px solid white;
        border-radius: 30px;
        color: white;
        font-family: 'Muli', sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }

Así tengo mi input

.input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 35px;
    color: white;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    height: 50px;
    padding: 0px 20px;
    width: 70%;
    outline: none;
  }
  ::placeholder {
    color: white;
  }```

Otra forma de realizar el componente.

/********** Componente Search **********/
    .search {
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .search__title {
        color: white;
        font-size: 25px;
        margin-bottom: 1em;
    }
    .input {
        height: 48px;
        border-radius: 35px;
        padding: 0 30px;
        width: 70%;
        background-color: rgba(255, 255, 255, .1);
        border: 2px solid white;
        outline: none;
        color: white;
        background-image: url("./magnifier.png");
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: calc(100% - 30px) center;
    }
    ::placeholder {
        color: white;
    }

Este es mi input 😄

.input {
			background-color: rgba(255, 255, 255, 0.1);
			border: 2px solid white;
			border-radius: 50px;
			color: white;
			font-family: 'Muli', sans-serif;
			font-size: 16px;
			height: 50px;
			padding: 0px 20px;
			width: 70%;
			outline: none;
		}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}
.main__title {
  font-size: 22px;
  color: #fff;
  margin-bottom: 35px;
}
.main__searchbar {
  height: 35px;
  width: 70%;
  border-radius: 25px;
  padding: 0px 25px;
  font-size: 18px;
  outline: none;
  border: 2px #fff;
}

Lo solucione con

outline: none```
dentro de la clase .input.

Tarea 😃

 .input {
    border-radius: 50px;
    outline: none;
}

Esto es lo que he logrado por mi cuenta.

Mi avance

Como buena práctica y pensando también en accesibilidad para las tipografías es mejor utilizar unidades como REM que es una medida relativa y no una medida absoluta como px

A mi input le puse un botoncito de búsqueda.

Este es el html. hice un bloque superior llamado c-text-field y le puse un elemento trailing-content. Le puse un <button> con tipo “submit” para como el botón de submit del formulario (qué no será implementado).

<main>
  <section>
    <h1 class="c-main-title">¿Qué quieres buscar hoy?</h1>
    <form>
      <div class="c-text-field">
        <input class="c-text-field__input" placeholder="Buscar">
        <div class="c-text-field__trailing-content">
          <button type="submit" class="c-button">
            <span class="material-icons">search</span>
          </button>
        </div>
      </div>
    </form>
  </section>
</main>

Y el CSS. Estoy utilizando variables.

.c-main-title {
    margin: 10px;
    text-align: center;
    font-size: 4rem;
}

.c-text-field {
    display: flex;
    width: 70%;
    margin: 10px;
}

.c-text-field__input {
    flex: 1;
    padding: 1rem;
    border: 1px solid var(--primary-color);
    font: var(--font);
    background-color: white;
    color: var(--primary-color-dark);
    border-radius: 8px 0 0 8px;
    appearance: none;
    outline: none;
}

.c-text-field__input::placeholder {
    color: var(--primary-color);
    opacity: 1;
}

.c-text-field__trailing-content {
    padding: 5px;
    background-color: var(--primary-color);
    color: var(--light-color);
    border-radius: 0 8px 8px 0;
}

¿Qué opinan?

Screenshot:

HTML

<main>
      <section class="search">
        <h1 class="search__title">¿What do you want to see today?</h1>
        <input class="search__input" type="search" placeholder="search..." />
      </section>
</main>

CSS

main {
    display: flex;
    height: 60vh;
}
.search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.search .search__title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.5rem;
    letter-spacing: 0.5px;
    color: white;
}
.search .search__input {
  width: 60%;
  height: 50px;
  padding: 10px;
  background-color: #457385;
  color: white;
  border-radius: 25px;
  border: white solid 1px;
  outline: none;
}
.search__input::placeholder {
    font-size: 1.6rem;
    color: white;
}

Resultado 😄

Comparto lo utilizado en clase:
Código

<!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 href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"> 
    <title>Header</title>
</head>

<style>
    body{
        margin: 0px;
        background-color: #FFE53B;
        background-image: linear-gradient(90deg, #FFE53B 0%, #FF2525 74%);
        font-family: 'Abril Fatface', cursive; /*para que todas los textos de la ap tomen este tipo de letra copiada de google fonts  y pegada en el head (link)*/
        font-size: 15px;
    }
    .header {
        width: 100%; /*medida relativa para que se ajuste a todos los niveles de pantalla, de inicio  a fin*/
        height: 100px; 
        background-color: #FFE53B;
        background-image: linear-gradient(90deg, #FFE53B 0%, #FF2525 74%);
        display: flex; /*especificacion para alinear*/
        justify-content: space-between; /*el contenedor tiene que alinear nuestros elementos*/
        align-items: center; /*alinea los elements de forma vertical*/
    }
    .header__img{
        width: 220px;
        margin-top: 2px;
        margin-left: 15px;
    }
    .header__menu{
        margin-right: 30px;
    }
    .header__menu ul{
        display: none; /*indica que no se muestre*/
        list-style: none;
        padding: 0px;
        position: absolute;
        width: 100px;
        text-align: right;
        margin: 0px 0px 0px -14px;
    }
    .header__menu:hover ul, ul:hover{ /*indica se haga hover a todas las ul, sin embargo tambien que suceda display: block;*/
        display: block; /*se crea el efecto de hover al tener presente tambien en display: none; indicado antes*/
    }
    .header__menu li {
        margin: 10px 0px; /*top, bottom y right, left*/
    }
    .header__menu li a {
        color: white;
        text-decoration: none; /*Borra las lineas debajo del texto de a*/
    }
    .header__menu li a:hover {
        text-decoration: underline; /*para tener una linea abajo del texto al hacer hover*/
    }
    .header__menu--profile{
        margin: 8px;
        display: flex; /*para k se alinien lo que contiene*/
        align-items: center;
    }
    .header__menu--profile img{
        margin-right: 8px;
        width: 40px;
    }
    .header__menu--profile p{
        margin: 0px;
        color: white;
    }
    .main{ /*utilizando display: flex para centrar*/
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main__title{
        color: white;
        font-size: 25px;
        font-weight: normal;/*Quita la negrita*/
    }
    .input{
        background-color: rgba(255, 255, 255, 0.1); /*otroga 50% (0.1) de transparencia u opacidad*/
        border: 2px solid white;
        border-radius: 25px;
        color: white;
        font-family: 'Abril Fatface', cursive;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%; /*indica el espacio que ocupara en pantalla el buscador*/
        outline: none;
    }
    ::placeholder{
        color: white;
    }
</style>

<body> 
   <header class="header">
        <img class="header__img" src="imagenes/medabots_logo.png" alt="Logo">
        <div class="header__menu">
            <div class="header__menu--profile"> 
                <img src="./imagenes/user.png" alt="User">
                <p>Perfil</p>
            </div>
            <ul>
                <li><a href="/">Cuenta</a></li>
                <li><a href="/">Cerrar Seción</a></li>
            </ul>
        </div>
    </header>

    <section class="main">
        <h2 class="main__title">¿Qué MEDABOT elegirás hoy?</h2>
        <input class="input" type="text" placeholder="Buscar...">
    </section>
</body>

</html>  

Por si no saben que es ::placeholder

Es un pseudo elemento especialmente refiriendose al texto dentro de un elemento input.

Para quitar el outline:

.input:focus{
        outline: none;
    }

Seguimos aprendiento con CSS y metodologias BEM

![](

Lineas CSS

body {
        margin: 0;
        font-family: ‘Mulish’, sans-serif;
        background-color: #5941A9;
    }

Input:

.input {
        background-color: rgba(101, 45, 243, 0.1);
        border: 2px solid #fff;
        border-radius: 30px;
        color: #fff;
        font-family: ‘Mulish’, sans-serif;
        font-size: 16px;
        height: 50px;
        padding: 0px 20px;
        width: 70%;
        outline: none;
    }

de poquito ya va agarrando forma

Me encontre esta tuit y animación que explica muy bien la propiedad Justify-Content de Flex :

Flex explained with 1 animation. https://t.co/V6AMGtCEeR">pic.twitter.com/V6AMGtCEeRIncognito (@javascriptual) https://twitter.com/javascriptual/status/1387507984964726784?ref_src=twsrc%5Etfw">April 28, 2021

Aprendí un poquito de Flexbox en el curso Definitivo de HTML y CSS, recomendado también.

.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
}

Avanzando :3

Para una correcta declaración y muy funcional. En lo personal me agrada mucho , recomendada por @degranda

Las declaraciones de propiedad relacionadas deben agruparse siguiendo el orden.

Posicionamiento
Modelo de caja (Box model)
Tipografía
Visual
Misc (Misceláneos - se puede conocer como todas las propiedades que son altamente experimentales o que no se ajustan a ninguna otra categoría.)

Para eliminar el outline del input pueden agregar en el input la siguiente propiedad:

.input {
 outline: none;
}

Para resolver la parte de el focus muchos ponen

:focus { outline: none; } 

pero esto es una muy mala practica. Las personas con screen readers no podrán ser capaces de utilizar bien la página ya que no se podrá enfocar eso. es mejor poner

:focus { outline: thin dotted; }

También hay otros workarounds para esto, si quieren consultar más acerca de esto les dejo la página en la que vi esto.

https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/#:~:text=Using the CSS rule %3Afocus,with the link or control.

Ahí vamos…

Por que la profe habla en diminutivo todo… grandecito, botoncito, por que???
Platzi, recomendación, creo que los cursos al indicar cosas, deben de indicarlo de manera mas profesional, se los digo por experiencia, ya que en el mercado laboral que me encuentro, decir eso, frente a varios desarrolladores, créanme, que no quisieran estar en mis zapatos… es una recomendación como estudiante…

Saludos…

Al ser un buscador, lo correcto es usar el type search para el input:

<input class="input" type="search" placeholder="Buscar...">

![](

Así me quedó:

.
.
.

El CSS

    background-color: rgba(255, 255, 255, 0.1);
    border: 0.1rem solid white;
    border-radius: 2.5rem; 
    color: white; 
    font-size: 1.6rem;
    height: 5rem;
    padding: 0 2rem;
    width: 70%;
    outline: none;
    background-image: url(/PlatziVideo/icons8-búsqueda-24\ \(1\).png);
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 1.5rem;
    padding-left: 4rem;

Para descargar el icono:

Para eliminar el borde que aparece al hacer click sobre el input:

  1. Selecciona tu elemento input y su pseudoclase focus-visible.
  2. A la propiedad outline dale el valor none.
.search-bar-container input:focus-visible{
   outline: none;
}

El outline es importante por cuestiones de accesibilidad. lo recomendable es estilizarlo de acuerdo a los colores de la página para no quitarlo.

Cada vez que avanzamos me doy cuenta mas de la importancia de usar una buena arquitectura.

Reto cumplido

 .input{
    background-color: rgba(255,255, 255, 0.1);
    border: 2px solid white;
    border-radius: 25px;
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    height: 50px;
    outline: none;
    padding: 0px 20px;
    width: 70%;
  }

Aquí les comparto como esta quedando el proyecto.

Agregar a .input

outline:none;

.input{
outline: none;
border-radius: 28px;
}

algo que noté es que semanticamente no deberia crear una seccion main por que ya existe una etiqueta para eso “Main” por lo cual es mejor semanticamente usar la etiqueta main en vez de un seccion con una clase