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

Instalando tu primer editor de c贸digo

6/84
Recursos

Si vas a aprender a programar, necesitas un editor de c贸digo. Pero 驴Por qu茅 usar uno? 驴Cu谩l elegir? 驴Y c贸mo instalarlo? Qu茅date conmigo y respondamos todas esas preguntas 馃槈.

驴Qu茅 es un editor de c贸digo?

En pocas palabras, un editor de c贸digo es un software que te permite escribir y editar c贸digo en texto plano, a la vez que te brinda herramientas varias para facilitar tu proceso de trabajo.

El c贸digo se escribe en texto plano. Es decir, texto simple y sin ning煤n tipo de formato (como negritas, cursivas y variedades de tama帽o o color). Por lo tanto, no puedes escribir c贸digo usando software dedicado a aplicar estos formatos en cartas y documentos (como Microsoft word, Google docs, o Pages).

As铆 que necesitas un software especializado que te permita escribir texto plano, pero que al mismo tiempo te brinde herramientas para facilitar tu proceso de trabajo. Algunas de estas herramientas son: detector de errores en el c贸digo, herramientas para autocompletar, buscar y reemplazar; resaltados varios para facilitar la lectura del c贸digo, entre otros.

Adem谩s. algunas de estas herramientas admiten la instalaci贸n de extensiones que permiten personalizar y ampliar a煤n m谩s las capacidades del editor de c贸digo. Van desde asistencia con colores y resaltados, a herramientas de comunicaci贸n de equipos dentro del editor de c贸digo como CodeStream.

驴Qu茅 editor de c贸digo instalo primero?

Si est谩s siguiendo este curso, te recomendamos que empieces probando Visual Studio Code.

Existen muchos editores de c贸digo en el mercado, y la mayor铆a son gratuitos (incluyendo el block de notas o el 鈥渘otepad鈥 que viene con tu computadora). Sin embargo, Platzi eligi贸 esta para ti porque es gratuita, corre en windows, mac y Linux; y es una de las mejor valoradas en el entorno profesional al momento de lanzar este curso (2022).

驴C贸mo instalar Visual Studio Code?

  1. Entra al sitio web oficial de Visual Studio Code y desc谩rgalo para tu sistema operativo.
  2. Ejecuta el instalador que se descarg贸 en tu computadora.
  3. Acepta los t茅rminos y condiciones (si est谩s de acuerdo).
  4. Luego tendr谩s que indicarle al instalador si deseas que realice alguna tarea adicional (abajo te explico qu茅 significan estas opciones), y le das a siguiente.
  5. Finalmente, esperas a que termine la instalaci贸n y le das finalizar 馃檪

Tareas adicionales durante la instalaci贸n de Visual Studio Code

Te recomendamos habilitar las siguientes opciones: te recomendamos:

  1. Crear el acceso directo en el escritorio (para que puedas abrirlo desde el escritorio con facilidad).
  2. Agregar la acci贸n 鈥渁brir en code鈥 a los menu contextuales de archivo y de directorio (Esto te permite abrir archivos y carpetas desde el men煤 que se abre cuando haces click derecho en ellos).
  3. Registrar Code como editor para los tipos de archivo admitidos (para que tu computadora abra los archivos con Visual Studio Code en lugar del Notepad).
  4. Agregarlo al PATH (para que puedas abrir tus archivos y carpetas f谩cilmente desde la terminal y l铆nea de comandos).

Estas opciones te beneficiar谩n en tu carrera c贸mo programador, especialmente si Visual Studio Code se convierte en tu editor de texto preferido.

Vista de la ventana de "Tareas Adicionales" durante la instalaci贸n de Visual Studio Code (2022)

Usando Visual Studio Code por primera vez

Solo la pr谩ctica te har谩 un maestro en Visual Studio Code. Sin embargo, d茅jame darte algunas nociones clave para que empieces a usarlo ahora mismo 馃憤

