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 143

Preguntas 42

Ordenar por:

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

o inicia sesi贸n.

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.

Partes del uso de CSS

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

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

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

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

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 鉂わ笍

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

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

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. >

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/

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

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.

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

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鈥

Hola, no me cambia el color, alguien me puede ayudar por favor
Hola, no me es posible ver o modificar los pix. en la parte de inspeccionar, que debo hacer? ![](https://static.platzi.com/media/user_upload/image-cb30c53b-9b0e-4467-b41c-608db23e4d7b.jpg)

profe, ayudame, no me conecta el html con el css

Buenas tardes tutora Estefan铆 Aguilar : con el fin de solicitarle una respuesta a esta pregunta : como hago para poner im谩genes en esta 谩rea de Aportes en los correspondientes cursos que se dictan .
Gracias.
Atentamente: Nelson Guti茅rrez

<https://cssreference.io/typography/>

No se me pone en color ninguno y est谩 igual =(

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 馃槶

hola compa帽eros . les comento mi experiencia es la mejor que he tenido , es super estudiar aqui en platzi uff a veces me siento como que caramba pero no pa lante que si podemos. ellos explican super . estoy desaendo tewrminar este asico para iniciar con toda . dos " desarrollo y programacion"

Recuerda, en CSS, los selectores ID tienen la 煤ltima palabra. Si tienes un selector de ID, superar谩 a los selectores de clase y tipo.

Ahora s铆, a tunear esta vaina!

A mi no me carga, podr铆an porfavor ayudarme, y explicarme proqu茅?

me parece muy util usar el inspector del navegador apra ver los cambios inmediatos y no perder tanto tiempo

Me encant贸 la parte del testeo al tama帽o de h1. Sin embargo, me hubiese gustado m谩s que profundizar谩n la diferencia del ID y Class en CSS con ejemplos pr谩cticos.

Excelente clase y gusto en conocerla, profesora Estefany Aguilar 鉂

<link rel=鈥渟tylesheet鈥 href=鈥渞uta鈥> --> vincular css a html

color --> propiedad color

h1 --> selector tipo
.nombre --> selector clase
#nombre --> selector id

widht --> propiedad ancho
height --> propiedad alto

Para elegir colores f谩cilmente simplemente toca mantener el cursor sobre el color en el documento css y ya podemos modificarlo. (Visualstudio)

"en esta clase aprendimoss muchissimo"
aprendi poco

jaja, que cambio鈥

Solo falto decir la diferencia entre id y class pero buscando ya lo se. y despu茅s me di cuenta que el profe Juan respondi贸 en preguntas lo mismo.
Super interesante lo de ajustar como lo queremos desde Styles de Elements.

Quiero hacerles una pregunta: Si yo introduzco el siguiente c贸digo, 驴Cu谩l piensan que va a ser el color del t铆tulo y por qu茅?

HTML:

<h1 id="tituloMokepon" class="titulo">MOKEPON 馃敟馃挧馃尡</h1>

CSS:

h1 {
    color: yellow;
}

.titulo {
    color: aquamarine;
}

#tituloMokepon {
    color: red;
}

el css siempre me causa problemas con el tema de los flexbox

Genial鈥!

馃槂

CSS: Lenguaje de estilo para la web. Define la apariencia de la web como: colores, tama帽os, formas, tipos de letras, separaciones, animaciones, etc茅tera.

Me dio un poco duro Javascript pero esto de CSS me gusta arto. No me rendir茅 con javascript.馃挭馃槉

fui a la pagina que recomendo la profe y pues queria aprender una propiedad de css y dios que me costo esa propiedad es la de

background-image: linear-gradient();
background-image: radial-gradient();

No se si hay algun metodo para aprender las propiedades mas rapido, me refiero para aprenderlas bien al detalle para saberlas usar y combinar

Qu茅 emoci贸n iniciar por primera vez en CSS