Cursos Empresas Blog Live Conf Eventos Precios

0:0063:40

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

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 2 / 22

Ver clases

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

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 2 de 22

Clase 2 / 22

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

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 2 / 22

Ver clases

Joao Ivan Garduño Salgado

Hace 4 años

Asi vamos

<!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">
    <meta name="description" content="This a Challenge of New Portfolio">
    <meta name="author" content="Joao Garduño">
    <!-- 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"> 
    <!-- ICONS -->
    <script src="https://kit.fontawesome.com/3a08761389.js" crossorigin="anonymous"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="./css/style.css">
    <title>New Portfolio | Platzi Challenge</title>
</head>
<body>
    <header class="header">
        <img src="https://drive.google.com/file/d/1CW7XTQsOZ9OgSFXUp_6FiNUQuWvEA91i/view?usp=sharing" alt="Logo_Image">
        <a href="./index.html">home</a>
        <nav class="header__nav">
            <ul class="header__nav--ul">
                <li class="header__nav--li">
                    <a href="./contact.html">Contact</a>
                </li>
                <li class="header__nav--li">
                    <a href="./blog.html">Blog</a>
                </li>
                <li class="header__nav--li">
                    <a href="./project.html">Proyectos</a>
                </li>
                <li class="header__nav--li">
                    <a href="./about.html">Sobre mi</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main">
        <div class="main--container">

            <!-- IMG -->
            <div class="img-container">
                <img class="main--img" src="https://picsum.photos/200" alt="My_picture_of_my_Profile">
            </div>


            <!--  -->
            <div class="main--info">
                <h2 class="info--name">Joao Garduño</h3>
                <p class="info--description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quas omnis deserunt, eaque tempore hic alias id dicta recusandae temporibus ratione ducimus fugit a veritatis illo corrupti numquam. Fuga, rerum.</p>
                <div class="main--links">
                    <a class="main--link main--link__salmon" href="./contact.html">contacto</a>
                    <a class="main--link main--link__transparent" href="./about.html">acerca de</a>
                </div>
                <div class="main--social-media">
                    <h4>sigueme en </h4>
                    <ul>
                        <li>
                            <a href=""><i class="fa-brands fa-twitter"></i></a>
                            <a href=""><i class="fa-brands fa-instagram"></i></a>
                            <a href=""><i class="fa-brands fa-twitter"></i></a>
                        </li>
                        <!-- <li>LinkedIn</li>
                        <li>Instagram</li> -->
                    </ul>
                </div>
            </div>
        </div>
        <ul>
            <li>
                <img src="" alt="ReactJS_Images">
                <p>ReactJS</p>
            </li>
            <li>
                <img src="" alt="CSS_Images">
                <p>CSS</p>
            </li>
            <li>
                <img src="" alt="HTML_Images">
                <p>HTML</p>
            </li>
            <li>
                <img src="" alt="JavaScript_Images">
                <p>JavaScript</p>
            </li>
        </ul>
        <footer>
            All the rights are reserver
        </footer>
    </main>
</body>
</html>

Comentarios (16)16 comentarios

Andrés Hernández Morales

Hace 5 años

Personalmente, pienso que muchos de los que vengan de los cursos hechos por el profesor Diego de Granda se van a confundir mucho por el mismo hecho de que no se comparten las mismas buenas prácticas manifestadas en sus clases. El error clave en estas clases es el no haber fomentado un HTML semántico apropiado o siquiera semejante a los cursos sugeridos, ni tampoco un CSS no acorde en su mínima totalidad a las prácticas diferenciales entre relatividad y absolutidad. Toda la base que se argumenta como "customizable" en el proyecto son, en varios sentidos, dejar, a son de suerte, el complejo cargo del Responsive Design y Accesibility. Opino que este reto tiene una intención realmente buena, pero siendo yo el profesor procuraría enseñar buenas prácticas para no generar malos hábitos en mis alumnos y futuros profesionales en la industria. Y con esto último no quiero decir que el profesor emplee mal su trabajo, ni que los estudiantes no son capaces de hacer ejercicios por cuenta propia, pues creo firmemente que todos pueden lograr sus propósitos sin importar adversidad alguna, sin embargo, no todos tienen el mismo conocimiento y, cuando de educación se trata, hay que pensar en todos.

Angel Mejia

Leonardo de los angeles Espinoza Hernandez

Hey Andres!