Primera impresi贸n de la ventana de Visual Studio Code (2022)
  1. VSCode emplea ventanas al igual que el navegador de internet. Puedes trabajar con varios archivos a la vez desde la misma ventana.
  2. Por defecto, VSCode suele mostrar una ventana de bienvenida y otra con las mejoras de la 煤ltima versi贸n instalada. Puedes cerrarlas cuando quieras.
  3. Por defecto, VSCode te preguntar谩 si conf铆as en los autores de los archivos que intentes abrir. Esta es una medida de seguridad normal, y se toma para protegerte de archivos ejecutables que puedan puedan perjudicar tu computador.
  4. VSCode tiene un men煤 superior muy similar a los de otros software, pero tambi茅n tiene un men煤 a la izquierda que se distingue por 铆conos en lugar de palabras. Estos despliegan un panel lateral con diferentes funcionalidades.
  • El primer bot贸n es el explorador de archivos. Si decides abrir una carpeta entera con VSCode, este panel te permite navegar f谩cilmente por los diferentes archivos que se encuentran dentro de la carpeta.
  • El segundo bot贸n es un buscador. Te permite buscar palabras en cualquiera de los archivos de la carpeta que tienes abierta (y resalta todas sus iteraciones).
  • El tercero tiene que ver con un software de control de versiones (algo indispensable para programar profesionalmente. M谩s informaci贸n en el Curso Profesional de Git y Github).
  • El cuarto es una herramienta interna de VSCode para correr y detectar bugs en el c贸digo.
  • El quinto abre un panel d贸nde podr谩s buscar e instalar extensiones para tu editor de c贸digo.
  1. El editor de VSCode tiene tema oscuro por defecto para que distingas la implementaci贸n de colores dentro del c贸digo.
  2. VSCode cuenta el n煤mero de l铆neas del archivo que tengas abierto. Tambi茅n destaca la indentaci贸n de c贸digo, y aplica un c贸digo de colores al texto del archivo (que depende de la extensi贸n del archivo).
  3. VSCode emplea una vista miniatura del c贸digo en el extremo derecho de la ventana. Puedes usar este para navegar f谩cilmente por tu c贸digo.
  4. Puedes hacer zoom para aumentar el tama帽o del c贸digo y facilitar su lectura. Puedes lograrlo pulsando Ctrl鈫掆+鈥 y Ctrl鈫掆-鈥

Bonus: utf-8

El navegador no puede leer acentos y letras 鈥溍扁 si no indicas esto en el HTML.

Es probable que ya te hayas dado cuenta de que estos acentos no se muestran bien cuando cargas el archivo HTML com煤n y corriente en tu navegador. Esto se debe a que los acentos no pertenecen al set de caracteres que carga por defecto el HTML.

Para usar caracteres comunes del espa帽ol (como acentos y la letra 鈥溍扁), necesitas activar el Unicode Transformation Format 8 (UTF-8) en tu archivo HTML colocando la siguiente etiqueta <meta> en el <head> de tu archivo:


<meta charset="utf-8" />

Esta se ve as铆 dentro del c贸digo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
       
    </body>
</html>

驴Qu茅 tal si creas un nuevo archivo HTML, pero esta vez desde Visual Studio Code? 馃檪

Experimenta un poco, y nos vemos a continuaci贸n en la siguiente clase: Como declarar variables y usar prompt 馃槈

Contribuci贸n creada por: Jhonkar Sufia (Platzi Contributor).

Aportes 266

Preguntas 199

Ordenar por:

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

o inicia sesi贸n.

驴Qu茅 tan ch茅vere en Visual Studio Code?

.
Este editor de c贸digo es tan incre铆ble que incluso puede escribir todo el c贸digo base por ti 馃槺. Por ejemplo, si abres un archivo .html vac铆o, puedes escribir html y ver谩s que te aparece este men煤:
.

.
Si le das click a la opci贸n que dice: html:5 隆ver谩s que el c贸digo base se escribe solito autom谩ticamente!
.

