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
Introducción
Cómo se crean las páginas web
¿Qué es el Frontend?
¿Qué es el Backend?
Sitios Code con HTML y CSS
¿Qué debo saber de HTML?
Mi primera página web con HTML
Maquetando el hero
Maquetando la sección de redes sociales
¿Qué debo saber de CSS?
Mis primeros estilos con CSS
Estilos del menú
Estilizando el Hero: elementos encima imágenes
Estilizando el Hero: información del hero
Estilos para las imágenes de redes sociales
Detalles finales con HTML y CSS
Despliega tu página a internet
Cómo hacer deploy a internet
Cómo publicar tu página web gratis en internet
Compra el dominio de tu página web
Cómo comprar un hosting para mi página web
Sitios No-code con WordPress
Qué es no-code
Despliega tu página web con WordPress
Instalación y configuración de Elementor
Mi primera página web con Elementor
Maquetando el hero con Elementor
Mi primera página web con una plantilla de WordPress
Conclusiones
¡Conoce otros proyectos de este curso!
Próximos pasos para convertirte en Web Developer
Comparte tu proyecto del curso
You don't have access to this class
Keep learning! Join and start boosting your career
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.
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.
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.
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.
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
Hoy aprendí:
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 target
en 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 calc
en 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
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!!
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
Want to see more contributions, questions and answers from the community?