Página Web Profesional con HTML5 y CSS3. Creación de HTML

Aprende a Crear una Página Web completamente desde cero, utilizando HTML5 y CSS3. empezaremos creando la estructura HTML, luego agregaremos los estilos CSS3. y finalmente lo subiremos a un hosting privado más un dominio .com
HOSTING Y DOMINIO
affiliate.name...
INSTALAR ATOM
• La Mejor Herramienta P...
CÓDIGO DEL CURSO
github.com/Faz...
MI SITIO WEB
faztweb.com
BLOG
blog.faztweb.com
Twitter:
/ fazttech

[@multimediaprogramacionwill2819]

Fazt te saludo desde las Estribaciones del Parque Nacional Natural Farallones de Cali, en Colombia. Estoy estudiando Tecnología en Producción Multimedia en el Centro de Gestión Ecoturística del Magdalena, en Santa Marta. Iniciaré la etapa de Proyecto para graduarme. Te cuento que durante toda la carrera te he seguido, entendido y aprendido todos tus cursos HTML, CSS, Java Script... muchos pero muchos de mis conocimientos los he adquirido con tus vídeos, la clave es tu forma de explicar: Clara, Paciente, Elocuente, precisa, con él alma y sin egoísmos. GRACIAS AMIGO.

[@geormanascanio947]

Venezolano tenía qué ser !!! 👏👏👏

[@Lost_In_The_Cyberspace004]

@@geormanascanio947 dice que es de colombia, el nombre lo dice eso creo

[@amhedrieldavikin]

XD, tranquilos señores no debe haber rivalidad por los países, por ejemplo yo soy de Argentina, pero como todos somos latinos pues... Latino tenías que ser 👏👏👏

[@amiirak.7301]

Gracias a ti juanbotin no me va a reprobar la materia.Besos desde México Los amamos

[@titopianito]

No manches yo también conozco a Juan botín. Esta padre, de qué parte de México vienes?

[@amiirak.7301]

@@titopianito De madrid y tu

[@titopianito]

@@amiirak.7301 Nooo jodas ostias tronca yo también ejque los de capital lo petamos

[@amiirak.7301]

@@titopianito Viva el agua del canal isabel II y vivan las HTML

[@titopianito]

@@amiirak.7301 Yo la dije a mi madre que me comprase un ordenador para suscribirme a mi canal favorito Fatz, y ahora ya puedo hacerlo

[@SportsFacst4U]

Eres el mejor, gracias por compartir. He apredido en 60 minutos mas que en un cuatrimestre de la uni!

[@lacoalicion8638]

Estoy aprendiendo mucho con tus vídeos yo ya sabía programar pero lo dejé y se me olvidó pero contigo aprendo y recuerdo lo que ya sabía muchas gracias por estos vídeos ahora que pueda seré tu sponsor

[@puritocodigo784]

Hola

[@Ocioreal]

@@puritocodigo784 OLA K ASE?

[@EmmanuelAmaya-ot8tv]

@@Ocioreal esta tratando de conquistar el mundo

[@yuftbf]

Genial fatz! Ya anteriormente había hecho un curso de html, css y javascript presencial y realmente me hiciste acordar muchas cosas y aprender nuevas, explicas bien y que te bases directamente en la practica esta buenísimo, muchas gracias

[@jaironaranjo3654]

you are amazing. The fact that you explain it in such details shows that you are not just a great instructor but someone that cares about your audience.

[@dariomassala]

Falo português e entendo muito bem os teus videos. És um máximo. Adoro os teus videos.

[@geraldmc1939]

Es de los mejores KZbinr que le meten a la programación Full Stack. 👌🏼

[@dayanaromerosoto1426]

Hola amigo , quiero felicitarte porque tiene muy buenos videos y explicas super bien , no dejes de hacer videos, te descubrir hace poco jaja. Feliz año

[@FaztTech]

Hola Dayana, es un gusto leerte. Claro, pronto se vienen más vídeos, cualquier sugerencia siéntete libre de hacerla. también te deseo un !Feliz Año¡

[@osmeig6025]

Hola Day!

[@victorino.98]

Coincido totalmente, hay gente que dice que KZbin está decayendo pero canales como el tuyo dicen lo contrario.

