Aprenda HTML y CSS con estos tutoriales paso a paso

Cuando tiene ganas de probar el código, simplemente no hay límite para la cantidad de tutoriales, videos y cursos en línea que puede probar. Pero a veces, la mejor manera de aprender algo es sumergirse y probarlo de primera mano. El desarrollo web no es diferente.

Si tienes curiosidad por HTML, CSS y JavaScript, o si crees que podrías tener una habilidad para aprender a crear sitios web desde cero, hay algunos excelentes tutoriales paso a paso Vale intentarlo.

La siguiente lista de tutoriales lo guiará a través de los conceptos básicos de HTML y CSS, e incluso le brindará una introducción al complejo mundo de JavaScript. ¿Qué es JavaScript, y puede existir Internet sin él? ¿Qué es JavaScript, y puede existir Internet sin él? JavaScript es una de esas cosas que muchos dan por sentado. Todo el mundo lo usa. Leer más - al menos en lo que respecta a los principiantes. Pero lo que no harán es prepararte para una vida como desarrollador desde el primer momento. La mayoría de estos servicios son simplemente un lugar fácil para comenzar..

Tomará mucho más que esto para comenzar a desarrollar sitios web profesionalmente. Estas herramientas, la mayoría de las cuales son gratuitas, le dan la Elementos básicos para el desarrollo web., y hará que sea mucho más fácil sumergirse en los cursos más complicados.

Tablero de la Asamblea General

La gente de General Assembly tiene una herramienta gratuita que te enseña los conceptos básicos de HTML, CSS y JavaScript, y es el lugar perfecto para que comiencen los principiantes. Mediante una serie de cinco proyectos, aprenderá la terminología y las habilidades básicas de codificación que le permiten crear un sitio web que se asemeja a una página de about.me, cómo crear un blog sensible y un sitio web de restaurante.

Los tutoriales de Dash van más allá de aprender cómo crear sitios web simples, también puede aprovechar el poder de HTML, CSS y JavaScript para crear un robot usando formas y líneas o incluso un juego de Mad Libs.

Los tutoriales de Dash se mueven a un ritmo razonable, y le llevan a través de cada paso unas pocas líneas de código a la vez. Al igual que con cualquier tutorial, recomendaría tomar notas mientras trabaja. Esto te ayudará a memorizar las diversas herramientas que estás aprendiendo, y con los tutoriales de la Asamblea General, una vez que hayas completado una fase, no parece haber una manera de repetirla..

Conclusión: El uso de Dash lo configurará con todo el conocimiento que necesita para armar un sitio web moderno y básico, desde la navegación hasta el diseño receptivo. Incluso se le presentan los conceptos básicos de cómo crear un tema Tumblr personalizado. Dicho esto, solo hay un total de cuatro lecciones en Dash. Si bien puede tomar los conceptos que ha aprendido e intentar aplicarlos de diferentes maneras, necesita complementar sus conocimientos con otros cursos incluidos en esta lista..

Codecademia

Codecademy ha existido por mucho más tiempo que Dash, y a menudo agrega nuevas lecciones a sus ofertas. Con las mismas lecciones integrales paso a paso que encontrará en Dash, Codecademy va un paso más allá al ofrecer a los usuarios una visión general de la creación de un sitio web con HTML y CSS, pero también proporciona tutoriales detallados sobre los idiomas individuales. , HTML, CSS y JavaScript.

Al igual que otros servicios, Codecademy le muestra cómo crear un menú de navegación, agregar imágenes de fondo, crear una galería de imágenes o incluso una página de registro. (Para agregar funcionalidad a su página de registro, asegúrese de leer el tutorial de Ruby on Rails).

También hay lecciones dedicadas sobre jQuery Cómo hacer que la web sea interactiva: una introducción a jQuery Cómo hacer que la web sea interactiva: una introducción a jQuery jQuery es una biblioteca de scripts del lado del cliente que utiliza casi todos los sitios web modernos: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, la más compatible y la más utilizada ... Leer más, un lenguaje clave que hace que JavaScript sea mucho más fácil de aprender. Si tiene curiosidad por el desarrollo de back-end, también hay lecciones en profundidad para Ruby, Python, PHP y más.

Además de aprender a diseñar un sitio web y adentrarse en las complejidades de los lenguajes de programación 7 trucos útiles para dominar un nuevo lenguaje de programación 7 trucos útiles para dominar un nuevo lenguaje de programación Está bien sentirse abrumado cuando está aprendiendo a codificar. Probablemente olvidará las cosas tan rápido como las aprende. Estos consejos pueden ayudarlo a conservar mejor toda la información nueva. Lea más, también puede usar Codecademy para obtener los conceptos básicos sobre cómo crear aplicaciones web y cómo agregar funciones de registro, inicio de sesión y cierre de sesión a su sitio web.

Conclusión: Al igual que Dash, la interactividad de Codecademy es invaluable. Poder ver cómo se materializa cada paso en su sitio web es alentador, y la configuración también facilita la detección de errores. Si eres un principiante, Codecademy es un gran lugar para mojarte los dedos de los pies y decidir si la codificación y el diseño web son los más adecuados para ti. Con esa experiencia, puedes llevar ese conocimiento a un curso o clase pagados.

Tuts+

