Siempre es emocionante la primera vez que intentas aprender una nueva habilidad. Especialmente la codificación.
Sin embargo, si no tienes práctica, olvidas la mayor parte de lo que aprendes. Por lo tanto, en algún momento te das cuenta de que necesitas practicar lo que has aprendido. De lo contrario, lo olvidarás todo.
Ahí es donde entran los proyectos. Los proyectos son una buena manera de practicar lo que has aprendido. Y créeme que quieres trabajar en algunos proyectos. Puedes utilizar los proyectos para mostrar lo que has trabajado.
Como novato, elegir proyectos que se ajusten a tu nivel actual de conocimientos puede ser desalentador. Puede que elijas un proyecto. Entonces el proyecto se vuelve demasiado grande para ser realizado con tus conocimientos actuales. Al menos, eso es lo que he pasado en este viaje de aprendizaje.
He curado algunos proyectos que he encontrado que son apropiados incluso si su conocimiento se limita a HTML y CSS solamente. Estos proyectos están disponibles en sitios web de aprendizaje populares donde encontrarás información adicional sobre lo que vas a abordar.
1. Una página de homenaje
Escribe un homenaje de alguien que admires y publícalo como página web. Este proyecto implicará trabajar con la adición de imágenes, enlaces, listas y párrafos. Este proyecto requerirá conocimientos de HTML para su creación. Sin embargo, puedes usar un poco de CSS para que el proyecto se vea mejor.
2. Un formulario de encuesta
Los formularios son útiles para recoger datos en línea. Este proyecto pondrá a prueba sus habilidades en todo tipo de entradas. Esto pondrá a prueba su conocimiento de las formas y la estructuración de su página web. El formulario no es necesario para enviar cualquier data.
Es una acumulación de la página de homenaje. Este proyecto requerirá conocimientos de html/html5 para su creación.
3. Construir una página de aterrizaje de producto
Esto pondrá a prueba sus conocimientos tanto de HTML como de CSS. Tendrá que practicar la creación de columnas y la alineación de elementos dentro de las columnas. También tendrá que hacer una edición básica de imágenes, por ejemplo, recortar y cambiar el tamaño para hacer imágenes perfectas para su página web.
Necesitará conocimientos sólidos de HTML/CSS.
4. Construir una página de documentación técnica
Esto requerirá algunos conocimientos de HTML CSS y bootstrap o JavaScript. La idea básica es: cuando se hace clic en cualquier tema de la izquierda, se carga ese contenido en la derecha.
Actualmente estoy intentando este proyecto y publicaré el proyecto final una vez que esté hecho.
5. Construir una página web del portafolio personal
Estarás practicando todas las habilidades que has aprendido en HTML y CSS. También tendrás que saber cómo recortar y cambiar el tamaño de las imágenes. Si no tienes opciones utiliza Gimp. Es gratuito, de código abierto y está disponible en Windows y Linux.
Si tienes prisa por hacer un portafolio, puedes leer el artículo de Brian sobre cómo hacer un portafolio online usando un tema/plantilla ya hecho.
6. Página de Google.com
Sí, lo has visto muchas veces. Pero, ¿puedes replicarlo? La simple página de google.com con iconos, el logo de google, un cuadro de texto y dos botones. Puedes hacer una página parecida a la de google.com. En este proyecto estás haciendo que se vea como google.com no que funcione como google.com.
Necesitas saber tanto HTML como CSS.
7. google.com Página de resultados de búsqueda
Crearás una página con el formato de un resultado de búsqueda de google. Su página debe tener los 10 resultados normales y la navegación a las siguientes páginas en la parte inferior.
Esta es una mejora de la página básica de google.com anterior. Sin embargo, usted debe ser capaz de reutilizar algunos de los códigos en este proyecto.
También, hacer la página debe mirar un poco, pero la funcionalidad no debe ser una preocupación en este momento.
Conclusión
Si usted está buscando para aprender los fundamentos de HTML, puede comprobar mi breve lección de introducción en HTML.
¿Hiciste un proyecto básico, mientras que usted estaba aprendiendo HTML y CSS? Si lo hiciste, compártelo a continuación y ayuda a otros estudiantes a encontrar ideas «simples» pero desafiantes para probar.