.
Ahora, vas a ver cosas medias raras como que hay una etiqueta meta con un http-equiv y otra con un name="viewport"鈥 no te preocupes, Visual Studio Code es tan inteligente que te escribe esas etqiuetas por defecto que ayudan a tu navegador a interpretar de una mejor forma tu p谩gina web 馃槃. A medida que avances aprender谩s sobre esas etiquetas, por ahora, si no te sientes segura o seguro con tener eso ah铆 escrito puedes borrarlo, pero ahora ya sabes c贸mo escribir de forma r谩pida esa base de c贸digo que acabas de aprender 馃挌.

馃挌 Extensiones recomendadas para tunear tu Visual Studio Code:

  • Prettier: da formato al c贸digo

  • Live Server: abre y actualiza autom谩ticamente un archivo HTML en el navegador

  • Color Highlight: nos muestra una pre-visualizaci贸n de los colores, muy util en CSS

  • Bracket Pair Colorizer: le da diferentes colores a los parentesis.

  • Path Intellisense: auto-completa rutas, muy util en HTML

  • Auto Rename Tag: auto-completa los pares de tags en HTML

  • Material Icon Theme: agrega iconos distintivos a cada formato de archivo

  • Themes: temas para VSCode que le dan diferentes colores a los elementos de un c贸digo
    _

Si no sabes de qu茅 hablo te recomiendo esta clase 鉂わ笍

Les recomiendo que instalen la extensi贸n Error lens para que el editor les de feedback de donde estamos incurriendo en errores

ME ENCANTA ESTE CURSO Ver que ahora en este curso se utilizara Visual Estudio Code me da muchas ganas de terminarlo 馃憣馃榿 馃挌馃挌 La old school seguimos conservando nuestro ATOM 馃挌

Por ac谩 les dejo algunos post de alexcamachogz, me parecen recursos excelentes si quieren aprender a personalizar su Visual Studio Code:

ni modo a desinstalar atom XD

隆Programar online! 驴Sab铆an que pueden usar Visual Studio Code sin instalarlo en su PC?
VSCode Online

<h1>Top 5 extensiones de visual studio code que deberias tener</h1> 
  1. PRETTIER
  • Esta extensi贸n permite formatear el c贸digo seg煤n las reglas de cada lenguaje. Soporta la sintaxis de una gran cantidad de lenguajes, como JavaScript, JSX, Flow, TypeScript, JSON, HTML, Vue, Angular, CSS, Less, SCSS, GraphQL, MarkDown, CommonMark, MDX y YAML. Prettier ya trae sus reglas predeterminadas, pero t煤 tambi茅n puedes crear las tuyas, como d贸nde van los saltos de l铆nea, las tabulaciones, los espacios, etc. 馃槑
    .

    .
  1. LIVE SHARE
  • Te permite editar y depurar el c贸digo en tiempo real con otro programador, tambi茅n puedes llamarlos, chatear, compartir terminales y servidores. Como en cualquier otra herramienta de trabajo colaborativo, puedes ver en d贸nde est谩 tu compa帽ero en el programa y en qu茅 l铆nea del c贸digo est谩 trabajando. Si hay un problema que surja en el momento, pueden llamarse y encontrar la soluci贸n juntos. 隆Qu茅 viva el trabajo en equipo y en tiempo real! 馃檶
    .

    .
  1. GITLENS
  • Esta extensi贸n te brinda muchas herramientas para trabajar con GIT. Te permite ver el autor de las notas, informaci贸n del repositorio en el que est谩s, las ramas y, dependiendo del archivo o l铆nea que te encuentres, te mostrar谩 el historial de cambios de cada archivo o cada l铆nea para que puedas hacer comparaciones. 隆Es una herramienta muy completa para trabajar con GIT! 馃懆鈥嶐煉
    .

    .
  1. LIVE SERVER
  • Esta es una de las extensiones m谩s recomendadas por desarrolladores frontends, ya que crea un peque帽o servidor local para que puedas ver lo que est谩s haciendo y se actualice autom谩ticamente con cada cambio.
    .

    .
  1. STORIES
  • 驴Te imaginabas que pod铆as compartir tu trabajo por stories?, 驴o qu茅 podr铆as ver lo que otros desarrolladores est谩n haciendo con su c贸digo? Con esta extensi贸n podr谩s mostrar partes de tu c贸digo, ver el c贸digo de otros usuarios e incluso manipularlo, como si fuera un archivo local, y reutilizarlo en alguno de tus proyectos.

