💻 COMO crear una PAGINA WEB en HTML y CSS [PASO A PASO] Adaptable a DISPOSITIVOS MÓVILES #2

Подписаться 122 тыс.

Просмотров 144 тыс.

50% 1

El día de hoy veremos, como crear una pagina web desde 0 con HTML y CSS, la cual es adaptable a dispositivos móviles y como proyecto final, la subiremos a un hosting y dominio.
♦️Hosting usado en el video: www.hostinger.com/alexcg
♦️Código de descuento: “ALEXCG”
♦️Descarga la página web: bit.ly/2mXRxT3
👇👇👇Ver más👇👇👇
No te olvides de dejar un comentario de que te gustaría ver en cursos previos de mi canal y suscribirte al canal, porque con AlexCG Design, crecemos juntos!
👨‍💻🎁 Aprende Diseño Web Desde Cero(Descuento) 👉 alexcgdesign.com/descuento-di...
📌 Links interesantes 📌
▶️ ¿Necesitas una página web?: bit.ly/2VaUUGt
▶️ Blog de desarrollo web: bit.ly/2DJM0oF
▶️ ¿Te gustó el vídeo? Suscribete aquí: ru-vid.com...
✉️ Redes sociales ✉️
▶️Facebook: goo.gl/7o77tx
▶️Linkedin: goo.gl/byCJnS
▶️Github: github.com/AlexCGDesign
▶️ Página web: bit.ly/2VaUUGt
Tags:

Наука

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

24 сен 2019

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 168

@AlexCGDesign 4 года назад

♦️Hosting usado en el video: www.hostinger.com/alexcg ♦️Código de descuento (15% de descuento): “ALEXCG”

@crhystianla 3 года назад

hola... tengo una pregunta sobre este video, como haces para modificar las resoluciones de pantallas desde el buscador??? se puede hacer desde cualquier buscador??

@badruly3296 3 года назад

Puedes hacer un chat en vivo para hablar con el usuario

@marcoantoniovalencia8694 3 года назад

Opinas que para hacer el diseño de una página web hoy en día se debería hacer un diseño primero para el móvil y luego uno para computadoras?

@jaspergustavo4922 2 года назад

i know im asking the wrong place but does anyone know of a trick to get back into an Instagram account..? I somehow lost the account password. I would love any assistance you can offer me!

@jeffersonquispeperlacios2560 2 года назад

Hola, Alex al momento de mandar mi zip al hosting me la descarga, pero me lo descarga vacia. Puedes ayudarme es para hoy :(

@danielreyes8162 4 года назад

Bro eres una pistola, acabo de descubrir tu canal, vi los videos que has subido y se que podré aprender muchísimo con todo el conocimiento que has compartido, gracias✌

@zacdgar 3 года назад

Que aporte tan grande nos acabas de dar, continua haciendo mas paginas asi, por ejemplo de restaurantes, librerias, tiendas... Dios te bendiga.

@musictorelax3514 4 года назад

Te ganaste un nuevo subscriptor, muy buenos los vídeos desde hace tiempo quería entrar en el mundo de la programación y hoy descubrí tu canal, muchas gracias bro ♥️

@kenyivillalobos8880 3 года назад

Muchísimas gracias por ayudarnos con este video tan increíble, me sirve demasiado para practicar lo que he aprendido, y además explicas excelente

@AREG1971 4 года назад

Excelente la explicación. Muchas gracias por compartir tus conocimientos.

@jopoo3194 3 года назад

Alex! Explicas excelente! recien estoy empezando con html y css. Entendi todo super bien y ya pude hacer una pagina bastante parecida! Muchas Gracias! ,Saludos

@renzopv2889 3 года назад

gracias alex por compartir tus conocimientos eres grande, me estaba volviendo loco con css xd. Tu forma de maquetar es increible.

@Mr1805marshall 2 года назад

tengo una humilde opinion, pague un curso sobre html y css con php. la verdad seguí todos los pasos entendi y vi como mandar a llamar las css de donde viene como estructurar en palabras mas sencillas eres muy práctico para enseñar y rápido hice la página en 2 videos termine una página web muchas gracias.

@gabrielaromerocarmona6914 3 года назад

Hola muchas gracias por tu curso es muy interesante y de gran ayuda.

@alfonzomendez4971 4 года назад

Excelente se ve muy genial te sigo paso a paso y quedo igual.

@moisescarri6584 2 года назад

MUY BUENO TUS TRABAJOS Y LA AYUDA QUE DAS A LOS QUE ESTAMOS INICIANDO...MUCHAS GRACIAS BRO

@-Roronoa--Zoro 3 года назад

Excelentes videos Alex! muchas gracias por compartir ese conocimiento :)