[@WilsonXtrem007]

La verdad me asombra la manera en la que enseñas muy completa me suscribi a tu canal hace poco y es mi canal favorito, otra cuestion que compartes sin pedir nada a cambio pero deberias poner opcion de PayPal para que los que esten dispuestos puedan hacerte donaciones, solo es mi opinion, saludos!

[@FaztTech]

Gracias Wilson. es un verdadero gusto que te sea de ayuda. Claro, es una buena idea. !Gracias¡ y ¡Saludos!

[@mathiashochkofler2746]

INCREIBLE VIDEO, hacen falta más canales como estos en KZbin.

[@eliotzuckerberg9507]

Muchas gracias hermano, Que bueno que hay personas como tú qué nos comparte de sus conocimientos

[@puritocodigo784]

Suscríbe..te a mi canal....

[@eliassponton3997]

Otra felicitaciones de parte mia amigo... yo de no saber nada aprendi con este video, muy buen video y un gracias totales... :)

[@Wich183]

Muchas gracias, no sabía ni por donde empezar.

[@iarahsmiler16]

Muchas gracias por tu tiempo y dedicación, es un placer como explicas todo tan claro y concreto

[@nakurey9288]

Muchisimas gracias! Estoy creando mi sitio y todo va genial. He aprendido mucho contigo

[@danielvicens9931]

Impresionante video..! Muchisimas gracias por tu tiempo y ganas de transmitir tus conocimientos...Muy bien explicado y ameno.

[@puritocodigo784]

Hola suscríbete a mi cana

[@rodrigocristaldo3599]

Hola amigo muchísimas gracias. Que la vida te devuelva el doble de lo que das. Saludos. Like y suscrito.

[@nyromano]

Hola buen amigo, muchas gracias por compartir tu abundancia, tu tiempo y tu conocimiento.

[@galafardu]

Buen video y muy bien explicado, esperamos que sigas subiendo mas tutoriales.

[@rsancheza54]

Excelentes videos tutoriales para desarrollo de páginas web, gracias por enseñar y compartir conocimenientos

[@thearcanno_0078]

muchas gracias me han pagado 1.890$ gracias a ti. He hecho una pagina web de traspasso de bitcoins

[@LosNuevosRicos]

Ese esta en Ingles lo que haces ;) Ahi tambien lo aprendi

[@francodavidspyridacos1057]

Muy bien explicado Gracias por compartir tus conocimientos muchos te lo agradecemos.

[@williamlebron2078]

Excelente curso, lo recomiendo 100%

[@maximilianoweihmuller298]

El tutorial estuvo genial es muy completo. Muchas Gracias por tu deducacion.

[@depoolad6178]

Sigue así bro, son excelentes tus vídeos!

[@puritocodigo784]

Suscribwtw

[@lliuya]

esta bueno tu enseñanza amigo saludos

[@gamesytz1858]

Me gusta tu página es genial

[@marianomartin6274]

Seguro que tiene una razón, pero es la primera vez que veo el header en un div. La etiqueta ALT provee de un texto alternativo en caso de que no se visualice la imagen, también ayuda a la accesibilidad de la web y a los buscadores, por lo que poner la url de la página en alt no tiene sentido, ALT debe siempre ser una descripción de la imagen. Un punto a favor la UL para el menú, así como los enlaces del footer, mucha gente que hace "tutoriales" mete directamente enlaces porque no sabe luego en CSS dar formato a la lista para que se vea horizontal. La lista también ayuda a la accesibilidad y especialmente a personas con deficiencias visuales, por lo que es recomendable hacer un menú de ésta forma.

[@alexissantillan8913]

el del banner deslizante me fascino lastima que recien soy un principiante

[@SooZ8888]

Genial, muy bien explicado!! Saludos!

[@carloscuevas6488]

Excelente video

[@darkd6659]

Justo lo que necesitaba :)

[@veronicacochrane5439]

Idolo !

[@juank390]

Hola saludos, excelente video.

[@OctavioGarciaMartinez]

gracias Gracias ¡¡¡¡ me ayudo mucho

[@JuanRamirez-zb6oi]

bueno video cuando sacas la siguiente parte de como subir al internet mi pagina web y si ya tienes video pasame el link