creo que aqui se reune la gente que quiere cambiar el mundo鈥so me gusta

Platzi tiene un tema especial en Visual Studio Code con los mismos colores de su aplicaci贸n y p谩gina web. Solo tiene buscar 鈥楶latzi鈥 en la pesta帽a de extensiones.

Visual Studio Code (VS Code) es un editor de c贸digo desarrollado por Microsoft. Es software libre y multiplataforma. VS Code tiene una buena integraci贸n con Git, cuenta con soporte para depuraci贸n de c贸digo, y dispone de muchas de extensiones, que b谩sicamente te da la posibilidad de escribir y ejecutar c贸digo en cualquier lenguaje de programaci贸n.

Colorea las etiquetas, variables, funciones etc鈥 鈫 ayuda visual al DEV
tiene auto completado 鈫 agiliza el codeo
<aside>
馃挕 <meta charset=鈥渦tf-8鈥 /> 鈫 dice que la pagina web tiene una serie de caracteres del estandar utf-8 (tiles,帽, cosas del espa帽ol)

</aside>

TIP:
Para crear la estructura de un archivo HTML en VSC, basta con escribir HTML:5 y enter. Con esto se genera autom谩ticamente toda la estructura de la p谩gina.

VSCode es una de las tantas que existen, si quieren jugar y conocer las que Freddy nombra, aqu铆 las comparto:

Tambi茅n hay editores online cuando quieran hacer pruebas rapidas:

鉂わ笍

Por alguna raz贸n cambiar el guion a un gui贸n bajo solucion贸 mi problema con los caracteres especiales
si alguien m谩s tiene este problema esa fue mi soluci贸n

Resumen

Se puede programar en cualquier programa de texto plano (incluyendo el bloc de notas) pero hay herramientas para hacernos mucho m谩s f谩cil la vida cuando programamos. Actualmente el programa m谩s usado para escribir c贸digo es Visual Estudio Code, es gratis y lo puedes descargar aqu铆

la etiqueta meta nos permite agregar los metadatos de nuestro archivo, uno de esos metadatos es el tipo de caracteres que soporta nuestro archivo

<meta charset="utf-8" /> //nos permite visualizar ac茅ntos, emojis, etc.

Solo un detalle, colocar la / de cierre en la etiqueta <meta> es opcional, no es obligatorio, por lo cual es perfectamente posible solcamente usar <meta charset="utf-8">.
Fuentes:

驴Qu茅 aprendimos hoy?
Para que se puedan leer los acentos y las 帽麓s hay que usar la siguiente etiqueta
<meta charset =鈥渦tf-8鈥 />
vamos lento, porque vamos lejos 馃槈

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
    <title>Mi primera paginita</title>
	<script>
	a = 5
	b=235
	perrito = "Ciruelejo"
	alert("El valor de a m谩s b es "+ (a+b))
	alert("Este c贸digo va a funcionar")
	</script>
</head>
<body>
	<h1> Mi primer sitio Web</h1>
	<p>Hola <strong>querida</strong> clase</p>
	<p>Este es mi primer programa completo y profecional</p>
	<p>Gran programa</p>
	
</body>
</html>

Es Visual Studio Code es una herramienta maravillosa. Y todo lo que podemos hacer con las extensiones. Apenas estoy aprendiendo pero quise verlo y complementarlo desde la visi贸n de Platzi.

Cosas que debes de saber para andar a la moda en Platzi:

Algunas personas que estudian aqu铆, y claro, algunos profes, usan este tema en Visual Studio Code:

SynthWave '84

Tambi茅n se utiliza esta extensi贸n para compartir nuestro c贸digo a nuestros profes o compa帽eros:

CodeSnap

Ejemplo:

Algo me dice que esta va a ser la definitiva

por si les interesa saber mas acerca del "utf-8"
https://dinahosting.com/blog/que-es-utf-8/

Fascinado con el curso, estoy desde las 10 am metido en esto.

