Tutorial Completo. HTML5 + CSS3
Comenzamos una nueva serie de videotutoriales, aprendemos HTML5 y CSS3, el tutorial va a constar de muchas partes, vamos actualizando constantemente
Parte 1 (etiquetas basicas html). HTML5 + CSS3 desde 0
Parte 2 (Estructura de HTML5 ). HTML5 + CSS3 desde 0
Parte 3 (Etiquetas audio y video) HTML5 + CSS3 desde 0
Parte 4 (Formularios) HTML5 + CSS3 desde 0
Parte 5 (Validador de codigo online) HTML5 + CSS3 desde 0
Parte 6 (Maquetando el css principal) HTML5 + CSS3 desde 0
Parte 7 (Maquetando el header) HTML5 y CSS3 desde 0
Parte 8 (Transform) HTML5 + CSS3 desde 0
Parte 9 (Editando el centro de la web) HTML5 + CSS3 desde 0
Parte 10 (estilando los aside) HTML5 + CSS3 desde 0
Un saludo
53 comments on “Tutorial Completo. HTML5 + CSS3”
Deja un comentario
Canal Videotutosgratis
Hola, mucha gracias por el curso. Ya he hecho un par de páginas para unos amigos.El problema, que me he dado cuenta hoy, es que en explorer se me mueve todo.Las páginas son: www.elvianant.com y www.marfred.net . Si me pudieras dar una solución te lo agradecería.
Gracias
hola mira la etiqueta img no me funciona X:X! solo sale en la pagina un cuadrito pequeño que indica que hay una imagen pero no aparece
igual el audio solo sale el rectangulo y no reproduce y la opcion de volumen aparece con 1 palito en diagonal encima y al poner la etiqueta video aparece un rectangulo identico al del audio ayuda porfa.
Pd: stoy usando la ultima version de Google Chrome
Eso te pasa porque no pones bien la ruta hacia los archivos
Un saludo
Aya pero yo estoy haciendo todo tal y como muestra el video, al igual he creado una carpeta dentro esta la pagina y cree alli una carpeta y puse el mp3 para el sonido y el mp4 para el video igual con la imagen pero nada =(! amenos que haya que espicificar bien bien la ubicacion d la carpeta pero en el video eso no se muestra solo pones el nombre de la carpeta y el video u.u”
Comparte tu código y lo vemos!
Muchisímas felicidades por estos videotutoriales,es lo mejor que hay de CSS·.Estoy siguiendo vuestros videos, pero tengo un problema con la parte 8 (transform).Intento hacer el mismo código fuente pero no me funciona el scale, ni rotate ni nadad de nada y la verdad no se porque es.Pues puse todas las especificaciones y lo he probado en todos los navegadores y no me hace nada, Es como que no reconoce el hover de la clase img.
Me podías ayudar?
De nuevo gracias por compartir estos maravillosos tutoriales.
Saludos
Ya lo solucioné , después de dar millones de vueltas era por el link a fichero css.gracias de todos modos
Me alegra que lo hayas encontrado y te pido mil disculpas por no haberte ayudado, lo siento
Un saludo!
Hola,
He de decirte que son los primeros videotutoriales en los que se explica de una manera tan clara, fácil y además, que parezca sencillo, he vistos bastantes y con diferencia estos son los mejores, sigue así, puedes sentirte orgulloso de este trabajo y de tu forma de hacer las cosas.
Saludos desde Jaén.
Alfonso.
Solo puedo darte las gracias, y decirte que gracias a comentarios como el tuyo, uno se siente con fuerzas para seguir haciendo tutoriales aunque la universidad me lo pone muy difícil
Un saludo
Las gracias son todas para ti, he terminado un curso de Diseño Web y ando mirando todo lo que puedo para seguir formándome e informándome, decirte que ya quisieran en V2B acercarse a tu “profesionalidad sencilla”.
Saludos.
Alfonso.
MUCHAS GRACIAS , ME VI TODOS LOS VIDEO TUTORIALES Y APRENDI MUCHO , PAGINAS COMO ESTA SON LAS QUE VALEN LA PENA , aunque no me funciono bien lo del audio , nose por que al principio no me cargaba la cancion asi se viera el reproductor dentro de la pagina y ahora ni se ve el reproductor xD
Hermano no sabes cuanta ayuda ofreces a lo que estamos perdidos en esto de la web xD gracias, en serio te pasaste.
Por cierto quisiera saber si pudieras subir un videito de como hacer galerias de imágenes usando solo html5, te lo agradeceria infinitamente
Mi comentario es Que al inicio DE crear Un bloc de Notas Lo creo PEro cuando QUiero poner index.html NO aparece el navegador simplemente mi bloc de notas nada mas :/ Podrias decirme k hise mal
Hola! primero que nada gracias por el tutorial estubo genial, pero tengo una duda existencial, y es, si puedo usar html5 con alguna base de datos. para cargar por ejemplo el contenido de , cargar imagenes desde mi base de datos, la idea que tengo es algo asi como un CMS pero en html5, que carge el contenido de manera dinamica desde una BD. gracias a tus tutoriales comprende que con html5 y css3 creamos la web pero como consigo conectividad y dinamismo. quisiera que me orientaras de como acer esto o si es posible.
Hola, lo felicito , estos tutoriales son excelentes , muchisimas gracias por compartir sus conocimientos con los que queremos aprender.
Hola. Mi duda es con las section, article, aside y header. Parece una terminología de blogs, y no lo imagino en una web normal. Yo utilizaba divs, y si por ejemplo hago una web con el menú a la dcha, iría en el aside? Después, section sólo iría una? sería como un contenedor de la zona principal? y entonces los articles podrían contener imágenes?, o los iconos de redes sociales? o un formulario? Perdona, estoy un poco perdido haciendo las equivalencias con el html anterior. Por cierto, enhorabuena por tus tutoriales. Saludos
Hola que tal muy bueno dias espero que estos esten bien y gracias por enseñarnos a como usar el html5 y css3 para crear nuestras propias paginas….son lo maximo
Perdona, ¿cómo haces para que el fondo de toda la página sea gris? Es que del tutorial 7 al 8 cambia el fondo y no sé si es configuración del chrome o una modificación del código. Por cierto, muchísimas gracias por los tutos, son una pasada y están curradísimos
perdona, directamente no tengo ni idea de por qué lo hice, en el css:
body{
background: grey;
}
Una pregunta cuando termino el tuto 6 al hacer zoom + y zoom – mi contenido central se mueve como puedo arreglar eso?
Excelente tutorial me salio todo bien ahora si aprendí desde el comienzo, muchas gracias,sin embargo tengo una pregunta, si solamente con la pagina de inicio hiciste como cuatro paginas css debo hacer lo mismo con las demás paginas ,contacto telefónica ,informática etc, tomando en cuenta que estas paginas también llevan texto imágenes o vídeo.
Gracias.
No no, luego unifica todo en un solo archivo, yo lo hice así para ganar claridad, un saludo
Hola, lo que yo quiero es poner en el header dos sectores.En un lateral, la barra en vertical con selector de idioma y en el centro mi cabecera con el logo de empresa. Mi pregunta es la siguiente.
Tengo que hacer un aside o un section en el header.
No no, utiliza divs, dentro del header, se pueden usar nav y cosas así, pero el aside y el section es para la estructura principal
Un saludo
Ok, muchas gracias.
Gracias por los videos, son de gran ayuda para los que buscamos información.
Quería pedirte si pudieras subirle el volumen a las primeras 6 partes, apenas se escuchan y en mi notebook casi nada… Por el resto los tutos están de primera!!!! Son magníficos!!!!!
También quería consultarte como haces cuando, por ejemplo en el primer video copias una linea igual a la anterior?? porque es mucho más fácil al momento de cerrar la etiqueta y evitas olvidarte de cerrarla… Muchas gracias!!!!
Control + D
Hola amigos, los felicito en verdad, excelente tutorial.
Quiero aprender a fondo tanto html5 como cs3 quisiera saber si tienen un curso a profundidad y como hago para comprarlo o donde podría conseguirlo.
Repito mi felicitación excelente tutorial.
Hola, muy buenos tus vídeo tutoriales pero no se me los podrías enviar para tenerlos como ejemplo lo que para es que no veo bien las letras en los vídeos, te escucho y todo pero no veo la letras, bueno te agradecería mucho si me lo envías mi coreo es juan_rdz_2@hotmail.com. De antemano muchas gracias
Siento decirte que no puedo enviarte los vídeos
Un saludo
no quiero los vídeos solo el código, solo para tomarlo de referencia, si se puede te lo agradecería mucho y si no pus ni modo muchas gracias por tu tiempo un saludo
Excelente ayuda para todos los que somos programadores web y estamos buscando mejorar nuestras técnicas
Excelente tutorial para todos los que desarrollamos Web y estamos al tanto de las nuevas tecnologías.
Bueno quiero preguntarte algo, yo programo en C# de .net y actualmente tengo que hacer un sistema de control de mantenimientos de Equipos (maquinaria), tengo que registrarlas, registrar cada mantenimiento que se les hace, osea ordenes de mantenimiento que se les entrega a los mecanicos o tecnicos, luego cerrar las ordenes, etc, y poder sacar estadisticas de los mantenimientos, cuanto e gastado en una maquina en especifico, etc, entonces este debe ser para varias plantas o planteles que estan en ciudades diferentes, por lo tanto creo que lo mejor es hacerlo web, pero no manejo programacion web, e aqui mi pregunta ¿en que me recomiendas que lo desarrolle en php p asp o java, etc, teniendo en cuenta que debo empezar de cero con cualquiera de ellos, cual es mas facil de aprender y que se adecue mas a la situacion
Sin duda alguna en PHP. es el más potente, el más barato (se ejecuta bajo linux perfectamente) y encima si sabes programar en C, no vas a tener ningún problema para aprenderlo ya que lo básico viene a ser más o menos lo mismo, PHP es infitamente más sencillo, y para mi gusto con una sintaxis mejor que C#.
Espero haber ayudado, un saludo.
Bueno quiero preguntarte algo, yo programo en C# de .net y actualmente tengo que hacer un sistema de control de mantenimientos de Equipos (maquinaria), tengo que registrarlas, registrar cada mantenimiento que se les hace, osea ordenes de mantenimiento que se les entrega a los mecanicos o tecnicos, luego cerrar las ordenes, etc, y poder sacar estadisticas de los mantenimientos, cuanto e gastado en una maquina en especifico, etc, entonces este debe ser para varias plantas o planteles que estan en ciudades diferentes, por lo tanto creo que lo mejor es hacerlo web, pero no manejo programacion web, e aqui mi pregunta ¿en que me recomiendas que lo desarrolle en php p asp o java, etc, teniendo en cuenta que debo empezar de cero con cualquiera de ellos, cual es mas facil de aprender y que se adecue mas a la situacion.
Gracias por tu ayuda
Amigo te quiero decir que estos son los mejores tutoriales e e podido seguir (e visto mucho), la forma de explicar es super clara, si me gustaria que acercaras mas la imagen del codigo porque en algunos no se distingue muy bin, de casualidad manejas tambien ASP.NET MVC?, el curso de php que has publicado, esta finalizado o continua.
Buenas monchoneto, Gracias por los elogios. Acercaré la imagen del código, o mejor, subiré el tamaño de la fuente
En cuanto a ASP. Lo manejo, si tienes dudas, házmelas, pero no voy a hacer tutoriales de ASP
El curso de PHP sigue en marcha, el tiempo no me deja ir más deprisa, lo siento
Un saludo
Bueno quiero preguntarte algo, yo programo en C# de .net y actualmente tengo que hacer un sistema de control de mantenimientos de Equipos (maquinaria), tengo que registrarlas, registrar cada mantenimiento que se les hace, osea ordenes de mantenimiento que se les entrega a los mecanicos o tecnicos, luego cerrar las ordenes, etc, y poder sacar estadisticas de los mantenimientos, cuanto e gastado en una maquina en especifico, etc, entonces este debe ser para varias plantas o planteles que estan en ciudades diferentes, por lo tanto creo que lo mejor es hacerlo web, pero no manejo programacion web, e aqui mi pregunta ¿en que me recomiendas que lo desarrolle en php p asp o java, etc, teniendo en cuenta que debo empezar de cero con cualquiera de ellos, cual es mas facil de aprender y que se adecue mas a la situacion.
Gracias.
hola,gracias por los tutoriales .Te felicito y cabe resaltar q tienes mas carisma para enseñar q muxos de mis profesores en mi universidad.
Gracias a ti por verlos, subiré más, de hecho acabo de subir uno de php
Un saludo y gracias de nuevo
Gracias por los tutos.. están buenísimos.. espero más vídeos.. si???
¬_¬
Me parece buena la explicacion, pero…
Se supone que estas explicando código… deberías haber usado algun maximizador de imagen como la lupa, el tamaño del texto ó al menos cambiar la resolucion de la pantalla para que este pueda ser visible por el estudiante…
Qué sentido tiene ver un video explicativo de codigo que no te permite ver el código???
Lo siento, pero no he tenido ninguna queja más en este sentido, lo tendré en cuenta para siguiente vídeos
Un saludo
muy buena pagina,tiene un buen diseño. gracias por los tutoriales los estoy descargando…
Muchas gracias por el aporte a la comunidad de webmaster.
www.soportecnicoweb.com
Gracias Muy buen aporte…
Pingback: Tutorial HTML5 y CSS3 « El Blog de Ragadast
Gracias Shur.