Detalles finales con HTML y CSS

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.