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

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

12/43
Recursos

Nuestros estilos con CSS se componen de:

  • Selector: son la referencia a los elementos HTML que queremos estilizar. Los nombres de estas etiquetas van seguidas de una llave de apertura y otra de cierre ({}). Por ejemplo: h1 {}.
  • Propiedades: son el tipo de estilo que queremos darle a nuestros elementos. Van seguidas de dos puntos (:). Las propiedades deben estar dentro de las llaves del selector que definimos anteriormente. Podemos escribir diferentes propiedades en un mismo selector. Por ejemplo: h1 { color: }.
  • Valores: son el estilo que queremos que tomen nuestros elementos HTML con respecto a una propiedad. Van seguidas de un punto y coma (;). Por ejemplo: h1 { color: red; }.
h1 {
  color: red;
}

Aportes 176

Preguntas 6

Ordenar por:

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

Les recomiendo instalar la extensión Live Server en Visual Studio Code para actualizar el navegador en automático cada que se guardan cambios.

Me enamore. Adios.

Me pareció demasiado extraño eso de poner la etiqueta “style” entre el head y body, porque en ningún lado nadie considera eso siquiera. Investigué un poco y parece una mala práctica. Incluso chequeo en el W3C validator y lo toma como un error fatal. No recomiendo hacerlo.

Si quieren abrir el documento HTML en el navegador desde Visual Studio Code, les recomiendo instalar la extensión “open in browser”.
Luego de instalarla , con clic derecho y Open In default Browser o con ALT + B podrán abrir el documento en su navegador por defecto.
Les dejo el link de la extensión:https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

Aprender HTML y CSS es fácil.
Desarrollar el buen ojo para el diseño es lo complicado :p

Conceptos básicos
Para declarar estilos CSS utiliza propiedades y valores, a este conjunto se le denomina declaración y su sintaxis incluye dos puntos después del nombre de la propiedad y un punto y coma para cerrar la declaración.

{ 
	color: red; 
	/*la propiedad es color, segido de : segido del valor, seguido de ; para 	finalizar la declaración.*/ 
}

¿Por qué la declaración se cierra por un punto y coma?
Porque algunas propiedades de CSS se les puede asignar más de un valor por tal motivo debemos indicar cuando una declaración allá finalizado. Ejemplo :

{ border : 1xp solid black; }

Cuando se tiene múltiples valores para una propiedad se separan con un espacio en blanco.

Selector
Son todos los elementos a los que se les puede aplicar un estilo, generalmente son etiquetas de HTML o también pueden ser clases.

p { 
/*en este ejemplo el selector es la etiqueta p, eso significa que las propiedades se le aplicaran a ese elemento*/
}

Propiedad
Es un estilo que se puede personalizar y que se le aplicara a un selector, las propiedades modifican el estilo del selector como color, tamaño, forma entre otros.
Valor
El valor son todas las posibles opciones que se le pueden colocar a las propiedades, estas pueden variar dependiendo de la propiedad. Ejemplo:
La propiedad color puede tomar todos los valores de colores hexadecimales, así como los nombres de los colores:

  • color: “F00”;
  • color: “000000”;
  • color: “red”;

La propiedad font-weight puede tomar valores enteros o strings:

  • font-weight: 100;
  • font-weight: 200;
  • font-weight: 300;
  • font-weight: normal;
  • font-weight: bold;

Reglas
La mayoría de propiedades de CSS pueden modificar solo un aspecto del elemento por ejemplo el borde, el margen, el color de fondo, pero no todos a la vez. Si se requiere cambiar varios aspectos es necesario asignar múltiples propiedades al elemento.
ejemplo: se aplicarán múltiples propiedades al elemento p

	p {
		color: red;
		font-size: 14px;
	}

Una regla es una lista de propiedades la cual se declara entre llaves y se identifica por un selector al cual se le aplicaran dichas propiedades en el código anterior el selector es la etiqueta p lo que quiere decir que todos los elementos p del DOM tendrán el color de texto rojo y el tamaño de letra en 14px.

Breve y buena introducción a CSS lo único que la etiqueta style debería estar dentro del head y no entre el head y el body sobre todo para que la gente nueva no caiga en ese error, que no se mostrará en el navegador pero no deja de ser un error. Por lo que debería ser algo como esto:

<!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>Document</title>
    <style>
    p {
        color: red;
    }
    </style>