@mariseladelrefugiorierarui4784 2 года назад

Muchisimas gracias todo super bien explicado :) un amigo me recomendo tu canal y super buenisimo contenido

@willtonubergarciagomez4547 3 года назад

Me encanta como enseñas, muchas gracias.

@elkinmurillo5623 3 года назад

excelente explicación me encanto, hace tiempo buscaba algo así. muchas gracias. tienes mas trabajos parecidos??

@987diego 3 года назад

Excelente y gracias por el curso hermano!

@josetablante1859 3 года назад

que buena forma de explicar. muy bien todo el video .manito arriba para ti bro! sos un crack.

@davidramirez9727 Год назад

muchas gracias por la practica Alex,me sirve mucho. Saludos

@tatianacastillonarvaez1298 3 года назад

me Encanto muchas gracias, realmente eres increíble

@kener2.059 2 года назад

Gracias profe....me haz enseñado mucho el día de hoy

@katerinrestreposepulveda3530 2 года назад

Muchas gracias, me ayudaste a ganar el semestre, un abrazo grande

@luisvazquez1672 2 года назад

Muy genial la verda, me ayuda mucho para mi carrera, la verdad felicitaciones

@kerwincolon3222 Год назад

está buenísimo de verdad me ayudó mucho, gracias!!!

@jesusantoniotorrespalacios9033 Год назад

Gracias por el video, he aprendido demasiado!!!!

@devgus2247 Год назад

Excelente vídeo hermano muchas gracias!

@AntonioRodriguez-vt2hr Год назад

unos de los mejores videos muy bueno par explicar

@gortega882 3 года назад

muy buen curso hermano de verdad muchas gracias ,solo una duda , me paso lo mismo con las cards una se hizo en ovalo y la otra estaba bien , y cuando le dimos formato al texto dentro de las cards las dos se ajustaron bien ,pero porque paso eso?

@benjaminrdz6085 3 года назад

Que herramienta es la que hace que tu puedas modificar el width del display? en el navegador? Muy bueno tu contenido. Saludos

@madriagac 3 года назад

muy bueno tu video, clarificante

@paulquito8346 3 года назад

bro no sabes cuanto me salvaste, te ganaste un like y una subscripcion

@agustinsegarra8006 4 года назад

Muy buen vídeo esta todo muy bien explicado. Me estoy iniciando en el mundo de HTML y estoy aprendiendo mucho contigo gracias.

@freefeynman6074 3 года назад

@joaquinbustelo7889 2 года назад

Gracias por los videos bro, me han servido mucho, no se como te entiendes mezclando ingles y español a la ves XD

@luiscarlossilvaaguas5776 4 года назад

muy buen video excelente

@MrShadow732 Год назад

continuamos con la segunda parte del video. muchas gracias por esta super pagina. Hace unos años vi esta pagina y me llamó mucho la atención y empecé a aprender sobre html y ccs hice tus cursos de Udemy muy recomendables. y después de tanto tiempo recordé que tenía esta tarea pendiente. y acá estamos ya con media pagina lista y con ganas de dejarla mas que excelente. Dejé que corran todos los anuncios para de esta manera aportar algo a tu canal en forma de retribución por todo lo que nos das.

