PROY13: Social Proof Section

[PROY13: Social Proof Section] construido con HTML, CSS para mejorar nuestras habilidades de codificación. Este proyecto es el decimo tercer de los desafios #100daysofprojects promovido por Frontend Club.

Tabla de contenidos

• Descripcion
  • El desafio
  • Capturas
  • Enlaces
• Flujo de trabajo
  • Desarrollo
  • Recursos
• Agradecimientos
• Contacto
• Licencia

Descripcion

El desafio

Crear una sección de prueba social, usando HTML y CSS; y lograr que se parezca lo más posible al diseño.

Los usuarios deberían poder:

1. Ver un diseño óptimo en pantallas grandes(1200px) y pequeñas(375px).

Importante:

1. Agrega icono favicon al proyecto.
2. Agrega una URL fácil de recordar (ej. social-proof-section).
3. Agrega un título al proyecto (ej. Social Proof Section - Frontend Club).
4. Bonus: Agrega un archivo README.md al proyecto.

Capturas

Enlaces

• Proyecto
• Repositorio

Flujo de trabajo

Desarrollo

Estructura del proyecto

/
📂
├── 📂css/
│ └── normalize.css
│ └── styles.css
├── 📂fonts/
│ └── LeagueSpartan-VariableFont_wght.ttf
├── 📂images/
│   └── bg-pattern-bottom-desktop.svg
│   └── bg-pattern-bottom-mobile.svg
│   └── bg-pattern-top-desktop.svg
│   └── bg-pattern-top-mobile.svg
│   └── favicon-32x32.png
│   └── icon-star.svg
│   └── image-anne.jpg
│   └── image-colton.jpg
│   └── image-irene.jpg
│   └── logo.webp
│   └── mockup.webp
│   └── scrrenshoot.webp
└── .gitignore
└── index.html
└── LICENSE
└── README.md

Tecnologías

1. HTML Semántico
2. Estilos CSS
3. Git y GitHub
4. Netlify

Flujo de desarrollo

1. Análisis del diseño
2. Configuración inicial
   • Vincular archivos y librerías
   • Iniciar proyecto con Git
3. Marcado HTML
   • Estructura semántica
   • Atributos accesibles
   • Enlaces y rutas
4. Estilos CSS
   • De arriba hacia abajo
   • Estilos reutilizables
   • Estilos personalizados
5. Flujo de trabajo mobile-first

Fragmentos de codigo

Etiquetas meta para el SEO.

<meta name="author" content="Larry Villegas Costas" />
<meta
  name="title"
  content="PROY13: Social Proof Section - Larry Villegas Costas - Frontend Club"
/>
<meta
  name="description"
  content="PROY13: Social Proof Section - Larry Villegas Costas - Frontend Club"
/>
<meta property="og:title" content="Social Proof Section - Frontend Club" />
<meta
  property="og:description"
  content="Design of a social proof section with html and css for Frontend Club"
/>
<meta property="og:image" content="https://social-proof-section-larry.netlify.app/images/mockup.webp" />
<meta property="og:url" content="https://social-proof-section-larry.netlify.app/" />
<meta property="og:type" content="web" />
<meta property="og:site_name" content="Social Proof Section" />
<meta property="og:locale" content="en" />
<title>Social Proof Section - Frontend Club</title>

Recursos

Comparte los recursos que hayas utilizado para completar este proyecto.

1. Frontend Club - Comunidad de desarrollo web
2. Netlify - Plataforma de alojamiento web
3. Multi Device Website Mockup Generator - Generador de maquetas
4. SVGOMG - Optimizador de SVG
5. Squoosh - Optimizador de imágenes
6. Shots - Capturas de pantalla
7. Google Fonts - Fuentes gratuitas

Agradecimientos

• Mi familia que siempre me apoya en mis proyectos
• Mi streeamer favorito que me inspira a seguir adelante @midudev

Contacto

• LinkedIn
• Facebook
• GitHub
• Correo
• Twitter
• Portfolio

Licencia

Este proyecto está bajo la Licencia (MIT) - mira el archivo LICENSE para detalles

No dudes en contactarme si crees que te puedo ayudar en algún proyecto o tienes un trabajo para mi.