</head>
<body>
    <p>Hola Mundo</p>
</body>
</html>

Sintaxis básica de CSS

|

Definitivamente en desarrollo cada quien hace más cosas a su manera. Es la primera vez que veo que alguien pone la etiqueta <style> fuera del head.

lo mejor es poner style dentro de head, el documento html solo tiene 2 hijos, es head y body.

Hola, recomiendo este artículo a quienes queden con dudas y quieran profundizar en el tema: https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

Que buena clase. Viendo las recomendaciones de la W3C en cuanto a la estructura global de html, observo que al usar la etiqueta style, la posicionan dentro de la etiqueta head.

esta bueno enseñarlo en una misma sección lo de poner estilos, pero es una mala practica, ya que los estilos hace años que se crean en un archivo css por separado y creo que esa seria la forma correcta en que los alumnos deberían aprenderlo, ya que de la forma que esta el video pueden ellos mismos incurrir en una forma de costumbre de hacer las cosas mal.

Me gusta la forma de poner “style”, por fuera (head, y body). En lo personal, me gusta mas con la etiqueta “link”, porque, prefiero tener todo en diferentes carpetas (ordenado).

El style lo coloca ahí para no tener que navegar entre pestañas, no se extrañen de eso, no es una mala práctica sino más bien una forma eficiente al momento de enseñar posteriormente aprenderán que es mejor llevar todo el código de estilos a otro archivo :3

Para practicar CSS les dejo 2 juegos con los que he mejorado mucho.
Flexboxfroggy
grid-garden

*Estructuna CSS

Selector
|     Propiedad
p {   |
    color: red;
}           |
            Valor
(----Declaracion----)

No sabia eso de que style se podía hacer entre el head y body!!

Siempre había sabido que era dentro de head, o mejor en otro archivo css, pero en el mismo html esa no me la sabia, interesante.

Pese a que ya he estudiado en algunos cursos aún estoy en ceros con Pseudoclases y Pseudoelementos.
Espero lo trabajemos de manera adecuada en el curso 😄

CSS…la mejor forma de hacer volar nuestra imaginación

Nota, el elemento style, siempre, SIEMPRE, se va a poner en el header, la profesora lo hizo para mostrar como cambiar el estilo de los elementos sin necesidad de crear el archivo de css.
El archivo style, siempre se pone en el header como un link. de esta forma:
<link rel=“stylesheet” href=“css/styles.css”>

Css nos sirve para darle estilos y diseño a nuestro documento HTML

Anatomia de una declaración CSS


Las propiedades deben estar dentro de las llaves del selector que definimos anteriormente. Podemos escribir diferentes propiedades en un mismo selector. Por ejemplo:

  • Selector: son la referencia a los elementos HTML que queremos estilizar. Los nombres de estas etiquetas van seguidas de una llave de apertura y otra de cierre ({}). Por ejemplo:

    h1 {}
    
  • Propiedades: son el tipo de estilo que queremos darle a nuestros elementos. Van seguidas de dos puntos " : "

    h1 { 
    	color: 
    }
    
  • Valores: son el estilo que queremos que tomen nuestros elementos HTML con respecto a una propiedad. Van seguidas de un punto y coma " ; " . Por ejemplo:

    h1 { 
    	color: red; 
    }
    

Propiedades

Propiedad para modificar el color de fuente

color: <color>;

Aportes

  • Es mala práctica poner el style en medio del head y el body ya que los únicos hijos directos de HTML deberían ser head y body. Inclusive es considerado un fatal error por W3C

  • **¿Por qué la declaración se cierra por un punto y coma?**Porque algunas propiedades de CSS se les puede asignar más de un valor por tal motivo debemos indicar cuando una declaración allá finalizado. Ejemplo :

    { border : 1xp solid black; }
    

    Cuando se tiene múltiples valores para una propiedad se separan con un espacio en blanco.

Les recomiendo instalar en Visual Studio Code la extensión JS-CSS-HTML FORMATTER, sirva para el autocompletado de etiquetas.

Segun el primer curso de programacion basica, que por cierto recomiendo tomar, la etiqueta style va dentro del Head,

