Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Anatom铆a de CSS

32/84
Recursos

Aportes 174

Preguntas 43

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Teff es mi m谩s grande referente de CSS. Sus cursos son espectaculares. Y sus aportes + tutoriales en el Blog de Platzi son de otro nivel. 馃挌 馃敐

Un ejemplo visual de lo que hace el css

Gente para que no est茅n entrando a ninguna pagina a buscar colores, solo escriban: #ffffff (son 6 efes xd ) en el buscador de su navegador y ustedes mismos seleccionan su color a gusto y abajo tienen para copiar sus valores en HEX, RGB, etc .

![](

![](

![](

Ejemplo claro :

PROFE JUAN = HTML

PROFE ESTEFANY = CSS

jajaja los quiero鈥

[](

hola les recomiendo que para asgnar colores usen paletas de colores en cual basarse les recomiendo coolors

Tipo = El nombre de la etiqueta HTML tal cual (h1, p , section , body, etc)
Clase = El nombre que le dimos a la clase en HTML simplemente le agregamos (.) punto al principio.
ID = El nombre que le dimos al id en HTML simplemente le agregamos (#) hashtag al principio.
Cada una se debe usar en casos especificos pero creo que eso lo veremos mas adelante.

Considero que como primera clase de CSS, es necesario condensar esta informaci贸n en una presentaci贸n, mas que hablar acerca de los selectores y dar ejemplos en el c贸digo. Pienso que es necesario explicar, historia, generalidades, ejemplos un poco mas reales de lo que podemos lograr aplicando estilos a una pagina y la importancia de que sea o no un producto de calidad.

Para ver los colores, tanto en sistema RGB o hexadecimal, no es necesario abrir otra p谩gina web.
Escriban un nombre de cualquier color y un momento le dejan el mouse encima de la palabra y les sale esta opci贸n para escoger cualquier color
Para sistema hexadecimal es similar, escriben # y cualquier c贸digo, dejan el mouse encima del c贸digo y sale la opci贸n

Esto sale en Visual Studio. No s茅 si funcione con otros programas

RESUMEN:
CSS (Cascading Style Sheets) nos permite darle estilos a nuestro HTML.
Para cambiar dichos estilos primero debemos referenciarlos o indicar cu谩l elemento nos interesa, en este caso, se realiza mediante tipos de selectores.

  • Tipo: Colocamos el tipo de elemento del html, en este caso, solo colocamos h1.

  • Clase: Los elementos de html pueden tener una clase, asi que colocamos un punto en css para referenciarla.

  • Id: De igual forma que trabajamos este id en javascript. en css lo referenciamos con un hashtag.

Ahora que ya tenemos la manera de indicar cu谩l etiqueta de html queremos cambiar, este elemento va a tener unas propiedades.
Le decimos puntualmente que color de letra queremos que tenga, que ancho y alto, o cambiar el color de fondo.

Existen muchas propiedades que puedes cambiar, las puedes leer aqu铆.

No es por presumir, pero鈥 como yo tom茅 la clase de pre-work yo cre茅 mis archivos desde la terminal de vscode conectada con wsl.

Yo no se como le voy a hacer ahora en adelante, yo no me puedo concentrar con la miradita que tiene esa profe, que bonita.

Unos Peque帽os Apuntes

Para cambiar colores, posicionamiento, y personal铆zalo todo, necesitamos css, y para eso crear un archivo .css

Css es un lenguaje de estilos, este lenguaje trabaja de la mano con HTML.

Si en el archivo HTML, hay una etiqueta llamada H1, y luego colocamos esa etiqueta en css, estamos creando un V铆nculo.
Ese vinculo se lo conoce como selector.

Para crear el dise帽o en css se necesitan las propiedades (caracter铆sticas que le podemos dar a HTML, como color, ancho, etc.) y valores (corresponden a cada una de las propiedades que les estamos dando, si la propiedad es ancho el valor va a estar determinado por una medida en pixeles que le asignemos)

Tipos de selectores
-H1: Selector de tipo, se llama as铆 porque es el mismo que tenemos en nuestra etiqueta HTML
-Class
-Id

Cualquier clase que se encuentre en el HTML, debe tener distinto nombre.

Les recomiendo la extensi贸n, Color picker de Vs code para aggregar colores de manera sencilla

Partes del uso de CSS

una profe linda para ense帽arnos a poner lindo nuestro juego , me enamore :3

Feliz de tener a una profesora tan profesional y dedicada en este curso. Lo aprovechare al maximo. Te admiro profe 馃ぉ espero algun dia ser tan pro como tu ( o mas) 馃挌馃挌

Esta pagina tiene algunos colores que combinan y se ven bien.
https://colorhunt.co/palettes/popular

muy b谩sico , me gustar铆a que hubieran desarrollado un proyecto mas complejo donde abarque las mayores etiquetas posibles

La clase estuvo excelente, lo que mas me soprendio fue de pasar de un profe full hiperactivo a uno full light.

Que manera tan sencilla de explicar CSS鈥
Gracias profesora Teff 馃槉
Definitivamente usted y su especialidad van acorde.
A seguir aprendiendo 馃コ

En el siguiente sitio web, tambi茅n se puede analizar propiedades CSS.
https://www.w3schools.com/css/default.asp

Qu茅 chevere se siente tomar este curso. 驴Por qu茅? Porque estoy repasando conceptos de otros cursos que ya se me estaban olvidando. Por ejemplo, dej茅 de lado CSS por enfocarme m谩s en JS y ahora estoy repasando CSS y recordando lo aprendido hace meses xd

Thank you Platzi 鉂わ笍

me parece que la profe Teff va hablando muy lento馃槄

bueno aqu铆 al menos no hay que preocuparse de que se da帽e el jueguito, si algo falla solo queda horrible la presentaci贸n pero el juego sigue corriendo

Unas le mejores parte del curso, darle vida al contenido y quien mas que Estefany una crack. a code-ar estilos 馃

Existen unas extensiones en Chrome que uso muy seguido para elegir los colores de mis paginas webs. Se llaman colorzilla y colortab. Pueden probar si les gusta. Saludos comunidad Platzi. Nunca pares de aprender

A esta clase le falto esa presentacion d贸nde mostraban lo que los profesores estaban hablando.
No es algo grave porque la profe lo hace ver muy sencillo pero puede aportar mucho a la clase.

.titulo{
    color: #FF5233;
    width: 310px;
    height: 50px;
    background-color: beige;
}

Que buena forma de explicar, detallada y pausada, muchas gracias por el contenido tan bueno.

tuve un grandioso recorrido con Juan DC, GENIAL, ahora embarqu茅monos a otra gran aventura 馃帀

me enamore de la profesora鈥hora si me acabo el curso!

Esa de arrastrar hacia los costados para cambiarle el tama帽o en el inspector no la sabia jajaj, trucazo

El curso se ve interesante la verdad ,pero le hace falta mas explicacion en algunas cosas , como por ejemplo :
Class : Se puede utilizar varias veces
Id: Solo se puede una vez

Hola CSS, que bella mujer!!! <<3

Si no logran vincular el archivo css, vuelvan en sus pasos, yo no pod铆a hacerlo porque hab铆a movido la carpeta de mi mokepon al desktop, y ah铆 lo cre茅, (yo antes lo ten铆a en la carpeta programar) borr茅 el archivo css, cre茅 una carpeta, volv铆 a crearlo, y ah铆 si se vinculaba bien. Espero le sirva a alguien, 隆No se rindan por aprender!

Vamos que se sigue aprendiendo!隆!隆

comienza css y acaba el curso para mi xD
que terrible todo eso jajajaja.
Hermoso hasta llegar aqu铆, all铆 es donde se divide el trabajo para cada quien supongo

CSS = Cascading Style Sheets = Hojas de estilo en cascada

por fin llego esta clase ya tenia toc de ver esa pagina toda fea jajjaj

Aprendimos que hay 3 tipos de selectores en css: tipos, clases y de id鈥檚. Tienen propiedades y valores.

exelente trabajo

Siendo nuevo por ac谩 en esta primera clase de CSS, les deseo lo mejor. No importa la situaci贸n en la que est茅n, nunca se rindan muchachos

Por lo que voy entendiendo CSS es la parte visual art铆stica como colores, que lleva html

est谩 bonito esto de los colores me siento muy feliz el anterior profe se daba muchas vueltas que estresaba

Bella la profe Estefany

CSS es un lenguajes de estilos que se encarga de toda la parte est茅tica de una p谩gina web como

  • Colores Titulos
  • Posicion de los elementos
  • Color de fondo

Para esto crearemos un nuevo archivo llamado styles.css y crearemos el enlace desde el archivo HTML con

<link rel="stylesheet" href="./styles.css">

Posteriormente en el archivo CSS podemos empezar a poner colores y estilos haciendo referencia a los elementos de HTML, como por ejemplo

h1{
    color: lightcoral;
}

Este es un v铆nculo que se ha creado entre HTML y CSS, un v铆nculo conocido como selectores, hay de varios tipos, trabajaremos con 3

- Las ***propiedades*** son caracter铆sticas que podemos otorgarle a los elementos: por ejemplo, color, ancho, alto鈥 - Los ***valores*** corresponde a cada una de esas propiedades. Por ejemplo, en la propiedad `color:` el valor es `palevioletred`. - El . nos se帽ala una etiqueta tipo class. - El # nos se帽ala una etiqueta tipo ID. 驴Cu谩l es la diferencia entre `class` y `ID`? > Con `class` podemos darle una misma clase a varios elementos HTML. Con el `ID` solo podemos asignarle una vez el mismo valor a un elemento. Las clases se pueden repetir, los ID no. >

Solo como consejo: hacen falta las ayudas visuales para cuando est谩 explicando que es un atributo, un selector, etc. as铆 como cuando explicaba Juan Castro.

Hola, buena tarde, en este paso se me atraves贸 un problema: Me cambia de color todo, y el tama帽o de la letra es , en el titulo H1 y en los dem谩s H2 . Ya me canse de buscar y no le encuentro, alguien le paso y lo resolvi贸 para que me diga? por favor
hola, si sigo las indicaciones no me deja modificar nada con colores, alguien con el mismo error? ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-05-03%20114206-84c18197-7d66-499b-b7a4-4f0e55ad364d.jpg)
Es colombiana 馃槏
CSS es ponerle sabor a las cosas 鉂わ笍
Hola, podr铆an ayudarme, trabajando con el mismo archivo de html, cuando empiezo a modificar para empezar la clase de css, el head al final me sale en rojo y no se carga ningun atributo de class 馃ゲ馃ゲ, alguien podria ayudarme a corregir este error? gracias![]()
hola , al![](https://static.platzi.com/media/user_upload/image-ab6f7c12-08c4-47f2-899c-54f0031e6494.jpg)guno podria ayudarme. cuando iniciamos el html con freddy y juan, el script quedo ubicado abajo, si modifico y agrego los cambios iniciales de css, se coloca en rojo sea el head o el body, y no toma los cambios de class.... alguien que pueda ayudarme o tenga el mismo error. gracias

Primero perdimos a Freddy, luego a Juan, tengo la sensaci贸n de que justo cuando le agarremos confianza a Teff, nos la van a cambiar 馃槶

En HTML, la etiqueta id se utiliza para identificar de manera 煤nica un elemento en una p谩gina web. Por otro lado, la etiqueta class se utiliza para identificar varios elementos de una p谩gina web que comparten una caracter铆stica o estilo en com煤n. La id debe ser 煤nica en toda la p谩gina, mientras que una class puede ser compartida por varios elementos.

Las funciones que cumple cada uno de los lenguajes explicado con hamburguesas. 馃槄

Qu茅 siginifica esta l铆nea de c贸digo? 馃

<link rel="stylesheet" href="./styles.css">

1-<link>: Esta etiqueta HTML se utiliza para establecer relaciones entre el documento actual y recursos externos, como hojas de estilo, iconos y m谩s.

2-rel=鈥渟tylesheet鈥: El atributo rel (relationship) se establece en 鈥渟tylesheet鈥, lo que indica que el recurso vinculado es una hoja de estilo que se utilizar谩 para dar formato y dise帽o a la p谩gina web.

3-href="./styles.css": El atributo href (hypertext reference) especifica la ubicaci贸n del archivo de hoja de estilo. En este caso, el valor es 鈥./styles.css鈥, lo que significa que la hoja de estilo se encuentra en el mismo directorio que la p谩gina HTML actual. La ruta 鈥./鈥 se refiere al directorio actual, y 鈥渟tyles.css鈥 es el nombre del archivo de hoja de estilo.

4-En resumen, este c贸digo <link> se utiliza para vincular una hoja de estilo externa llamada 鈥渟tyles.css鈥 a la p谩gina HTML actual. Esto permite que el navegador cargue y aplique la hoja de estilo para dar formato y estilo al contenido de la p谩gina web de acuerdo con las reglas definidas en la hoja de estilo.

noooooooooooo primero freddy, ahora juan pipipipi y ya que a aprender con esta nueva profe

驴Te aparecieron los valores tachados? no te preocupes.

Esto sucede cuando no colocamos el px (pixeles) al final o los separamos por un espacio (100 px) lo ideal es que siempre queden junto al n煤mero, as铆:

width: 300px;
height: 40px;

Quiero compartir algunos recursos que me han parecido muy utiles para seleccionar colores o paletas:

En Color Hunt pueden encontrar paletas predise帽adas y algunas valoradas por la comunidad para que se puedan guiar: https://colorhunt.co/palette/

Paletton y AdobeColor son herramientas para la creacion de paletas, aca los links:
https://www.paletton.com/
https://color.adobe.com/create/

ay Dioh m铆o 馃檶馃挆

鉂わ笍

que bueno que CSS es mas facil jaja 馃ゴ

Si necesitan paletas de colores que combinen pueden usar Adobe color

Esta pagina es super buena si quieres practicar:
https://cssbattle.dev/

super esta clase me evacu贸 las dudas que ten铆a

隆Tenemos nueva profesora! Vamos a seguir aprendiendo. Gracias por la clase.

Le puse un poco m谩s de color y estilos uwu 馃挏

Se va notando la importancia de contar con diferentes profesionales en este proceso de programacion鈥 Estefany tiene estilo

https://platzi.com/clases/3208-programacion-basica/52008-anatomia-de-css/?time=642
Toda mi vida de programador haciendo el backgraund a prueba y error para ver el tipo de tama帽o que debe de tener y aqui lo resolvieron en un instante veo que la inspeccion de crohme sirve demasiado.

Hola Teff, me alegra volver a verte, Gracias! por tus clases. Eres muy buena teacher.

https://arantius.github.io/web-color-wheel/
Aqu铆 se encuentra todo el rango de colores con sus respectivos nombres de forma visual y compacta.

Las propiedades tienen valores鈥 ejemplo (propiedad: titulo) (valor ,color :azul)

Podemos cambiar el valor desde inspeccionar como cambiar el ancho de px, pero para q se guarde cambiarlo VS

super interesante la clase, esto de cambiar estilos, colores y dem谩s. est谩 excelente.

Nos茅 si es un aporte que sirva mucho, pero ese acento colombiano de la profe, me dan mas ganas de seguir adelante jajajaja .馃槏馃槏馃槏馃槏馃槏

en lugar de background-color pueden simplemente utilizar background e igual les funcionar谩 el cambio de color de fondo鈥

como se hace XD
:green\_heart: :top:
Envio aporte de mi juego de Pokemon (Soy fan perdon) :) ![](https://static.platzi.com/media/user_upload/pokemon%20imagen-ae2088ed-c5b2-4dee-9c74-34f5694ab3a8.jpg)
tipos de selectores `/*Selector de tipo*/h1 { color: lightcoral;}` `/*Selector de clase*/.title { color: rgb(128, 240, 132);}` `/*Selector de clase*/#titulo { color: blanchedalmond;}`
Amo tener profesoras, mujeres, con tantos a帽os de experiencia 馃挄 y en tech, como que se me ilumina el camino; no s茅 si me hago entender 馃敟鉁岎煆
UNA PREGUNTA PORQUE AMI NO ME SIRVE EL COLOR DEL TITULO 馃槬馃槬馃槬馃槬馃槬馃槬馃槬
Bueno voy a dejar esta parte del c贸digo comentada que no todo es diversi贸n cuando hay catorce alertas cada vez que recargas la p谩gina para ver si se cambia el fondo 馃す馃徏 ![](https://static.platzi.com/media/user_upload/noMoreAlertPlease-3094df84-a457-497c-ae70-d5e5005dac2f.jpg)
a ponerlo practica
Genial
lind
basta
馃弽锔
馃槂
馃憤
nuevo camino
No me detecta el CSS
Hola profe, he realizado los pasos pero no me ha realizado ning煤n cambio en mi pagina, ya revis茅 la escritura y la ubicaci贸n del archivo pero no lo reconoce 馃し鈥嶁檪锔 ![](https://static.platzi.com/media/user_upload/image-96041d95-1b41-479a-8161-e5125c0657c4.jpg) ![](https://static.platzi.com/media/user_upload/image-e1243f50-6620-40b8-b27f-2e838c5f1f92.jpg) ![](https://static.platzi.com/media/user_upload/image-4c6ef189-168a-4028-9c4e-7f42cc880ffa.jpg)Aprecio la ayuda馃檹
**驴CUANDO USAR ID O CLASS?** * El ID (de identificador) son 煤nicas en un documento y por lo tanto la usaremos para cuando necesitemos aplicar un estilo o un comportamiento espec铆fico a un solo elemento de la p谩gina. Usaremos 篓#篓 para seleccionarlo en CSS * CLASS (de clase) se puede aplicar a m煤ltiples elementos en HTML. Se puede asignar la misma clase a varios elementos en la p谩gina. Usaremos 篓.篓 para seleccionarlo en CSS