good :) gracias, espero siga subiendo más videos es de mucha ayuda...

Hermano lo felicito... excelente explicación.

bro salvaste el cuatrimestre de la fac, tienen que llevarte como jefe de catedra de tucuman

Muchas gracias. LLevo tomando clases de html, y jamás me lo habían aclarado o explicado así. Muchas gracias.

Gracias por tu contenido profe enseñas muy bien

Muchas gracias eres muy bueno en estos , espero que siga subiendo más video así porque me ayudan muchísimo aprender específicamente el css:) gracias

Grande men por fin alguien que lo entiendo solo tengo un pequeño problema como saco los porcentajes que me imagino es de width: 100%; es un y de height: 100%; es otro para dividirlos en em o % :( por favor has un video sobre eso es muy importante para que pueda cuadrar los box. gracias

que buen canal lo acabo de descurbir que grandes videos saludos !

Para cuando la 3ra partee

Neta se la rifa profe vine buscando oro y encontré diamantes

Cuanta dulzura para explicar ❤️❤️mil gracias

Cuanta dedicación! Excelente muchas gracias ❤️❤️❤️

buenas, consulta yo tengo problemas con colocar css img y index.html por que el iconito del lado izquiero no es igual.

Muy didactico, felicitaciones.

Gracias Profesor, muy instructivo y ordenado su tutorial.

la verdad lo mejor que vi hasta ahora ...yo empezando y con muchas dudas ...espero mas amigo gracias por compartir

muchas gracias. me sirvió excelente

Que me recomiendas para entender cada cosa osea las cajas q dices o muestras en la imagen osea cada cosa para estructurar para entender q es un pading etc

Me salvo, muchas graciaaaas

excelente video men

lo mejor que he visto

Hola amigo, seguiras subiendo videos de css?

Muchas gracias. Excelente explicación y gran maestro SR.

Una explicación verdaderamente genial y didáctica. Muy buen contenido

gracias!!!

ojalá vuelvas, eres un tremendo maestro. bendecido sea

Entendí muchas cosas que tenía al aire sin saber como ordenarlas en mi mente jajaja me sirvió mucho este video.

Gracias Profe !se nota que sabe explicar y es un verdadero profesional , muchos videos y con solo este aprendi,mucho mas claro dudas que tenia que solo usted las elimino. Por fin muchas Gracias Profe no deje de enseñar !un genio!!☺Feliz con este video!

hola! felicitaciones por esta sesion de videos, aprendi mucho. Una pregunta, tienes algun video haciendo el responsive de esta pagina?

*{margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } .main{ background-color: bisque; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*incio cabecera*/ .cabecera{ background-color: rgb(119, 179,50); width: 70%; height:50%; padding: 0 40px; } .cabecera_link{ width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; text-decoration: none; color:black; font-size: 20px; font-weight: 600; } .cabecera_img{ object-fit: cover;/* esto para que DEPENDA del elemento padre*/ height: 90%; margin-left: 10px; color: black; } .navegacion{ background-color: black; width: 70%; height: 60px; padding: 0 40px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center ; overflow: hidden; } .navegacion a{ text-decoration: none; color: white; font-size: 18px; font-weight: 600; padding: 25px 50px; } .navegacion a:hover{ color: white; background-color: rgb(218,185,87); padding: 25px 50px; } .banner{ background-image:url(../spaghetti.jpg); background-position: center; width: 70%; height: calc(100vh - 110px); display: flex; flex-direction: column; justify-content: center; align-items: center ; color: white; } .banner h1{ size: 75px; } .banner h2{ size: 30px; } .banner a{ background-color: rgb(218,185,87); width: 250px; height: 60px; border-radius: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center ; text-decoration: none; margin-top: 75px; } .banner a:hover{ background-color: rgb(47,47,47); color:white; } en la parte del .banner no me salia la foto de spaguetti o portada, hay que separar bien la resta, height: calc(100vh - 110px), si lo dejas pegado no funciona. Para que les sirve compañeros. Por lo demas, gracias Profesor Nelson Aranibar

hola!! tengo un inconveniente con un trabajo de maquetación, ¿me pueden ayudar?

Parte 2, por favor!. Css

parte 2 por favor

Hola! Cuando subirás el CSS?, siguiente video!!

Excelente video. Gracias por compartir.

Por favor amigos, pasen el código 🙏 Me sale mal :"v

Me salvaste de un proyecto de web mil gracias

¡No sabía ese atajo de escribir una etiqueta * número de veces que lo quieres repetir!

Jamás vi algo tan, pero tan ordenado y explicado de muy buena forma, en que consiste cada etiqueta y el por qué el uso de ellas, excelente video, iré a tus demás videos, para ver si hay continuación de esta página y no se se me ocurre el uso de JavaScript o programar los botones del header o hacerlo responsive, me suscribo y éxito en tu canal.

Nelson...Muchas gracias, he aprendido cantidades siguiento este tutorial de 5 videos, una organizacion para los proyectos excepcional.....gracias.

Muchas Gracias, excelente forma de trabajar y de explicar........Gracias

buena explicasione para un principiante, como desarrollador que soy te felicito.

Bien, pero OJO la medida Em no es igual a 16px, la medida dependerá del tamaño del font-size del padre, es decir, si en body tenemos font-size 16px en main 1 em Sera igual a 16px. Creo que te equivocaste con REM, está medida está enlazada con el ROOT ( etiqueta html) está medida depende del tamaño del font size de Html, y en general los navegadores le dan 16px de medida, por eso 1 REM casi siempre es igual a 16px. Un saludo.

Tremenda explicación

Excelente tutorial. Agradecimientos por compartir de buena forma su conocimiento.

Por favor solicito su ayuda con el bloque-der. Me sale en una sola columna la imagen y el texto. Que tengo mal?. Quedo a la espera de su respuesta, gracias. .bloque-der { width: 40%; height: 100%; /* background-color: red; */ padding: 0 3%; } .der-titulo { /* background-color: green; */ text-align: center; } .der-titulo h3 { font-size: 20px; } .der-noticias { /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: start; margin: 30px 0; } .noticias-img { width: 50%; } .noticias-img img { object-fit: cover; width: 100%; } .noticias-textos { width: 50%; margin: 0 10px; } .noticias-textos h4 { font-size: 17px; text-align: center; margin-bottom: 15px; } .noticias-textos p { font-size: 15px; text-align: justify; /* margin-top: 15px; */ } .noticias-textos a { font-size: 14px; margin-top: 10px; }

Buenos dias, muchas gracias por este curso de maquetar una página. Ahora como le hacemos para que sea adaptable. Se requiere el uso de @media o @container. Tiene ejemplos?

En el footer cambie a año actual con lo siguiente: <script>document.write(new Date().getFullYear())</script>. Como se haria para que la pagina tenga traducir (translate)?. Gracias

Excelente tutorial, profe. Gracias.

Como esta amigo , explicas muy bien , solo hay una cosa si es bueno saber sobre todo en css para saber cuando puedo empezar a usar ese codigo, por otro lado en el archivo style.css en cabecera el background:linear-gradient con las especificaciones de degradado no me la hace cuando la veo en el navegador no da el degradado como se ve que sale en el video