Amo los comentarios, literal en base a ellos me hago el 90% del d铆a.

Los que hicieron el anterior curso de programaci贸n, y ven que Visual Studio es mejor mejor que Atom que dan asi literal jajkajakjakjakjakja

Para los que como yo extra帽an al Freddy recomendando Atom y tuvimos que desinstalarlo jsjsjs. Aqu铆 un tema para el VSC con la interfaz de Atom 馃挌

**A ver sus themas de VS code 馃槃
**Este es el mio:

muy interesante y motivante la programaci贸n que se explica aca en platzi

RESUMEN

Visual Studio Code

Es una de m煤ltiples opciones para usar una aplicaci贸n para programar mejor, hay unas que sirven mucho mejor que otras, por ejemplo Word, WordPerfect o en cualquier otra herramienta de texto enriquecido que sea para crear cartas y/o documento, esos lugares no permiten editar texto plano.

<aside>
馃挕 Texto plano: Texto que no tiene ning煤n formato, texto que no te permite colocar negrita, cursiva, subrayado o colores.

</aside>

La magia en las herramientas de c贸digo, es que te identifican los errores y te los colorean de una manera visual (No identifican todos los errores pero ayudan un mont贸n.)

Puedes usar cualquier herramienta de c贸digo, al final del d铆a es un archivo de texto. El editor no importar, el sistema no importa, pero la extensi贸n del archivo si importa.

Las extensiones de los archivos es la forma en que los editores de c贸digo detectan que es lo que est谩n viendo, entonces el c贸digo en Java Script es distinto a HTML, es distinto a CSS, es distinto a Python. Tienes que colocar la extensi贸n de archivo correcta y tienes que entender la estructura de carpetas correctas dentro de tu navegador o dentro de tu computador.

Los colores en el c贸digo es una ayuda visual para que puedas programar mejor.

En estos momentos no funcionan las tildes, ya que no vienen por naturalidad en el c贸digo, para ello hay que agregarle una etiqueta especial llamada 鈥渕eta鈥, se colocar铆a en el primer lugar de el head, dentro del head.

<html>
<head>
		<meta charset="utf-8" />
		<title>Mi primera programada</title>
		<script>
		a = 5
		b = 235
		alert("el valor de a + b es: " + (a + b))
		alert("Este c贸digo va a funcionar")
		</script>
</head>
<body>
		<h1>Mi primer intento de website</h1>
		<p>Este es nuestro primer programa completo y profesional</p>
		<p>Gran programa</p>
</body>
</html>

Cuando las etiquetas no tienen contenido por dentro (Ejemplo de las etiquetas que si tienen contenido es, <title>Titulo de la pagina</title> ), entonces se cierran con un 鈥/>鈥, Y el espacio que hay 鈥渕eta鈥 y la palabra 鈥渃harset鈥 es absolutamente obligatorio, 鈥渃harset鈥 es un atributo de la etiqueta 鈥渕eta鈥. lo que se le esta diciendo al navegador es que esta pagina web va a tener una serie de caracteres de un est谩ndar llamado 鈥淯TF-8鈥

UTF-8 es el est谩ndar que nos permite a帽adir las tildes, 帽 y todas las cositas de nuestro maravillosa lengua espa帽ola.

Me estoy divirtiendo con la programaci贸n. Me traume un poco con powerapps, esto si es mas chevere.

