PROY71: Upgrade Plan

Upgrade Plan

• Ver el diseño óptimo según el tamaño de pantalla del dispositivo.

• Seleccionar y cambiar el método de pago.

Ideas para comenzar

1. Analiza: Analiza el diseño para saber cómo abordarás el proyecto. Este paso es crucial para ayudarte a pensar en el marcado HTML y las clases CSS.

2. Plantilla: Utiliza cualquiera de las plantillas que proporcionamos.

3. Git: Inicia el proyecto con Git. Este paso será muy útil para ayudarte a practicar los comandos básicos de Git.

4. HTML: Comience por el marcado HTML. Utilice las etiquetas que sean coherentes con el contenido.

5. CSS: De arriba hacia abajo, comience escribiendo los estilos base del proyecto, estilos generales, estilos reutilizables, etc.

6. Documenta: Agrega un archivo README.md al proyecto y describe tu experiencia con el desafío.

7. GitHub: Crea un repositorio en GitHub con el nombre del proyecto y enlaza para subir los archivos.

8. Despliega: Deja que el mundo sepa lo que has construido. Puedes utilizar un hosting gratuito como Netlify, Vercel, GitHub Pages.

9. Comparte: Envía tu solución a nuestro grupo de Facebook para que lo vea el resto de la comunidad.

10. Crea: Escribe un artículo en LinkedIn sobre este proyecto, estaremos encantados de leer y apoyarte.

Recursos del proyecto

• Upgrade Plan - Figma

• Plantilla: descargar proyecto

• Plantilla en línea: duplicar proyecto

Merriweather: (https://fonts.google.com/specimen/Merriweather)
IBM Plex Sans: (https://fonts.google.com/specimen/IBM+Plex+Sans)

body background: #EEEFF9
card background: #FFFFFF
paragraph: #090B2E
button background: #090B2E
paragraph: #FFFFFF
card gradient background: radial-gradient(#9B7FF8, #6570DA)

Your plan

Change plan

Offer includes first month free of charge

Premium Individual
$12/month
1 account
∙ Only $12 after 1 month trial
∙ You won’t be charged until Sep 16, 2021
∙ Cancel anytime

Select payment method
Credit or debit card
PayPal

Continue

Recursos adicionales

• Boxicons

• Boostrap Icons

• Heroicons

• Readme

• GitHub Profile README Generator

• LinkedIn

• Hashnode

• Medium

Ejemplos de código

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: grid;
    place-items: center;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: #fb98f3;
}

body {
    /* Sympathy */
    background: linear-gradient(to right, #5a5bf3, #91e7d9);
    /* Pacific */
    background: linear-gradient(to right, #8aedf6, #60a2f5);
    /* Butterfly */
    background: linear-gradient(to right, #edaef9, #81b1fa);
    /* Cryptic */
    background: linear-gradient(to right, #7ec9f5, #3957ed);
    /* Aqua */
    background: linear-gradient(to right, #65f4cd, #4799e9);
}

/* Mobile devices */
@media screen and (min-width: 375px) and (max-width: 480px) {
    /* Aquí los estilos */
}

/* iPads, Tablets */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Aquí los estilos */
}

/* Small screens, laptops */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Aquí los estilos */
}

/* Desktops, large screens */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Aquí los estilos */
}

<meta name="description" content="Breve descripción del contenido del proyecto">
<meta name="keywords" content="Palabra clave 1, Palabra clave 2, Palabra clave 3">
<meta name="title" content="Título del proyecto">
<meta name="author" content="Nombre del autor">

Tutoriales recomendados

• CSS Grid

• CSS Flexbox

• BEM Cheat Sheet

• Modelo de caja CSS

• Guía paso a paso: despliega un proyecto en Netlify

Referencias

• W3Schools

• UI Design Daily

• Frontend Mentor

Preguntas frecuentes

Hola Frontend Club,

Acabo de completar el proyecto #.

Mi solución:
Página web: https://profile-card.netlify.app/
Repositorio: https://github.com/01-day-profile-card.git

La mejor forma de escribir buen código es practicando todos los días⚡