Тёмный

Web responsive desde cero | Web con html y css desde cero gratis 

Navis Code
Подписаться 14 тыс.
Просмотров 70 тыс.
50% 1

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.com/start 📌
CDN (abrir y cerrar etiqueta link)
link rel="stylesheet" href="use.fontawesome.com/releases/..."
**********************************
CURSOS DE PROGRAMACIÓN 💻
Incluye 3 cursos gratis HTML, CSS, JAVASCRIPT con ejercicios y código
academy.naviscode.com/
**********************************
SUSCRIBETE
🔥 bit.ly/2NEs91u 🔥
**********************************

Опубликовано:

 

4 июн 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@alfreascazuri6335
@alfreascazuri6335 Год назад
un crack! me inspiró para armar un proyecto de estudio, funciona y entiendo mucho mas todo jaja gracias, subscripto.
@danielsantacruz5266
@danielsantacruz5266 Год назад
Excelente tutorial amigo muy fácil de aprender felicitaciones
@alexisbustamante7950
@alexisbustamante7950 Год назад
Muy bueno, Bien Explicado y En orden, gracias me suscribo
@GonzaloIsrael
@GonzaloIsrael 8 месяцев назад
Que crack, detalle tras detalle, gracias por compartir, en lo personal necesito practicar responsive.
@agustinabuffa8542
@agustinabuffa8542 2 года назад
Muy bueno! Muchas gracias.
@MariaSilviaRodriguez-fl4wd
@MariaSilviaRodriguez-fl4wd 8 месяцев назад
Excelente explicación. Gracias!!
@nettogrowthpartners9567
@nettogrowthpartners9567 Год назад
Excelente tutorial Muchas gracias!!
@enriquerevelo882
@enriquerevelo882 6 месяцев назад
Te felicito por la forma muy pedagógica que desarrollas el curso. Te has ganado nuevo suscritor. No dejes de subir contenido,
@desdevjs5502
@desdevjs5502 Год назад
Gracias por tu Gran aporte y explicación! suscrito
@DesafioColaborar
@DesafioColaborar 2 года назад
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
@EricMB2311
@EricMB2311 2 года назад
El mejor video que he visto, excelente forma de explicar Muchisimas Gracias!!!
@NavisCode
@NavisCode 2 года назад
Me alegro de que sirva 🚀
@qwertmarley
@qwertmarley Год назад
Genial y muy bien explicado, nuevo suscriptor.
@moutenroi76
@moutenroi76 4 года назад
Muchísimas gracias por el vídeo y felicidades por el curso. Estoy empezando y me ha resultado muy útil.
@NavisCode
@NavisCode 4 года назад
Me alegra haberte ayudado, es un buen momento para empezar ;)
@petittoto6087
@petittoto6087 2 года назад
genial explicado gracias
@ricardop1900
@ricardop1900 2 года назад
muchas pero muchas gracias un video muy completo todo muy claro , de verdad se agradece me ayudo mucho !!! saludos desde chile!
@NavisCode
@NavisCode 2 года назад
Me alegro de que sirva 🚀
@MarcoVeneros
@MarcoVeneros Год назад
¡Bravo!!!
@randallarturoherradorafall4302
@randallarturoherradorafall4302 Месяц назад
excelente video amigo
@Jonathanaxelibarra96
@Jonathanaxelibarra96 Год назад
excelente video
@miguelbarra1247
@miguelbarra1247 2 года назад
Muchas gracias por el video! me sirvio mucho.
@NavisCode
@NavisCode 2 года назад
Gracias Miguel, me alegro
@jandronsr1988
@jandronsr1988 3 года назад
Muy buen vídeo! Suscrito sigue así!
@NavisCode
@NavisCode 3 года назад
Muchas gracias y welcome 🚀
@jandronsr1988
@jandronsr1988 3 года назад
@@NavisCode Sigue así, estaría bien también vídeos cortos con píldoras o consejos sobre el front. Un saludo!
@maritaaortiz7541
@maritaaortiz7541 Год назад
Graciasssss muy buena explicacion!
@NavisCode
@NavisCode Год назад
Me alegro de que sirva 🚀
@darioamaite
@darioamaite 2 года назад
Sos grande!
@NavisCode
@NavisCode 2 года назад
Pronto contenido actualizado con buenas prácticas 👌👌
@edmundoromero6075
@edmundoromero6075 Год назад
Excelente amigo, quisiéramos ver una pagina, igual como esta pero con BASE DE DATOS.
@NavisCode
@NavisCode Год назад
Puedes ver el video del carrito de compras con backend
@tarabore
@tarabore 2 года назад
Excelente video ¿Es posible descargar el código html/css de algún link? Gracias!!!
@Zilvaravena
@Zilvaravena Год назад
que crack sos
@alanpereira5482
@alanpereira5482 Год назад
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
@CarlosOrtiz-ii5zd
@CarlosOrtiz-ii5zd Год назад
Exelente video. Tengo una consulta, como hago para linkear las siguientes páginas por ej de inicio, sobre nosotros, blog?
@vicohyland2868
@vicohyland2868 Год назад
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?
@javiermauriciolizcajimenez6919
@javiermauriciolizcajimenez6919 2 года назад
Nos ha salvado, estamos agradecidos.jpg
@jordimantilla5218
@jordimantilla5218 2 года назад
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!
@NavisCode
@NavisCode 2 года назад
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
@JS0998
@JS0998 2 года назад
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
@NavisCode
@NavisCode 2 года назад
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/
@xiaoangel2163
@xiaoangel2163 2 года назад
Tendrán el css el link de descarga ya con los códigos?
@user-vo5ve7ch7b
@user-vo5ve7ch7b Год назад
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?
@rickhunter8216
@rickhunter8216 11 месяцев назад
PAPU PUEDE PONER EN LA DESCRIPCION DEL VIDEO EL REPOSITORIO DEL PROYECTO EN GUTHUB PORFA. LO AGRADECERÍA MUCHO. 🙂
@mitubo1970
@mitubo1970 2 года назад
Hola, buen vídeo. Para que al desplegar el menú en dispositivos, no tape el LOGO ¿se podría hacer con >? gracias.
@NavisCode
@NavisCode 2 года назад
Hola Paco no recuerdo bien el código pero parece posible 👌
@LesterIvn
@LesterIvn 2 года назад
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?
@NavisCode
@NavisCode 2 года назад
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
@martinsuarez3578
@martinsuarez3578 2 года назад
Muy bueno el video, la unica critica es que no pones los archivos para bajarlos y de ese forma practicar con tus archivos. saludos
@NavisCode
@NavisCode 2 года назад
Gracias me alegro que te sirva, en el resto de tutoriales del canal puedes encontrar diferentes descargas del código gratis
@stefanmelo
@stefanmelo 9 месяцев назад
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?
@joycepereira9504
@joycepereira9504 Год назад
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
@daniAlvvv
@daniAlvvv 2 года назад
Genial bro! No tienes un servidor de discord??
@NavisCode
@NavisCode 2 года назад
Estoy más por twitter la verdad
@guillermolandini5214
@guillermolandini5214 3 года назад
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.
@NavisCode
@NavisCode 3 года назад
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 🦾
@guillermolandini5214
@guillermolandini5214 3 года назад
@@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.
@NavisCode
@NavisCode 3 года назад
Si eso es tendrás que modificar estilos acorde con su width y height correspondiente Para tema responsive necesitaras de media queries seguramente
@stefanmelo
@stefanmelo 8 месяцев назад
En el HTML En el CSS .logo{ height: 65px; width: 300px; transition: 0.4s; }
@fuze.7311
@fuze.7311 2 года назад
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?
@NavisCode
@NavisCode 2 года назад
Si pero tendrás que adaptar el html y css
@fuze.7311
@fuze.7311 2 года назад
@@NavisCode como?
@NavisCode
@NavisCode 2 года назад
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
@johanandreshernandez8370
@johanandreshernandez8370 2 года назад
Hola, te hago una cosnulta ¿El responsive es en diseño mobile first?
@NavisCode
@NavisCode 2 года назад
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 😂
@Ferchulobo777
@Ferchulobo777 Год назад
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
@NavisCode
@NavisCode Год назад
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
@joseangelcastillovelarde5314
como puedo poner un video?
@byronespinoza330
@byronespinoza330 2 года назад
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; }
@uba-ing.sistema3849
@uba-ing.sistema3849 2 года назад
~ 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 *)
@stefanmelo
@stefanmelo 9 месяцев назад
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.
@sumajestad4960
@sumajestad4960 3 года назад
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
@NavisCode
@NavisCode 3 года назад
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
@sumajestad4960
@sumajestad4960 3 года назад
@@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)
@NavisCode
@NavisCode 3 года назад
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
@sumajestad4960
@sumajestad4960 3 года назад
@@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
@NavisCode
@NavisCode 3 года назад
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 💚
@djpetro8428
@djpetro8428 2 года назад
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?? :(
@diegoasr7196
@diegoasr7196 Год назад
A mi tampoco :C
@diegoasr7196
@diegoasr7196 Год назад
El problema estuvo en el left: 0; hay que quitarlo y poner right: -100%;
@4nim4
@4nim4 Год назад
@@diegoasr7196 Gracias!
@mathboosterx5695
@mathboosterx5695 Год назад
@Diego ASR gracias, Dios te bendiga.
@axxgoat
@axxgoat Год назад
como pongo el */
@Deus-lo-Vuilt
@Deus-lo-Vuilt 2 года назад
Una duda , lo del botón del menú , usualmente se hace con js ?
@NavisCode
@NavisCode 2 года назад
Puedes hacerlo sí
@Deus-lo-Vuilt
@Deus-lo-Vuilt 2 года назад
@@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
@NavisCode
@NavisCode 2 года назад
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 👌
@Deus-lo-Vuilt
@Deus-lo-Vuilt 2 года назад
@@NavisCode muchas gracias
@pakkolmo
@pakkolmo 2 года назад
el link del css y flexbox esta roto
@NavisCode
@NavisCode 2 года назад
Muchas gracias por avisar, ya están arreglados los que fallaban
@luisigo
@luisigo Год назад
/*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
@rodolfoyanz1094
@rodolfoyanz1094 10 месяцев назад
Gratis.. pon para descarga y pode practicar no?
Далее
Learn Every CSS Selector In 20 Minutes
19:38
Просмотров 438 тыс.
Crea una Página Web Responsive con HTML y CSS
1:24:20
Просмотров 15 тыс.
The secret to mastering CSS layouts
17:11
Просмотров 267 тыс.
A practical guide to responsive web design
23:13
Просмотров 161 тыс.
Learn CSS Grid the easy way
37:04
Просмотров 874 тыс.