Excelente profesor, te explica todo de una manera muy sencilla.
Introducción
Creación de Páginas Web: HTML, CSS y Publicación Online
Desarrollo Frontend: HTML, CSS y JavaScript Básico
Fundamentos del Backend: Lenguajes, Bases de Datos e Infraestructura
Sitios Code con HTML y CSS
Fundamentos de HTML: Uso y Creación de Etiquetas Básicas
Escribir y estructurar tu primera página web con HTML
Construcción de un Portafolio con HTML y CSS
Maquetación de Iconos Sociales en HTML para Desarrolladores
Fundamentos de CSS: Selectores y Propiedades Esenciales
Escritura y Enlace de CSS en Proyectos HTML Básicos
Estilización de un Portafolio con CSS: Creación de un Header Atractivo
Superposición de Elementos en CSS: Técnicas y Ejemplos Prácticos
Estilización avanzada con CSS: Flexbox y transformaciones
Estilización de Iconos Sociales en CSS3 y HTML5
Optimización de CSS y Enlaces en HTML para Portafolios Web
Despliega tu página a internet
Cómo subir tu página web a Internet paso a paso
Despliegue de Sitios Web Gratis con Netlify
Compra y configuración de un dominio personalizado en Namecheap
Compra y configuración de hosting web compartido con HostGator
Sitios No-code con WordPress
Creación de Sitios Web sin Código con WordPress
Instalación de WordPress en hosting propio
Instalación y configuración de Elementor en WordPress
Creación de una Página Web desde Cero con Elementor
Maquetación de Héroes con Elementor para Páginas Web
Creación de Páginas Web con WordPress y Plantillas Prediseñadas
Conclusiones
Análisis de Proyectos Estudiantiles para Mejorar tus Iniciativas
Desarrollo Web Básico: HTML, CSS y WordPress
Obtención del Diploma en Desarrollo Web Profesional
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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!
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.
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.
El header
es la primera impresión que los usuarios tendrán de tu portafolio. Aquí te mostramos cómo darle un estilo profesional:
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.
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.
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.
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.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
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; }
..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…
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:
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?