Comenzar en el diseño web puede ser bastante difícil. Para los lectores, hay muchos tutoriales gratuitos en línea. Sin embargo, algunas personas consideran que la instrucción visual es más efectiva para su estilo de aprendizaje.
Los videos instructivos son una herramienta de aprendizaje increíblemente rica y podrían ser justo lo que necesita para finalmente aprender correctamente el desarrollo web. Hemos compilado una lista de más de 30 screencasts excelentes para principiantes en una serie de tecnologías y disciplinas web.
NetTuts
NetTuts es uno de los mejores proveedores de contenido gratuito relacionado con el aprendizaje de diseño web. Tienen una gran cantidad de artículos y videos tutoriales para estudiantes en todos los niveles. Aquí hay algunos para principiantes en HTML5, CSS3 y JavaScript.
La guía definitiva para crear un diseño y convertirlo a HTML y CSS
? Este screencast servirá como la entrada final en una serie de varias partes a través de los sitios TUTS que demuestra cómo construir una página de inicio hermosa para un negocio ficticio. Aprendimos cómo crear el wireframe en Vectortuts +; agregamos color, texturas y efectos en Psdtuts +; Ahora, tomaremos nuestro PSD completo y lo convertiremos en un sitio web HTML y CSS bien codificado.
Cómo hacer que todos los navegadores realicen correctamente el marcado HTML5: Screencast
? HTML 5 ofrece algunas funciones nuevas y excelentes para los diseñadores web que desean codificar diseños legibles y semánticamente significativos. Sin embargo, el soporte para HTML 5 sigue evolucionando, e Internet Explorer es el último en agregar soporte. En este tutorial, crearemos un diseño común utilizando algunos de los nuevos elementos semánticos de HTML 5, luego usaremos JavaScript y CSS para hacer que nuestro diseño sea compatible con Internet Explorer. Sí, incluso IE 6.?
Cómo construir un menú de navegación de estilo de lámpara de lava
? Uno de nuestros lectores solicitó un tutorial sobre cómo construir un menú de estilo de lámpara de lava. Afortunadamente, es una tarea bastante simple, especialmente cuando se utiliza una biblioteca de JavaScript. Vamos a construir uno desde cero hoy.
JavaScript de Null: Serie de videos
? Esta serie de screencast se enfoca exclusivamente en JavaScript, y lo llevará desde su primer momento? Hola, Mundo? alerta a temas más avanzados.
Cómo convertir un PSD a XHTML
? Sigo sorprendiéndome por lo bien que Collis's? ¿Construye un sitio de portafolio elegante desde cero? tutorial sigue realizando. Han pasado meses, sin embargo, todavía publica números fuertes cada semana. Teniendo en cuenta este hecho, decidí crear un screencast que te muestre exactamente cómo convertir una PSD en XHTML / CSS perfecto.
Rebanada y dados que PSD
? En el video tutorial de hoy, cortaremos un PSD, lo cortaremos para la web y lo serviremos en un plato caliente. Nuestro diseño luce un aspecto limpio de la Web 2.0 y es cortesía de Joefrey de ThemeForest.net. Asegúrese de visitar su perfil si tiene la oportunidad.
Doctype tv
Los chicos de Doctype publican frecuentes capturas de pantalla sobre temas que abarcan todo el espectro de diseño web. A continuación, encontrará videos para comenzar con Ajax, diseño basado en cuadrícula, columnas CSS3 y compilación de su primer complemento jQuery.
Diseño Grid Based y AJAX 101
"Nick ofrece una descripción general del diseño basado en cuadrícula y Jim analiza los conceptos básicos de AJAX".
Columnas CSS3 y complementos jQuery
"Nick deconstruye los diseños de varias columnas de CSS y Jim te muestra paso a paso cómo crear tu propio complemento jQuery".
TutVid
TutVid es un sitio de tutorial de diseño web que ofrece videos instructivos gratuitos. También puede comprar un video dado para recibir una versión descargable de mayor resolución junto con cualquier archivo de proyecto asociado. A continuación veremos algunos de los tutoriales disponibles de Dreamweaver.
Dreamweaver CS4: etiquetas de estilo con CSS
? Aprende todo sobre etiquetas de estilo y cómo escribir código CSS en Dreamweaver. Al final de este tutorial, comprenderá bien cómo escribir CSS, cómo funciona CSS y cómo puede escribir su código CSS en Dreamweaver.
14 pasos: cómo usar divs
? Vamos a echar un vistazo a un montón de cosas que quieres saber cuando empieces a usar Divs. ¿Aprende todo sobre la colocación y el uso de Divs, así como su estilo con CSS en Dreamweaver?
Crear un documento XML básico
? En este video, veremos rápidamente XML, qué es y para qué se utiliza. Luego nos sentaremos y escribiremos nuestro primer documento XML con solo una simple lista de seis personas. Usaremos Dreamweaver, pero realmente cualquier editor de texto está bien. Cubriremos la creación del lenguaje real, la adición de atributos, así como la forma en que creamos nuestras propias etiquetas y solo algunos conceptos básicos para que pueda escribir su propio documento XML.
Crear un sitio web completo de CSS
? En este video comenzaremos con una carpeta de imágenes y en unos 30 minutos construiremos un diseño muy simple de 2 columnas usando CSS para diseñar nuestra página. Aprenderemos todo sobre el uso de divs, la creación de reglas CSS, la segmentación de divs, la creación de un fondo, ¡y mucho más! ¡Empiece a aprender a aprovechar el poder en bruto de las Hojas de estilo en cascada para crear, diseñar y diseñar sus páginas web hoy!
Bosque temático
Themeforest es un mercado de Envato que vende plantillas de sitios web de varios tipos (HTML, WordPress, Joomla, etc.). El sitio también tiene un blog que publica contenido realmente útil de vez en cuando. Echa un vistazo a los screencasts en PHP y jQuery a continuación.
Buceando en la serie de videos PHP (11 partes)
? Hoy marca el comienzo de una nueva serie que le mostrará EXACTAMENTE cómo comenzar a usar PHP. ¿Al igual que con el? JQuery para Absolute Beginners? serie, comenzaremos desde cero y trabajaremos lentamente hasta llegar a algunos temas más avanzados. ?
jQuery para principiantes absolutos
? A partir de hoy, estoy lanzando una serie de videos diarios que le enseñarán PRECISAMENTE a usar la biblioteca jQuery en sus propios proyectos. Comenzaremos descargando el marco, creando nuestra primera función, examinando la sintaxis y más.Todos los días, voy a publicar un régimen de entrenamiento de cinco diez minutos? que se expande sobre lo que ya has aprendido. ¡Así que ya no hay razón para pelear! Aprende esto y comienza a ganar más dinero en ThemeForest.net con tus nuevas habilidades.
Trucos CSS
Chris Coyier en CSS Tricks lanza un flujo constante de videos tutoriales increíblemente educativos. Su sitio cuenta actualmente con 84 capturas de pantalla gratuitas que cubren varias técnicas y consejos de HTML, CSS y JavaScript. A continuación veremos seis que deberían ser útiles para los principiantes.
Convertir una maqueta de Photoshop (parte 1 de 3)
? En este primer podcast de video, comienzo el proceso de conversión de una maqueta de Adobe Photoshop de un sitio web, en un sitio web real basado en CSS. Esto es bastante difícil, amigos, estoy seguro de que se enfocarán más con el tiempo.
Formato CSS
? Estar organizado y usar un buen formato en sus archivos CSS puede ahorrarle mucho tiempo y frustración durante su proceso de desarrollo y especialmente durante la resolución de problemas. El formato multilínea facilita la búsqueda de atributos, pero hace que su archivo sea verticalmente muy largo. El formato de una sola línea mantiene su archivo verticalmente corto, lo cual es bueno para los selectores de navegación, pero es más difícil explorar los atributos. También puede elegir cómo desea agrupar sus declaraciones CSS.
Convertir una maqueta de Photoshop: segunda parte, episodio uno
? Ha habido MUCHOS comentarios excelentes sobre la primera serie de Conversión de una maqueta de Photoshop en HTML / CSS. Así que vamos a hacerlo de nuevo! Cada sitio web diferente requerirá diferentes técnicas de conversión, por lo que habrá mucho que aprender esta vez que será diferente de la última vez.
Diseñando para WordPress: Parte Uno
En la primera parte, descargaremos e instalaremos WordPress. Entonces instalaremos los? Starkers? tema de Elliot Jay Stocks para comenzar con una pizarra completamente nueva para nuestro nuevo diseño. No tiene sentido comenzar con el tema predeterminado, ¡es más problemático de lo que vale! En la segunda parte, repasaremos la teoría detrás del diseño para WordPress y cómo es "trabajar de manera modular". y en realidad empezar a diseñar. En la tercera parte, terminaremos el diseño y comenzaremos con algunas funcionalidades más avanzadas.
HTML y CSS - Los fundamentos MUY
? Este video es lo MUY básico de lo que es HTML y CSS, para el principiante absoluto. Los archivos HTML y CSS son, literalmente, solo archivos de texto. No necesita ningún software especial para crearlos, aunque un buen editor de código es útil. Puede crear estos archivos en cualquier computadora y usar su navegador web para previsualizarlos durante el desarrollo. Puede pensar en HTML como el contenido de su sitio web: un montón de texto y referencias a imágenes envueltas en etiquetas. CSS es el diseño de su sitio web. Apunta a las etiquetas que escribiste en tu HTML y aplica el estilo. Mantener estas dos cosas separadas es clave para un diseño web de calidad.
Construyendo un sitio web: Conversión HTML / CSS
? En la parte 2 de esta serie, comenzamos la conversión HTML / CSS de la maqueta de Photoshop que creamos en la parte uno. Comenzamos con un marco de proyecto muy esquelético. Luego echamos un vistazo a la organización de capa de archivo de Photoshop. Luego comenzamos de abajo hacia arriba, creando las piezas que necesitamos del archivo de Photoshop y escribiendo el HTML y CSS que necesitamos para hacer el trabajo. Gran parte del trabajo no es en realidad? El archivo de Photoshop, pero mirándolo de cerca e intentando imitar lo que se hace allí con las técnicas de marcado y CSS correctas.
Web de victoria
Victoria web es una especie de escuela web en línea actualmente en beta. Tienen un pequeño puñado de videos tutoriales gratuitos para desarrolladores web.
Empezando con PHP
¿Buscas comenzar a aprender y crear aplicaciones PHP? Este video muestra las herramientas utilizadas por los profesionales de la industria para que sus aplicaciones estén en funcionamiento de manera rápida y efectiva.
Introducción jQuery
Introducción al framework jQuery JavaScript. Aprenderá cómo usar los selectores de CSS para modificar objetos DOM, deslizarlos dentro y fuera de la vista, desvanecer y crear animaciones personalizadas.
Diseño web completo
? Aprenda a crear todo este sitio web de concesionarios de principio a fin. ¿Cubriendo diversas técnicas, como máscaras de capas, máscaras de recorte, reflexiones, sombras y más?
ShowMeDo
ShowMeDo es una fuente de videos instructivos sobre el trabajo con tecnología y software de código abierto.
Los fundamentos de Javascript
? En este video les muestro los fundamentos de Javascript. La etiqueta comienza entre la etiqueta. También podría estar entre la etiqueta. Por eso llamamos a la función message () desde el atributo onload en la etiqueta (es decir, cuando se carga la página). La salida de texto simple en la página html y los cuadros de alerta, definiendo una función y una cláusula if / else, nos da una idea general e inmediata de lo que es Javascript.
Pitón desde cero
? Esta serie de videos es un enfoque muy básico para la programación en Python para principiantes. Con la esperanza de que la audiencia permanezca atenta hasta los tutoriales de pygame, que mostrarán cómo hacer juegos 2D simples sin conocimiento previo de gráficos de computadora.
Otras fuentes
Los videos a continuación son de fuentes dispersas alrededor de la web. Siempre es bueno aprender de tantas fuentes separadas como sea posible para asegurarse de que esté recibiendo una educación completa.
Creación de una plantilla de WordPress - Parte 1 de 3
Un recorrido en profundidad de tres partes para crear su primer tema de WordPress.
Modificar tema de WordPress - Video Tutorial
? Este es el tercer video de los tutoriales de video avanzados de WordPress. Este video tutorial muestra cómo trabajar con algunos códigos de tema de WordPress, es decir, cómo agregar el código de respuesta automática a la barra lateral del blog, cómo colocar un banner en la publicación única y cosas similares.
Cómo hacer un plugin de wordpress
Un breve video tutorial sobre cómo hacer un plugin para wordpress.
Creación de un sitio web: de principio a fin
Una serie de tres partes que lo lleva desde el diseño de un sitio web en Photoshop hasta la codificación HTML y CSS.
Tutorial en línea de jQuery por John Resig
? John Resig, creador de jQuery javascript library, ha publicado un video en línea sobre cómo hacer un menú estilo acordeón usando jQuery. ¿Cosas bastante básicas? Pero una buena introducción a jQuery si eres nuevo en esto.
Conclusión
Con todos los recursos gratuitos mencionados anteriormente, espero que se estén quedando sin excusas para no poder codificar sitios a mano. Es hora de saltar para mojarte los pies. Simplemente seguir los videos de arriba te enseñará mucho y te ayudará a convertirte en un desarrollador web completo.
¿Conoces más tutoriales en video gratis? Deja un enlace en los comentarios a continuación.