[@instaladordetelecentro3676]

algo mas me vas a explicar GENIOOO

[@alebcn2001]

Hola Fazt, me ha encantado tu video. Eres un fenómeno. Te querría hacer una consulta, para ir aprendiendo he ido siguiendo todos tus pasos... pero el tema del SCROLL no me acaba de funcionar y no se cual debe de ser el motivo. Tengo el documento igual que el tuyo....argggg

[@marlonrodriguez8493]

fazt tengo una duda porque mi atom no me reconoce el codigo java para hacer el slider

[@chimboterex]

gracias, por sus conocimientos , bendiciones aprendiendo

[@WilmarCuesta]

Te recomiendo para el editor de código utilizar un tema que tenga mas brillo o color, se dificulta la visualización en pantalla, hay que colocar dos o varias ventas, cuando se reduce la venta de tu vídeo no se logra ver bien. sin importar la calidad que se le de.

[@alexisbustamante7950]

Eres el.mejor!! Jajaja gracias por el video

[@johnmitchell4974]

quiero mas de este proyecto

[@EstefaniaAbarca98]

Excelente aporte

[@Alfonso6143]

Ineresante todos tu vídeos saludos

[@emilianooliveto5028]

Cual es la diferencia de crear un y un ?

[@leiles4002]

una explicacion clara y precisa

[@gbmelgar1]

Gracias amigo muy buenos videos, me fascinan

[@puritocodigo784]

Sus cri vete a mi cannaal

[@maurtayu]

Muy buen video, un excelente inicio de año y éxitos, Gracias por compartir tu conocimiento.

[@josephcossio6830]

Seria genial que hicieran un curso wsplicando que signigic h1, body, h2, etc, con ek fin que las persona que no conocen aprendan poco a poco

[@redtcgcollector]

eres el mejor amigo...solo quiero saber cuando agregastes la biblioteca Jquery..creo q me dormi

[@puritocodigo784]

Suscríbete a mi canal es de desarrollo web

[@Isa-fv7ei]

Buen video!!

[@romanstark7077]

Muy buen video

[@coldcoder23]

pensé que incluía js y css en esta única hora de vídeo que ingenuo soy

[@pupimarti9470]

Hola en el wrap iría , no section. En el section va el contenido de la página

[@MarcoCortex]

si hacen el link con Font Awesome, recuerden que la version >5 necesitara usar: en vez del que esta en el video. Si todavia quieren hacer todo igual que el video busquen una version antigua de Font Awesome aqui: www.bootstrapcdn.com/fontawesome/

[@alexislarios6537]

@Boom Onex yo tampoco puedo, lol. no se que sucede. ayudame tambien

[@lisbethgonzalez9221]

yo tampoco he podido, alguien sabe como?

[@lautarommb1814]

"Identifier expected.javascript" min 30:30

[@alejandrojara2024]

Disculpa. No se relaciona css con html. El fondo de pantalla no se hace negro. Es necesario que esta carpeta esté en el hosting que hay que comprar. O se lo puede hacer de la carpeta del computador. Porfa

[@luismanuelnoguerol8247]

Un apunte, el dominio .com viene de comercial no de company, Un saludo y buen video

[@FaztTech]

gracias, muchas veces me lio. un Saludo :)

[@Chenseimx]

más videos asi! nuevo sub!

[@facusalguero]

hola muy bueno el video...una pregunta. Como se puede hacer para que cuando pones un texto largo en un , x ejemplo los Lorem, que se vea como el tuyo, que lo escribe en varios renglones...xq a mi se me pone en el mismo renglon, y se hace largo y molesto.

[@nicolasflores5908]

Excelente!!!

[@davidtome2159]

¿Está bien usar así los DIV dentro de sus respectivas secciones?

[@oscaredelarosa35]

gran aporte

[@matiloki]

Cosa Genial esto.

[@nandomendoza8780]

Buenos días Caballero, He seguido los pasos pero no puedo visualizar los iconos. Cuál sería el problema, yo necesito tu ayuda.

[@Angel-sv8ft]

Me u1 gracias bien esplicado sigue adelante,

[@lunajack9770]

