Web responsive desde cero | Web con html y css desde cero gratis
ฝัง
- เผยแพร่เมื่อ 1 ธ.ค. 2024
- Aprende a desarrollar desde cero una web corporativa solo con Html y Css, desde cero y paso a paso.
Si quieres desarrollar una pagina web responsive desde cero usando solo html y css, en este video te enseñaré como hacerlo.
Dominar lo básico de html y css es clave a la hora de crear paginas web responsive desde cero, ya que nos dará una base en la que afianzar así nuestros conocimientos posteriores.
En este video se ha desarrollado el proyecto completo sin el uso de javascript, y siendo el contenido completamente adaptable a todos los dispositivos, desde móviles pequeños hasta pantallas de grandes dimensiones.
Te recomiendo que si quieres seguir aprendiendo y optas por la programación, continues tu formación con mi curso de javascript que puedes encontrar en Udemy, en el enlace que dejo justo abajo podrás acceder al mejor precio.
Si por el contrario optas por seguir aprendiendo diseño y maquetación web, puedes continuar formandote en el framework más usado y más demandado por las empresas Bootstrap, uno de mis cursos con mayor puntuación en Udemy te pueden servir de ayuda, encontrarás el enlace más abajo.
SIN JAVASCRIPT
IMAGENES
📷 unsplash.com/ 📷
ICONOS
📌 fontawesome.co... 📌
CDN (abrir y cerrar etiqueta link)
link rel="stylesheet" href="use.fontawesom..."
**********************************
CURSOS DE PROGRAMACIÓN 💻
Incluye 3 cursos gratis HTML, CSS, JAVASCRIPT con ejercicios y código
academy.navisc...
**********************************
SUSCRIBETE
🔥 bit.ly/2NEs91u 🔥
**********************************
un crack! me inspiró para armar un proyecto de estudio, funciona y entiendo mucho mas todo jaja gracias, subscripto.
Un descubrimiento tu canal. He aprendido más en una hora sobre maquetación que en 4 meses de DAW. Exploraré tu canal para ver que más cosas interesantes tienes. Muchas gracias por compartir!!!
El mejor video que he visto, excelente forma de explicar Muchisimas Gracias!!!
Me alegro de que sirva 🚀
Que crack, detalle tras detalle, gracias por compartir, en lo personal necesito practicar responsive.
Te felicito por la forma muy pedagógica que desarrollas el curso. Te has ganado nuevo suscritor. No dejes de subir contenido,
Buenas noches, muy clara la explicación y muy llevadera la clase. Quisiera consultar algo, ya que estoy practicando.
En este ejemplo, en el menu en el formato responsivo, quisiera incluir por ejemplo que el Contacto pueda enviar internamente mediante Contacto a el , el tema es que lo redirecciona sin problema pero hay que hacer click en la "X" para que cierre el menu.
Gracias
Excelente tutorial amigo muy fácil de aprender felicitaciones
muchas pero muchas gracias un video muy completo todo muy claro , de verdad se agradece me ayudo mucho !!! saludos desde chile!
Me alegro de que sirva 🚀
Muy bueno, Bien Explicado y En orden, gracias me suscribo
¡Bravo!!!
Excelente explicación. Gracias!!
Muy bueno! Muchas gracias.
Gracias por tu Gran aporte y explicación! suscrito
Me encanto el video y me sirvió un montón. Esta bien explicado y detallado la verdad fue difícil encontrar este video pero tuve suerte de encontrarlo.
Muchas Gracias.
Nuevo Sub
Graciasssss muy buena explicacion!
Me alegro de que sirva 🚀
Genial y muy bien explicado, nuevo suscriptor.
Sos grande!
Pronto contenido actualizado con buenas prácticas 👌👌
Excelente amigo, quisiéramos ver una pagina, igual como esta pero con BASE DE DATOS.
Puedes ver el video del carrito de compras con backend
Muchas gracias por el video! me sirvio mucho.
Gracias Miguel, me alegro
Muchísimas gracias por el vídeo y felicidades por el curso. Estoy empezando y me ha resultado muy útil.
Me alegra haberte ayudado, es un buen momento para empezar ;)
GENIAL BRO
Muy buen vídeo! Suscrito sigue así!
Muchas gracias y welcome 🚀
@@NavisCode Sigue así, estaría bien también vídeos cortos con píldoras o consejos sobre el front. Un saludo!
Excelente tutorial Muchas gracias!!
excelente video amigo
excelente video
de verdad que quiero agradecerte por este video, sobre lo que son el flex, y todas esas cosas para mejorar la página aparte de prácticar que me recomiendas? alguna página para mejorar y ir viendo ya que quiero especializar me web
Puedes entrar en esta web mía de recursos y en el apartado didácticos puedes practicar mientras te diviertes con juegos recursosrecursosrecursos.netlify.app/
Hola, buen vídeo. Para que al desplegar el menú en dispositivos, no tape el LOGO ¿se podría hacer con >? gracias.
Hola Paco no recuerdo bien el código pero parece posible 👌
Que excelente video amigo, muy buen contenido una pregunta porque no usas para crear botones? estoy viendo que lo creas con a directo y me llama la atención esa forma creo que es mas manipulable, saludos desde colombia!
Muchas gracias
Pues siempre intentar mantener una consistencia, los elementos a para links de navegación
En cuanto a más o menos manipulable realmente son iguales salvo las posibilidades de css extra de a sobre link visited etc
Muy buenb video simple, facil de implementar. Lei tofos los comentarios, y a nadie mas le paso esto: .menu{text-decoration: none; no funciona, text-decoration-line:none; tampoco. El color en .menu tampoco toma. Poner bajo el RESET a:link {text-decoration-line: none;} sirve para la linea, pero no para el color. Alguna recomendacion?
Nos ha salvado, estamos agradecidos.jpg
Excelente video ¿Es posible descargar el código html/css de algún link? Gracias!!!
Hola, te hago una cosnulta ¿El responsive es en diseño mobile first?
Responsive es diseño adaptativo a cualquier dispositivo
Mobile first es empezar el diseño, maquetacion y programación enfocado siempre a dispositivos móviles
Dicho esto, no entiendo muy bien tu pregunta 😂
hola.estoy usando media queries pero el display: flex no me funciona. no cambia nada en vista de movil. tampoco me funciona flex direction column .Sabes que puedo hacer?
Una pregunta panas, como pones el símbolo que usas para verificar el Chequeo de X al momento de ocultar el menú?
#check:checke ( AQUI QUE SINGO VA) .menu{
right:0;
}
~ para que lo hagas tu mismo solo presiona la tecla Alt Gr que esta en la derecha de tu teclado (no la confundas con Alt ya que no funcionan igual) y mientras presionas "Alt Gr" debes presionar la tecla que tenga dicho signo (esta tecla varia según el teclado que tengas en mi caso se encuentra al lado del botón Enter junto con otros signos como + y *)
Presiona la tecla "Alt" en tu teclado, y no la sueltes. 2) Sin dejar de presionar "Alt", presiona en el teclado numérico el número "126", que es el número de la letra o símbolo "~" en el código ASCII.
Hola bro, tengo problemas a la hora de usar este caracter " ~ ", en el check responsive. no me provoca nada en mi pagina, no me funciona. que podria estar pasandome?? :(
A mi tampoco :C
El problema estuvo en el left: 0; hay que quitarlo y poner right: -100%;
@@diegoasr7196 Gracias!
@Diego ASR gracias, Dios te bendiga.
Tendrán el css el link de descarga ya con los códigos?
genial explicado gracias
Hay manera de que al insertar una imagen y quiera hacer el efecto hover para que me aparezcan unos iconos sobre la imagen y así al darle click me lleve a otra página?
PAPU PUEDE PONER EN LA DESCRIPCION DEL VIDEO EL REPOSITORIO DEL PROYECTO EN GUTHUB PORFA. LO AGRADECERÍA MUCHO. 🙂
consulta como hago para agrandar el la vista de la consola en el navegador en los primeros minutos del video utilizo brave y no lo abre
Si te refieres al zoom puedes hacerlo en la consola también, deja pulsada la tecla ctrl y dale a la rueda del ratón o a la tecla más
que crack sos
No se si sea a la única que le pasa que al poner el banner (editarlo), lo de inicio, blog y eso, se les va abajo y no a donde debería de estar :(. Ocupo respuesta de como arreglar eso
Exelente video. Tengo una consulta, como hago para linkear las siguientes páginas por ej de inicio, sobre nosotros, blog?
Muy buen, tu fuiste el unico que me ense;o a hacer un menu asi, unicamente con css y html, solo me esta una duda, generalmente desarollo paginas con links a secciones, pero en este caso cuando doy clic en la seccion no se quita el menu y hay que hacerlo manual, hay alguna forma de lograr que se quite solo el menu?
Para ese caso usaría js
Mirate alpinejs que te puede venir bien
Aunque con css y un selector de checkbox se podría hacer dependiendo la estructura y eso
Muy bueno el video, la unica critica es que no pones los archivos para bajarlos y de ese forma practicar con tus archivos. saludos
Gracias me alegro que te sirva, en el resto de tutoriales del canal puedes encontrar diferentes descargas del código gratis
Hola una consulta, se podrian dejar esos 3 ejemplos que pusiste en el header, pero cuando sea responsive se agreguen mas cosas? Por ejemplo, que se vea en pantalla de computadora Inicio, Quienes somos y Blog, pero cuando se abra del celular se agreguen mas cosas como por ejemplo una tienda de ropa... Remeras, Buzos, Jeans, etc?
Si pero tendrás que adaptar el html y css
@@NavisCode como?
No puedo entrar tan en detalle, pero puedes ir guiandote por saber que elementos vas a necesitar, ul li a... Y una vez lo sepas y lo tengas ya es darle estilos conforme quieras
Hola tengo una pregunta muy especifica respecto al menú, en el vídeo no lo haces, pero lo que quiero hacer es cuando clickees en una de las opciones del menú, el menú se cierre, porque a pesar de clickear una opción el menú se queda abierto y es realmente molesto, espero que puedas responder mi duda, gracias
Hola, normalmente eso se suele hacer con javascripg que al hacer click añade o quitas una clase la cual muestra o esconde el elemento
@@NavisCode He estado buscando y sí es cierto, pero es posible sólo hacerlo con html y css? Yo creo que sí, porque es la misma acción que hace cuando clickeas en la X.
Aclaro que este problema es sólo en responsive (obviamente)
Podrías extender los mismos estilos de la X a los elementos a del menu y conseguir ese efecto también aunque tendrás que modificar esa parte del código
@@NavisCode Lo he intentado pero nada, no logro que el menu se cierre.
Recuerda que la X tenía un label for "check" y ese es el que se usaba para que se desplegara, trate de poner .menu a:checked pero no funciona, incluso con las href, por ejemplo #contacto:checked y tampoco
Mmm sí es cierto, ahí tienes un buen ejercicio para practicar, intentar añadir funcionalidad a un tutorial siempre es lo mejor. Comenta tu solución después 💚
el link del css y flexbox esta roto
Muchas gracias por avisar, ya están arreglados los que fallaban
Este video esta muy bueno, he visto otros 3 mas de los que has hecho, gracias por tu ayuda. Hay algún método para reemplazar el logo "CORPORATIVE" por una imagen? Muchas Gracias.
Muchas gracias
Tendrías que incluir la etiqueta img de html, te recomiendo ver el curso gratis de html del canal ahí podrás adquirir también más base 🦾
@@NavisCode Si comprendo, lo he intentado con lo que ocurre es que no encuadra correctamente la imagen en el header, he probado con distintos parametros pero sigue sin ajustarse para la opcion responsive , supongo que en tus video del canal estarán los detalles para poder lograrlo. Con respecto a la opción de responsive, esta excelente. Lo que necesito lograr es que también se adapte a la posibilidad de poner el smartphone en forma lateral y se adapte. Supongo que para esa posibilidad hay que adaptar desde cero el maquetado.
Si eso es tendrás que modificar estilos acorde con su width y height correspondiente
Para tema responsive necesitaras de media queries seguramente
En el HTML
En el CSS
.logo{
height: 65px;
width: 300px;
transition: 0.4s;
}
Genial bro! No tienes un servidor de discord??
Estoy más por twitter la verdad
Una duda , lo del botón del menú , usualmente se hace con js ?
Puedes hacerlo sí
@@NavisCode Me refiero a que me gusta hacerlo con css todo , pero mi duda era , para los que saben Js , usualmente manejan todo con js ? o no hay problema en irlo haciendo todo desde el css , saludos y gracias
Realmente para estas cosas cuanto menos js menos sobrecargas la página, ya desde css3 permiten muchas cosas
Aprender a hacerlo con css y después con js y comparas también, así tienes mas donde elegir 👌
@@NavisCode muchas gracias
para que se pone le right 0
como puedo poner un video?
/*RESPONSIVE*/
@media(max-width:768px){ esta llave a mi izquierda
/*HEADER*/
.mostrar-menu,
.esconder-menu{
display: block;
} esta tambien y todas las llaves se vuelven morado
las llaves me salen morado y deja de funcionar bien el codigo alguien que me ayudeeeeeeeeeeeeeee
Gratis.. pon para descarga y pode practicar no?
como pongo el */
Compartir código fuente man
hola dictas clases de resposive respondeme a mi correo para coordinar