Aprender a codificar es siempre emocionante y divertido para todo el mundo y cuando se trata de entrar en el mundo de la programación la mayoría de la gente comienza con lo más fácil HTML y CSS. El viaje de codificación de cada principiante en frontend comienza con estos dos bloques de construcción básicos y tienes que ser creativo cuando se trata de diseñar una hermosa aplicación.
Al principio, los principiantes disfrutan haciendo botones, añadiendo enlaces, añadiendo imágenes, trabajando con el diseño y un montón de cosas interesantes en el diseño web, pero cuando se trata de hacer un proyecto utilizando sólo HTML y CSS se quedan atascados y confundidos acerca de lo que deben hacer para practicar todas estas cosas. Después de todo su conocimiento se limita a HTML y CSS. No importa lo que después de aprender todo en algún momento se dará cuenta de que hacer un proyecto es importante para practicar las habilidades de HTML y CSS. Tienes que comprobar cómo HTML y CSS trabajan juntos para diseñar una hermosa aplicación frontend. Así que la pregunta es cuáles son algunos proyectos para principiantes que puedes construir para practicar todo lo que has aprendido… Vamos a discutir eso.
Una página de homenaje
El sitio web más simple que puedes hacer como principiante es una página de homenaje de alguien que admiras en tu vida. Sólo requiere conocimientos básicos de HTML y CSS. Haz una página web escribiendo sobre esa persona añadiendo su imagen. En la parte superior de la página web, añade la imagen y el nombre de la persona y debajo de eso da la disposición para el resto de los detalles. Puedes utilizar párrafos, listas, enlaces, imágenes con CSS para darle un aspecto decente. Añade un color de fondo adecuado y un estilo de fuente en tu página web. La mayoría de las partes se pueden hacer usando HTML pero para darle un mejor aspecto usando un poco de CSS. Tome la ayuda del enlace que se da a continuación.
- Mi página de homenaje
- Página de homenaje a Steve Jobs
- Página de homenaje a Albert Einstein
Página web que incluye un formulario
Los formularios son siempre una parte esencial de cualquier proyecto y usted va a trabajar con un montón de formularios en la mayoría de las aplicaciones, así que por qué no practicar antes y poner a prueba sus conocimientos. Una vez que te familiarices con el campo de entrada o las etiquetas básicas en HTML para crear un formulario haz un proyecto utilizando todas esas etiquetas. Cómo utilizar un campo de texto, una casilla de verificación, un botón de radio, una fecha y otros elementos importantes en un mismo formulario. Aprenderás a dar una estructura adecuada a una página web al crear un formulario. El conocimiento de HTML/HTML5 es suficiente, pero puedes usar un poco de CSS para que el proyecto se vea mejor. Tome la ayuda de los enlaces que se dan a continuación.
- Formulario de encuesta
- Formulario de buenas vibraciones
- Formulario de encuesta
Sitio web de parallax
Un sitio web de parallax incluye imágenes fijas en el fondo que puede mantener en su lugar y puede desplazarse por la página para ver diferentes partes de la imagen. Con conocimientos básicos de HTML y CSS, se puede dar un efecto parallax a un sitio web. El uso del efecto parallax en el diseño web es muy popular y da un aspecto hermoso a la página web. Pruébalo y divide toda la página en tres o cuatro secciones diferentes. Establece 3-4 imágenes de fondo, alinea el texto para las diferentes secciones, establece el margen y el relleno, añade la posición de fondo y otros elementos y propiedades CSS para crear un efecto de paralaje. Usted puede tomar la ayuda de Parallax Website.
Página de aterrizaje
Una página de aterrizaje es otro buen proyecto que puede hacer usando HTML y CSS, pero requiere un sólido conocimiento de estos dos bloques de construcción. Usarás mucha creatividad mientras haces una página de aterrizaje. Practicarás cómo añadir un pie de página y una cabecera, crear columnas, alinear elementos, dividir las secciones y un montón de cosas. Tendrás que usar CSS con cuidado teniendo en cuenta que los diferentes elementos no se superpongan entre sí. También tendrás que cuidar las combinaciones de colores, el relleno, el margen, el espacio entre secciones, los párrafos y las cajas. Las combinaciones de colores deben ir bien entre sí para las diferentes secciones o fondos. Puedes tomar ayuda del enlace que te damos a continuación.
- Aterrizaje en pantalla completa
- Página de aterrizaje
Sitio web de un restaurante
Demuestra tus sólidos conocimientos de HTML y CSS creando una hermosa página web para un restaurante. Hacer un diseño para un restaurante será un poco más complicado que los ejemplos de proyectos anteriores. Alinearás los diferentes alimentos y bebidas utilizando una cuadrícula de diseño CSS. Se añadirán los precios, las imágenes y se tendrá que dar un aspecto bonito utilizando la combinación adecuada de colores, estilo de fuente e imágenes. Puedes añadir una galería de imágenes para los diferentes artículos de comida, también puedes añadir imágenes deslizantes para un mejor aspecto. Añade enlaces para redirigir a páginas internas. Hazlo responsivo estableciendo un viewport, usando media queries y grid. Usted puede tomar la ayuda de Restaurante Sitio Web.
Una página web de eventos o conferencias
Usted puede hacer una página estática celebración de un evento o conferencia. Las personas que están interesadas en asistir a la conferencia crear un botón de registro para ellos. Menciona diferentes enlaces para el orador, el lugar de celebración y el programa en la parte superior en la sección de la cabecera. Describe el objetivo de la conferencia o la categoría de personas que pueden beneficiarse de ella. Añade una introducción e imágenes del ponente, detalles del lugar de celebración y el objetivo principal de la conferencia en tu página web. Divida la página en secciones, añada un encabezado y un pie de página que muestre el menú. Utiliza un color de fondo adecuado que pueda ir bien con las distintas secciones. Escoge un estilo de letra y un color de letra decentes que coincidan con el tema de tu página web. Requiere conocimientos de HTML/HTML5 y CSS en profundidad. Usted puede tomar la ayuda de la Conferencia de Estilo.
Página de la tienda de música
Si usted es un amante de la música puede hacer una página web para ello. Requiere conocimientos de HTML5/CSS3. Añade una imagen de fondo adecuada que describa el propósito o de qué trata la página. En la sección de la cabecera añade diferentes menús. Añade botones, enlaces, imágenes y alguna descripción sobre la colección de canciones disponibles. En la parte inferior, menciona los enlaces de compra, tienda, carrera o datos de contacto. También puedes añadir otras funciones en tus páginas web, como la opción de prueba, las tarjetas de regalo o la suscripción. Hazlo responsivo configurando el viewport o usando media queries y grid. Puedes tomar la ayuda de myTunes.
Sitio de fotografía
Si tienes conocimientos profundos de HTML5 y CSS3, puedes hacer un sitio de fotografía responsivo de una página. Utiliza flexbox y media queries para la capacidad de respuesta. Añade el nombre de la empresa con una imagen (relacionada con la fotografía) en la parte superior (landing page). Debajo de eso muestra tu trabajo añadiendo múltiples imágenes. Menciona los datos de contacto del fotógrafo en la parte inferior (pie de página). Añade un botón para ver tu trabajo. Este botón te llevará directamente a la sección de imágenes. Tienes que cuidar el margen, el relleno, la combinación de colores, el tamaño de la fuente, el estilo de la fuente, el tamaño de la imagen y el estilo de un botón. Usted puede tomar la ayuda de la fotografía Acme.
Portafolio personal
Con el conocimiento de HTML5 y CSS3, también puede crear su cartera. Muestra tus muestras de trabajo y habilidades en tu portafolio con tu nombre y fotos. También puedes añadir tu CV allí y alojar tu portafolio completo en la cuenta de GitHub. En tu sección de cabecera menciona algunos menús como sobre, contacto, trabajo o servicios. En la parte superior añade una de tus imágenes y preséntate allí. Debajo añade algunas muestras de trabajo y por último (pie de página) añade la información de contacto o la cuenta de las redes sociales. Puedes ayudarte del Portfolio Personal.
Documentación Técnica
Si tienes un poco de conocimiento de Javascript entonces puedes crear una página web de documentación técnica. Requiere conocimientos de HTML, CSS y javascript básico. Dividir toda la página web en dos secciones. El lado izquierdo crea un menú con todos los temas listados de arriba a abajo. El lado derecho tiene que mencionar la documentación o la descripción de los temas. La idea es que una vez que haga clic en uno de los temas en la sección de la izquierda debe cargar el contenido de la derecha. Para hacer clic, puede utilizar javascript o la opción de marcador CSS. No es necesario hacerlo demasiado elegante, sólo darle un aspecto simple y decente, que se ve bien para la documentación técnica. Puedes tomar la ayuda de Documentación Técnica.
Enlace útil: 10 consejos para un diseño web eficaz en 2019