Tambi茅n hay Vim, Freddy :(

Soy completamente nuevo en esto, yo de oficio soy mecanico automotriz y estoy entendiendo :0
Creo que si voy a pagar la suscripcion una vez termine este curso

鉂わ笍

sinceramente no es nada facil
xd lo importante es que lo intento

NOTA: Para ver el texto m谩s grande dentro de Visual Studio Code oprime a la vez las teclas Ctrl + (m谩s). Si quieres hacer el texto m谩s chico Ctrl - (menos), y si quieres dejar el texto al tama帽o est谩ndar Ctrl 0 (cero).

驴Por qu茅 Word no funciona?

Podr铆amos hacernos la pregunta de por qu茅 Microsoft Word no funcionar铆a para programar y el block de notas si. Te cuento.

Hagamos un experimento.

  • Ve y abre Word o su equivalente en Google, que es Google Docs.
  • Escribe una oraci贸n. Cualquiera. Por ejemplo, mi perro se llama Lucas. No importa qu茅 escribas.
  • Guarda el documento localmente.
  • Ve a la ubicaci贸n del documento y:
    • Dale click derecho.
    • Dale click en abrir con.
    • Si te aparece el block de notas, seleccionalo. Si no, dale en donde dice Elegir otra app o algo por el estilo.
    • Busca el block de notas y lo seleccionas.


Al abrir, ver谩s que no te saldr谩 la oraci贸n que escribiste, te saldr谩 algo como:



驴Ahora lo ves? Apps como Word no generan c贸digo plano, sino que tienen cierta l贸gica detr谩s que modifica el texto original si lo tratamos de abrir con una app como block de notas. Imag铆nate programar en Word y que al abrir VS Code te salgan esas cosas. 馃槄

Extensiones de Visual Studio Code: Autoclose Tag, Error Lens, Highlight Matching Tag, Live Server, Platzi Theme, Prettier, Spanish Lenguage, Tabnine y VsCode Icons.

Cntrl K + Cntrl C (para comentar un texto seleccionado)
Cntrl K + Cntrl U (para 鈥渄escomentar鈥 un texto seleccionado)
Sumamente 煤til.

despues de instlado vsc,podemos instalar extensiones que nos haran mas facil trabajar con nuestro programa

Les dejo unos comandos que les pueden servir 馃槂
Pueden ver mas en "File"
Siempre se los muestra 馃槂

yo aprendi por otros medios que ya se html ,css,algo de javasCript pero esto lo repito por que es un buen recordatorio que todos debemos hacer pa que no se apague el cerebro

Sin duda, el mejor editor de c贸digo de nuestro tiempo.
Lo genial de VScode es la gran cantidad de extensiones que puedes agregar, y muy f谩cilmente. Adem谩s, es muy ligero. Recuerdo aquellos d铆as en que usaba Sublime Text y no ten铆a idea de como agregar una extensi贸n, o cuando empec茅 a usar Atom y tardaba una eternidad en abrir un proyecto鈥 VScode mejor贸 mucho las cosas.

Programar en un editor de texto al principio puede ayudarnos a memorizar la estructura de los lenguajes que est谩s aprendiendo.
Creo que si empiezas usando solo editores de c贸digo como VScode, en alguna oportunidad, (aunque rara), puede pasar que necesites programar en un equipo diferente y no cuentes con la herramienta. Muy seguramente no recordar谩s las estructuras de los lenguajes muy bien, porque el editor siempre te ayud贸 a autocompletar. Pero bueno, ser铆a una rara ocasi贸n.

Existen editores online que te servir谩n para hacer proyectos peque帽os o pr谩cticas. Muy 煤tiles.
Aqu铆 dejo unos cuantos:

Codepen.io
Cloud9
Repl.it
Stackblitz.com
VScode.dev

Hola Prosor
Escrib铆 el c贸digo sin el meta y arrojo la palabra 鈥渃贸digo鈥 con la tilde, no me ocurri贸 lo del video.!

<html>
<head>
	<title>Mi primera pagina</title>
	<script>
	a=10
	b=255
	alert("el valor de a+b es " +  (a +b))
alert("este c贸digo va a funcionar")
</script>
<body>
	<h1>Hola Anita</h1>
	<strong>Por favor</strong> no abras mis documentos 隆隆隆
	<p> Leyder el programador. :)} </p>
<html>

Adi贸s a Atom鈥

Holaaa, mi nombre es Jes煤s, me dicen Yisus y pues quer铆a expresar que鈥 Empec茅 a estudiar en platzi por una propaganda de YouTube, y empec茅 a estudiar programaci贸n en modo gratuito, al tope del curso por falta de pago, espere unos meses y algo me insist铆a que invirtiera en esto y aqu铆 estoy pague el a帽o y la verdad no me arrepiento de nada, tengo muchas ganas de crecer, espero que me den consejos y buenas practicas las leer茅 y tendr茅 en cuenta

