Explicaciones super claras, Buenísimo curso
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
To achieve an attractive visual experience, it is crucial to properly style the social media icons on your website. Here we will guide you step by step so you can achieve the desired style using HTML5 and CSS3, without getting complicated with other technologies. Let's make your site amazing!
The first step is to make sure that our page has enough visual space. For this, we apply a padding to the main
element:
main { padding: 100px;}
This spacing prevents the elements from looking too close together, especially important when checking the layout on mobile devices. This can be done by enabling device view in the Chrome browser.
A critical point when working with responsive design is to adjust the viewport
. Add this meta tag in the head
of your HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This setting ensures that the viewport width is equal to the device width and that the initial scale is 1, solving display issues on small screens.
To make your icons look organized and attractive, follow these steps:
Access the icons:
Make sure the class of the icons is correct for CSS. For example:
.social-icon { background: red; /* Temporarily for display */}
Use Flexbox for alignment:
We use display: flex
to align the icons side-by-side and center them:
.social-icons { display: flex; justify-content: center;}
Add spacing and styling:
Adjust the margins
and add border-radius
to enhance the presentation:
.social-icon { margin-left: 8px; display: flex; justify-content: center; align-items: center; padding: 15px; border-radius: 5px;}
To remove the dots that appear by default in ul
, and make sure that each link occupies its entire container:
.social-icons { list-style: none;}
.social-icons li { width: 100%; margin-left: 8px; /* Moved from element to */}
Using the specific IDs of each icon, apply the appropriate colors according to the social network:
#linkedin { background: #0077B0;}
#github { background: #23272D;}
#twitter { background: #1DA1F2;}
#youtube { background: #FF0000;}
#platzi { background: #121F3D;}
You've learned how to style your social icons with basic CSS techniques, using properties like flexbox
and adapting the layout for mobile. The whole transformation was achieved with HTML5
and CSS3
, proving that with a solid foundation and good practices you can create a professional and attractive website. Go ahead and continue exploring the potential of web design!
Contributions 25
Questions 14
Explicaciones super claras, Buenísimo curso
Para iniciar e incluso para afianzar conocimientos está muy buena la explicación.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Live color picker Con esta extensión se les facilita saber el color de algún elemento, yo la uso en Chrome
Increíble lo sencillo que es crear una primera página de presentación! 😄
Muy bueno el curso, seria bueno que dejaran los archivos e imagenes en recursos para poder trabajar el ejercicio con mayor facilidad, pero igualmente esta muy bien explicado
Muy bueno el curso, puede uno pensar que se pasa de básico la explicación, pero es necesario. Incluso para repasar explicaciones.
justify-content
: Es una propiedad de CSS que se utiliza para alinear y distribuir elementos dentro de un contenedor en el eje horizontal. Permite alinear los elementos al inicio, al final, al centro, distribuirlos uniformemente o separarlos por igual.align-items
: Es una propiedad de CSS que se utiliza para alinear elementos dentro de un contenedor en el eje vertical. Permite alinear los elementos al inicio, al final, al centro o distribuirlos uniformemente.list-style
: Es una propiedad de CSS que se utiliza para establecer la apariencia de las viñetas o numeración de una lista. Permite definir el tipo de viñeta o numeración, su posición y su imagen de fondo.creo entender lo que sucede, fijate en CSS en el apartado de este video cambiamos el estilo de
> main .social-icons li {
width: 100% ;
height: 100% ;
}
y esto hace que el ancho de las imagenes se coloquen respecto al ancho del texto que tenemos arriba que tambien esta dentro de main y de P
Intenta cambiar a
main .social-icons img {
width: 100% ;
height: 100% ;
}
notaras que las imagenes se acomodan correspondiente al tamaño original que tienen, intenta cambiarle
width: 20px y height: 20px
Excelente Clase. Muy buena introducción a la creación web.
Les recomiendo este sitio para buscar iconos
El profesor explica tan sencillo que entendí mejor que en el de programación básica.
Genial!
<
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
>
Llevo tomando varias clases de varios temas, pero encontre esta clase que me intereso y con este profesor no me quedo ninguna duda, todo le entendi, explica muy bien y lleva el hilo conversacional de la clase perfectamente
ME GUSTO EL RESULTADO!! ya esta casi terminado, con solo dos lenguajes la verdad es que si se hace un buen avance jeje
Excelente, a pesar de ser un curso introductorio las clases son buenísimas. Creo que Carlos debería dictar los cursos de Celis.
Acá pueden encontrar una guía para profundizar en flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Excelente profesor explica paso a paso y no deja nada en el aire y hasta lo más obvio lo explica uno de los mejores super recomendado
Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que solo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su ubicación con respecto a su ubicación actual). También puede situar etiquetas div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al estándar web actual).
Want to see more contributions, questions and answers from the community?