Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

Los apuntes de Freddy en PDF

6/37

Lectura

Durante el curso te dar谩s cuenta que nos apoyamos de algunos apuntes para ilustrar mejor los conceptos. Ac谩 los puedes encontrar:

Archivo

Aportes 2456

Preguntas 51

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Freddy deja los apuntes de todo el curso en una de las clases
El que se tard贸 3hrs escribiendo sus propios apuntes:

Hola! Comparto mis apuntes personales. Soy nueva super nueva en el tema. Espero le sean 煤til a alguien. Slds!

Ac谩 les comparto mis apuntes de esta secci贸n. Suerte 馃槃. No me dej贸 compartir el link.




Hola chavos, les recomiendo siempre despues de terminar una clase, leer los comentarios ya sean los Nuevos o los Mas Votados, ahi van a complementar lo aprendido e incluso en ocasiones aprender cosas nuevas, para eso esta es una comunidad. Les estare dejando comentarios donde les doy consejos de aprendizaje basado a mi experiencia. Saludos 鉂わ笍

隆Genial! Comparto mis apuntes tambi茅n 馃槃

significado
head es la cabecera, dentro de ella puede ir el titulo
title etiqueta del titulo de la pagina web
style cabecera del dise帽o grafico (color de fondo, letra etc.)
strong letra negrita
body etiqueta de la informaci贸n web
p p谩rrafo
cada concepto de abre y se cierra de la siguiente manera
<cooncepto> escribes la informacion y/o el cogido </concepto>
abres cierras

Dejo el PDF por ac谩 mientras arreglan el problema 馃槂

Cada d铆a crece a煤n m谩s mi inter茅s en la programaci贸n, las explicaciones son muy claras y en algunos momentos divertidas. Las herramientas utilizadas y el lenguaje utilizado hacen muy f谩cil la comprensi贸n de los temas. You鈥檙e the best!!.

muchas gracias, tengo 13 a帽os y estoy aprendiendo a programar gracias a ti

Muchas gracias a todo el equipo de PLATZI, realmente son una inspiraci贸n como latinoamericanos a superar el s铆ndrome del impostor, yo hasta unos meses y durante toda mi carrera universitaria de ingenier铆a el茅ctrica odie programaci贸n pero gracias a sus clases y sus videos me han hecho cambiar de opini贸n y buscar un camino en la industria de la tecnolog铆a que estoy convencido que es el futuro pr贸ximo en 谩rea econ贸mica y laboral a nivel mundial.

alert(鈥淢uy buen curso 馃槂鈥);

