Introducción

1

Creación de Páginas Web: HTML, CSS y Publicación Online

2

Desarrollo Frontend: HTML, CSS y JavaScript Básico

3

Fundamentos del Backend: Lenguajes, Bases de Datos e Infraestructura

Sitios Code con HTML y CSS

4

Fundamentos de HTML: Uso y Creación de Etiquetas Básicas

5

Escribir y estructurar tu primera página web con HTML

6

Construcción de un Portafolio con HTML y CSS

7

Maquetación de Iconos Sociales en HTML para Desarrolladores

8

Fundamentos de CSS: Selectores y Propiedades Esenciales

9

Escritura y Enlace de CSS en Proyectos HTML Básicos

10

Estilización de un Portafolio con CSS: Creación de un Header Atractivo

11

Superposición de Elementos en CSS: Técnicas y Ejemplos Prácticos

12

Estilización avanzada con CSS: Flexbox y transformaciones

13

Estilización de Iconos Sociales en CSS3 y HTML5

14

Optimización de CSS y Enlaces en HTML para Portafolios Web

Despliega tu página a internet

15

Cómo subir tu página web a Internet paso a paso

16

Despliegue de Sitios Web Gratis con Netlify

17

Compra y configuración de un dominio personalizado en Namecheap

18

Compra y configuración de hosting web compartido con HostGator

Sitios No-code con WordPress

19

Creación de Sitios Web sin Código con WordPress

20

Instalación de WordPress en hosting propio

21

Instalación y configuración de Elementor en WordPress

22

Creación de una Página Web desde Cero con Elementor

23

Maquetación de Héroes con Elementor para Páginas Web

24

Creación de Páginas Web con WordPress y Plantillas Prediseñadas

Conclusiones

25

Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas

26

Desarrollo Web Básico: HTML, CSS y WordPress

27

Obtención del Diploma en Desarrollo Web Profesional

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilización de un Portafolio con CSS: Creación de un Header Atractivo

10/27
Recursos

¿Cómo estilizar un portafolio con CSS?

Con la creación de un portafolio, no solo muestras tus logros y habilidades, sino que también demuestras tu destreza en el diseño web. En esta guía, te proporcionamos un enfoque para estilizar tu portafolio usando CSS, aprovechando conceptos de padding, márgenes y estilos generales que harán tu portafolio atractivo y profesional. ¡Empecemos!

¿Cómo definir una fuente para tu web?

Elegir la fuente correcta puede cambiar completamente la apariencia de tu página web. A continuación, te mostramos cómo establecer la fuente de tu página desde el CSS:

body {
  font-family: Arial, 'Helvetica Neue', sans-serif;
}

En este ejemplo, el navegador intentará usar primero la fuente Arial. Si no está disponible, intentará con Helvetica Neue y, si tampoco la encuentra, utilizará cualquier tipo sans-serif disponible.

¿Por qué organizar estilos por secciones?

Organizar tus estilos en secciones usando comentarios no solo favorece la legibilidad, sino que también facilita futuras modificaciones. Aquí hay un ejemplo de un comentario en CSS:

/* Estilos generales */

Estos comentarios te permiten identificar rápidamente partes específicas de tu código.

¿Cómo estilizar el header de tu portafolio?

El header es la primera impresión que los usuarios tendrán de tu portafolio. Aquí te mostramos cómo darle un estilo profesional:

  1. Definir el fondo y el padding:

    Elija un color de fondo adecuado y aplique un padding entre tus elementos.

    header {
      background-color: #1F1F1F;
      padding: 10px 50px;
    }
    

    Con el padding, ajustamos el espacio interior: 10 píxeles arriba y abajo, y 50 píxeles a los lados.

  2. Imágenes redondas:

    Para hacer que las imágenes (como el logo) sean redondeadas:

    #logo img {
      width: 100%;
      border-radius: 100%;
      border: 2px solid #fff;
    }
    

    Asegúrate de que el border-radius sea del 100% para obtener un círculo perfecto. El border agrega un borde blanco de 2 píxeles alrededor de la imagen.

¿Cómo manejar el tamaño de las imágenes?

Las imágenes a menudo requieren ajustes para que se integren correctamente en tu diseño. Aquí hacemos que ocupen el 100% de su contenedor padre:

.imagen-container img {
  width: 100%;
}

Definimos el tamaño de las imágenes según su contenedor; esto las mantiene responsivas y manejables.

Consejos prácticos para CSS

  • Usar flexbox para facilitar el diseño: Al aplicar display: flex a tus contenedores, puedes manejar el posicionamiento de los elementos de manera más dinámica y eficiente.
  • Comentarios para la organización: Usa comentarios para seccionar y documentar tu CSS; facilita la lectura y el mantenimiento del código.
  • Colores con códigos hexadecimales: Son precisos y standard en el diseño web. Explora la paleta de colores y selecciona los adecuados para tu tema.

Motivación para seguir explorando CSS

Con solo unas pocas líneas de CSS, has aprendido a darle vida a tu portafolio. Sigue explorando y experimentando con nuevas propiedades y técnicas de CSS, como la posición, transiciones, o animaciones. La clave es seguir practicando y mejorando tu enfoque de diseño web. ¡Adelante y sigue creando interfaces impresionantes!

Aportes 38

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Excelente profesor, te explica todo de una manera muy sencilla.

Creo que en realidad este debe ser el primer curso, el principio de la programación, muy bien explicado todo de manera práctica y sencilla.

