Maquetando un Clon de Twitter - tercera sesión, 6 de mayo

#PlatziChallenge: Crea tu Portafolio como Web Developer

Fase 1: HTML y CSS

Inicio del reto - primera sesión, 2 de mayo

Maquetación del portafolio - segunda sesión, 6 de mayo

Maquetando un Clon de Twitter - tercera sesión, 9 de mayo

Responsive Design - cuarta sesión, 13 de mayo

Maquetando un Clon de YouTube - quinta sesión, 16 de mayo

Clon de YouTube: listas de videos - sexta sesión, 20 de mayo

Fase 2: JavaScript

Métele JavaScript a tu Portafolio - séptima sesión, 23 de mayo

Manipulación del DOM - octava sesión, 27 de mayo

Clon de Wordle - novena sesión, 30 de mayo

Victoria de jugadores en Wordle - décima sesión, 3 de junio

Consumiendo la PokeAPI - sesión 11, 6 de junio

Corrigiendo bugs de la pokedex - 10 de junio

Últimos detalles de la Pokedex - cierre de la segunda fase

Fase 3: React.js

Inicio de proyectos con React.js - Tercera fase

Creando el contexto de nuestra aplicación en React

Fixeando bugs y agregando el mapa

Setup con Webpack para el Chat en Tiempo Real con React.js

Configurando Socket.io en frontend y backend

Maquetando nuestra galería de fotos con React.js

Backend y conexión con Cloudinary

Corrigiendo Bugs y agregando mejoras al chat con React.js

Desplegando los proyectos - Fin del challenge

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan Diaz

hace 3 años

Aca les dejo el repo de la clase para que puedan hacer el fork en Github:

Twitter Clone

Misael Gomez

hace 3 años

Si les es de utilidad les comparto una página donde pueden sacar la g de google, pueden solo copiar el link de la direccion de la imagen y ya, la saque de esta página
https://www.flaticon.es/resultados?word=google
Nota: es una página donde pueden sacar varios iconos

Janet Torres

hace 2 años

Les dejo aquí el código que tiene que insertar en el head para tener acceso a los íconos gratis de Font Awesome …Activen la pestañita FREE que está en el costado izquierdo.

    <script src="https://kit.fontawesome.com/af0bf7190a.js" crossorigin="anonymous"></script>

diego gomez

hace 3 años

para lo de los 3 puntos (…) en el elemento de texto que es más grande al cajón en donde vive, podemos utilizar overflow: hidden; y white-space: nowrap;" para determinar el desbordamiento de un texto superior a su contenedor , y luego con “text-overflow: ellipsis;” le ponemos los 3 puntos (…) a un texto superior al cajón donde vive. Así lo resolví yo y espero les sirva

Victor Manuel Carreño Peña

hace 3 años

Aquí dejo las fuentes originales de Twitter por si deseean utilizarlas en su CSS:

@font-face {
  font-family: TwitterChirpExtendedHeavy;
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-regular-web.woff) format('woff');
  font-weight: 400;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-medium-web.woff) format('woff');
  font-weight: 500;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-bold-web.woff) format('woff');
  font-weight: 700;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff2) format('woff2');
  src: url(https://abs.twimg.com/fonts/v2/chirp-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}

JoaoGarduno

hace 2 años

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="./src/css/base.css">
    <link rel="stylesheet" href="./src/css/index.css">
     <!-- FONTS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"></script>    -->
     <!-- <script src="https://kit.fontawesome.com/3a08761389.js" crossorigin="anonymous"></script> -->
     <!-- <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> -->
    <title>Twitter</title>
</head>
<body>

    <header class="header">
        <span class="header--icon"><i class="fa-brands fa-twitter"></i></span>
    </header>

    <main class="main">
        

        <div>
            <div class="main--titles">
                <h1 class="titles--title">lo que esta pasando ahora</h1>
                <h2 class="titles--title">unete a twitter hoy mismo.</h2>
            </div>

            <div class="main--buttons">
                <button class="main--button main--button__white">
                    <span><i class="fa-brands fa-google"></i></span> registrate con google
                </button>
                <button class="main--button main--button__white">
                    <span><i class="fa-brands fa-apple"></i></span> registrate con apple
                </button>
                <div class="main--division">
                    <span>o</span>
                </div>
                <button class="main--button main--button__blue">registrate con el numero de telefono</button>
                <p class="main--text">al registrarte, aceptas <a class="text--link" href="#">Terminos y Servicios</a> de uso de cookies</p>
            </div>
    
            <div>
                <h3>¿ya tienes cuenta?</h3>
                <button class="main--button main--button__white main--button__white-blue">iniciar sesion</button>
            </div>
        </div>

        <div class="main--background">
            <span class="header--icon header--icon__white"><i class="fa-brands fa-twitter"></i></span>
        </div>
        
    </main>
    <footer class="footer">
        <ul class="footer--list">
            <li class="list--item"><a href="">acerca de</a>   </li>
            <li><a href="">centro de ayuda</a></li>
            <li><a href="">condiciones de servicio</a></li>
        </ul>
    </footer>

</body>
</html>

Nelson Ezequiel Del Valle Chirinos Cepeda

hace 2 años

Hola a todos, aqui les dejo el link de la imagen de fondo de twitter https://abs.twimg.com/sticky/illustrations/lohp_1302x955.png

Diego Toro Cárdenas

hace 2 años

Sabes qué… he clonado el clon de don Leo.

Fui al comentario de Juan Diaz y seguí el enlace.
Luego en mi consola creé la branch cloneTwitter siguiendo con la instrucción git clone [email protected]:LeoCode0/PlatziChallenge-portafolio-2.git para después escribir el comando git push --set-upstream origin cloneTwitter y ya esta.

¿quieres ver? Pues mira

Y no es por darme de mero mero, pero a diferencia del profe. Yo utilizo Debian 😛