Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

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

Visualización de un botón usando storybook para HTML

42/43
Recursos

Aportes 144

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

No platzi no, por que? si los cursos empiezan super y luego se descarrilan, como sugerencia que tengan un grupo que revise los cursos, los videos que tengan sentido, que esten claros, recuerden que aqui venimos a aprender, no todos estamos a un nivel medio o avanzado, aqui si aplicaron la del buho ![](

Creo qu e este curso, debió de estructurar todo desde el inicio, y no ir creando archivo por archivo para después copiar y pegar en uno solo, lo mismo para css que lo vas creando desde el html y no desde una archivo independiente.

como que es un poco confuso estar creando y después pegar y copiar 😒

No entendí nada. Es como que te enseña en el trailer el final de la película sin explicarte los personajes. Imagino que mas adelante tendrá sentido esto.

‘yo ya hice todo el proyecto de platzi video porque se puede hacer muy largo el curso pero si tienen alguna duda…’ WTF!

Si alguien tiene problemas para realizar lo que se hizo en esta clase le recomiendo este video:
https://www.youtube.com/watch?v=WgsaTWmzvFE&list=PLfWyZ8S-Xzeed53YOiAa1U5WUSA4cRxFQ
O si mas bien no entendieron porque puede ser util storybook les recomiendo el canal de ese video: https://www.youtube.com/channel/UCY2ogSxB2beBNBRMKU_dXzA

No se, este curso de Frontend Developer , no me gusto mucho , lo siento muy regular, este curso creo que es un repaso de Arquitectura Frontend , lo veo yo asi. Y creo es el fin del curso repasar, si ya vienes de la carrera de Arquitecto frontend

Yo les recomiendo igual darle una mirada al material del super profe Sashita

https://www.youtube.com/watch?v=lA-4Hz9N7qA

Pésima esta clase, no solo no se entiende, sino que al realizar los pasos manuales de bibliográfia oficial aparecen bastantes errores.

no entendí

me aprendi todo el curso en dos dias 😂❤

Muy regular esta clase.
Realmente fue muy poco lo que enseñó.
Deben hacer más videos de esa herramienta o un curso específico

Hemos aprendido a usar storybook? La verdad no entendí nada. Y esta clase toda fuera de contexto. Aunque queda uno con la duda de investigar mas del tema.

Apenas un par de palabras (que se puede decir en 4 minutos?) y ya aprendimos storybook? Ese es el problema de este curso.

Si quieren directamente mostrar en storybook los componentes creados con html y css (sin React, Vue, Angular…) tienen que hacerlo asi (en este ejemplo, uso el componente carrousel):

export default { title: "Carrousel" };

import Carrousel from "./carrousel.html";
import "./styles.css";

export const withImages = () => Carrousel;

En resumen:

  1. Importar el componente y le dan un numbre.
  2. Importar los estilos (si no, no se vera correctamente)
  3. En la función de la story, retornar el componente importado (en este caso Carrousel)

Esto de storybook está interesante, pero… ¿para qué es necesario? y ¿En realidad encaja en algo en este curso? 🤔

Para todos los que terminaron con muchas dudas en el curso, les digo, que no debieron llegar a este curso sin antes haber visto el curso de HTML y CSS, inclusive el de Flex y Grid (yo llevé esos dos de Leonidas, ahora hay nuevos de Teff Code).
Aquí está el link del curso de HTML y CSS, es 100% recomendado, paso a paso De Granda te lleva de la mano hasta hacer cosas muy interesantes:
https://platzi.com/clases/html-css/

Hice el ejemplo, pero no me queda claro cual es la funcionalidad practica y como es la interacción con mi proyecto real. Debo investigar esto.

Les comparto mi código para hacer el botón.

.add('By Mendi', () => { const button = document.createElement('button'); button.innerText = '🍟⚾️🥨 By Andrea'; return button; });

¡Reto aceptado!

Esto de los storybooks amerita un curso entero, es demasiado extenso D:

Está bien que pongan este bonus dentro del curso de frontend developer pero no hay un porqué o un cómo que lo conecte al resto de clases.
Creo que hubiera sido mejor como: Hey mira este botón tan bonito. se hace con storybook y puedes saber más en esta clase de este curso.

import { document, console } from 'global';
import { storiesOf } from '@storybook/html';

storiesOf('Demo', module)
  .add('heading', () => '<h1>Hello World</h1>')
  .add('button', () => {
    const button = document.createElement('button');
    button.type = 'button';
    button.innerText = 'Hello Button';
    button.addEventListener('click', e => console.log(e));
    return button;
  });
storiesOf('Button', module)
  .add('with text', () => '<button class="btn">Hello World</button>')
  .add('with emoji', () => {
    const button = document.createElement('button');
    button.innerText = '😀 😎 👍 💯';
    return button;
  });```

A todos los queridos [email protected] que se han sentido perdidos en el curso, no esta de más que tengan en cuenta que no es curso básico, no lo tomen como curso inicial, particularmente estoy siguiendo la carrera de desarrollo web y allí encontraras cursos más básicos y específicos de las tecnologías que acá se mencionan, así que pasasen una mirada por la ruta y comprenderán! #nuncaparesdeaprender

A mi me tomó por sorpresa ver que el link que muestra la profe era diferente al que está en la página de storybook. Y creo que es una de las razones de mucha de las confusiones y las omisiones en los videos. Este tipo de tecnologías van cambiando constantemente y mantener un curso tan “masticado” para principiantes es muy difícil y prácticamente inviable.
Creo que la comunidad está para esto.
He pasado por varios cursos de platzi que tienen pocos meses y en todos siempre hay algo que ahora se instala o configura diferente. Y por eso creo que no esta mal que nos ponagan a leer y a entender guías de instalación.
Si creo que hay un poco de desorden en algunas cosas, pero sus razones habrá y a cambio estamos motivados a comentar, ayudar y estar más atentos.
En lo personal los retos que nos han dejado me han ayudado a entender mejor el ecosistema del desarrollo en frontend y le agradezco a la profe y a Platzi por eso.
Un saludo a la profe desde Costa Rica y si algún día viene por acá me encantaría conocerla 😉😘🇨🇷

clases asi prefiero saltarlas. es desgastante tener que averiguar cosas que no se explican en la clase. es prefrible ir paso a paso. ya que nisiquiera se ve como una funcion vital para el proyecto.

Interesante recurso

export const withStyle = () => {
  const button = document.createElement('button');
  button.innerText = 'Iniciar sesión';
  button.setAttribute("style", "background-color: #0c093c; border: none; border-radius: 25px; color: white; cursor: pointer; font-size: 16px; font-weight: bold; height: 50px; letter-spacing: 1px; margin: 20px 0px; width: 250px;")
  return button;
} 

Olvidé compartir, en el paso 3 para la creación del archivo main.js en las instrucciones hay un error en la declaración de “module.exports”, la sintaxis que me funcionó es la siguiente:

module.exports = ( {
stories: [’…/storys/*.stories.[tj]s’],
}
);

Esto debido a que generaba un error al momento de llamar el modulo, encontraba una llave inesperada. 😛

no me sale el storybook, me marca un error al correr

WARN Broken build, fix the error below.
WARN You may need to refresh the browser.

😬😬

Listo 😃

Viendo el debate diré que el curso es bueno si tienes una cierta base mínima de html y CSS. De ese modo sirve para hacerse una visión global. Luego cada uno de los estudiantes tendrán que profundizar en cada uno de los módulos por su cuenta. Es imposible ver todo html, CSS, sass, accesibilidad en poco más de 3 horas.

Me quedaron dudas en esto, supongo que mas adelante se practicará un poco más

para la instalación de storybook puede revisar el siguiente video; https://youtu.be/WgsaTWmzvFE, además en ese canal hay más videos referentes al tema

Lastima la platica que se invirtio… =(

Vean esto como un abrebocas de lo que podemos llegar a hacer, tampoco entendí nada, pero se puede buscar en YouTube. Es un contenido bonus.

Esto se pone interesante muy buena clase!

Los storybook solo se pueden Trabajar con NodeJs? no se puede trabajar de manera independiente para html únicamente?

Al querer ir a la carpeta de mi “disco externo”, me marca error. Inclusive ya puse: df / sudo fdisk -l / todo. Después, quise acceder a mi carpetas: /dev/disk
Me marca error!
Descargué con éxito git, node…solo me falta entrar a mi carpeta de mi disco. No puedo. Cómo lo puedo solucionar?

Esto es un preview de todo lo que podemos hacer dominando el paquete completo HTML+CSS+JS 😃

Amo la información que encuentro en la plataforma, la información que se da en el curso es muy buena y el carisma del tutor tambien, pero estoy de acuerdo con la del búho.

El curso parece no tener un orden o estructura a seguir

no sean boludos como yo e instalenlo general y no en la carpeta del proyecto!

curso desordenado, puede mejorar 2.8/5

Tranquilos amigos, esto es solo un Bonus jsjs 🦄

¿A alguien le carga este video?

Muy extraña esta clase… 😒

😄 😄 😄

esta como bueno eso, toca leer mas sobre eso

Iniciando 2020 con toda la energia

creo que esto es el inicio:

Add Storybook:

npx sb init

Creo que me demoraré un poquito, es muy nuevo el tema.

Para el 2021 si quieren instalar Storybook sólo deben poner esta línea en el terminal de Visual Studio:

npx sb init

Luego esperan que se instalen las dependencias, seleccionan el tipo de framework (en este caso HTML) y esperan.

Cuando se complete la instalación deben ejecutarlo con la siguiente línea de código:

 npm run storybook

Aqui les dejo mi reto, sencillo…!

Solo quiero comentar que en las lecturas recomendadas de la clase brinda el vinculo para poder instalar storybook y ejecutar los comandos necesarios para usarlo en nuestro proyecto, independientemente si tenemos o no creado el proyecto en react como ella lo tiene o no! Ya que storybook se adapta a la ruta donde lo inicies… Hay que leer un poco nada mas para orientarse…

No, no aprendimos a usar storybook no dijo ni para que se usaba.

Reto!

Si se acaba el curso, por que hay mas clases? De todos los cursos que he tomado, me parece que este tiene videos super innecesarios, da vueltas, esta desorganizado, no profundiza en nada, etc. Se podria hacer un mucho mejor trabajo si se organizara mejor desde el inicio.

Estaría genial que hicieran un curso específico para storybook 😄

Esta clase bonus mejor la hubieran ubicado antes de la conclusión por lo demás me gusta que tenga contenido adicional el curso

Este curso tienen que renovarlo es muy enredado confuso y tedioso

no entendi muy bien el salto de la conclusión y luego esta parte

Excelente forma de fomentar ser más autodidactas, para mi es la mejor de aprender ya que depende de nuestra propia disciplina y ganas de aprender.

tambien pienso que estuvo algo desordenado el curso, maximo para los que empezamos de 0.

Dejar un documento de texto con solo el enlace a la documentacion hubiera tenido exactamente el mismo efecto que este video…

Poor information for a storybook course 🧐

exelente

Terrible, no entendi nada!

interesante storybook

😃

Muy buena esta pildora de storybook… Adelante… siempre adelante.

Excelente y buena práctica manejar storybooks

Siempre se corre con Js???

Herramienta excelente

Excelente herramienta

Buena info!

Aprendí a decir “Áca” 😃
Bueno aprendí varias cosas nuevas también.

y en que momento nos enseño eso ???

vamos por mas

Muy interesante esta herramienta .

Gracias, aprendí muchas cosas con este curso, excelente.

Muy buen curso!

Muy interesante la herramienta 😄

Me arroja el siguiente error la verdad no se que hacer para tener el storyboard, realice todos los paso y nada ,

Me pueden ayudar como instalarlo 😕 se los agradecería mucho

buen curso

Saludos. Como recomendación, no subir la carpeta node_modules a los recursos

Sin duda Storybook es una excelente herramienta para documentar nuestros componentes. Sin embargo creo que está fuera del scope de este curso al tener que interactuar con comandos o JS que aún en este camino no se han visto, por lo que sugiero que podemos establecerlo en un nivel más arriba y en vez de aprender esto, enriquecer un poco mas este curso con interacciones basicas de JS si al final se quiere ir integrando un poco de esto.

Una herramienta muy útil e interesante. Éso si tuve problemas con la compatibilidad de las versiones y los paquetes que se deben instalar. Pero se logró 😛

DESPUÉS DE MUCHOS INTENTOS Y ERRORES LO LOGRE COLOCANDO EL CÓDIGO EN LA PAGINA index.sories.js que se creo automaticamente en la carpeta stories

Excelente no conocía me agrada

muy buena herramienta, empezare a aprender mas de ella

me podrian ayudar no se que significa esto me pasa al comenzar:
[email protected]:/mnt/c/Users/Carlos/Desktop/Platzi/escuelaJS/PlatziVideo/storybook$ npx -p @storybook/cli sb init --type html
: not foundram Files/nodejs/npx: 3: /mnt/c/Program Files/nodejs/npx:
: not foundram Files/nodejs/npx: 5: /mnt/c/Program Files/nodejs/npx:
/mnt/c/Program Files/nodejs/npx: 6: /mnt/c/Program Files/nodejs/npx: Syntax error: word unexpected (expecting “in”)

Creo que debieron explicar la instalación.

Este curso esta mas desordenado paso lo mismo que con el de prework. el contenido en si es muy enriquecedor se aprende mucho, pero no le dan orden a las clases ni a los contenidos de como estructurarlos eso me desanima bastante la verdad. hay momentos que uno queda perdido por no saber como estructurar el proyecto que se esta haciendo.

Interesante !

Genial

Interesante herramienta!