<html>
<head>
<title> Mi Primer: Porro Armado</title>
<style>
body
{
background-color:#AAAAFF;
color: white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola mundo ya casi <strong>me vuelvo un pipi</strong> </p>
<p> Ud es otro pegado</p>
<script>
var x = 1;
var y = 2;
var z = x + y;
document.write ("son las 4:20 madilto jippi " + z);
</script>
</body>
</html>

http://www.lamolina.edu.pe/osi/manual/Curso_HTML5_v1.pdf es un manual de etiquetas por Freddy, les puede servir

DEBERIAMOS DE HACER UN GRUPO DE WHATS

驴D贸nde est谩 el PDF? Si alguien lo tiene que por favor me diga c贸mo conseguirlo o que pase un link de descarga, por favor.

Donde puedo encontrar el archivo?

驴Encerrado por 15 d铆as?
Pfff, pasan volando con los cursos de Platzi.

<!DOCTYPE HTML>
<html lang=鈥渆s鈥>

<head>

<meta charset="utf-8">

<title>Mi Primer Curriculum WEB</title>

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

</head>

<body>

<header>
	<h1>Curriculum WEB</h1>
</header>

<main>

	<article>
	
		<h2>Datos Personales</h2>       

		<ul>
			<li>Nombres: Weishler Joice</li>
			<li>Apellidos: Berman Torres</li>
			<li>Edad: 19</li>
			<li>Nivel de Estudio: Bachiller</li>
		</ul>
		
		<figure>
		
			<img src="http://2.bp.blogspot.com/-BjC4vbP1A_I/TgtlK9wndlI/AAAAAAAABYU/TS9K-GAEkIA/s1600/JOKER+%25281%2529.png" width="80" height="80" alt="Weishler Joice"/>
		
			<figcaption>Weishler Joice</figcaption>
			
		</figure>
		
	</article>
	
	<article>

		<h2>Habilidades</h2>

		<ul>
			<li>Excel</li>
			<li>Word</li>
			<li>PowerPoint</li>
			<li>C++</li>
			<li>HTML</li>
		</ul>
		
	</article>
	
	<article>
	
		<h2>Cursos</h2>

		<ul>
			<li>Ingles:<a href="http://www.cvadelcentro.com/">CVA,<em> Centro Venezolano Americano</em></a> (B-2).</li>
			<li>Algebra</li>
		</ul>
	</article>
	
</main>

<nav>
	<ul>
		<li><a href="Estudios.html">Estudios</a></li>
		<li><a href="Experiencia.html">Experiencia Laboral</a></li>
		<li><a href="Notas.html">Notas</a></li>
	</ul>
</nav>

<aside>

</aside>

<footer>

	<p><a href="informaciondecontacto.html"> 隆Contactar! </a></p>

</footer>

</body>

</html>

c贸mo se refresca la p谩gina para poder ver los cambios en la construcci贸n de mi c贸digo?

Formula para calcular la potencia de una resistencia calefactora.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Potencia de una resistencia</title>
    <style>
    body
    {
      background-color: Yellow;
      color: black;
      font-family: Frontier;
    }
    strong
    {
      background-color: white;
      color: blue;
      Frontier
    }
  </style>
  </head>
  <body>
    <h1>Calcular la Potencia de una resistencia o calefactor el茅ctrico</h1>
    <P> Esta f贸rmula la utilizo cuando tengo que reemplazar alguna resistencia, sin datos, del pack para deshielo en alguna c谩mara frigorifica en los buques</p>
    <h2> Potencia es igual a Voltaje al cuadrado, dividido por el valor de la Resistencia<h2>
    <script>
    var Voltaje = prompt("Ingresa el Voltaje");
    var Volts = Math.pow(Voltaje,2);
    var Resistencia = prompt("Ingresa la resistencia en ohms");
    var PotenciaA;
      PotenciaA = Volts / Resistencia;
    var Potencia = parseInt(PotenciaA);
      document.write("<strong>Resultado:</strong>     El valor de la potencia es <strong>"  + Potencia + "Watts </strong>");
    </script>
  </body>
</html>```

Gracias estimado Tutor, expone la programaci贸n de una manera interactiva y din谩mica que permite una mejor comprensi贸n al usuario y motivaci贸n para ver los siguientes contenidos digitales.
Yo como PCD (persona con condici贸n de discapacidad) Discapacidad Visual (Baja Visi贸n) me frustro de una u otra manera por que no alcanzo a identificar ciertos caracteres como punto y como, coma etc.
Pero al escuchar claramente y utilizar herramientas accesibles e incluyentes, permite un mejor aprendizaje

Gracias.

alert(鈥淐ada dia me gusta mas estudiar en Platzi鈥);

la programaci贸n me esta llamando!

Hola! La novata report谩ndose en la comunidad. Llevo 15 a帽os ejerciendo una profesi贸n totalmente alejada de la tecnolog铆a y apenas ahora con 41 a帽os me d谩 por aprender a programar. Recibo con agradecimiento toda la ayuda y el apoyo para que este cambio sea lo menos traum谩tico posible. Adelante!

Muchas gracias, he retomado el curso y me parece fantastico, Fredy eres super ense帽ando. Adelante.

CALCULAR POTENCIA de Motores el茅ctricos trif谩sicos. Basado en la Lecci贸n 9 de 鈥淧eso en otro Planeta鈥, de Freddy.
.
.
<!DOCTYPE html>
<html>
<head>
<title> Potencia trifasica </title>
<style>
body
{
background-color: green;
color: white;
font-family: Frontier;
}
</style>
</head>
<body>
<h1>ELECTROMAR</h1>
<h1> Calculo de Potencia Trifasica para Motores Electricos con ingreso de Voltaje y Corriente</h1>
<h2> Potencia = Voltaje x Corriente x Factor Potencia (0.8) x 1.73 </h2>
<script type=鈥渢ext/javascript鈥>
var Volts = prompt(鈥淐ual es el voltaje?鈥);
var Amper = prompt(鈥淐ual es la Corriente?鈥);
var FP = 0.8;
var Trifasico = 1.73;
var Potencia;
Potencia = Volts * Amper * FP * Trifasico;
document.write(鈥淓l voltaje ingresado es " + Volts + " Volts 鈥 La corriente ingresada es " + Amper + " Amperes鈥 + 鈥<br>鈥 + 鈥<br>鈥 + 鈥淓l valor de la potencia es de " + Potencia + " Watts鈥);
</script>
</body>
</html>

Wow, enserio esto esta siendo demasiado 煤til. Estoy descubriendo que programar me gusta mas de lo que pensaba.

<!DOCTYPE html>
<html>
    <head>
        <title> codigo :v </title>
        <style type="text/css">
            body   
            {
                background-color: aquamarine;
                color :black;
                font-family:Arial, Helvetica, sans-serif;
            }
            strong 
            {
                background-color:floralwhite;
            }
        </style>
    </head>
<body>
    <p>esto es una <strong>esto es una prueba</strong> </p>
    <p>este es un salto de linea en otro parrafo <strong>esto es una negrita </strong></p>
    <script>
        var x = 1;
        var y = 2;
        var z = x + y;
        document.write("el valor de z es " + z);
    </script>
</body>
</html>

Pens茅 que aprender JavaScript era complicado, y siempre me complicaba, dir铆a que mi aprendizaje esta yendo por un buen camino.

Ahora toca ahorrar para poder seguir con otros cursos y aprendes muchas mas cosas!

alert ("el mejor curso del planeta")

Reci茅n comienzo y ya me siento muy motivada con este curso.
Excelente profesor.
隆Muchas gracias!

馃搶 Los apuntes nos permiten repasar lo que aprendimos de forma r谩pida, excelente recurso para ser m谩s productivo.

Un placer ver que muchos estamos aprendiendo algo nuevo

Ser铆a bueno que en todos los cursos de programaci贸n tubieran apuntes.

Esto para volver a repasar alguna cosa o consultarla.

Yo me tardo mucho en los cursos de programaci贸n porque tomo apuntes

Ser铆a bueno un apoyo como este, a modo de infograf铆as 馃槂

Si todos nos poyamos y aportamos nuestro granito de arena nos ira bien, y entenderemos mucho mejor las clases鈥 馃槃 鉂わ笍

increible como el tomar buenas decisiones en le dia a dia te lleva a lugares tan productivos y edificantes dare lon mejor de mi en esta nueva aventura de programar, gracias dios por la oportuunidad de estar en exelnte estado de salud x estar vivo amo mi vida y les deseo a todos en este curso que no paren nunca de aprender bendiciones y la mejor energia para ustedes y sus familias gracias a VEGA por su autenticidad y amor por lo que hace.

Solo con las primeras 4 clases he aprendido mucho y me he motivado a seguir con las de mas y a por mas!!! alert("gracias Fredy ");

Con mucho positivismo y mas ganas de aprender, muchas gracias por estos cursos! 鉂わ笍

<html>
    <head>
        <title>Viva Cristo Rey</title>
        <style>
            body
            {
                background-color: red;
                color:orange;
                font-family: Helvetica;
            }
            strong
            {
                background-color: indigo;
            }
        </style>
    </head>
<body>
    <p>Veni, Vidi, <strong>Deus</strong> Vincit</p>
    <p>Extra Ecclesiam Nulla Salus</p>
    <script>
        var x = 1;
        var y = 2;
        var cristo_rey = x + y;
        document.write ("El valor de la Santa Trinidad es " + cristo_rey);
    </script>
</body>
</html>

Al principio estaba re perdido, pero despu茅s me di cuenta de que habia un archivo

Nunca parar de aprender! y en esas estoy a ver si le hago un pivot a mi carrera de publicista a futura <strong>programadora</strong>

驴Puede existir alguien mejor para una clase as铆? La forma en la que ense帽a y motiva a seguir aprendiendo es algo que no hab铆a visto hasta ahora, completamente encantado.

Muy feliz de verdad por estas clases! El contenido est谩 s煤per bien explicado para que principiantes como yo entendamos todo! Me encanta!

Ni en la universidad son asi de claros!!! Grande jhon freddy

Si deseo aprender javascript desde cero a que curso debo entrar? y luego cual le seguir铆a?

este men es el 煤nico que tiene la habilidad de hacer las cosas tan interesantes, su explicaci贸n a pesar de ser algo que ya sepas lo hace a un ritmo que nunca aburre.

Recurso b谩sico para aprender m谩s sobre desarrollo WEB

.
La p谩gina MDN Web Docs parte del proyecto de Mozilla les ser谩 su fiel compa帽era para resolver dudas y aprender m谩s a fondo sobre JavaScript.

Gracias,Pague la membresia anual y sin embargo estoy disfrutando mucho este curso gratuito

鉂わ笍 en otras plataformas, no se preocupan de esta manera , gracias.

Algunos libros de programaci贸n que recomienden?

hola profe yo soy nuevo

隆Excelente curso!

Freddy es un crack explicando!!

hoy ando aprendiendo chido

Muchas gracias Freddy eres un excelente docente.

hola soy nuevo 馃槂

var x = "Freddy ";
var y = 鈥渕uchas gracias鈥;
var z = x + y;
alert(z);

ta mamon profe, ahora si me dieron ganas de aprender html

Muchas gracias, excelente instructor

Muchas gracias, Freddy, excelente aporte.

         document.write("Me encanta Platzi, Saludos desde Puerto Rico");

alert (鈥淣o hay PDF >:C鈥)

Me gradu茅 de la escuela y nunca tuve unas clases asi tan concretas 馃槂

Ten铆a un prejuicio errado sobre tu forma de ense帽ar, al llevar este curso me callaste la boca. Saludos.

alert ("驴alguien ya encontr贸 el PDF?");

No es pregunta, es observaci贸n, quizas reiterativa, pero no esta por dem谩s, John Freddy, instructor inigualable, nunca conoci a alguien mejor ense帽ando. Tu sistema el mejor, Felicidades!

Nada menos que esperar del gran CEO de Platzi, un abrazo si alg煤n d铆a ves este mensaje!

Que manera tan excelente de ense帽ar Freddy, Me animas a entrar a este mundo de la programaci贸n y nunca para de aprender.

Freddy es un maestrazo.

Todo va muy bien hasta ahora, si esto sigo entendiendolo as铆 de manera tan sencilla me ir谩 bien en programaci贸n IV, muchas gracias Freddy

tu letra no es bonita

Buen material. Aqu铆 comparto mas sobre HTML: https://htmlreference.io

Gracias por el curso . A pesar de ser gratuito No Es bal铆n , No Es chafa 鈥
Excelente 鈥
Cada l铆nea de c贸digo explicada , cada tema ligado al anterior .
Provecho a los alumnos ; gracias a @freddier @platzi y @platziteam 鈥
Si este curso est谩 disponible desde 20 septiembre de 2016 disculpe el atraso .

Muy dinamico aprender con Freddy

Freddy, me encanta ver tus clases. Explicas demasiado bien y es super entretenido.

Muchas gracias porque es una gran ayuda para quienes no podemos pagar un curso completo.

Ya tengo el Bachi en Ingenier铆a pero trabajo en otra cosa y se me olvida lo que aprend铆 porque no lo estoy utilizando pero me encanta el Desarrollo.

Muy buena explicacion y facil de entender 馃槂

No es una pregunta, es un agradecimiento, pues la manera de explicar es genial, yo considero que despu茅s de ver este modulo gratis ser谩 inevitable querer seguir estudiando. muchas gracias Freddy, gracias por tu talento.

Gracias por se tan claro en los videos

tienes una forma de ense帽ar muy particular! te super felicito! sos muy bueno!

<html>
<head>
<title> Gracias! </title>
</head>
<body>
<p><strong>隆A ver si me acuerdo c贸mo programar un p谩rrafo! </strong> </p>
</body>
</html>```

No puedo creer que esto sea tan genial, vi programaci贸n en la universidad y era insufrible a煤n no entiendo por que鈥

hola compa帽eros, no he podido resaltar acon negrilla, manejando el strong, le doy tal cual como indicas en el video pero no me da. ayuda porfa

<html>
<head>
  <title>Mi primer archivo HTML</title>
<style type="text/css">
body
{
  background-color : #AAAAFF;
  color : white;
  font-family : Helvetica;
}
strong
{
  background-color : #FFAAAA;
}
</style>
</head>
<body>
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <p>Este es otro parrafo</p>
  <script style="text/javascript"
    var x=1;
    var y=2;
    var z= x + y;
    document.write("El valor de Z es: "+ z);
  </script>
</body>
</html>

Gracias Freddy

Muy bueno el curso, justo para aprender en cuarentena.


Me he tardado un tiempo en todo esto, y es que conforme ten铆a dudas que se originaban en el proceso de escribir mi primer texto, me lanzaba a buscar su significado y el por que de ellas. No las comprend铆 por completo (tampoco me frustre por ello), pero si me sirvio para agrandar mi visi贸n de las cosas que a煤n no se que no se, estas cosas poco a poco se van descubriendo. Te puedo decir que no te frustres si no te sale a la primera, segunda o n intento. Distraete con otra cosa y despu茅s decide seguir afrontando el problema, si no puedes resolverlo solo con el video de aqu铆 entonces ve a la web y busca las soluciones en foros, blogs y ahogate en informaci贸n, se que sera abrumador y lo dejaras para regresar a solucionar el problema pero ahora tal vez consigas solucionarlo, 驴Por qu茅? Porque ahora sabes de las horas que estuviste buscando un poquito m谩s y aunque no lo entendiste todo ahora comprendes un poco mejor la sintaxis y eso te puede ayudar.![](

<!doctype html>
<html>
<head>
<title>Mi Primer Archivo HTML</title>
<style type=鈥渢ext/css鈥>
body
{
background-color: #AAAAFF;
color: white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Ya casi <strong>estoy</strong> aprendiendo</p>
<p>Este es otro parrafo</p>
<script type=鈥渢ext/javascript鈥>
var x = 1;
var y = 2;
var z = x + y;
/Con esto se imprimen msj en javascript/
document.write("la suma de 鈥+x+鈥 y " +y+ " es "+ z);
</script>
</body>
</html>


<html>
<head>
<title>Mi primer archivo html</title>
<style type=鈥渢ext/css鈥>
body
{
background-color: #a60808;
color: white;
font-family: Helvetica;
}
strong
{
background-color: #ffa1a1;
}
</style>
</head>
<body>
<p>Hola <strong>mam谩</strong> ya casi aprendo</p>
<p>Este es otro p谩rrafo</p>
<script type=鈥渢ext/javascript鈥>
var x = 1;
var y = 2;
var z = x + y;
document.write("El valor de z es " + z);
</script>
</body>
</html>

al escribir <style> todas las etiquetas quedan del mismo color que el texto normal en atom, que podr谩 ser? Psdt: no pude seguir avanzando por eso 馃槮

Olvidaste un detallito. Si Heveltica no est谩 instalado en el ordenador, la linea 9 no funciona.

驴Porqu茅 atom no me colorea los textos?, el c贸digo lo tengo bien escrito. y funciona normal.

<!DOCTYPE html>
<html>
<head>
<title>Mi primer archivo HTML</title>
<style type=鈥渢ext/css鈥>
body
{
background-color: blue;
color: white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola <strong>Mundo estoy programando </strong>muy_bien
<p>Este es otro p谩rrafo</P>
<script type=鈥渢ext/javascript鈥>
var x = 1;
var y = 2;
var z = x + y;
document.write(鈥淓l valor de z es:鈥 + z);
</script>
</body>
</html>