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

2/22
Recursos

Aportes 11

Preguntas 5

Ordenar por:

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

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.

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

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

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

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

Qué curso tan interesante!!

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</h2>
                <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">
                    <h3>sigueme en </h3>
                    <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>

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

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

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