Codifique su propio sitio web
¿Alguna vez ha querido aprender a diseñar páginas web o hacer un sitio en línea? ¡Hoy, le mostraremos cómo crear su propio sitio web personal! Vea el video tutorial para ver a Juni Instructor Maya guiarlo a través de cada paso del camino.
Siga leyendo para obtener más información sobre la importancia de aprender el desarrollo web, una guía paso a paso para acompañar el video y para conocer las herramientas que puede utilizar para mejorar aún más su experiencia de desarrollo web.
RECUERDA:
- El sitio web de este tutorial es solo un proyecto de ejemplo con fines didácticos. Antes de comenzar, tenga en cuenta que los menores 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á seguro de qué puede cargar, consulte siempre con un adulto.
¿Para quién es esto?
Esta información del proyecto y el resumen de los resultados del aprendizaje lo ayudarán a decidir si este proyecto de codificación HTML / CSS es adecuado para usted.
Este proyecto se enmarca en nuestra clase de codificación de JavaScript de nivel 1 para niños . Este tutorial de 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 diseño o arte. Recomendamos que los estudiantes tengan 12 años o más para seguir el curso.
Para los resultados del aprendizaje, obtendrá mucha práctica con div, listas, enlaces, posición, visualización, texto (h1 / h2 / p), fuentes y CSS general. Se estima que este proyecto te llevará unos 40 minutos o más, dependiendo de lo creativo que seas, ¡pero debes moverte más rápido o más lento a tu propio ritmo!
¿Por qué aprender desarrollo web?
En estos días, no es necesario tener conocimientos de programación o desarrollo web para crear un sitio web. Hacia el final de este artículo, le 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ía aprender sobre desarrollo web? Esa es una gran pregunta.
Personalización ilimitada
Todas las herramientas fáciles de creación de sitios web son realmente limitadas. Le ofrecen un conjunto de temas y complementos que son muy fáciles de usar para los principiantes, siempre que no necesite 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. Como ejemplo, con un poco de conocimiento de Javascript, ¡puede integrar casi cualquier canal de redes sociales en su sitio web!
Carreras y fundamentos de codificación
Si alguna vez ha considerado una carrera en codificación , el diseño web y el conocimiento del desarrollo web también le 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 codificación para niños .
Aplicable a muchos campos
Por último, poder crear su propio sitio web es una habilidad valiosa en la era digital actual. Los blogueros quieren que los desarrolladores los conviertan en blogs personalizados. Las empresas de Internet buscan desarrolladores para crear sitios de comercio electrónico en lugar de simplemente publicar artículos en Amazon.
Es una época dorada para el diseño y desarrollo de sitios web, ¡y es un buen momento para aprender a crear su propio sitio!
¡Empecemos!
Usaremos HTML y CSS básicos para aprender a crear un sitio web personal sencillo.
Demostración del proyecto
Antes de comenzar a escribir código, vea cómo funciona nuestro proyecto terminado como referencia. Mire el video para conocer todas las características del sitio web de nuestro proyecto.
También puede ver el código de nuestra solución de proyecto si se queda atascado.
Qué debe tener en cuenta antes de comenzar:
- 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 debajo tiene dos partes una al lado de la otra.
- Tenemos una lista de hipervínculos, que enlazan a otra página. Cuando pasas el cursor sobre ellos, cambian a azul.
- También hay una sección Acerca de 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. Mire el tutorial para ver cómo el instructor Maya codifica cada parte y siga las explicaciones a continuación.
- Agregue el encabezado de la imagen y el texto que lo acompaña.
- Crea la lista de enlaces que te gustaría compartir.
- Crea la sección Acerca de mí.
- Crea la sección Experiencia.
Tutorial paso a paso
Paso 1: agregue el encabezado de la imagen y el texto que lo acompaña.
- Crea un div con posicionamiento relativo para contener la imagen y el texto.
- Cree un div para contener el texto y use el posicionamiento absoluto para colocarlo en la imagen.
- Use
<h1>y<h3>para agregar el texto. - Utilice CSS para modificar la fuente del texto.
- Use CSS para eliminar el margen adicional y el relleno alrededor de la imagen.
Paso 2: crea la lista de enlaces que te gustaría compartir.
- Crea un div con posicionamiento relativo para contener los enlaces y la sección Acerca de mí.
- Agregue relleno al div.
- Cree un div con visualización de bloques en línea para contener la lista de enlaces.
- Úselo
<ul>para crear una lista. - Utilice
<li>y<a>para crear los enlaces. - Utilice
<i>y un enlace de fuente impresionante para agregar iconos. - Modifique el CSS para que se vea como el original.
NOTA: ¡No
dude en seguir agregando a esta lista si desea incluir más enlaces!
Paso 3: crea la sección Acerca de mí.
- Cree un div con visualización de bloques en línea para contener la sección Acerca de mí.
- Utilice
<h3>y<p>para agregar texto.
Paso 4: Crea la sección Experiencia.
- Crea 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éntase libre de agregar más secciones a su sitio web. Algunas ideas pueden incluir una sección para proyectos en los que ha trabajado o clubes en los que se encuentra. También puede cargar su nuevo sitio web en la web utilizando las páginas de Github y Github .
Herramientas de creación de páginas web
Como mencionamos anteriormente, existen varios creadores de sitios web. La mayoría de los mejores creadores de sitios web están diseñados 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.
El hecho de que tenga un conocimiento básico del desarrollo web no significa que deba olvidarse 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 ocuparse de lo básico, estas herramientas le brindan la oportunidad de enfocar sus nuevas habilidades de codificación en personalizar su sitio web a la perfección. O, incluso si desea construir todo desde cero, estas herramientas pueden brindarle excelentes ideas 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 es uno de los creadores de sitios web más fáciles de usar que existen. Su plan gratuito es lo suficientemente completo como para convertirlo en una excelente opción para el creador de sitios web de un niño, siempre que esté de acuerdo con que su URL sea un subdominio de Wix (www.username.wixsite.com). Tienen planes pagados con precios razonables si supera el nivel gratuito.
Aunque la gente lo conoce como un creador de sitios web gratuito, 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 deba pagar algunos temas y complementos o el alojamiento si desea su propio nombre de dominio.
Weebly es un creador de sitios web, muy parecido a Wix. La principal diferencia es que Weebly ofrece mucha menos personalización, lo que la convierte en una opción fácil de usar que es excelente para codificar para niños, pero es menos probable que crezca con usted a medida que mejoran sus habilidades de creación de sitios web. Siga aprendiendo: Clases de desarrollo web para niños ¡Felicitaciones, ahora tiene su propio sitio web! Este es un paso emocionante del que debería sentirse increíblemente orgulloso. El aprendizaje tampoco tiene por qué detenerse allí.
Keep Learning: Cursos de desarrollo web para niños
Juni Learning ofrece cursos de programación web para niños que le brindarán las habilidades que necesita para potenciar su nuevo sitio, o incluso pasar a crear aplicaciones web y portafolios. Fuera 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.
¡Vea nuestros cursos en línea para niños o comuníquese con nuestro equipo de admisiones para saber qué curso es mejor para su estudiante!