Saludos.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Reto # 1</title>
    </head>
    <body>
        <header>
            <h1>Platzi - Video</h1>
            <nav>
                <ul>
                    <li><a href="">Cuenta</a></li>
                    <li><a href="">Cerrar Sesion</a></li>
                </ul>
            </nav>  
        </header>
        <section>
            <h2>Seccion Principal</h2>
        </section>
        <footer>
            <nav>
                <ul>
                    <li><a href="">Contactanos</a></li>
                    <li><a href="">Politica de Privacidad</a></li>
                    <li><a href="">Terminos y condiciones</a></li>
                </ul>
            </nav>
        </footer>
    </body>

</html>

ANATOMIA DE UNA DECLARACIÓN CSS

- SELECTOR: Son la referencia a los elementos HTML, (puede ser el nombre del componente <p>, el id del componente id="identificador", puede ser el nombre de una clase de css o puede ser generico/cuando no tiene nombre el selector y le pega a todos los componentes)
            Van seguidos de corchetes por ejemplo: rob {}
- PROPIEDAD: Son el tipo de estilo que queremos darle a los elementos.
             Van seguidos de ":", van dentro de las llaves del selector
             Se pueden escribir varias propiedades dentro del selector
- VALOR: Son el estilo que queremos que tomen nuestros elementos HTML con respecto a la propiedad
         Van seguidos de ";"
- DECLARACIÓN: Es la conjunción de todos los componentes anteriores

Comparto las notas que tome de este curso:
https://www.evernote.com/l/AhBfwZoP2YtPKZcmni7KwW649TtyyzgQTvs/

Lei muchos recomendando crear el CSS aparte, veremos más adelante que se nos acopla mejor a la hora de crear nuestro codigo. Paciencia…

al final no importa mucho la etiqueta <style> ya que es mejor tener los lenguajes separados por archivos diferentes

Concuerdo con muchos podría hacer un archivo separado para CSS pero para una instrucción y para saber cómo funciona esta muy bien

Selector {
propiedad: valor;
}

Tipos de selectores:
etiquetas --> p
clases --> .box-header
id --> #box-header

¿No tendrías que crear otro archivo css para colocar los estilos y no hacerlo dentro del mismo documento html?

En el video la profesora utiliza la etiqueta <style></style> fuera de la etiqueta <head></head>; tengo entendido que la misma siempre va dentro de la etiqueta head por buenas prácticas.
Esta es la referencia a MDN y el uso de la etiqueta Style:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Juego en el que te va a pedir que selecciones, mediante código CSS, los elementos que te piden.
Tienes 32 niveles con dificultad ascendente, así que está muy completo.



https://flukeout.github.io/

no es mejor tener el css en un archivo diferente?

La etiqueta <style> se debe encontrar dentro del <head>

Muy bacano saber la estructura del CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase #12</title>
</head>
<style>
    p {
        color:red;
    }
</style>
<body>
    <p>Hola Mundo Feliz</p>
    <p>Hola Mundo</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        color: red;
    }
</style>
<body>
    <p>Hola Mundo Feliz</p>
    <p>Hola Mundo</p>
