Codifica tu propio sitio web

¿Alguna vez has querido aprender a diseñar páginas web o crear un sitio en línea? Hoy, vamos a mostrarle cómo construir su propio sitio web personal. Echa un vistazo al video tutorial para ver a la Instructora Maya de Juni guiarte a través de cada paso del camino.

Siga leyendo para obtener más información sobre la importancia de aprender desarrollo web, una guía paso a paso para acompañar el video y para aprender sobre las herramientas que puede usar para mejorar aún más su experiencia de desarrollo web.

RECORDAR:

  • El sitio web de este tutorial es solo un proyecto de ejemplo para fines didácticos. Antes de comenzar, tenga en cuenta que los menores de edad no deben publicar información personal en línea, como su nombre completo, dirección o número de teléfono. También tenga cuidado al cargar fotos personales en línea.
  • Si no estás seguro de lo que está bien cargar, consulta siempre con un adulto.

¿Para quién es esto?

 Los resultados de aprendizaje para el sitio web personal del proyecto de codificación HTML/CSS para principiantes.
Esta información del proyecto y el resumen de resultados de aprendizaje le ayudarán a decidir si este proyecto de codificación HTML/CSS es adecuado para usted.

Este proyecto pertenece a nuestra clase de codificación de nivel 1 de JavaScript para niños. Este tutorial HTML / CSS para principiantes es para estudiantes que desean un proyecto de desafío medio, de aproximadamente 121 líneas de código. Te ayudará tener una comprensión básica de cómo funcionan HTML y CSS de antemano, pero si eres completamente nuevo, ¡también explicamos más conceptos básicos en este video!

Este tutorial es ideal para principiantes en codificación, especialmente para aquellos interesados en el diseño o el arte. Recomendamos que los estudiantes tengan 12 años o más para seguir adelante.

Para los resultados de aprendizaje, obtendrá mucha práctica con div, listas, enlaces, posición, visualización, texto (h1/h2/p), fuentes y CSS general. Este proyecto se estima en aproximadamente 40 minutos o más, dependiendo de cómo creativa, pero usted debe moverse más rápido o más lento a su propio ritmo!

¿Por qué Aprender Desarrollo Web?

En estos días, no es necesario conocer el desarrollo web o la codificación para crear un sitio web. Hacia el final de este artículo, te mostraremos algunos creadores de sitios web de arrastrar y soltar que harán que el proceso sea increíblemente fácil de hacer. Entonces, ¿por qué deberías aprender desarrollo web? Es una gran pregunta.

Personalización ilimitada

Todas las herramientas de creación de sitios web fáciles son en realidad limitadas. Te ofrecen un conjunto de temas y complementos que son muy fáciles de usar para principiantes, siempre y cuando no necesites modificarlos.

Sin embargo, cuando necesite modificar un tema o hacer algo más personalizado con su sitio web, necesitará al menos una comprensión básica del código de desarrollo web. Por ejemplo, con un poco de conocimiento de Javascript, puede integrar casi cualquier fuente de redes sociales en su sitio web.

Carreras de codificación & Fundaciones

Si alguna vez has considerado una carrera en codificación, los conocimientos de diseño y desarrollo web también te darán una gran ventaja. El desarrollo web ayuda a los niños y a los nuevos programadores interesados en el arte y el diseño a explorar su pasión mientras aprenden los conceptos básicos de codificación. Dejando a un lado la carrera, también hay innumerables beneficios de habilidades para la vida al aprender programación para niños.

Aplicable a muchos campos

Por último, ser capaz de construir su propio sitio web es una habilidad valiosa en la era digital actual. Los bloggers quieren que los desarrolladores los hagan blogs personalizados. Las empresas de Internet están buscando desarrolladores para construir sitios de comercio electrónico en lugar de solo publicar artículos en Amazon.

Es una edad de oro para el diseño y desarrollo de sitios web, ¡y un buen momento para aprender a construir su propio sitio!

¡Comencemos!

Vamos a usar HTML básico y CSS para aprender a hacer un sitio web personal simple.

Demostración del proyecto

Antes de comenzar a escribir código, vea cómo funciona nuestro proyecto terminado para referencia. Mira el video para ver todas las funciones de nuestro sitio web del proyecto.

También puede ver nuestro código de solución de proyecto si se queda atascado.

Qué tener en cuenta antes de empezar:

  • Hay un encabezado de imagen con texto. El texto tiene diferentes tamaños y utiliza dos fuentes diferentes. También tiene un contorno blanco.
  • La sección blanca de abajo tiene dos partes una al lado de la otra.
  • Tenemos una lista de hipervínculos, que enlazan a otra página. Cuando cierras el cursor sobre ellos, cambian a azul.
  • También hay una sección Sobre mí con texto.
  • Debajo de eso, hay una sección de experiencia con un fondo de color diferente.

Pasos para Codificar el Proyecto