Agradezco mucho este feedback, voy a mejorar esto para las próximas live classes. La idea inicial era el dejar este tipo de "malas practicas" como ejercicios para que los estudiantes puedan corregirlos. Pero tienes razón, puede llegar a ser confuso para los que van empezando y eso es lo que menos queremos con este challenge

Cualquier otro detalle que se pueda mejorar por favor házmelo saber.

Un abrazo!

Misael Gomez

Comparto el link del repositorio del proyecto https://github.com/LeoCode0/PlatziChallenge-portafolio-1

Marlon Jese Reyes Herrera

Muchas gracias

Naudy José Romero Valero

¿Saben como conectarme al grupo de Telegram?

Juan Diaz

Genial! Me parece buena idea agregar flex a la seccion de project-list para que una vez agreguemos mas projectos la lista, estos vallan organizandose en la pantalla

Gabriel Puig

Tengo 47 años, recién empiezo en este mundo fantastico. Estoy con un problema de salud donde no puedo hacer más fuerza. Me operaron de la columna. Busco aprender más y trabajar como desarrollador. Mi pregunta es... con 47 años y mi problema ¿Quién o qué empresa lo eligen a uno? Necesito darle a mi familia el sustento. Toda la vida m he didicado a romperme el cuerpo para ello. Hoy apuesto a hacerlo mismo con la programación. Ustedes, ¿Qué piensan? Encima, vivo en Argentina...

Edgardo Andres Vargas Saenz

Hola gabrielfernando075puig claro que se puede conseguir empleo a esa edad. AQUÍ (minuto 22) te dejo un pequeño fragmento de un live donde exponen el caso de un abogado que a sus 50 años decidió cambiar de carrera

Jainelker Jesus Yepez

Hola Gabriel 😊. Una de las cosas que nos brinda la tecnología es mucha oferta de trabajo, pues son pocos aún los que se especializan en esta área, y la otra es que con la democratización del internet no importas que estés en Argentina, así que yo creo que con eso ya hay muchas posibilidades.

Me va quedando limpio: https://ins4w.github.io/portfolio/

Edwin Adrian Borrero Arias

Yo tengo una duda, por que no agregar las medidas REM, desde ya?

Este primer portafolio, ya debería de estar pensado en la accesibilidad y en Mobile First. como lo explica el profe Diego de Granda

Julian Franco

Tu puedes irlo agregando, las clases no son una guia estricta solo es para dar una idea y la creatividad suelte y la idea es que complementes con los cursos que vayas tomando.

Stephanny Sanchez

Qué curso tan interesante!!

Andrés Felipe Trujillo Angel

Hola compañeros, yo tengo una pregunta, como se le hace para que en la terminal de windows, y se vaya a conectar con git salga a un lado el git:(main), disculpen la ignorancia, muchas gracias si me pueden ayudar. saludos

Hola Atrujilloangel, primero que todo no es ignorante tu pregunta. Segundo la terminar AQUÍ hay un blog donde el compañero iKenshu explica cómo puedes personalizar tu terminal.

Hola edgar, muchísimas gracias. muy amable.

jose zuñiga

Para quienes sigan buscando el grupo de telegram: https://platziform.typeform.com/to/l2qartOe?typeform-source=platzi.com

Edwin Torres

Gracias, y cómo se llama el grupo? Hay varias opciones pero no veo ninguna relacionada con este challenge

Santiago Garcia

Donde esta el link para el canal de telegram?

Hola senter2004, este es el LINK.

Juan Lobo

Alguien sabe que tema usa el profe?w

Alguien sabe que tema usa el profe?

Diego Toro Cárdenas

Mis nalgas son de color salmon 😄

Para hoy 28 de diciembre logré un hermoso boceto del que me siento super orgulloso. Aunque se ve muy diferente en GitHub Pages que en local. Pero bueno, apenas estamos empezando...

Juan David Reyes

Compañeros también podemos usar una sintaxis mas cómoda que nos ofrece VScode. df = display: flex h30px = heigth: 30px m30px = margin: 30px p30px = padding: 30px Son algunos shortcuts que nos ayudan a simplificar el trabajo también hay muchos mas como por ejemplo jcc = justify-content: center bxb = boxzizing: border-box ya es cuestión de nosotros ver que otros existen

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

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

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

Progreso del curso

Fase 1: HTML y CSS

Fase 2: JavaScript

Fase 3: React.js

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

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

Comentarios

Comentarios