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’re 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(“Muy 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=“es”>

<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(“Cada 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 “Peso 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=“text/javascript”>
var Volts = prompt(“Cual es el voltaje?”);
var Amper = prompt(“Cual es la Corriente?”);
var FP = 0.8;
var Trifasico = 1.73;
var Potencia;
Potencia = Volts * Amper * FP * Trifasico;
document.write(“El voltaje ingresado es " + Volts + " Volts … La corriente ingresada es " + Amper + " Amperes” + “<br>” + “<br>” + “El 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 = “muchas 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 (“No 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=“text/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=“text/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=“text/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=“text/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=“text/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=“text/javascript”>
var x = 1;
var y = 2;
var z = x + y;
document.write(“El valor de z es:” + z);
</script>
</body>
</html>