PROY82: Joinlist Landing Page

Landing Page Subscribe

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

• Mostrar un mensaje de error:
• Si el campo está vacío al hacer clic en el botón
• Si el formato del correo no es válido

• Ver un estado hover sobre los botones.

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. Puedes agregarnos como colaboradores para ayudarte a completar el artículo.

Recursos del proyecto

• Joinlist Landing Page - Figma

• Plantilla: descargar proyecto

• Plantilla en línea: duplicar proyecto

Mulish: (https://fonts.google.com/specimen/Mulish)

main background: #FFFFFF
joinlist background: #0F0F2B
button background: #3F9CCF
paragraph: #0F0F2B

Home - Courses - Blog

Web development courses
Learn to code with an easy to understand, project based learning path
Browse courses

Join the Traversy Media mailing list
Sign up to the newsletter and be the first one to know about new courses or special offers.

Enter your email - Subscribe

We won’t spam. Pinky promise!

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="author" content="Nombre del autor">
<meta name="title" content="Título del proyecto">
<meta name="description" content="Breve descripción del contenido del proyecto">

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

🧑‍🚀”La mejor manera de aprender a programar es practicando todos los días”.