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.
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
Aportes 11
Preguntas 5
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?