@AlexCGDesign Год назад

COMO CREAR +3 PÁGINAS WEB DESDE CERO (HTML & CSS) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OQIe_7lKpDw.html

@AlexCGDesign Год назад

Hola Matías, gracias por tu apoyo!! Por cierto si quieres crear más páginas web aquí arriba te dejo más retos ☝️☝️☝️ Un saludo enorme!

@MrShadow732 Год назад

@@AlexCGDesign gracias por responder entonces eso será lo siguiente. Con esta ya seria mi 3 página hecha con tus enseñanzas. Y bueno si hago esas 3 ya serían 6 todo suma para el portafolio

@gaboextreme8389 4 года назад

Excelente te apoyo es hora de reventar el boton de likes

@yesuarocha8308 3 года назад

Muchas Gracias, tienes mi like!!!

@MyAldunate 3 года назад

Muchisimas gracias realmente bueno tu tutorial, el único detalle es que en la parte de servicio yo solo puse 2 fotos y el titulo y texto me quedan al costado derecho, así que espero poder solucionarlo :'( y lo otro la herramienta space-evenly o algo así en sublime text no existe, cuál debería utilizar que lo asimile ? space-between o space-around ?? Gracias

@carloscedeno7726 4 года назад

Hola Alex. Muy buenos tus videos. Estoy haciendo mi pagina con base en tus videos pero adaptándola a mis necesidades. Tengo varias preguntas, hay alguna forma de contactarte que no sea por aca? muchas gracias.

@mitzurialbanildominguez994 4 месяца назад

Hola, excelente video solo una duda, tú ya no cambiaste en la parte de nuestros servicios pero en mi caso los primeros dos quedan con un espacio entre ellos y los dos de abajo quedan juntos, que puedo hacer ahí?

@jeprelax2874 3 года назад

Que grande!!! gracias por toda la info!!!

@AlexCGDesign 3 года назад

Gracias a ti!!

@abnersanchezdavila8618 4 года назад

Muchas gracias... Excelente vídeo

@AlexCGDesign 4 года назад

Gracias Abner, saludos

@claudio_guevara8077 4 года назад

hola, en la sección de clientes como puedo agregar un tercer cliente y colocarlo abajo de los dos ya existentes?

@franciscochavarria7468 6 месяцев назад

Excelente video, nuevo sub

@patricioblancotolentino5839 4 года назад

Excelente 😉

@josephanthonyelgueraturpo1449 4 года назад

Eres lo mejor,😎😎

@sebastianvastias7923 4 года назад

muchas gracias por estos videos de verdad se te agradece

@AlexCGDesign 4 года назад

Gracias a ti amigo, por seguirme:)

@iiiaser 3 года назад

Hola, me gusto mucho el tutorial, pero me quedo una duda, se puede fijar el menú en la parte superior? (utilice id para los links)

@luisemmanuelcalleros8439 2 года назад

Hola Alex, buenos días, disculpa una pregunta, hay alguna razón por la cual la imagen de portada, no se pueda visualizar en los iphones? me ha sido de gran ayuda tu video pero solo tuve ese problema al hacer la pagina. Saludos

@carlosalbertosalazarchavez5535 2 года назад

gracias muy bueno

@DiegoGutierrez-gu5ui 4 года назад

Tus videos son geniales.

@AlexCGDesign 4 года назад

Gracias Diego, saludos

@joaco_2782 4 года назад

Duda: a la hora de hacerlo responsive, en la de 250px ¿por que no se me actualiza el tamaño de .textos-headers h1? Intente cambiar la cantidad de px pero queda igual

@nikaaaperez 3 года назад

sos el mejor!

@miguelangeltunjanocespedes7511 4 года назад

Joder, gracias brother.

@vladimirmorales4765 3 года назад

Hola, fíjate que he hecho todos los procesos, pero no logro hacer que aparezca la imagen y el degradado de fondo.

@paolaperez1896 Месяц назад

Hola donde puedo ver, la opción de adaptación a escritorio?