No me aparece la tilde

Para que se visualicen las tildes del espa帽ol se agrega <meta charset="UTF-8" /> antes de la etiqueta title.

Para las personas que desean ir mirando su c贸digo instant谩neamente van programando hay una extensi贸n que se llama Live Server que es s煤per buena.

Les regalo un truco
a la izquierda, abre la secci贸n de extenciones. Luego busca

spanish

e instala la primera opcion.
Ahora tienes visual studio code en espa帽ol

Aqu铆 pueden descargar Visual Studio Code 馃殌馃榿馃挭馃徎

wooow鈥 estoy empezando de cero, pero realmente es emocionante como va esto鈥 Visual studio code, mi primer editor de c贸digo.

Estoy repasando el curso y me parece que agregaron otras cosas, y m谩s inteligente jajaa鈥 exitos a todos !!

me gusto mucho esta clase

me gusta que esta vez se use VSC, en el curso de programacion basica anterior habiamos usado ATOM. Estoy haciendo este curso de nuevo porque parece mucho mas bonito

Les recomiendo que instalen Github Copilot, es muy 煤til y ahora m谩s eficiente porque est谩 reforzado con inteligencia artificial, nos permite autocompletar l铆neas de c贸digos鈥

Apenas estoy aprendiendo pero tuve la oportunidad de trabajar en la creaci贸n de una pagina web y aunque la otra persona era la que hacia todo yo estaba anotando y una de las cosas que not茅 fueron estos detalles. espero les funcione.

Buena tarde, una dudita, pese a que no tengo la etiqueta meta , me est脿 dejando con tilde el mensaje del alert. Ser脿 la versi貌n del visual? Me parece curioso.

Porqu茅 a mi, con el Visual Studio, cuando hago rodar el archivo, no se me aparecen los alertas en el navegador?
Aclaraci贸n: uso Mac y el navegador es el chrome.

Siendo honesto he visto varios tutoriales algunos los cierro a mitad del video pero la forma que tienes de ense帽ar es muy buena

Me ausento de este curso porque no he podido hacer una l铆nea de c贸digo en el bloc de notas ni en el visual studio code. No s茅 porqu茅, si alguien me orienta, me da un consejo lo agradezco.馃ズ

No s茅 desde cuando este c贸digo dej贸 de tener punto y coma pero no lo extra帽o馃槑

Me est谩 encantando este curso.

Empezando de cero el curso de programaci贸n b谩sica. Siento que con este me va ir mucho mejor que con el pasado .

El editor Visual Studio Code se ve muy profesional y original, en el anterior curso recomendaban Atomy pero este me parece mejor. 馃挭

no puedo aser la leccion anterior
):

Yo aprend铆 programaci贸n b谩sica de Python con Thonny: una mala decisi贸n.

me encanta este curso 馃槂

Me agrada c贸mo ha cambiado para bien el nuevo curso de programaci贸n, m谩s did谩ctico , mejores ayudas multimedia en la pantalla de la clase (visuales, nombres). Tambi茅n cambiaron el Atom por Visual Studio code

Nunca quiero volver al blog de notas鈥 y ustedes

Instalado 馃槃

馃憣馃榿 馃挌馃挌

Dej茅 de utilizar Visual Studio Code porque consume demasiado y va muy lenta muy m谩quina por eso uso Sublime Text.

hola profe鈥 me encanta como explica

Esta clase dura 6:39min de los cuales solo en 3 min tome nota y saque unos 5 p谩rrafos de conceptos y contenido, brutal.

si no pueden instalar ning煤n editor les recomiendo una pagina que se llama replit, en ella puedes programar cualquier tipo de lenguaje y tambi茅n es muy f谩cil de usar.

Muchas gracias a los profe y a la comunidad por su aporte para personalizar VSC, la verdad sirve de mucho.

A continuaci贸n comparto mi c贸digo, bueno con algunas variantes para personalizar.

Les comparto dos temas muy populares y de mis favoritos para VScode 馃捇馃挌

