El objetivo de esta web era conseguir un diseño que me representara
como diseñadora web. Para ello lo primero hice fue crear un menú en la
parte superior de la página utilizando las etiquetas <nav< y
<ul>. Cada botón está enlazado a la página correspondiente
gracias a la etiqueta <href>. He incluido dos imágenes que
representa mi identidad usando la etiqueta <img>.
Para que la web fuese atractiva decidí utilizar la combinación de
tipografías modernas de Google Fonts, como Poppins y Ysabeau Office.
Utilice una paleta de colores sobria, para asegurar que el diseño se
viese limpio.
Conseguí estructurar la página empleando flexbox, lo que me permitió
alinear y distribuir las cajas. Los elemento fueron ordenados y
separados mediante la utilizacion de etiquetas como <nav>,
<div>, <img>, <ul>, <li> y <h1>.
02 Personaje
El objetivo de esta segunda página era presentar y detallar la
biografia de un personaje importante para la historia de la
informática. Para mi, el reto fue conseguir posicionar las imágenes y
el texto de manera estética sin sobrecargar la pantalla, lograr
adjuntar el vídeo de manera que se pudiese ver dentro de la web sin
necesidad de utilizar un link que redirija a youtube y lograr que el
display trabajase de la manera que esperaba.
Para solucionarlo utilice las siguientes herramientas:
- Utilicé display flex en las clases contenedor-proyecto y
contenedor-proyecto1 para organizar las imágenes y textos en
horizontal.
- Para adjunta el vídeo utilicé la etiqueta <iframe> y
<allowfullscreen> para permitir la reproducción a pantalla
completa.
- Márgenes y paddings para añadir espacio entre las imágenes y el
texto.
03 Portal empresarial
En esta página, el objetivo ha sido crear un portal de presentación
empresarial, donde figuren 2 valores principales donde además, sea
también una web adaptable para dispositivos menores de 680px.
De los retos en esta ocasión, figuran el hecho de implementar un diseño
que se vea correctamente tanto en pantallas mayores como menores a 680
px, usar la propiedad float para lograr la disposición adecuada de
texto e imágenes, y lograr que el orden de los elementos sea armonioso
y fácil de leer.
La solución de esto ha sido empleando herramientas como:
- Float left, para que las imágenes estén alineadas a la izquierda
permitiendo que el texto se posicione a su lado de manera ordenada.
- Margins para separar las imágenes del texto.
- Repetir código para conseguir que fuese responsive y tuviese buena imágen a pantalla completa.
04 Precios
En esta web lo que se busca es representar diferentes planes de
precios para un producto, de manera que la página sea adaptable para
diferentes dispositivos.
De los retos que se presentaron puedo destacar algunos como, el hecho
de conseguir que el comportamiento de las 3 cajas fuese igual
utilizando flexbox, lograr una web responsive adaptable, además de
tambien elegir tipografías, colores y distribuir los espacios para que
sean agradables visualmente.
Logré adaptar el comportamiento de las cajas empleandopropiedades como
display flex, y justify-content para distribuir los elementos de
manera ordenada. En el caso de convertirla en una web responsive
implementé el media queries para cambiar la disposición de los
elementos en pantallas menores de 1250 px.