Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 461
Preguntas 122
Resume de BEM:
Es nombrar clases siguiendo el siguiente patrón: BLOQUE__ELEMENTO–MODIFICADOR
Por ejemplo:
<!-- BLOQUE -->
<main class="Padre">
<!-- BLOQUE__ELEMENTO -->
<section class="Padre__Hijo">
<!-- BLOQUE__ELEMENTO--MODIFICADOR -->
<article class="Padre__Hijo--Mayor"></article>
</section>
<section class="Padre__Hijo"></section>
<section class="Padre__Hijo"></section>
<section class="Padre__Hijo"></section>
</main>
Metodología **BEM😗* cómo nombrar correctamente las clases.
Solo usa clases. Las nombra siguiendo el siguiente patrón: BLOQUE__ELEMENTO—MODIFICADOR (son 2 guiones, se usa 1 guión para separar palabras).
<!-- BLOQUE -->
<main class="Padre">
<!-- BLOQUE__ELEMENTO -->
<section class="Padre__Hijo">
<!-- BLOQUE__ELEMENTO--MODIFICADOR -->
<article class="Padre__Hijastro--Mayor"></article>
<article class="Padre__Hijastro--Menor"></article>
</section>
</main>
Si tienes etiquetas dentro de la etiqueta a la que le estás aplicando estilos y le pones una clase, puedes aplicar estilos únicamente a las etiquetas dentro de esa clase de la siguiente manera: .clase etiqueta {}
/* Estilos a etiqueta "a" dentro de una clase */
.main-nav__item a {
color: white;
}
Usa
background-colorpara ver las cajas de los elementos.
Define el estilo de un estado especial de un elemento.
Agregar al final de la clase :nombreAccion
/* Pseudo clase */
.main-nav__item a:hover {
color: darkblue;
}
.main-nav__item a:active {
color: darkcyan;
}
Define el estilo de una parte específica de un elemento.
Agregar al final de la clase ::nombreAccion
/* Pseudo elemento */
.main-nav__item a::after {
content: " | "; /* despues del elemento, agrega esto */
}
Las pseudo-clases especifica un estado especial a un elemento seleccionado.
/* Ejemplo */
p:first-child {
color:red;
}
/*Convierte todo el texto del primero hijo del bloque de código en rojo. Todo el texto */
Lista de pseudo-clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes
A diferencia de las pseudo-clases los pseudo-elementos no describen un estado especial, sino que permiten añadir estilos a una parte concreta (a veces muy específica) de un elemento.
/* Ejemplo */
p::first-letter {
color: red;
font-size: 20px;
}
/* Toma solo la primera letra de un elemento, no todo su contenido. Solo la primera letra.*/
Lista de pseudo-elementos: https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos
.
¿La diferencia?
Básicamente los pseudo-elementos por lo general hacen referencia a partes específicas de un elemento, mientras que las pseudo-clases hacen referencia al estado del elemento.
Talvez sea muy básico pero me gusto
Es importante tomar en cuenta que cuando se va a utilizar la metodología BEM no se “debería” utilizar etiquetas, BEM es para trabajar únicamente con clases y separar completamente el HTML del CSS para que puda ser reutilizado.
Cuando el profesor colocó** .main-nav__item a{
}**
Realmente no aplicó BEM, con BEM la etiqueta a debería haber tenido su propia clase (EN BEM TODOS LOS ELEMENTOS DEBEN CONTAR CON CLASE, PREFERENTEMENTE)
Acá un enlace para que aprendan más de Block Element Modifier (BEM)
Les comparto un gran recurso sobre BEM
Creo que esta imagen puede representar perfectamente lo que es Margin y Padding Al principio es dificil entender pero animo!
Estamos en una plataforma en la que entre todos nos ayudamos a comprender.
Margin: es un margen, es decir un espacio entre elementos. Por ejemplo un espacio entre 2 imagenes…
Padding: es un espacio interno que se le aplica al mismo elemento, por ejemplo para que el texto de un botón no este pegado a los bordes de dicho botón.
Aqui pueden leer mas:
Margin
Padding
 hacer clic con la rueda de desplazamiento del mouse y hacer scroll hasta donde desees (en este caso, al ultimo <li>) de esa forma podrán escribir en las 4 líneas de código al mismo tiempo.