@relychahua1708 11 месяцев назад

Bien, Buenazo

@luisgalindezz 2 года назад

que tal hermano como estas, estoy intentando hacer lo que haces en la parte de servicios, lo hago igual pero no me quedan uno al lado del otro, ¿que puedo hacer?

@universoprogramado9516 2 года назад

bro que usas para cambiarle de tamaño a la paginna en tiempo real para ver que cambiarle

@xaviercancun Год назад

Gracias por tu aporte Alex. Tengo una pregunta ojala me la pudieran responder. En el minuto 27:07, reduces el padding-top directamente sobre el selector .sobre-nosotros , ¿por que no en su lugar moviste el pading sobre el selector .contenedor?. Gracias de antemano por tu valioso aporte

@xaviercancun Год назад

😉Ya encontre la razon, es por razones es especificidad, ya que hay otro contenedor que usa el mismo selector, de esa manera no se vea afectado el padding de dicho contenedor. De cualquier manera gracias

@clips_lospi7640 2 года назад

Hola Alex como estás soy tomas de argentina, entendí todo tu curso y eres exelente pero la parte de publicar mi página con hostinger para que esté ya en Google me parece imposible ya hace días que no lo puedo hacer seguí tus paso peor hay cosas que no aparecen y se me resulta muy difícil si me puedes ayudar sería genial pague también un dominio y un hosting en hostinger pero también me perdí y no logro avanzar para poder publicar mi página

@ministeriocastillocolon6607 2 года назад

Que onda Jordan, te puedo mandar el codigo de la que acabo de hacer? la hize diferente pero me guiè de la tuya, que tal si le echas un ojo ? va?

@joseraultrianagarcia8575 4 года назад

mi amigo despues de varios meses tratando de hacer alguna web, encontré la solución muy bien explicado

@AlexCGDesign 4 года назад

Qué bueno amigo, saludos!

@marcoantoniovalencia8694 3 года назад

@@AlexCGDesign veo que usas como navegador Firefox, es mejor que Chrome para el diseño web?

@maurozbinden2959 3 года назад

tenes una muestra de como modificar el menu incicio, contacto, etc y que abra como nueva pestaña?

@rodrigomelgar4819 3 года назад

Hola, como se guarda todo para que queden los archivos y poder subirla a un hosting

@MasterNFjjf 2 года назад

Oye una duda, ¿como le hago para que el nav baje a la vez que yo voy bajando a la página? Es que se queda arriba :s

@edwinleonardo9340 3 года назад

hola como se llama scala responsive donde esta, propiedades o donde en whale browser

@elisadesousa9043 2 года назад

estoy empezando, y en css lo que escribo no cambia de color, y claro no funciona en la página, solo funciona lo que escribo en números pero los comandos (no se como se llaman) en letras no, esos se quedan en color blanco, que hago ?

@viperjuces7412 Год назад

thanks so much man

@joseluisperalespuente9305 2 года назад

porque una imagen sigue estando grande? no se acopla como las demas imagenes a la hora de mover la dimension responsiva, la imagen mencionada es igual a unas imagenes ya colocadas en el codigo, alguien me podria orientar?

@rafaelcoronado6953 3 года назад

hola alex, disculpa, alguien me puede decir como o que instalas para poder cambiarle la resolución a la pantalla y verlo como móvil?

@antoniobalderas9345 2 года назад

disculpen saben como puedo solucionar el error at-rule or selector expected en css

@leandroruiz2599 Год назад

Hola no se q problema tengo q no me detecta los @media y no muestra los cambios

@vegacoma 2 года назад

Hola Alex, excelente video, Amigo, te felicito y agradezco mucho tus cursos, soy seguidor tuyo y he adquirido dos cursos de Udemy, tengo una duda respecto a este proyecto: cuando lo publico en el servidor local de localhost funciona perfecto pero al subirlo a Hostinger no funciona el target de la galería, ¿me puedes ayudar?, gracias, abrazo amigo,