disculpa escribiste todo el codigo cres poder pasarmelo es que no se en que me equivoque

[@puritocodigo784]

Suscri. Bbwte a mi canaal

[@elalemanthebad]

Hola, saludos desde República Dominicana. Tus videos son lo máximo. Pudieras hacer un tutorial de un blog con base de datos donde se guarden las publicaciones que el administrador vaya haciendo?

[@doiracasanova1955]

Hola, no sé de programación, pero quiero agregar a mi blog un botón para que las personas al presionarlo se les agregué la página a la pantalla de inicio de su cel . Entonces quiero saber cuál es la línea de texto para pegarla en el editor HTML de mi blog.

[@omaraglaz9322]

Hola Fazt, yo recién veo el video, se puede usar para programar en vez de atom , visual studio code. Saludos de Argentina. Buen vídeo

[@cesaresqueda3108]

Buenisimo....

[@felixnguema5498]

Hola fazt, soy principiante en esto de la programacion y de la web de desarrollo, uso, sublim tex abriendo mi codigo por el navegador chrome, pero sólo me aparece el (index.html) y por ejemplo en Mi primera pagina web no aparece en el navegador chrome, lo unico que aparece es sólo el index.html y no se porque lo demas no, gracias.

[@shojo799]

me pasa igual

[@isaacthekiller5558]

buen video, gracias

[@maximilianodanielguardiola3773]

Cómo se hace para que en mailto al apretar en icono de correo te redireccione a el correo de Gmail y no al Outlook o el correo predeterminado de Windows.

[@Trayamen]

Cuando creas el bxslider, haces 2 copias de la misma scrypt llamándoles .slider 2 y .slider 3... si colocas todas las imágenes en la lista desordenada dentro del mismo bloque.. con la script que haces utilizando la class .slider 1 ya vale no? Muy buen video estoy aprendiendo mucho!

[@juanignaciocastillo3250]

Tengo una duda hago todo como en el vídeo pero no tiene efecto alguno en el navegador a la hora de abrir el archivo index.html, como si no tuvieran efecto los códigos ni nada de lo q programe, alguno me puede ayudar?

[@carlosmarin4036]

de hecho el ditor me dice que no lo permite por que es codigo binario cuales la razon por ello gracias

[@mitubo1970]

hola, gracias por enseñar... ¿Lo harías responvive/adaptativo ? gracias

[@puritocodigo784]

Ola suscribe te a mi. Canal

[@danipc21]

Buen sistema Linux usas, y buena explicación del curso. Te felicito

[@lacoalicion8638]

Una pregunta que escritorio usas tu? Cuenta me que distro o so usas como el tipo de máquina que tienes. Yo tengo una macbook 2006 con ubuntu 16 y una de escritorio amd athlon 2 de 4 núcleos 16 de RAM con ubuntu y windows 10 la cual cuando acabe mi proyecto la usaré de servidor

[@LibertCharrua]

30:51 creo no es necesario copiar esa parte del còdigo. Al menos a mi me funcionò solo con el primero me ponia las tres fotos ya que llamamos a la clase y no a cada una de las fotos. Ojo no tengo experiencia en esto y a lo mejor en otras circunstancias hay que hacerlo. Pero entiendo que $(document).ready(function(){ $('.rollo1').bxSlider({ mode: 'fade' }) }) llama a la clase slide1 (yo le puse rollo1 pensando en lo que voy a hacer finalmente con mi sitio) y esa clase ya contiene todas las fotos definidas en el slide-wrap. Por favor corrìganme si me equivoco gracias

[@gonzalozarate6465]

Estaba con lo mismo, y dije si lo que se invoca es la etiqueta entera, no hace falta... lo probé y funcionó. Como decis ese código funciona.

[@havook839]

@@gonzalozarate6465 tienes razón bro no es necesario poner todo las Slider1 2 3 basta con llamar a la clase Slider

[@javierk.jeriq.4361]

el tamaño de las imagenes para los sliders tienen que ser del mismo tamaño los 3 ..??

[@musicword1525]

hola que tal. me gusta mucho tu canal de youtube y pues estaba siguiendo el vídeo tutorial: Página Web Profesional con HTML5 y CSS3. Creación de HTML y en la parte donde se llama el icono de navegación siempre me sale un rectángulo vertical me podrías ayudar gracias