Shades of Purple
https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple
Dracula
https://draculatheme.com/visual-studio-code

Que genial esta actualizacion te lleva de la A a la Z de un forma practica y sencilla y aun mas te muestra las herramienteas para que tu aprendizaje se vea mas enrequesidor.

  • Un archivo de texto plano es la forma en que el editor de c贸digo detecta lo que se est谩 viendo.
  • Los colores evidenciados son ayudas visuales para el momento en que se esta programando.
  • La etiqueta meta va a tener el atributo charset, la cual para este caso en espec铆fico va a utilizar el standard UTF-8.
  • Cuando las etiquetas no tienen contenido se cierran en el mismo momento, no como la etiquetas que contienen algo para nuestro sitio. E.G: <meta charset=鈥淯TF-8鈥/>

Raro, segu铆 paso a paso las instrucciones, pero a mi me salio el cuadro de dialogo con tilde en primera instancia sin necesidad de usar <meta charset=鈥渦tf-8鈥 />

Si quieren practicar desde el celular pueden descargar TrebEdit. Tiene una version de paga con mejores opciones, pero lo que ofrecen gratis cumple para lo principal que es hacer p谩ginas webs.

visual hizo que quisiera volver a programar despues de ir a la universidad y odiar la programaci贸n y ustedes me lo presentaron!!!

Gracias Genios

Etiqueta especial, llamada "meta"

Por fin Freddy dej贸 de usar Atom y decidi贸 migrar a VSCode. xD!

Esto est谩 de locos jajaja

La vida es mejor con Visual Studio Code 馃憣馃槈

Visual Studio Code es el editor de c贸digo m谩s famoso y usado, y como bien lo menciona Freddy, existen otros como Atom o Sublime Text.

Pero no solamente podemos usar dichos editores, tambien existen algo llamados IDEs, Freddy menciona uno que es Eclipse, hay otros como Intellij o Android Studio.
Un IDE (Entorno de desarrollo integrado) es un editor de c贸digo con m谩s funcionalidades, ayudas o complementos, todo en un mismo software.

En este curso que se va a aprender html-css-js, recomiendo el IDE WebStorm que es el especializado para todo lo relacionado a JavaScript, es de pago pero si tienes correo educativo (el de tu universidad o instituto, tienen dominio .edu) puedes usarlo de forma gratuita (te regalan una licencia estudiantil)

En el curso anterior de programacion basica Freddy nos mando a instalar Atom, gran salto ahora nos piden VSCode haha

  • Las extensiones de los archivos importan!
  • No puedes programar en word.
  • Visual Studio Code es una de m煤ltiples opciones de software que puedes utilizar para programar.

VSC es de Microsoft igual que Github por lo que las integraciones son muy sencillas cuando trabajan en equipo.

Visual Studio Code! 馃挌 hace que programar sea m谩s f谩cil 馃榾

Aqui les dejo el tema de Platzi para VSC
dale clic, que esperas dame clic

Me encant贸 esta herramienta

隆Incre铆ble sesi贸n, Freddy!

Agradecido de haber tomado el curso de prework.

Visual Studio Code



Visual Studio Code es una de las m煤ltiples aplicaciones que puedes usar para programar mejor.

Existen otras alternativas como:

  • Sublime Text
  • Notepad++
  • Atom
  • Eclipse
  • Dreamweaver


Visual Studio Code es un editor desarrollado por Microsoft y se puede descargar desde su p谩gina web.

La etiqueta <meta charset="utf-8" /> que va dentro de <head></head> permite reconocer caracteres utf-8.

Visual Studio Code es ch茅vere 馃槑

Mi theme favorito para VS Code es: Seti-Monokai 驴Cual usas tu?
.
Sugerencia: Instala 煤nicamente las extensiones que vayas a usar, no llenes tu VS Code con much铆simas extensiones porque puede ponerse lento todo.

Recordemos lo que se menciona al final de la clase, es m谩s c贸modo acostumbrarse a guardar con Ctrl + S en lugar de ir a archivo y guardar manualmente!