Para construir nuestro sitio web, seguiremos este orden de pasos. Vea el tutorial para ver cómo el Instructor Maya codifica cada parte y siga las explicaciones a continuación.

  1. Agregue el encabezado de la imagen & el texto que va en él.
  2. Crea la lista de enlaces que deseas compartir.
  3. Crea la sección Acerca de mí.
  4. Crea la sección Experiencia.

Tutorial paso a paso

Paso 1: Agregue el encabezado de la imagen & el texto que va en él.

  • Cree un div con posicionamiento relativo para contener la imagen y el texto.
  • Cree un div para contener el texto y utilice el posicionamiento absoluto para colocarlo en la imagen.
  • Utilice <h1> y <h3> para añadir el texto.
  • Use CSS para modificar la fuente de texto.
  • Use CSS para eliminar el relleno de margen adicional & alrededor de la imagen.

Paso 2: Crea la lista de enlaces que deseas compartir.

  • Crea un div con posicionamiento relativo para contener la sección enlaces y Acerca de mí.
  • Añadir relleno al div.
  • Cree un div con pantalla de bloque en línea para contener la lista de enlaces.
  • Use <ul> para crear una lista.
  • Use <li> y <a> para crear los enlaces.
  • Use <i> y un enlace impresionante de fuente para agregar iconos.
  • Modifica el CSS para que parezca el original.

Paso 3: Crea la sección Acerca de mí.

  • Cree un div con pantalla de bloque en línea para contener la sección Acerca de mí.
  • Utilice <h3> y <p> para añadir texto.

Paso 4: Crea la sección Experiencia.

  • Cree un div con posicionamiento relativo para contener la sección Experiencia.
  • Cree un div para la primera experiencia y use <h4> y <p> para agregar texto.
  • ¡Agrega más divs de experiencia!

Próximos pasos

¡Gran trabajo! Ahora, siéntete libre de agregar más secciones a tu sitio web. Algunas ideas pueden incluir una sección para proyectos en los que has trabajado o clubes en los que estás. También puedes subir tu nuevo sitio web a la web usando Github y las páginas de Github.

Herramientas de creación de páginas web

 varias personas usan una herramienta de creación de páginas web para crear un sitio web

Como mencionamos anteriormente, hay varios creadores de sitios web. La mayoría de los mejores creadores de sitios web están hechos para agilizar el proceso al proporcionarle plantillas, interfaces de arrastrar y soltar y cualquier otra funcionalidad que necesite para crear un sitio web personal gratuito.

Solo porque tengas una comprensión básica del desarrollo web no significa que debas olvidarte de estas herramientas. Pueden ayudarlo a alojar su nuevo sitio web, encontrar un dominio personalizado (el nombre y la dirección de su sitio web) y ofrecerle plantillas, temas y complementos que acelerarán su proceso de diseño web.

Al cuidar de lo básico, estas herramientas le dan la oportunidad de enfocar sus nuevas habilidades de codificación en personalizar su sitio web a la perfección. O, incluso si quieres construir todo desde cero, estas herramientas pueden darte algunas ideas geniales sobre qué construir y cómo hacerlo.

Estas son algunas de las herramientas más populares para la creación de páginas web:

  • Wix

Wix es una de las más fáciles de usar constructores web por ahí. Su plan gratuito es lo suficientemente completo como para convertirlo en una gran opción para el creador de sitios web de un niño, siempre y cuando esté de acuerdo con que su URL sea un subdominio de Wix (sitename.wixsite.com). Tienen planes de pago con precios razonables si supera el nivel gratuito.

  • WordPress

Aunque la gente lo conoce como un creador de sitios web gratuito, lo que WordPress realmente es un sistema de gestión de contenido (CMS). En un sentido simple, la diferencia es que un creador de sitios web es más fácil de usar, pero un CMS ofrece más oportunidades de personalización. Aunque WordPress en sí es gratuito, es posible que tenga que pagar por algunos temas y complementos o por el alojamiento si desea su propio nombre de dominio.

  • Weebly

Weebly es un creador de sitios web, al igual que Wix. La principal diferencia es que Weebly ofrece mucha menos personalización, por lo que es una opción fácil de usar que es ideal para programar para niños, pero es menos probable que crezca con usted a medida que mejoran sus habilidades de creación de sitios web.Sigue Aprendiendo: Clases de Desarrollo Web para Niñoscongratulaciones, ¡ahora tienes tu propio sitio web! Este es un paso emocionante del que deberías sentirte increíblemente orgulloso. El aprendizaje tampoco tiene que detenerse ahí.

Sigue aprendiendo: Cursos de Desarrollo Web para niños

Juni Learning ofrece cursos de programación Web para niños que te darán las habilidades que necesitas para potenciar tu nuevo sitio o incluso para crear aplicaciones y portafolios web. Aparte del desarrollo web, también impartimos cursos de codificación para niños de 8 a 18 años en una variedad de lenguajes como Scratch, Python, Java, C++ y más.

Echa un vistazo a nuestros cursos en línea para niños, o ponte en contacto con nuestro equipo de Juni Advisors para saber qué curso es el mejor para tu estudiante.

Articles

Deja una respuesta

Tu dirección de correo electrónico no será publicada.