Aprender a codificar siempre es emocionante y divertido para todos y cuando se trata de ingresar al mundo de la programación, la mayoría de las personas comienzan con HTML y CSS , lo más fácil . El viaje de codificación de cada principiante en la interfaz comienza con estos dos componentes básicos y debe ser creativo cuando se trata de diseñar una aplicación hermosa.
Inicialmente, los principiantes disfrutan haciendo botones, agregando enlaces, agregando imágenes, trabajando con el diseño y muchas cosas interesantes en el diseño web, pero cuando se trata de hacer un proyecto usando solo HTML y CSS, se atascan y confunden sobre lo que deben hacer. practicar todas estas cosas. Después de todo, su conocimiento se limita a HTML y CSS. No importa qué, después de aprender todo, en algún momento te darás cuenta de que hacer un proyecto es importante para practicar las habilidades de HTML y CSS. Debe verificar cómo HTML y CSS funcionan juntos para diseñar una hermosa aplicación de interfaz. Entonces, la pregunta es cuáles son algunos proyectos amigables para principiantes que puede construir para practicar todo lo que ha aprendido… Hablemos de eso.
1. Una página de tributo
El sitio web más simple que puedes hacer como principiante es una página de tributo de alguien a quien admiras en tu vida. Solo 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, agregue la imagen y el nombre de la persona y, debajo, proporcione el diseño para el resto de los detalles. Puede usar párrafos, listas, enlaces, imágenes con CSS para darle un aspecto atractivo. Agregue un color de fondo y un estilo de fuente adecuados en su página web. La mayoría de las partes se pueden hacer usando HTML, pero para darle una mejor apariencia, use un poco de CSS. Tome la ayuda del enlace que figura a continuación.
2. Página web que incluye formulario
Los formularios son siempre una parte esencial de cualquier proyecto y trabajará con muchos formularios en la mayoría de las aplicaciones, así que ¿por qué no practicarlo antes y poner a prueba sus conocimientos? Una vez que se familiarice con el campo de entrada o las etiquetas básicas en HTML para crear un formulario, haga un proyecto usando todas esas etiquetas. Cómo usar un campo de texto, una casilla de verificación, un botón de radio, una fecha y otros elementos importantes en un solo formulario. Aprenderá cómo dar una estructura adecuada a una página web mientras crea un formulario. El conocimiento de HTML / HTML5 es lo suficientemente bueno, pero puede usar un poco de CSS para que el proyecto se vea mejor. Tome la ayuda de los enlaces que figuran a continuación.
3. Sitio web de paralaje
Un sitio web de paralaje incluye imágenes fijas en el fondo que puede mantener en su lugar y puede desplazarse hacia abajo en la página para ver diferentes partes de la imagen. Con conocimientos básicos de HTML y CSS, puedes darle un efecto de paralaje a un sitio web. El uso del efecto de paralaje en el diseño web es muy popular y le da una apariencia hermosa a la página web. Pruébelo y divida toda la página en tres o cuatro secciones diferentes. Establezca 3-4 imágenes de fondo, alinee el texto para diferentes secciones, establezca el margen y el relleno, agregue la posición de fondo y otros elementos y propiedades CSS para crear un efecto de paralaje. Puede obtener ayuda del enlace que figura a continuación.
4. Página de destino
Una página de destino es otro buen proyecto que puede hacer usando HTML y CSS, pero requiere un conocimiento sólido de estos dos componentes básicos. Utilizará mucha creatividad al hacer una página de destino. Practicará cómo agregar un pie de página y un encabezado, crear columnas, alinear elementos, dividir las secciones y muchas cosas más. Deberá usar CSS con cuidado teniendo en cuenta que los diferentes elementos no se superponen entre sí. También te encargarás de las combinaciones de colores, relleno, margen, espacio entre secciones, párrafos y cuadros. Las combinaciones de colores deben ir bien entre sí para diferentes secciones o fondos.
5. Sitio web del restaurante
Muestre su sólido conocimiento de HTML y CSS creando una hermosa página web para un restaurante. Hacer un diseño para un restaurante será un poco complicado que los ejemplos de proyectos anteriores. Alineará los diferentes alimentos y bebidas utilizando una cuadrícula de diseño CSS. Agregará precios, imágenes y deberá darle una apariencia hermosa y usar la combinación adecuada de colores, estilo de fuente e imágenes. Puede agregar una galería de imágenes para diferentes alimentos, también puede agregar imágenes deslizantes para una mejor apariencia. Agregue enlaces para redirigir a páginas internas. Hágalo receptivo configurando una ventana gráfica, usando consultas de medios y cuadrícula. Puede obtener ayuda del enlace que figura a continuación.
6. Una página web de evento o conferencia
Puede hacer una página estática que celebre un evento o una conferencia. Las personas interesadas en asistir a la conferencia crean un botón de registro para ellos. Mencione diferentes enlaces para el orador, el lugar y el horario en la parte superior de la sección del encabezado. Describa el propósito de la conferencia o la categoría de personas que pueden beneficiarse de esta conferencia. Agregue una introducción e imágenes del orador, los detalles del lugar y el objetivo principal de la conferencia en su página web. Divida la página en secciones, agregue un encabezado y pie de página que muestre el menú. Use un color de fondo adecuado que pueda combinarse bien entre sí para varias secciones. Elija un estilo de fuente descendente y un color de fuente que coincida con el tema de su página web. Requiere conocimientos profundos de HTML/HTML5 y CSS. Puede obtener ayuda del enlace que figura a continuación.
7. Página de la tienda de música
Si eres un amante de la música, puedes hacer una página web para ello. Requiere conocimientos de HTML5/ CSS3 . Agregue una imagen de fondo adecuada que describa el propósito o de qué se trata la página. En la sección de encabezado agregue diferentes menús. Agregue botones, enlaces, imágenes y alguna descripción sobre la colección de canciones disponibles. En la parte inferior menciona los enlaces de compras, tienda, carrera o datos de contacto. También puede agregar otras funciones en sus páginas web, como una opción de prueba, tarjetas de regalo o suscripción. Hágalo receptivo configurando la ventana gráfica o usando consultas de medios y cuadrícula. Puede obtener ayuda del enlace que figura a continuación.
8. Sitio de fotografía
Si tiene un conocimiento profundo de HTML5 y CSS3, puede crear un sitio de fotografía receptivo de una página. Use flexbox y consultas de medios para la capacidad de respuesta. Agregue el nombre de la empresa con una imagen (relacionada con la fotografía) en la parte superior (página de destino). Debajo de eso, muestre su trabajo agregando múltiples imágenes. Mencione el detalle 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 lo llevará directamente a la sección de imágenes. Debe cuidar el margen, el relleno, la combinación de colores, el tamaño de fuente, el estilo de fuente, el tamaño de la imagen y el estilo de un botón. Puede obtener ayuda del enlace que figura a continuación.
9. Portafolio personal
Con conocimientos de HTML5 y CSS3, también puedes crear tu portafolio. Muestra tus muestras de trabajo y habilidades en tu portafolio con tu nombre e imágenes. También puede agregar su CV allí y alojar su cartera completa en la cuenta de GitHub . En su sección de encabezado, mencione algunos menús como acerca de, contacto, trabajo o servicios. En la parte superior agrega una de tus imágenes y preséntate allí. Debajo de eso, agregue algunas muestras de trabajo y, por último (pie de página), agregue información de contacto o cuenta de redes sociales. Puede obtener ayuda de los enlaces que figuran a continuación.
10. Documentación técnica
Si tiene un poco de conocimiento de Javascript, puede crear una página web de documentación técnica. Requiere conocimientos de HTML, CSS y javascript básico. Divide toda la página web en dos secciones. El lado izquierdo crea un menú con todos los temas enumerados de arriba a abajo. En el lado derecho, debe 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 izquierda, debe cargar el contenido de la derecha. Para hacer clic, puede usar la opción de marcador javascript o CSS. No es necesario que lo haga demasiado elegante, solo dele un aspecto simple y decente, que se vea bien para la documentación técnica. Puede obtener ayuda de los enlaces que figuran a continuación.
Enlace útil: 10 consejos para un diseño web eficaz en 2019
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por anuupadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA