30 videos tutoriales gratuitos para aprender diseño web
Comenzar en el diseño web puede ser bastante difícil. Para los lectores, hay toneladas de excelentes 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 el desarrollo web correctamente. Hemos compilado una lista de más de 30 excelentes screencasts para principiantes en una serie de tecnologías y disciplinas web.
Explore los recursos de diseño
NetTuts
NetTuts es uno de los mejores proveedores de contenido gratuito relacionado con el aprendizaje del diseño web. Tienen una gran cantidad de artículos y tutoriales en video para estudiantes de 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 de TUTS que demuestra cómo construir una hermosa página de inicio para un negocio ficticio. Aprendimos a crear la estructura metálica en Vectortuts +; agregamos color, texturas y efectos en Psdtuts +; ahora, tomaremos nuestra PSD completa y la convertiremos en un sitio web HTML y CSS bien codificado ".
Cómo hacer que todos los navegadores muestren correctamente el marcado HTML5: Screencast
“HTML 5 proporciona algunas nuevas características excelentes para diseñadores web que desean codificar diseños legibles y semánticamente significativos. Sin embargo, el soporte para HTML 5 todavía está evolucionando e Internet Explorer es el último en agregar soporte. En este tutorial, crearemos un diseño común usando algunos de los nuevos elementos semánticos de HTML 5, luego usaremos JavaScript y CSS para que nuestro diseño sea compatible con Internet Explorer. Sí, incluso IE 6. "
Cómo construir un menú de navegación estilo 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 usa una biblioteca de JavaScript. Construiremos uno desde cero hoy ".
JavaScript de Null: Serie de videos
"Esta serie de screencast se enfoca exclusivamente en JavaScript y lo llevará desde su primera alerta" Hello, World "hasta temas más avanzados".
Cómo convertir un PSD a XHTML
“Sigo asombrado de lo bien que continúa el tutorial de Collis" Construir un sitio elegante de portafolio desde cero ". Han pasado meses, sin embargo, todavía publica números fuertes cada semana. Teniendo en cuenta ese hecho, decidí crear un screencast que muestra exactamente cómo convertir un PSD en XHTML / CSS perfecto ".
Slice and Dice that PSD
“En el video tutorial de hoy, vamos a cortar un PSD, cortarlo en cubitos para la web y servirlo en un plato caliente. Nuestro diseño luce una elegante sensación de "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 publicaron frecuentes screencasts sobre temas que abarcan todo el espectro de diseño web. A continuación encontrará videos para comenzar a usar Ajax, diseño basado en cuadrículas, columnas CSS3 y crear su primer complemento jQuery.
Diseño basado en cuadrícula y AJAX 101
"Nick ofrece una descripción general del diseño basado en la cuadrícula y Jim desglosa los conceptos básicos de AJAX".
Columnas CSS3 y complementos jQuery
"Nick deconstruye los diseños de múltiples columnas CSS y Jim le muestra paso a paso cómo crear su propio complemento jQuery".
TutVid
TutVid es un sitio tutorial de diseño web que ofrece videos instructivos gratuitos. También puede comprar un video determinado para recibir una versión descargable de mayor resolución junto con los archivos de proyecto asociados. A continuación, veremos algunos de los tutoriales de Dreamweaver disponibles.
Dreamweaver CS4: etiquetas de estilo con CSS
“Aprenda todo sobre las 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
“Echaremos un vistazo a un montón de cosas que querrás saber cuando comiences a usar Divs. ¡Aprenda todo sobre la colocación y el uso de Divs, así como el diseño con CSS en Dreamweaver!
Crear un documento XML básico
“En este video correremos rápidamente sobre XML, qué es y para qué se utiliza. Luego nos sentaremos y escribiremos nuestro primer documento XML solo una simple lista de seis personas. Usaremos Dreamweaver, pero realmente cualquier editor de texto está bien. Cubriremos la creación escribiendo el lenguaje real, agregando atributos, así como también cómo creamos nuestras propias etiquetas y algunos conceptos básicos para que pueda comenzar a escribir su propio documento XML ".
Crear un sitio web CSS completo
“¡En este video comenzaremos con una carpeta de imágenes y en unos 30 minutos construiremos un diseño de 2 columnas muy simple usando CSS para diseñar nuestra página! ¡Aprenderemos todo sobre el uso de divs, la creación de reglas CSS, la orientación de divs, la creación de un fondo y mucho más! ¡Comience a aprender a aprovechar el poder 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.
Zambullirse 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 la serie "jQuery for Absolute Beginners", comenzaremos desde cero y avanzaremos lentamente hacia algunos temas más avanzados. "
jQuery para principiantes absolutos
“A partir de hoy, estoy lanzando una serie diaria de videos que te enseñará PRECISAMENTE cómo usar la biblioteca jQuery en tus propios proyectos. Comenzaremos descargando el marco, creando nuestra primera función, examinando la sintaxis y más. Todos los días, publicaré un "régimen de entrenamiento" de cinco diez minutos que amplía lo que ya has aprendido. ¡Entonces ya no hay razón para pelear! Aprenda esto y comience a ganar más dinero en ThemeForest.net con sus nuevas habilidades ".
Trucos CSS
Chris Coyier en CSS Tricks lanza un flujo constante de video tutoriales increíblemente educativos. Su sitio actualmente tiene 84 capturas de pantalla gratuitas para descargar 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 Adobe Photoshop de un sitio web, en un sitio web basado en CSS real en vivo. Esto es bastante duro aquí 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 de varias líneas facilita la exploración 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 buscar selectores, pero es más difícil buscar atributos. También puede elegir cómo quiere agrupar sus declaraciones CSS ".
Convertir una maqueta de Photoshop: segunda parte, primer episodio
“Ha habido MUCHOS comentarios excelentes sobre la primera serie de Convertir una Maqueta de Photoshop en HTML / CSS. ¡Así que hagámoslo de nuevo! Cada sitio web es diferente requerirá diferentes técnicas de conversión, por lo que esta vez habrá mucho que aprender que será diferente de la última vez ".
Diseñando para WordPress: Primera parte
“En la primera parte, estaremos descargando e instalando WordPress. Luego instalaremos el tema "Starkers" 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 problema de lo que vale! En la segunda parte, repasaremos la teoría detrás del diseño para WordPress y cómo es muy parecido a "trabajar modularmente" y, de hecho, comenzaremos a diseñar. En la tercera parte, terminaremos el diseño y comenzaremos con una funcionalidad más avanzada ".
HTML y CSS: los conceptos básicos
“Este video es MUY básico de 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 obtener una vista previa 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 tu sitio web. Se dirige a las etiquetas que escribió en su 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 de HTML / CSS de la maqueta de Photoshop que creamos en la primera parte. Comenzamos con un marco de proyecto muy esquelético. Luego echamos un vistazo a la organización de la capa de archivos 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 realmente "cortar" el archivo de Photoshop, sino mirarlo de cerca e intentar imitar lo que se hace allí con las técnicas correctas de marcado y CSS ".
Victoria Web
Victoria web es una especie de escuela web en línea actualmente en fase beta. Tienen un pequeño puñado de videos tutoriales gratuitos para desarrolladores web.
Comenzando con PHP
“¿Estás buscando comenzar a aprender y crear aplicaciones PHP? Este video muestra las herramientas utilizadas por los profesionales de la industria para poner sus aplicaciones en funcionamiento de manera rápida y efectiva ".
Introducción a jQuery
“Introducción al marco jQuery JavaScript. Aprenderá a usar selectores CSS para modificar objetos DOM, deslizarlos dentro y fuera de la vista, desvanecerse y crear animaciones personalizadas ".
Diseño web completo
“Aprenda a crear todo este sitio web de concesionario de principio a fin. Cubriendo varias técnicas como máscaras de capa, máscaras de recorte, reflejos, sombreado y más ".
ShowMeDo
ShowMeDo es una fuente de videos instructivos sobre cómo trabajar con tecnología y software de código abierto.
Los fundamentos de Javascript
“En este video muestro los conceptos básicos de Javascript. La etiqueta comienza entre la etiqueta. También podría estar entre la etiqueta. Es por eso que 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 inmediata y general de lo que es Javascript ".
Python 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 se mantenga atenta hasta los tutoriales de pygame, que mostrarán cómo hacer juegos 2D simples sin conocimiento previo de gráficos por computadora ".
Otras fuentes
Los videos a continuación son de fuentes dispersas en la web. Siempre es bueno aprender de tantas fuentes separadas como sea posible para asegurarse de obtener una educación completa.
Crear una plantilla de WordPress - Parte 1 de 3
"Un recorrido detallado de tres partes para crear su primer tema de WordPress".
Modificar el tema de WordPress - Video Tutorial
“Este es el tercer video de los tutoriales avanzados de video de WordPress. Este video tutorial muestra cómo trabajar con algunos códigos de tema de WordPress, es decir, cómo agregar código de autoresponder a la barra lateral del blog, cómo poner un banner en la publicación única y cosas similares ".
Cómo hacer un complemento de WordPress
"Un breve video tutorial sobre cómo hacer un complemento de WordPress".
Crear 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 en HTML y CSS.
Tutorial de películas en línea jQuery por John Resig
“John Resig, creador de la biblioteca jQuery javascript, ha publicado un video en línea sobre cómo hacer un menú de estilo de acordeón usando jQuery. Bastante básico ... pero una buena introducción a jQuery si eres nuevo en esto ".
Conclusión
Con todos los recursos gratuitos anteriores, espero que te quedes sin excusas para no poder codificar sitios a mano. Es hora de saltar y mojarse los pies. El simple hecho de seguir los videos anteriores le enseñará muchas cosas y lo ayudará a convertirse en un desarrollador web completo.
¿Conoces más videos tutoriales gratuitos? Deja un enlace en los comentarios a continuación.
