Aprenda HTML y CSS con estos tutoriales paso a paso

Anuncio

Cuando está ansioso por 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 tiene curiosidad acerca de HTML, CSS y JavaScript, o cree que puede tener la habilidad de 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 dará una introducción al complejo mundo que es JavaScript ¿Qué es JavaScript, y puede existir Internet sin él?JavaScript es una de esas cosas que muchos dan por sentado. Todos lo usan. Lee mas - 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.

Se necesitará mucho más que esto para comenzar a desarrollar sitios web profesionalmente. Estas herramientas, la mayoría de las cuales son gratuitas, le brindan

bloques de construcción básicos para el desarrollo web, y hará que sea mucho más fácil sumergirse en los cursos más complicados.

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

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

Los tutoriales de Dash se mueven a un ritmo razonable, llevándote a través de cada paso algunas líneas de código a la vez. Como 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 forma de repetirla.

Conclusión: El uso de Dash lo configurará con todo el conocimiento que necesita para crear un sitio web moderno 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 personalizado de Tumblr. Dicho esto, solo hay un total de cuatro lecciones sobre Dash. Si bien puede tomar los conceptos que ha aprendido e intentar aplicarlos de diferentes maneras, debe complementar sus conocimientos con otros cursos incluidos en esta lista.

Codecademy ha existido mucho más tiempo que Dash, y a menudo agrega nuevas lecciones a sus ofertas. Con las mismas lecciones completas paso a paso que encontrará en Dash, Codecademy va un paso más allá al brindar a los usuarios un descripció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ónagregar imágenes de fondo, hacer una galería de imágeneso incluso un página de registro. (Para agregar funcionalidad a su página de registro, asegúrese de pasar por el Tutorial de Ruby on Rails.)

También hay lecciones dedicadas sobre jQuery Hacer que la web sea interactiva: una introducción a jQueryjQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos utilizan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada ... Lee mas , un lenguaje clave que hace que JavaScript sea mucho más fácil de aprender. Si tiene curiosidad sobre el desarrollo de backend, también hay lecciones en profundidad para Ruby, Python, PHP y más.

Además de aprender a diseñar un sitio web y sumergirse en complejidades de los lenguajes de programación 7 trucos útiles para dominar un nuevo lenguaje de programaciónEstá bien sentirse abrumado cuando aprende a codificar. Probablemente olvidará las cosas tan rápido como las aprenda. Estos consejos pueden ayudarlo a retener mejor toda esa información nueva. Lee mas , 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 completo, Codecademy es un gran lugar para mojarte los pies y decidir si la codificación y el diseño web son adecuados para ti. Con esa experiencia, puede llevar ese conocimiento a un curso o clase pagados.

Tutsplus.com es un sitio web repleto de tutoriales (gratuitos y de pago) sobre una amplia variedad de temas que incluyen todo, desde móvil ¿Diseñando una aplicación innovadora? 7 blogs de desarrollo móvil que deberías leerEl espacio móvil es tan nuevo que las tendencias cambian constantemente y cada día se crean nuevas ideas. Si planea desarrollar aplicaciones móviles, ¿cómo puede mantenerse al día sin volverse loco? Lee mas y desarrollo de juegos 4 sitios web gratuitos donde puedes aprender los conceptos básicos del desarrollo de juegosCuando buscas una buena serie de tutoriales de desarrollo de juegos, quieres una que te enseñe prácticas y mentalidad de buena codificación porque luego puede transponer esas prácticas en cualquier idioma o plataforma. Lee mas a teoría del color Cómo aprender la teoría del color en menos de una horaEl conocimiento básico de la teoría del color puede significar la diferencia entre una estética "aficionada" y una "profesional", y realmente no lleva mucho tiempo aprenderla. Lee mas y como usar Ilustrador Adobe Enséñese Adobe Illustrator gratisAdobe 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 procedimientos fáciles de desarrollo web.

Un tutorial particularmente útil lo guía a través de los pasos para diseñe y codifique su sitio web. El tutorial ciertamente data de 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 un 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 leído los primeros tutoriales de la Asamblea General.

Si desea crear un sitio web más elaborado, consulte otro tutorial de Tuts + en cómo diseñar un hermoso sitio web desde cero. Otro Tutorial de PSD a HTMl hace la vida un poco más fácil al proporcionar HTML, CSS y archivos de imagen. Otros tutoriales en Tuts + lo guían a través de cómo crear un Tema de diario de fotos de Tumblr - aunque este es un diseño simple de Photoshop, menos 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 muchas más "manos", por así decirlo. A medida que avanza en cada paso, a menudo es más fácil descubrir 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, seguramente encontrarás un conjunto de lecciones que se adaptan exactamente a lo que quieres aprender.

Con una serie de 12 lecciones, Shaye Howe hace un gran trabajo al desglosar los conceptos básicos de HTML para presentarle la terminología y cómo usar los diversos elementos de HTML y CSS. Varias lecciones incluyen conocer HTML, CSS, comprender 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 en efecto. Para superar esto, puede usar una herramienta en línea que proporcionará las mismas funciones que encontrará en Codecademy y Dash.

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

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

Después de haber superado las 12 lecciones, puede pasar al Lección avanzada de HTML y CSS, que incluye diseño receptivo, jQuery y más.

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

¿Cuál es tu opinión?

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

Credito de imagen: hackNY.org