@AlexCGDesign 2 года назад

Si claro, mándame una foto en udemy con tu código:))

@cobachox8 3 года назад

Cómo es que se llama la extensión para cambiar el tamaño de la pantalla?

@edjpal8008 Год назад

como le hago para entrar en modo responsive en el explorador?

@alejandromorales7807 4 года назад

Hola amigo me encantan tus videos ya me suscribi, me gustaria saber como abrir una ventana nueva al momento de seleccionar cualquier objeto de la parte nuestro trabajo

@AlexCGDesign 4 года назад

¿Algo así ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c3MbFWr-NT4.html ?

@carolinausmavallejo6469 3 года назад

Hola Alex, en varios puntos no me dió el código, lo he revisado 50 veces y parece estar bien pero el resultado no me da , quiero llorar , la parte del footer no me da la distribución y en la galería el efecto que tienes tampoco .(

@amisoftteam862 2 года назад

Hola Alex de ese ejemplo que estas creando puedo tomar algunas ideas y crear otro?

@AlexCGDesign 2 года назад

Claro sin ningun problema:))

@luisyovannigarciaalarcon620 4 года назад

Un video increible con una excelente explicacion, solo que quisiera saber que editor de codigo html usas, yo uso notepad++, pero quisiera usar el mismo que tu.

@AlexCGDesign 4 года назад

Hola Luis, uso Visual Studio Code

@AlexCGDesign 4 года назад

Aquí te dejo unos tutoriales Tutoriales VSCODE: ru-vid.com/group/PLP7LlHfxfuM-2qlWjwhSs_vBNynP-O229

@luisyovannigarciaalarcon620 4 года назад

Muchas gracias

@joseurbina1262 4 года назад

Hola alex, el unico problema que tengo es EN JUSTIFY-CONTENT: SPACE-EVENLY Es que no me sale ese tipo de spacio :(

@DiegoGutierrez-gu5ui 4 года назад

Yo estoy comenzando, quiero convertirme en web developer y tu me has ensañado mucho... voy a pasar por udemy a ver si adquiero un curso tuyo.

@AlexCGDesign 4 года назад

Claro Diego, te deseo lo mejor como web developer, cualquier cosa estoy para aconsejarte! :)

@gimauarich.2753 2 года назад

super

@amaurymartinez614 4 года назад

Tienes algun video para que el menu funcione en la misma pagina y no te mande a otra''

@lucerohernandez5302 Год назад

ya no hay pt3?

@Pepec0p 2 года назад

Alex una consulta, en el minuto 07:38 en la parte servicio-ind img las imagenes no quedan todas con el mismo formato de alto y ancho, quedan pegadas y todas de diferente tamaño, que pudo salir mal?

@lean9875 Год назад

Es porque no habia puesto el width de 90%, lo puso y luego actualizo la pagina.

@rubenmota9127 4 года назад

Intente por la cabecera fija y no pude, sabes como hacerlo?

@wepts2326 2 года назад

me ayudas mira te cuento toda la pirmera parte si me funciono pero ya en el css no me funciona nada me puedes ayudar

@YEICAM41 4 года назад

gracias LEX CG

@emilianojimenez2609 2 года назад

