Ejercicios de maquetación html y css
diseño html css
Dada la tabla en el código html en la pregunta, estilice la tabla para que las filas impares tengan un fondo gris claro Además y una fila de encabezado a la tabla y estilice esa fila para que tenga texto blanco y un color de fondo negro. Cambie el tipo de letra para que todas sean sans serif de 14 puntos de algún tipo.
Suponga que está trabajando en un sitio web de recetas. Las recetas tienen un título, una lista de ingredientes y una sección de instrucciones. Haz una página web que muestre la receta de sándwiches de queso a la plancha con bacon y tomate. Los ingredientes deben mostrarse como una lista desordenada, sin viñetas. Los ingredientes cárnicos deben tener un color de fondo rojo claro, las verduras deben tener un fondo verde claro, y los productos lácteos deben tener un color amarillo claro. El título debe estar en una fuente sans serif de su elección, y las instrucciones deben tener un título «Instrucciones» y la fuente de las instrucciones debe ser cursiva.
Usando CSS y HTML Haz una página web que tenga dos columnas. Cada columna debe utilizar la mitad del ancho de la página. La mitad izquierda debe tener un fondo gris claro y la mitad derecha debe tener un fondo verde claro. La mitad izquierda debe tener una lista de los 5 libros más vendidos en la tienda kindle de Amazon, y la derecha debe tener una lista de tus cinco celebridades o atletas favoritos.
proyectos html
Aprender a codificar es siempre emocionante y divertido para todos 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.
Inicialmente, 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 discutirlo.
proyectos html & css
En CodePen, lo que escribas en el editor HTML es lo que va dentro de las etiquetas <body> en una plantilla básica de HTML5. Así que no tienes acceso a elementos superiores como la etiqueta <html>. Si quieres añadir clases allí que puedan afectar a todo el documento, este es el lugar para hacerlo.
Es una práctica común aplicar CSS a una página que da estilo a los elementos para que sean consistentes en todos los navegadores. Ofrecemos dos de las opciones más populares: normalize.css y un reset. O bien, elija «Ninguno» y no se aplicará nada.
Cualquier URL añadida aquí será añadida como <link>s en orden, y antes del CSS en el editor. Si enlaza a otro Pen, incluirá el CSS de ese Pen. Si el preprocesador coincide, intentará combinarlos antes de procesarlos.
También puede enlazar a otro Pen aquí, y sacaremos el CSS de ese Pen y lo incluiremos. Si utiliza un preprocesador que coincide, combinaremos el código antes del preprocesamiento, por lo que puede utilizar el Pen vinculado como una verdadera dependencia.
ejercicios html
Basándose en la captura de pantalla, debería notar que los fondos de la cabecera, la navegación y el pie de página se extienden hasta los bordes de la página. Sin embargo, el área de contenido principal no lo hace. Esto indica que tendremos que utilizar algún tipo de técnica de maquetación para centrar la página y que los colores de fondo se extiendan hasta los bordes de la misma.
El quick-nav debería estar configurado para flotar a la izquierda. Las líneas se crean utilizando un borde derecho y luego anulando el borde derecho en el último elemento para establecerlo como ninguno. El espaciado es una cuestión de ajustar el margen y el relleno.
También querremos dar estilo a un estado hover para cuando el ratón se mueva por encima, así como añadir relleno para hacer los enlaces más grandes. Aplicaremos estos estilos al elemento a para que los propios enlaces sean más grandes. Tenemos que establecer el elemento a como bloque de visualización porque el valor por defecto es inline, que no funcionará correctamente con nuestro relleno.
Este enfoque no es el más eficaz en este caso por dos razones. La primera y más importante, es que inline-block siempre dejará una franja de espacio entre cada elemento. Debido a la forma en que queremos que el efecto hover funcione y la navegación se vea, esta franja de espacio siempre se verá mal. El segundo problema es que todas esas franjas de espacio suman una fracción de un porcentaje de nuestro ancho. Esto hace que nuestros 5 elementos no quepan en una línea. Podemos reducir el ancho a algo que quepa en una línea, pero nunca podremos hacer que nuestra navegación tenga exactamente el 100% de ancho.