[@shakirasequera7443]

Fazt! ADORO tus vídeos, he aprendido un montón, con este vídeo en particular estoy teniendo un pequeño problema en cuanto a los iconos, pues estoy dándome cuenta que el link que tienes en tu estructura, no es el mismo link que yo extraí de la página que indicaste en el vídeo. Será porque la página se ha actualizado con el pasar de los años? porque al yo seguir los pasos de código en html respecto al icono bars, actualizo la página con los elementos ya guardados y no me aparece el icono, de hecho sólo me aparece un cuadradito sin fondo, cuál será el error? ESPERO PUEDAS AYUDARME. Un saludo y un abrazo enorme!

[@gigi3679]

Justo me pasa igual :( supiste solucionarlo ?

[@shakirasequera7443]

@@gigi3679 Hola gigi! bueno, como fue hace 5 meses no recuerdo muy bien cómo solucione, sin embargo creo que fue por la ruta de link que había, era viejo, y el de hoy en día ya está actualizado, tienes que buscar el link actualizado con los iconos actualizados en la misma página

[@JonathanOrtiz-nc8yl]

gracias por el aporte pero esta imposible grabarse todo esos codigos

[@TuVizzioFavorito]

Holaaa, muy buen videooo! pero los Iconos parece que ya no funcionan :c que puedo hacer al respecto?

[@stephanygalindo9104]

me gusto tu video

[@Malvinas_siempre_argentinas]

Hola grupo.espero que esten todos muy bien ..les quiero preguntar si a alguno les paso de no poder realizar los ejercicios de css porque no se enlaza el html con css en su pc estoy usando una laptop, visual estudio code y utilizo crome..a mi me pasa eso entonces sigo clavado en el tema de la etiqueta ().eh probado las 4 formas y mi pagina de< go live >me sigue saliendo solo html..alguien podria orientarme que es lo que estoy haciendo mal..muchas gracias desde ya...

[@leninhc653]

Amigo buenas, no jala los iconos?

[@manueldavidjoserangelevans1604]

usaras flexbox para diseñar el sitio web ?

[@juanbermeo520]

Fazt, excelente video. Queria preguntarte una cuestión, estoy diseñando una página web y requiero una base de datos con Información de usuarios, fotos, videos, etc. Estoy pensando en utilizar Firebase, tu que servidor me recomiendas para almacenar toda esa información?

[@alejandraluna2294]

Yo tengo la misma situación. ¿Qué servidor te sirvió?

[@OscarGN-p8n]

Excelente gracias !!!

[@photoafpimagen]

Hola Amigo, te escribo desde Misiones/Argentina, todavía no vi el vídeo pero por la presentación me gusto, te pregunto, solo para información....¿Sigues con el canal?, si tengo preguntas (seguro que la voy a tener) ¿Puedes Responder?....desde ya gracias y saludos

[@nandomendoza8780]

Te parece si tenemos una reunión virtual?

[@leoarias3]

Por mas codigo de scipt que he hecho no logro hacer el slider, aun revisando tu codigo!!

[@jost3974]

no se si te sirva pero en bxslider me fallaba por la s que estaba en minuscula era solo ponerla asi bxSlider espero te ayude

[@AlejandroHernandez-nl8vv]

@@jost3974 ami me sigue dando la imagen normal no me aparece el slider como tal, a que sera el problema

[@danielhidalgo2723]

@@AlejandroHernandez-nl8vv Me pasa igual, necesito ayudaaaaaaaaaaaaaaaaaa!

[@marianobarrios45]

Podés hacer un vídeo de una página de ecommerce con angular? Estoy medio perdido en eso. Me pasa que no se en que parte tengo que desarrollar el colegio HTML y CSS.

[@lcfawkes447]

no se como pero cuando deberia salir el slider en el minuto31 no me sale,despues mire el codigo y cheque y vi q tenia comas y puntos y comas,lo hice a si y tampoco funcionaba.A si q opte por copiar el codigo de github.

[@cristorrez4781]

hola fatz que microfono usas???

[@martperu1109]

Como consigues que los brackets se autocompleten, mi atom no tiene el autocompletado de eso.