A veces me gustaria que fuera más clara la clase como el siguiente video:
https://youtu.be/LUjsToWH8s4
/* Usamos las clases */
.main-nav{
margin-top:10px; /* Espaciado exterior superior */
list-style: none; /* Le quitamos los estilos a la lista */
padding-left:10px; /* Espaciado interno izquierdo */
background-color: #13a4a4; /* Color de fondo para el elemento */
}
.main-nav_item{
display: inline-block; /* Hacemos que pasen de vertical a horizontal */
}
.main-nav_item a{ /* Modificamos todos las etiquetas <a> que esten dentro de la clase especificada */
color: #FFFFFF; /* Cambiamos el color de la letra a blanco */
padding: 5px; /* Hacemos un espaciado interior general(superior, inferior, derecho y izquierdo) de 5 pixeles */
border-radius: 2px; /* Hacemos un borde redondeando de 2 pixeles al elemento */
text-decoration: none; /* Le quitamos las decoraciones al texto de la etiqueta <a> */
}
.main-nav_item a:hover{ /* Con etiqueta:hover hacemos que cada vez que el usuario pase el cursor
por el elemento se le apliquen los siguientes estilos CSS */
color: #0000FF; /* Hacemos que el color de la fuente sea de color azul */
}
.main-nav_item a:active{ /* Con etiqueta:active hacemos que cada vez que el usuario haga click sobre el elemento
se le apliquen los siguientes estilos CSS */
color: #FF0000; /* Hacemps que el color de la fuente sea de color azul */
}
/* Pseudo clases y Pseudo elementos */
.main-nav_item a::after{ /* Con after agregamos cierto contenido despues de la etiqueta especificada */
content : " | "; /* con content : "contenido" agregamos el contenido que queremos mostrar */
}```
No se ustedes, pero este curso me parece demasiado superficial. No hemos terminado ni ver HTML y ya incluyen CSS.
(Extrañamos a Fredy de profesor!, este man no deja ni apuntes.)
Les recomiendo estudiar por su parte HTML y CSS y luego volver a pasar por aqui, yo lo hice en w3 school. Les dejo el link!
Se debería explicar primero el modelo de caja
Estas clases hacen honor al titulo del curso “Curso Definitivo de HTML y CSS”.
un video explicativo sobre la metodologia BEM
https://www.youtube.com/watch?v=bvnzyXGkNY4
encontré este artículo sobre la metodología BEM por si les sirve!
https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa/
En el curso de frontend explican la metologia BEM.
Dentro del css, se podrían categorizar como selectores, nos permiten:
:visited).::Los Pseudo-elementos se utilizan para seleccionar una parte de alguna estructura HTML, por ejemplo:
p::first-letter Selecciona la primera letra de un párrafo (No solamente de un párrafo.elemento:beforeCrear un elementos antes del contenido del elementohtml con afterse crear después del contenido.:Las Pseudo-clases se utilizan para seleccionar un elemento en un determinado estado, por ejemplo:
:active Estado que se activa cuando el puntero del mouse pasa por encima del elemento.:focus pseudo-clase activada cuando un campo de formulario o elemento html tiene el foco del mouse (esta seleccionado o se este escribiendo en dicho elemento):::Sobre BEM:
¿Qué es BEM?
Es una metodología que nos ayuda como desarrolladores a facilitar la tarea de rear nombres de clases mediante convenciones prácticas.
B significa Bloque o Block (para los cuates) y un bloque es un pedazo de nuestra página web que tiene sentido por sí mismo, es decir, que es una sección independiente en una página web.
E significa Elemento o Element (para que práctiques tu inglés) y los elementos son las distintas partes que conforman un bloque. A diferencia de los bloques, los elementos no tienen significado por sí mismos ni son independientes.
M significa Modificador o Modifier (aportaciones de BEM e inglés c:), y estos son indicadores que colocamos a nuestros bloques o elementos para para poder diferenciar una variante de un bloque o elemento para poder modificar su estilo o comportamiento.
Ejemplos:
¿Cómo declaro los nombres de clases con esta metodología?
Simple, recuerda que quiere decir BEM:
bloque
bloque__elemento
bloque__elemento–modificador
esta clase estuvo aldo dificil de entender.
Comparto mi resumen de las Pseudo Clases y Pseudo Elementos
Por aquí les dejo el resumen de BEM. ¿Qué es y de qué se compone?
Tipos de selectores:
Recuerden que pueden poner los códigos con abreviaturas tipo:
ul>li*5>a
Que es equivalente a
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
https://9elements.com/bem-cheat-sheet/
Esta pagina te ayudara a entender la metodología BEM tiene algunas sugerencias para nombrar los componentes mas comunes de la web.
Excelente clase solo a modo visual quite el bagraund-color del .main-nav, y se lo puse al .main-nave__item a y quedo así:
aquí es donde empieza lo difícil ? 😦
Comparto mis apuntes de la clase 😃
Un enlace ancla es un tipo de enlace html que, al pinchar sobre el, te lleva a una parte concreta de la página web ya sea propia o externa.
Son muy útiles para ayudar a los visitantes a encontrar directamente el contenido que les interesa dentro de tu página web. Hay que recordar que existen estudios que dicen que de media, un visitante invierte 20 segundos como máximo para encontrar el contenido que busca. Si en estos 20 segundos (o menos), abandonará tu web y probablemente no vuelva. Por esto (y por otras muchas cosas) es bueno usar los enlaces ancla.
¿Qué nombres podemos usar para nombrar nuestros archivos CSS?
¿Cómo se deben manejar los estilos CSS cuando tenemos un proyecto grande que funciona en varias pantallas?
¿Cuál es la estructura básica de un menú de navegación en HTML?
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Courses</a></li>
<li><a href="">Teachers</a></li>
<li><a href="">Blog</a></li>
</ul>
</nav>
</header>
¿Qué metodología podemos usar para nombrar nuestras clases de CSS?
¿Para qué nos sirve la propiedad list-style?
¿Qué pasa cuando la propiedad list-style tiene como valor none?
list-style: none;
¿El navegador agrega estilos propios a las etiquetas HTML?
¿Para qué nos sirve la propiedad background-color?
¿Para qué nos sirve la propiedad color?
¿Para qué sirve la propiedad font-size?
¿Para qué nos sirve la propiedad border-radius?
border-radius: 15px;
¿Para qué nos sirve la propiedad text-decoration?
¿Qué es una pseudo clase?
¿Qué es un pseudo elemento?
¿Para qué nos sirve la pseudo clase :hover?
¿Para qué nos sirve la pseudo clase :active?
¿Para qué nos sirve el pseudo elemento ::after?
¿Para qué nos sirve la propiedad content?
content: " | ";
¿Cómo podemos diferenciar un pseudo elemento y una pseudo clase?
Mi lista del super 😎
.container {
width: 300px;
margin: 0 auto;
}
main {
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow:
2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
100px 100px 80px rgba(0, 0, 0, 0.07)
;
}
body {
font-family: 'Work Sans', sans-serif;
font-weight: 300;
background-color: #e5eefb;
display: flex;
align-items: center;
height: 100vh;
}
h1 , h2 {
font-weight: 500;
}
h1 {
text-align: center;
color: #030455;
}
h2 {
color: #3b3b3b;
}
a {
text-decoration: none;
color: #23239b;
}
p {
text-align: center;
}
Comparto el final de mi código con algunos comentarios para tenerlos a la mano ahí mismo
Resumen de BEN?
La metodologia bloque elemento modificador ( comunmente conocido como BEM) Es una convincion de momenclatura popular para clases HTML y CSS.
QUE SIGNIFICA BEM?
QUE FUNCIONES TIENE CADA UNO?
DIFERENCIAS:
SPEUDO CLASS: Class.- Define el estitlo de un estado especial de un elemento.
SPEUDO ELEMENTOS: Element.- Define el estilo de una parte especifica de un elemento.
Esta clase es un Bardo…pero
guerra es guerra, a la pereza y a la ignorancia
Vamossssss
El nombre de archivo de estilos lo definimos nosotros pero casi siempre es main o estilos o styles. Cuando se trabaja con proyectos más grandes normalmente hay un archivo de CSS por pantalla y lleva el nombre de la pantalla.
¿Cómo podemos nombrar nuestras clases?
Tienen que ser acorde con lo que estamos trabajando. Vamos a usar la metodología BEM que nos va a ayudar a entender como nombrar las clases.
El navegador por si solo le agrega ciertos estilos a los elementos.
Ser especifico en CSS: A todas las etiquetas “a” que están dentro de este elemento con esta clase, aplícale este siguiente estilo.
Pseudo Clases
hover: Cuando el mouse está arriba del elemento. Es un efecto, un estado.
active: Cuando le das Click
Pseudo Elementos
Un elemento lo mandamos llamar con “::”
after: le agrega algo a la etiqueta del lado derecho (o después del elemento)
Diferencias
Pseudo Clases: Define el estilo de un estado especial de un elemento
Pseudo Elementos: Define el estilo de una parte específica de un elemento.
Por si es de ayuda
Me pareció super importante la metodología de BEM, si ustedes están empezando como yo les recomiendo tomarse de verdad el tiempo de entenderlo y practicarlo para así mantener un código limpio desde el principio
Les dejo un video para que aprendan más sobre BEM
Que rayos es la Metodología BEM explicado con un ejemplo | CSS
Y les dejo una página que les explica como usar BEM
https://9elements.com/bem-cheat-sheet/
/* RESUMEN:
- Pseudo classes ':class' = Define el estilo de un estado especial de un elemento
- Pseudo elementos '::element' = Define el estilo de una parte especifica de un elemento */
.main-nav {
margin-top: 10px;
list-style: none;
padding-left: 0;
background-color: #13a4a4;
}
.main-nav__item {
display: inline-block;
}
/* Ser especifico en CSS3:
Traducción: Todas las etiquetas <a> con la clase "main-nav__item:" */
.main-nav__item a {
color: white;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}
/* Pseudo clases : */
.main-nav__item a:hover {
color: blue;
}
.main-nav__item a:active {
color: brown;
}
/* Pseudo Elementos:
Traducción: Despues de este elemento añade este contenido: "|" */
.main-nav__item a::after {
content: " | ";
}
Les comparto este artículo en español sobre BEM, es absurdamente claro 😃
¿Qué es el BEM?
El BEM es una metodología destinada a disminuir la huella dejada por CSS. Es decir, el código CSS puede volverse realmente desorganizado y difícil de leer. El BEM es una forma que estructura sus convenciones de nomenclatura para aumentar la legibilidad y la funcionalidad. Esto es muy importante, ya que ayuda a otros programadores que están leyendo su código a comprender qué es lo que está diseñando. ¡La legibilidad es clave!
Este es un excelente video donde se explica BEM: video
bueno, un aporte con pseudo clases y un .gif del resultado. Al body le agregué un linear-gradient (generen sus colores desde aquí https://mycolor.space/ y copien los rgb o hex en modo CSS). Usé #id .class :estado y { }
https://media.giphy.com/media/NCoZwGm5YwrDPG03am/giphy.gif
En este pen está mi menu estilo smash bros versión 1 con pseudo clases y pseudo elementos
https://codepen.io/mauriciorivero/pen/poewEor
Normalmente para aplicar la regla css debemos citar un selector o elemento, pero no todos los elementos de mi html se les va a aplicar el mismo estilo, por lo tanto para diferenciarlos de las secciones se utilizan las clases, para ello es necesario implementar la metodología BEM.
CREO Q NO ERA NECESARIO AHORITA ,ENSEÑAR LA METODOLOGIA BEN, SI TODAVIA ESTAMOS APRENDIENDO BLOQUES ETC. ME CONFUNDE MAS
Pesima la explicacion de lo que es pseudo clase y pseudo elementos y sus diferencias
Quiero cargar mi aporte pero no me deja poner imagenes, me marca error =(
¿A alguien mas le pasa?
¿A que se refiere Diego con “pantalla”?
Para darle clases a los elementos es muy importante tener en cuenta a que elementos vamos a modificar y darle un nombre especifico
Hay que tener nombres de clases que sean acordes a lo que estamos trabajando
Estructura Básica De Una Barra De NAV
header>nav>ul>li*4>a[href="#"]{Inicio}
🐱💻 Una pseudoclase es un selector que marca los elementos que están en un estado específico.
Pseudo clases: Define el estilo de un estado especial de un elemento.
Pesudo elemento: Define el estilo de una parte específica de un elemento.
👉🏻Tal vez llegado a este punto y si eres nuevo en el desarrollo web, te sientas perdido, te recomiendo que revises la documentación de w3school, en lo personal me ayudo bastante con buena teoria, y ejemplos fácil de entender
w3School
Asimismo te aconsejo que uses ChatGPT como si fuera tu profesor personal, eso si 👀, lo recomiendo que uses una vez ya tenidas las bases que puedes aprender en w3School y Platzi. 💚
les comparto la estructura completa para completa para crear una pagina web !!! espero que les sirva!!! la uso mucho en mi trabajo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<h1>Encabezado principal</h1>
<p>Este es un párrafo.</p>
</main>
<footer>
<p>Derechos reservados © 2023</p>
</footer>
<script src="script.js"></script>
</body>
</html>
ha sido iluminadora esta clase dandome la claridad a los conceptos de seudoclases y la diferencia a seduoelementos
Tremendo! profe, es un crack, cada dia me siento más responsive jajaja, está muy bueno el BEM.
PseudoClase - :class - define el estilo de un estado especial de un elemento.
PseudoElementos - ::element - Define el estlo de una parte específica de un elemento.
A mi siempre se ma ha dificultado mucho aprender frontend. Me encanta cuando dice “Tu ya no por que vas a ser un experto en esto”
BEM : metodología para nombrar class CSS.
Inglés: https://en.bem.info/methodology/faq/#why-bem
español: https://platzi.com/blog/bem/
Aprende BEM en este curso de platzi
https://platzi.com/clases/1665-preprocesadores/22297-introduccion-a-bem/
Aqui se me aclararon las dudas :
https://www.youtube.com/watch?v=YaAkV--25fg
Pseudo clases y Pseudo elementos (BEM)
BEM
Una clase tambien muy recomendada si no le has cogido el tiro a los otros aportes.
Agradezco mucho a ver visto esta clase, iniciar con CSS y con una estructura definida me parece empezar con el pie derecho, les dejo unos links de ayuda:
<!--un shortcut a la hora de crear el nav-->
nav>ul>li*4>a
este te crea todo, sin necesidad de copiar y pegar
pues si va mis logros en esta clase
aunque si quisiera decir lo que aprendi practicando:
*:hover debe de ir antes de :active para que el usuario pueda ver el cambio.
*::first-letter funciona tanto en un boton como en un div, pero no en un label.
*para un checkbox como para un radio se puede user :checked + div o :checked + label y va a ejecutar el estilo sin problema.
*si declaran un grupo de elementos, para que afecte el primer elemento en el css deben de declarar el nombre de la clase y la etiqueta del primer elemento, por ejemplo: .primeroDe label:first-child
Cordial saludo comunidad
Comparto un video que les puede ayudar a entender mejor la metodología BEM:
https://www.youtube.com/watch?v=_ciw9tXRcfg
https://www.youtube.com/watch?v=-gOp0m2u7Ww
Slds
<code>
Aporte:
Primero,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>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header class="header">
<nav class="header__nav">
<ul class="header__lista">
<li class="header__item"><a class="header__enlace" href="#">Inicio</a></li>
<li class="header__item"><a class="header__enlace" href="#">Acerca de Nosotros</a></li>
<li class="header__item"><a class="header__enlace" href="#">Experiencia</a></li>
<li class="header__item"><a class="header__enlace" href="#">Contacto</a></li>
</ul>
</nav>
</header>
</body>
</html>
Después, CSS:
*{
padding:0px;
margin:0px;
}
.header{
width:600px;
height:60px;
display:flex;
justify-content:center;
align-items:center;
background:#2a9d8f;
margin:0px auto;
border-radius:5px;
}
.header__nav{
height:60px;
display:flex;
}
.header__lista{
list-style:none;
display:flex
}
.header__enlace{
display:flex;
align-items:center;
height:60px;
color:white;
margin:0px 5px;
text-decoration:none;
font-family:“Arial”;
font-size:18px;
padding:0px 8px;
}
.header__enlace:hover{
background:#ffddd2;
}
Resultado:
BEM = Block, Element, Modifier
Que es la etiqueta main y para que sirve?
Por qué usó display: inline-block; en .main-nav__item? si quiere que se acomoden de manera horizontal no debió haber puesto esa linea en .main-nav? mas general no en las li
Mi 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="./css/claseCss/styles.css">
<title>Youtube</title>
</head>
<body>
<header>
<nav>
<ul class="main-nav">
<li class="main-nav__item"><a href="#">Home</a></li>
<li class="main-nav__item"><a href="#">Cursos</a></li>
<li class="main-nav__item"><a href="#">Intructores</a></li>
<li class="main-nav__item"><a href="#">Blog</a></li>
</ul>
</nav>
</header>
</body>
</html>
MI Css
body{
background:rgb(199, 165, 124);
}
a{
text-decoration: none;
}
.main-nav {
margin-top: 1px;
list-style: none;
padding: 0;
background-color: #40ababcc;
text-align: right;
height: 2rem;
}
.main-nav__item {
margin-top: 0.5rem;
display: inline-block;
padding-inline: 0.5rem;
}
.main-nav__item a {
color: white;
padding: 6px;
border-radius: 2px;
}
.main-nav__item a:hover{
background-color:rgb(131, 93, 48);
}
.main-nav__item a:active{
color: black;
}
.main-nav__item a::after{
content: " |";
}
Hay dos extensiones para google chrome que se llaman “Pesticide for chrome” y “CSS Prepper” son excelentes porque resaltan todos los elementos del html que estan en el navegador. Sirven para entender mucho el tema del modelo de cajas.
Mis notas:
Metodologia BEM: .> > Bloque __Elemento --Modificador
Pseudo classes (:class): Define el estilo de un estado especial de un elemento.
Pseudo elementos (::element): Define el estilo de **una parte **especifica de un elemento.
Con estos enlaces puedes entender perfectamente la metodología bem
Hola! Estuve leyendo los comentarios y veo que varios mencionan que está muy complicado o que no entendieron este tema ademas que busquen otras fuentes y links para saberlo.
Hubo un comentario que puso dos imagenes explicando un poco sobre este tema (de Hector Alonso Padilla aunque está en ingles pero hay que aprenderlo xdxd) .
ES NORMAL si no entiendes, los pseudo elementos y clases a mi parecer es lo mas complicado de entender.
No se coman la cabeza aprendiendo los pseudo elementos de vez en cuando úsenlos para estar familiarizándose 😊. Exito!
Uno cree que ha estudiado mucho peor nunca es suficiente, siempre hay cosas nuevas por aprender, brutal este curso
**
**
Modelo de cebolla
Imagina que tienes una cebolla.
.
.
.
Las capas más externas son tu Bloque (Block). Es la parte más externa de tu documento HTML y donde asignar clases afecta en el espectro más grande. Es tu “contenedor” principal.
HTML:
<main>
<section class="container">
<p> I'm a paragraph </p>
</section>
</main>
CSS:
.container {
background-color: blue;
}
.
Las capas siguientes son tu Elementos (Element). Ahí van las partes internas de tu bloque que tendrán un estilo más particular.
HTML:
<main class="container">
<section class="container-section">
<p> I'm a paragraph </p>
</section>
</main>
CSS:
.container {
background-color: blue;
}
.container-section {
border: 2px dark-gray;
}
.
La o las últimas capas son tu Modificador (Modifier). Si aplicas estilos a este nivel afectan al detalle al documento HTML, estarías estilizando de forma granular.
.
HTML:
<main class="container">
<section class="container-section">
<p class="container-section__modifier"> I'm a paragraph </p>
</section>
</main>
CSS:
.container {
background-color: blue;
}
.container-section {
border: 2px dark-gray;
}
.container-section__modifier{
font-weight: 2em;
color: light-gray;
}
Resultado:
.
Ejemplo:
Un pequeño ejemplo agregando data-attributes para colocar emojis por 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">
<title>Clase Pseudoclases</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item"><a href="#" class="main-nav__link" data-icon="🏠">Home</a></li>
<li class="main-nav__item"><a href="#" class="main-nav__link" data-icon="📚">Cursos</a></li>
<li class="main-nav__item"><a href="#" class="main-nav__link" data-icon="👨💻">Instructores</a></li>
<li class="main-nav__item"><a href="#" class="main-nav__link" data-icon="📰">Blog</a></li>
</ul>
</nav>
</header>
</body>
</html>
.main-nav__list {
font-family: sans-serif;
margin-top: 10px;
list-style: none;
padding-left: 0;
display: flex;
background-color: #00acac;
padding: 10px 20px;
border-radius: 4px;
}
.main-nav__item {
margin-right: 20px;
}
.main-nav__item:last-child {
margin-right: 0;
}
.main-nav__link {
display: inline-block;
padding: 5px 10px;
color: teal;
font-size: 18px;
text-decoration: none;
border-radius: 4px;
background-color: white;
border: 1px solid transparent;
}
.main-nav__link:hover {
background-color: teal;
color: white;
}
.main-nav__link:active {
border: 1px solid white;
}
.main-nav__link::before {
content: attr(data-icon);
margin-right: 5px;
}
hay ya me siento como profesional de html y css basico 😄 que felicidad es que parece magia
Listo, algo nuevo aprendido 😃
.main-nav__item a::after{
content: " | ";
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?