</body>
</html>```

Un inmenso mundo de estilos y colores nos espera

Una buena practica es que tanto para nuestros estilos como para nuestros scripts(javascript) creemos archivos aparte para cada uno.

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

Estilos CSS se componen de:

  • Selector
    Son la referencia a los elementos HTML que queremos estilizar. Los nombres de estas etiquetas van seguidas de una llave de apertura y otra de cierre ({}). Por ejemplo: h1 {}.

  • Propiedades
    Son el tipo de estilo que queremos darle a nuestros elementos. Van seguidas de dos puntos (😃.
    Las propiedades deben estar dentro de las llaves del selector que definimos anteriormente. Podemos escribir diferentes propiedades en un mismo selector. Por ejemplo: h1 { color: }.

  • Valores:
    Son el estilo que queremos que tomen nuestros elementos HTML con respecto a una propiedad. Van seguidas de un punto y coma (😉. Por ejemplo: h1 { color: red; }.

Que extensión recomiendan instalar en el VSC para que al modificar el código se actualice automáticamente en el navegador?, el live server no me funciono.

TIP:
en tu HTML vacio puedes escribir tan solo este signo
!
(Si, solo el signo de admiracion)
Y aparecera todo el HTML inicial

Esto es muy divertido 😄

En si CSS no es difícil, como dicen, es mas saber como hacer o pensar en un buen diseño.
Pero primero conocer bien todo lo que podemos hacer 😄

¿La etiqueta <style> va dentro, o fuera del <head>?

Nunca había colocado style fuera de head

Hello Happy World

mas profes asi!!!

Toda sentencia en css, está compuesta por su selector, luego una propiedad dos puntos y su valor, terminando con punto y coma.

<!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>Platzi Video</title>
    <style> /*La etiqueta STYLE  debe de ir dentro de la etiqueta HEAD*/
        header{
            background-color: chocolate;
        }
        header nav{
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Cuenta</a></li>
                <li><a href="">Cerrar Sesión</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="seccionPrincipal">
            <p>Contenido de la seccion principal</p>
        </section>
    </main>
    <footer>
        <div class="infoFooter">
            <ul>
                <li><a href="">Contactanos</a></li>
                <li><a href="">Politica de Privacidad</a></li>
                <li><a href="">Terminos y Condiciones</a></li>
            </ul>
        </div>
    </footer>
</body>
</html>

Para escribir HTML más rápido les recomiendo utilizar Emmet, de verdad les agiliza demasiado el trabajo. Click aquí para aprender a utilizar Emmet.

hola les recomiendo descargar la extension “Pretier” para que las etiquetas sean mas ordenadas y entendibles al momento de analizar nuestro codigo

Pueden instalar de forma global

npm i http-server -g

Esto con el fin de crear un servidor y correr nuestro sitio web.
Aqui la documentación: http-server

Sigo aprendiendo y sorprendiéndome.

Se recomienda poner style antes del cierre de body.

<!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>
    <Header>
    <h1> Platzi Video</h1>
    <ul>
        <li>Cuenta</li>
        <li>Cerrar sesión</li>
    </ul>
    </Header>

    <main>
        Seccion principal
    </main>
    <footer>
        <ul>
            <li>Contactanos</li>
            <li>Políticas de privacidad</li>
            <li>Términos y condiciones</li>
        </ul>
    </footer>

    <style>

        header{
            color:greenyellow;
        }
        footer{
            color:green;
        }

    
    </style>
</body>
</html>

Quiero entender bien esto del CSS

<h1>Platzi Video</h1>
  • cuenta
  • Cerrar sesión

Sección Principal

<section>
  1. Contáctanos
  2. Políticas de privacidad
  3. Términos y condiciones
  4. </lo> </section>

╚Mis primeras líneas!!!😃

It’s Clear!

Anatomía de una declaración CSS

siempre es bueno reafirmar esto

estupenda clase

Buena introducción.

Creo que este tipo de estilo de programación va mas orientado a como los componentes organizan su información

style
template (html)
script

Solo una persona con la suficiente autoridad puede decir que la etiqueta de estilo puede ir fuera del elemento head.

Estructura de una declaración CSS:

selector [H1] { propiedad [color] : valor [red] ; }

excelente

<!DOCTYPE html>
<html lang="es">
<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>Demo</title>
</head>
<style>
    p {
        color: red;
    }
</style>
<body>
    <p>Hola Mundo Feliz</p>
    <p>Hola Mundo</p>
</body>
</html>```
<<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=>, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
     p {
        color:blueviolet
    }
    </style>
    <body>
       <p>hola mundo feliz</p>
       <p>hola mundo</p> 
    </body>
    </html>>

Definitivamente el poder de CSS siempre lo veremos al integrarnos con HTML.

Buena definición de la anatomía de declaración .

Excelente! muy buena introducción.

Muy buena introduccion para CSS

Estefani, esta bien bueno el theme que usas en Visual Studio code,
Cómo se llama ese theme?

Saludos desde Lima-

excelente van surgiendo las dudas pero seguimos adelante

GOOD!!!

Hola mundo feliz. 😄

Me gusta conocer mucho mejor CSS 😄

Todo funcionando, hasta ahora xD.

Increible!

¿Cuál es el tema de VSCode?

Por que usan la etiqueta style entre el head y el body?

<style>
    p {
        color: red;
    }
</style>
Excelente la breve explicación.

Buena introducción al Css

En HTML

En un archivo CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        color: red;
        font-size:large;
        text-align: center;
    }
</style>
<body>
    <p>Hello world</p>
    <p>Hola mundo</p>
    
</body>
</html>```

Anatomía de una declaración CSS:

p{
    color: red
}
Declaración

p --> Selector
color --> Propiedad
red --> Valor