cuando realice el section de clientes me aparecen las dos trarjetas lilas una arriba de otra y no en vertical a que se debe eso ? :(

@sergiom8288 Год назад

revisa que las reglas hayan quedado para la clase .cards y no para .card, tuve el mismo problema y lo solucione de esta forma

@TheJuandiego1986 3 года назад

Hola, por favor me podrías ayudar, estoy siguiendo tu tutorial y esta excelente. Por favor, en la parte de servicio (21:49) la primera fotografía quiero que tenga un margen más grande en la parte de abajo. estoy usando el siguiente código : .servicio-ind img: first-child{margin-bottom: 30px;} Sin embargo se aplica ese margen a todas las imágenes, que puedo hacer?, de antemano te agradezco.

@MrShadow732 Год назад

para eso podrias agregarle una clase mas a la primera imagen y eso hará que solo esa imagen reciba el cambio.

@Jose-jk9ob Год назад

como haces para que la página cambie de esa manera? 13:05

@anerhenyoi8528 3 года назад

Tengo problemas existenciales con la parte de servicios y no se que hacer, ya le cambié en tamaño de la imagen, intentando dejarlas al mismo tamaño, revise el código y no encuentro mi error. Yo solo tengo dos servicios, no tres Resulta! Que por alguna razón que desconozco, mi servicio de la izquierda es muchísimo más pequeño, pero la info me aparece debajo de la imagen. Pero la imagen de mi servicio de la derecha está enorme, el título aparece a un lado, justo en medio de las tres líneas de información que tengo... No se si me di a entender... Pero ese es mi problema y no se que hacer 😭😭 Ayuda!

@costemocurioso6474 3 года назад

Si uno de ellos es diferente, probablemente sea por qué no está dentro de la etiqueta clase que estás editando, por eso solo afecta a uno y al otro no

@anerhenyoi8528 3 года назад

Costemo curioso, la verdad ya revisé, pero tal vez se me pasó eso y no lo veo, gracias por tu observación! lo volveré a revisar

@b.m.productions 4 года назад

Primero gracias por los videos!!! Segundo no entiento el significado de esta parte en el footer: @media screen and (max-width:900px){ header{ background-position: center; }

@user-qk7nk8ok9m 3 года назад

tengo la misma duda, bueno, en realidad le entiendo pero no se porque no me funciona

@nicolereyes507 3 года назад

Alex tengo un problema y es que en la parte de portafolio, las imagenes no me quieren quedar de la misma manera y solamente me aparece una el resto esta organizado hacia abajo y no se ven

@joealejandroo_ 3 месяца назад

tengo el mismo problema pudiste soluconarlo?

@Brian_ml_oficial 3 года назад

Hola amigo las imagenes que usaste en la web donde las conseguiste

@AlexCGDesign 3 года назад

Aquí tengo todo lo que necesitas saber -> alexcgdesign.com/blog/crea-una-pagina-web-desde-0-con-efecto-wave/

@xiu2801 4 года назад

Una preguntita. Tendrás un video, donde enseñes cómo hacer que por ejemplo la pagina que haga de "servicios" (la tomo como ejemplo para que me entiendas xdxd) se vea en la misma página y no te lleve a otra ventana?

@AlexCGDesign 4 года назад

Cómo?

@xiu2801 4 года назад

@@AlexCGDesign O sea, que cuando le pique a una opción del menú, me salga en la misma ventana, y no me lleve a otra ventana

@xiu2801 4 года назад

pestaña*

@amaurymartinez614 4 года назад

amigo supiste como hacerle?

@_TheGoldenWolf_ 4 года назад

me ayudaste, pero estoy medio wey, entonces no tanto... pero gracias

@pablitox1142 4 года назад

a que tecla le doy para hacer responsive?

@AlexCGDesign 4 года назад

Ctrl+Shift+M en Mozilla Firefox

@CAMACORP 4 года назад

Disculpe señor Jordan, cómo es que hizo para que se vea ese menú que ofrece la visualización de "Responsivo" y etc en el 12:27 en la parte superior? Si tuviera una chance y pudiera hacerme el paro de decirme cómo verga se hace eso, le estaría muy agradecido, bueno más de lo que de por si ya estoy. De antemano gracias.

@costemocurioso6474 3 года назад

En el navegador de Firefox apretando Control+Shift+M

@CAMACORP 3 года назад

@@costemocurioso6474 le agradezco mucho, como podrá darse cuenta jamás recibí respuesta de Alex Jordán, comprendo que es una persona "muuuuy ocupada", casualmente cuando le solicito preguntas desde la cuenta de mi NOVIA, el "caballero" si tiene chance de responder... ¿clásico de los programadores?, no sé si de todos pero al parecer si de EL.