You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
8 Hrs
22 Min
12 Seg

Detalles finales con HTML y CSS

14/27
Resources

How to fix design problems with CSS?

We have our website almost ready, but there are still some improvements and details we need to fine-tune. You may find that the proportions of certain elements are not presented correctly in all resolutions. In this case, we are going to work with CSS to keep our images within their desired proportions. I'll show you how easy it is to correct these stylistic needs to make your page look flawless.

How to adjust the width of containers?

It's frustrating when an image, which should be circular, turns into an oval when the screen is resized. This happens because CSS tries to automatically calculate the width of the elements involved. But there is a simple solution to correct it.

/* Here we adjust the width of the container by subtracting the width of the image.*/.information { width: calc(100% - 200px); /* Total width minus image width */} }

With this line of code in CSS, we use the calc() function to dynamically adjust the width of the container. The image will always be 200px wide, while the information container will adjust its size automatically, maintaining the proportion and preventing the image from losing its circular shape.

How to include links to social networks?

Adding links to your social networks can be essential to show your online presence in a professional way. It is a simple process that, at the same time, offers greater functionality to your personal portfolio. Here we explain, step by step, how to do it effectively.

<!-- Links to social networks with target to open in new tab --><a href="https://www.linkedin.com/in/tu-perfil-linkedin" target="_blank">LinkedIn</a><a href="https://github.com/tu-usuario-github" target="_blank">GitHub</a><a href="https://twitter.com/your-user-twitter" target="_blank">Twitter</a><a href="https://www.youtube.com/channel/tu-canal-youtube" target="_blank">YouTube</a><a href="https://platzi.com/p/tu-perfil-platzi" target="_blank">Platzi</a>

By using the target="_blank" attribute, you ensure that your links open in a new tab. However, keep in mind that the use of this attribute may slightly affect SEO, as Google tends to penalize links that open outside the original browser context. Nevertheless, its usefulness in improving the user's browsing experience justifies its use when done in moderation.

How to improve the user experience?

Good usability is crucial for our website to serve as our calling card. Remember that by providing a smooth and professional experience, your site will become a powerful tool to show who you are and what you can do.

  • Responsive Design: Although we are not implementing it now, consider making your design adaptable to different devices.
  • Visual Consistency: Make sure design elements are presented in a uniform way.
  • Take care of SEO: Check how search engines see your page, if necessary, adjust your link attributes.

With these steps, you will have finished a crucial part of your web portfolio! You can always use this web page to present yourself and your skills in different scenarios. Keep adjusting to the needs of the project and, above all, don't stop learning as you go along the web development path.

Contributions 22

Questions 5

Sort by:

Want to see more contributions, questions and answers from the community?

Hoy aprendí:

  • target: “_blank” → para hacer que un enlace abra una nueva pestaña. DIOS PORQUE GOOGLE LO BAJA EN SEO es literalmente la mejor opción para los links.
  • css calc() → para hacer cálculos y operaciones en css

Profesor, como analista SEO, le puedo decir que el target=_blank no es determinante para que Google nos baje el crawl budget.

Primer video que entiendo como usar correctamente la función de css calc() , excelente !

no sabía que existía calc()

  • La etiqueta targeten HTML se utiliza para especificar cómo se abrirá el enlace. El valor “_blank” se utiliza para indicar que el enlace debe abrirse en una nueva ventana del navegador.

  • El uso de target=_blank puede tener un impacto negativo en el “crawling budget” de un sitio web. El “crawling budget” se refiere al número de páginas que un motor de búsqueda puede rastrear e indexar en un sitio web dentro de un período de tiempo determinado. Si un sitio web tiene muchos enlaces con target=_blank, esto puede hacer que el motor de búsqueda tenga dificultades para rastrear todas las páginas del sitio, lo que puede tener un impacto negativo en la clasificación del sitio en los resultados de búsqueda.

  • Por otro lado, la propiedad calcen CSS se utiliza para realizar cálculos matemáticos en línea con los valores de las propiedades CSS. Esto permite crear diseños responsivos y dinámicos sin tener que depender de valores fijos.

la clase que estaba esperando para saber como solucionar que la foto se distorciones ,

Respecto a target: “_blank” y sus posibles problemas de seguridad y otras alternativas, recomiendo darle una leida a esta página (esta en ingles): https://www.searchenginejournal.com/blank-link-attribute/435883/

Este curso es tan específico y detallado, que me siento Dummie! jejeje

Yo ya tengo un poco de conocimiento en los temas mencionados y quise hacerlo un poco diferente, en los iconos tiene un :hover que al pasar sobre ellos toma el color de la red social y se agranda un poquito. ![]()![](https://static.platzi.com/media/user_upload/image-ae79915b-7bff-4a85-b151-1f60a6f69852.jpg)
Algo que aprendí recientemente! Cuando colocas el atributo target="\_blank" en un \, es recomendable colocar además un atributo de tipo rel="noopener" (o rel="noreferrer"). Por ejemplo: `Texto del enlace` Esto es porque cuando un enlace se abre en una nueva pestaña o ventana con target="\_blank", se crea un nuevo contexto de navegación y esa nueva pestaña puede tener acceso al objeto window del documento que la abrió, lo que se conoce como "window.opener" y podría ser utilizado para ataques de phishing o redirecciones maliciosas. Espero sirva el aporte! 💪🏻

tengo años trabajando en web y es la primera vez que me explican tan vien lo de calc() en CSS,
GROSSO!!!

GRACIAS POR ESTE VIDEO CRACK!!

He realizado todas las revisiones pertinentes de mi código y no entiendo por qué mi página tiene este texto en la parte superior. ![](https://static.platzi.com/media/user_upload/image-4f6b3c36-bc16-44c6-82fa-64583e525b79.jpg)![]()
hola estoy un poco trancado en los logos de las redes sociales, me descargue en diferentes tama;os y no cambia de tam;ao los logos como en la clase del profesor. ayuda gracias
Que buen profe!
Porque no se metió en el aspecto de responsive? TAT

Muy teso el profe 🤣 así afecte el SEO que no creo, mucho mejor abrir links en otras pestañas.

Excelente explicación edl uso de la función calc() en CSS.

Hola linda comunidad, por acá les dejo un buen video para practicar html y css https://www.youtube.com/watch?v=m5XE8-vh2bM

HTML es el lenguaje de marcado con el que rodeas contenido, para decirle a los navegadores acerca de los encabezados, listas, tablas, etc. CSS es el lenguaje de hoja de estilos con el cual estilas la página, para decirle a los navegadores que cambien el color, fuente, diseño y más.

Muy importante el comentario del espacio en calc() !!!

Gracias maestro