Tutsplus.com es un sitio web repleto de tutoriales (gratuitos y de pago) sobre una amplia variedad de temas, que incluyen todo, desde ¿Diseño de aplicaciones innovadoras para dispositivos móviles? 7 Blogs de desarrollo móvil que deberías leer ¿Cómo diseñar una aplicación innovadora? 7 Blogs de desarrollo móvil que debe leer El espacio móvil es tan nuevo que las tendencias cambian constantemente y se crean nuevas perspectivas todos los días. Si planea desarrollar aplicaciones móviles, ¿cómo puede mantenerse al día sin volverse loco? Leer más y desarrollo de juegos 4 sitios web gratuitos donde puedes aprender los conceptos básicos del desarrollo de juegos 4 sitios web gratuitos donde puedes aprender los conceptos básicos del desarrollo de juegos Cuando buscas una buena serie de tutoriales de desarrollo de juegos, quieres uno que te enseñe las prácticas y la mentalidad de buena codificación porque luego puede transponer esas prácticas en cualquier idioma o plataforma. Lea más a la teoría del color Cómo aprender la teoría del color en menos de una hora Cómo aprender la teoría del color en menos de una hora El conocimiento básico de la teoría del color puede significar la diferencia entre una estética "amateur" y una "profesional" - y realmente no toma mucho tiempo para aprender Lea más y cómo usar Adobe Illustrator. Enseñe a sí mismo Adobe Illustrator de forma gratuita. Enseñe a sí mismo. Adobe Illustrator de forma gratuita. Adobe Illustrator ha sido durante mucho tiempo la herramienta de ilustración elegida por los artistas gráficos. ¿Listo para dar vida a tus diseños? Así es como puedes aprender Adobe Illustrator gratis. Lee mas . Si bien no todas las lecciones que se enseñan en el sitio web siguen el modelo paso a paso, hay algunas que adoptan este enfoque y guían a los usuarios a través de sencillos procedimientos de desarrollo web..

Un tutorial particularmente útil lo guía a través de los pasos para diseñar y codificar su sitio web. Es cierto que el tutorial se remonta a 2009, por lo que la estética del diseño puede no ser atractiva para usted, pero dicho esto, el tutorial le enseña las habilidades necesarias para diseñar su sitio web, y luego puede aplicar esas habilidades a un diseño más actualizado. Otra advertencia que vale la pena mencionar con este tutorial es que requiere el uso de Adobe Photoshop. Si no tiene acceso al software, siempre puede optar por la opción de Adobe Creative Cloud por una tarifa de $ 50 por mes.

El tutorial lo guía a través del diseño de un sitio web básico de dos columnas con encabezado y pie de página. El sitio web incluye contenido, una barra de navegación, botones de redes sociales y más. Una vez que haya diseñado el sitio web en Photoshop, puede cambiar a un editor de código y el tutorial lo guiará a través del código requerido para transformar su diseño en una página HTML. El tutorial requerirá algunos conocimientos básicos de HTML, por lo que recomiendo probar este tutorial después de haber completado los primeros tutoriales de la Asamblea General.

Si desea crear un sitio web más elaborado, consulte otro tutorial de Tuts + sobre cómo diseñar un sitio web bonito desde cero. Otro tutorial de PSD a HTMl hace la vida un poco más fácil al proporcionar los archivos HTML, CSS y de imagen. Otros tutoriales en Tuts + le explican cómo crear un tema de diario de fotos de Tumblr, aunque este es un diseño simple de Photoshop, sin el código.

Conclusión: En comparación con Codecademy y Dash, los tutoriales de Tuts + requieren un poco más de esfuerzo, ya que debes seguir los pasos. Con los otros dos sitios, hay mucho más 'hand holding' por así decirlo. A medida que avanza en cada paso, a menudo es más fácil averiguar qué error pudo haber cometido. También requiere que use su propio software, mientras que Dash y Codecademy tienen sistemas integrados. Dicho esto, con la variedad de tutoriales, está obligado a encontrar un conjunto de lecciones que se adapten exactamente a lo que desea aprender..

Aprende a programar con Shaye Howe

Con una serie de 12 lecciones, Shaye Howe hace un excelente trabajo al desglosar los conceptos básicos de HTML introduciéndote en la terminología y cómo utilizar los diversos elementos de HTML y CSS. Varias lecciones incluyen conocer HTML, CSS, entender el modelo de caja, posicionar contenido, tipografía y más.

Cuando se trata de aplicar las lecciones en el tutorial, el sitio web no proporciona una manera de ver rápidamente cómo se ve su HTML y CSS. Para superar esto, puede usar una herramienta en línea que proporcionará las mismas características que encontrará en Codecademy y Dash.

Echa un vistazo a un recinto de seguridad CSS / HTML / JavaScript como CSSDeck o LiveWeave, que te permite ingresar HTML, CSS y JavaScript y ver el resultado final. Técnicamente, también puede utilizar los editores de HTML, CSS y JavaScript en Dash y Codecademy, si le gusta la configuración que proporcionan..

A medida que avanza en las explicaciones, el sitio también proporciona ejemplos de código para que usted lo pruebe. Al final de cada lección hay un ejercicio práctico que le permite aplicar lo que ha aprendido..

Una vez que haya terminado las 12 lecciones, puede pasar a la Lección de HTML y CSS Avanzado, que incluye diseño responsivo, jQuery y más.

Conclusión: Este tutorial tiene un enfoque ligeramente diferente a las otras sugerencias enumeradas aquí. Con una explicación mucho más detallada, pasará más tiempo leyendo que aplicando lo que ha aprendido. Si bien esto puede parecer aburrido para algunos, aquí hay algunas lecciones valiosas que brindan contexto y una mejor comprensión de cómo funcionan estos idiomas..

Cual es tu toma?

Ahora es el momento de saber de ti. ¿Hay algún tutorial de desarrollo web en línea que recomendaría? ¿Cuál crees que es el siguiente paso después de probar estos cursos en línea? Háganos saber en los comentarios..

Crédito de la imagen: hackNY.org

Explora más sobre: ​​Tecnología de la educación, HTML, HTML5, Diseño web.