Para quienes usan visual studio code, pueden ingresar un comentario de forma rápida con el siguiente atajo

ctrl + }

(control + llave de cierre, ubicada a la izquierda de la tecla enter)

Solo deben colocarse en la línea o seleccionar el texto que desean comentar y presionar esa combinación de teclas.

Desconozco como sea en Mac pero imagino que será similar

command + }

Excelente la forma de explicar ciertos detalles de CSS

Me encantan estas clases, están bien explicadas y de manera sencilla nwn

  • font-family: Esta propiedad se utiliza para establecer el tipo de fuente que se utilizará en un elemento. Por ejemplo, si queremos que el texto de un párrafo se muestre en la fuente Arial, podemos utilizar la siguiente regla CSS: p { font-family: Arial; }.
  • display: Esta propiedad se utiliza para controlar cómo se muestra un elemento en la página. Hay varios valores posibles, como block, inline, inline-block, flex, grid, etc. Cada uno de estos valores determina cómo se posiciona el elemento y cómo interactúa con otros elementos. Por ejemplo, si queremos que un elemento se muestre como un bloque (es decir, que ocupe todo el ancho disponible), podemos utilizar la siguiente regla CSS: div { display: block; }.
  • border-radius: Esta propiedad se utiliza para establecer el radio de los bordes de un elemento. Por ejemplo, si queremos que un cuadro tenga bordes redondeados, podemos utilizar la siguiente regla CSS: div { border-radius: 10px; }.
  • border: Esta propiedad se utiliza para establecer el estilo, ancho y color de los bordes de un elemento. Por ejemplo, si queremos que un cuadro tenga un borde sólido de 1 píxel de ancho y de color rojo, podemos utilizar la siguiente regla CSS: div { border: 1px solid red; }.
  • Selector “.” (clase): Los selectores de clase se utilizan para aplicar estilos a elementos que tienen una clase específica en el código HTML. Para seleccionar un elemento por clase en CSS, debemos utilizar un punto (.) seguido del nombre de la clase. Por ejemplo, si queremos aplicar un estilo a todos los elementos que tienen la clase “destacado”, podemos utilizar la siguiente regla CSS: .destacado { color: red; }.

Es agradable la manera como enseña el profe Carlos, un gran ser humano trabajando en Platzi.

como me quedo? :3

algo asi quedaria las especificaciones para editar el logo :

Este profesor es muy bueno la verdad te explica de una forma universal para que cualquier persona que no sepa nada de estas tecnologias entienda.

Me gusta como todo va tomando forma ✨

Que buen profesor! Quiero ser tu discípulo…

![](https://static.platzi.com/media/user_upload/image-c16c1f4b-11e1-4f84-a1c8-6b75b7f0939b.jpg)```js m ```mi logo sigue cuadrado :( en la pestaña de scc header y img se ponen en amarillo y no en azul :( no se si eso influya y tampoc se por que pasa

Así quedaría mi header:

Tus clases son lo máximo. Fácil de entender y muy divertidas.

top de profesor, practico y carismatico.

configuracion del header y logo, medidas colores.

Me pareció fácil hacer el header claro que no es algo complicado, pero ¡Que emoción! =D, voy entendiendo bien y todo gracias a la explicación del profe =)

Las ventajas de utilizar las Hojas de Estilo en Cascada son numerosas, y te las diré a continuación:

  • la posibilidad de hacer modificaciones visuales en un solo lugar (sin tener que editar todos los documentos HTML por separado);
  • la facilidad de organizar y hacer cambios;
  • el permitir que las páginas descarguen con mayor rapidez;
  • mediante la separación se mejora la accesibilidad y escaneabilidad del contenido;
  • la simplicidad para crear versiones dependiendo de los dispositivos (tablets, teléfonos inteligentes o dispositivos móviles, entre otros), etc.

A pesar de que el uso de CSS no parezca tan importante ¡sí lo es! Su ejecución te permite mejorar tus técnicas SEO y de posicionamiento lo que es crucial para una estrategia de Marketing Digital.

Excelente Muchas Gracias profe

La clase se centra en cómo estilizar un menú utilizando HTML y CSS. Se explican conceptos clave como `font-family`, `padding` y `margin`, además de cómo aplicar colores usando códigos hexadecimal. Se detalla el proceso de creación de un header, donde se utiliza el `display flex` para organizar imágenes y aplicar estilos como `border-radius` para darle un aspecto circular a un logo. Se destacan las propiedades CSS y su importancia en la creación de un diseño web atractivo y profesional.
Muy buen profesor! se entiende muy bien y no es aburrido!
mi logo sigue cuadrado :( no se por que
muy mal catedratico confunde mucho y no profundiza

muy buena explicacion

un atajo para poner comentarios es:
ctrl + }

alguien me explica como es un guion medio raro

Excelente clase, se hace entender muy genial el profe.

.

Me siento un ingeniero de google! 😎

Retax Master es uno de los mejorers profesores que he tenido, greacias a todo el team platzi!!

¡Retax sos el mejor!
Me has aclarado muchas dudas que tenía y tu manera de explicar es genial lml

Me pierdo en a estructura y la logica para lograr hacer lo que se hace, no me queda claro, seguire avanzando y practicando

¡Gracias!
¡La explicación fue muy clara!

@retax
Eres lo máximo.

excelente explicación!

Excelente explicación.