Fundamentos de Programación

1

Programación desde Cero con JavaScript

2

Programación Básica con Consola de Navegador

3

Creación y gestión de archivos HTML básicos

4

Estructura Básica de Documentos HTML

5

Conoce la estructura básica de HTML y cómo integrarla con JavaScript

6

Instalación de Visual Studio Code y configuración inicial

7

Variables y texto dinámico en JavaScript

8

Programación de Piedra, Papel o Tijera en JavaScript

9

Algoritmo de Piedra, Papel o Tijera en JavaScript

10

Generación de Números Aleatorios en JavaScript

11

Funciones en JavaScript: Uso y Buenas Prácticas

12

Condiciones y Ciclos en Programación Python

13

Programación: Control de Flujos con Ciclos While

14

Rutas Absolutas y Relativas en Sistemas de Archivos y Web

15

Manipulación del DOM y Eventos en JavaScript

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación de páginas web con HTML y CSS

17

Selección de Mascota en HTML con Inputs de Tipo Radio

18

JavaScript: Hacer Funcionar Botón de Selección de Mascota

19

Eventos en JavaScript: Escucha Carga de HTML y Ejecuta Función

20

Condicionales en JavaScript: Verificación de Inputs

21

Manipulación del DOM con JavaScript: Actualizar Contenido Dinámico.

22

Selector de Mascota Enemiga con JavaScript y Números Aleatorios

23

Eventos con addEventListener en Botones de Ataque HTML

24

Selección aleatoria de ataques para enemigos en JavaScript

25

Creación de Elementos HTML con JavaScript: `createElement` y `appendChild`

26

Programación Funcional en JavaScript: Conceptos y Ejemplos Prácticos

27

Tablas de Verdad: Operadores Lógicos en Programación

28

Cambio dinámico de vidas en combates con JavaScript

29

JavaScript: Validación de Vidas en juego de Combate

30

"JavaScript: Activar reinicio y desactivar botones post-juego"

31

Mostrar y Ocultar Elementos HTML con JavaScript

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Propiedades y selectores CSS: Estiliza tu página web

33

Tipos de Display en CSS: Block, Inline e Inline-Block

34

Alineación y Posicionamiento con Flexbox en CSS

35

Modelo de Caja en CSS: Margen, Borde y Relleno

36

Estilos Flexbox para Diseñar una Web Atractiva

37

Estilos CSS avanzados para botones interactivos en juegos

38

Estilos CSS para Juegos con HTML y JavaScript

39

Estiliza Elementos con Flexbox para Proyectos Web

40

Separación de Elementos en Mensajes con JavaScript y HTML

41

Maquetación con CSS Grid: Crear Rejillas y Distribuir Contenidos

42

Diseño Responsivo: Usando Media Queries en CSS

43

Pseudoclases CSS: Hacer Visible la Selección en Formularios

Quiz: Estilos con CSS

Optimización de código

44

Optimización de Código JavaScript para Juegos Interactivos

45

Refactorización de Código: Reutilización de Variables en JavaScript

46

Clases y objetos en JavaScript para videojuegos

47

Creación de Objetos en JavaScript: Clases y Propiedades Básicas

48

Manejo de Arreglos en JavaScript: Creación y Manipulación de Datos

49

Manipulación del DOM con JavaScript y Mokepones

50

Manipulación HTML con JavaScript: Inyectando Mokepones Dinámicamente

51

Depuración de Errores en JavaScript: Variables y Elementos HTML

52

Gestión de Objetos en JavaScript: Fuente Única de Verdad

53

Manipulación de Arreglos en JavaScript: Selección de Elementos Aleatorios

54

Iteración de Arreglos en JavaScript: Mostrar Datos en HTML

55

Función que Genera Botones Dinámicos en JavaScript

56

Eventos de Clic en Botones con JavaScript

57

Validación de secuencia de ataques en JavaScript

58

Validación de ataques en juegos HTML: lógica y JavaScript

59

Diseño de Algoritmos para Juegos Interactivos

60

Optimización de Estilos en Juegos Web con CSS

Quiz: Optimización de código

Mapa con canvas

61

Mapa Interactivo con Canvas y JavaScript

62

HTML y JavaScript para Movimiento en Canvas

63

Control de Movimiento en Canvas con JavaScript

64

Eventos de Teclado: Movimiento de Personajes en JavaScript

65

Pintar imágenes y personajes en Canvas HTML

66

Métodos de la Clase Mokepon: Cómo Pintar y Mover Enemigos

67

Detección de colisiones en videojuegos con JavaScript

68

Colisiones en Desarrollo de Videojuegos con JavaScript

69

Redimensionar mapas en JavaScript: adaptable a pantalla completa

70

Estilos CSS Avanzados para Páginas Responsivas

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

Comunicación Cliente-Servidor con HTTP y APIs

72

Instalación de Node.js en Windows para desarrollo backend

73

Uso de la Terminal de Comandos para Desarrolladores Node.js

74

Servidor Web con Express.js: Creación y Configuración Básica

75

Entendiendo URIs y HTTP en Desarrollo Web

76

Comunicación entre Frontend y Backend con Node.js

77

Comunicación Frontend-Backend con JSON para Selección de Mokepones

78

"Actualización de Coordenadas en Node.js para Juegos Multijugador"

79

Gestión de Coordenadas en Multiplayer con JavaScript

80

Optimización de Código en JavaScript para Videojuegos

81

Batalla Final Mokepon: Intercambio de Ataques en Línea

82

Programación de Fetch API con JavaScript en Aplicaciones Web

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Programación Multijugador con Node.js y Express

84

Desarrollo web backend con Node.js y Express

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Instalación de Visual Studio Code y configuración inicial

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 “notepad” 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 “abrir 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 367

Preguntas 227

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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 💚

<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…eso me gusta

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=“utf-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.

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

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 =“utf-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>

Algo me dice que esta va a ser la definitiva

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:

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 “meta”, 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 “meta” y la palabra “charset” es absolutamente obligatorio, “charset” es un atributo de la etiqueta “meta”. 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 “UTF-8”

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

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

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.

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

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

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

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 💚

quien haciendo el curso en el 2024... saludos desde Chileeeeee............

Me vine a este curso tratando de aprender C (el lenguaje que nos estan enseñando en la uni) y ahora voy a salir experta en paginas web xd

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

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

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

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

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

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

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

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

También hay Vim, Freddy :(

👌😁 💚💚

quien sabe como abrir la pagina google en blanco desde visua studio., por fi information

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.

Estoy emocionada con estos primeros pasos

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

❤️

Cntrl K + Cntrl C (para comentar un texto seleccionado)
Cntrl K + Cntrl U (para “descomentar” 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

Hola Prosor
Escribí el código sin el meta y arrojo la palabra “có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…

todo es totalmente diferente en una Mac, y se me esta complicando un poco
He tenido la oportunidad ver ver las clases varias veces, y como principiante, al principio no entendía muy bien, pero como dijo David. Es cuestión de práctica y paciencia. Me encanta el curso me tiene inmerso completamente. Muchas gracias por la oportunidad que dan de aprender atravez de este curso gratuito.
Cuando escribes código en Visual Studio Code y notas que las palabras con tilde se resaltan en rojo, esto se debe a que el editor no tiene activada la detección del idioma o codificación adecuada. Asegúrate de agregar la etiqueta `<meta charset="utf-8">` en la sección `<head>` de tu archivo HTML, como se mencionó en el transcript. Esto permitirá que el navegador interprete correctamente los caracteres especiales. Recuerda, siempre guarda los cambios y recarga la página para ver los efectos.
Para que tu computadora reconozca las tildes al escribir, asegúrate de que tu archivo HTML tenga la etiqueta `<meta charset="utf-8">` dentro del `<head>`. Esta etiqueta le indica al navegador cómo interpretar los caracteres, permitiendo el uso correcto de tildes y otros caracteres especiales. Si ya has agregado esta etiqueta y aún no funciona, revisa la configuración de idioma y teclado de tu sistema operativo. Asegúrate de que esté configurado para español. Esto debería resolver el problema.
🐉 Hay algunas cosas muy geniales que se pueden hacer en VSC. Como tener imágenes de monas chinas de fondo. ![](https://static.platzi.com/media/user_upload/image-32c5de65-d8ca-451b-b332-856c16129910.jpg)
aunque estoy comensando wooo!!! las clases son geniales saludos
No sé si solo me pasa a mi.. pero cada vez que hago click en un comentario se despliega todo el historial de comentarios en la misma pestaña y no en una nueva. Lo cual es bastante tedioso, ya que, perdemos el video de la clase que estamos viendo. Ojalá corrijan ese error, sería mucho mejor redirigir esta función a una nueva pestaña. Gracias
me gusto el nuevo editor de Microsoft y ahora con copilot uuufff
Les voy a recomendear un atajo para el html. Cuando creen su index.html, en vez de escribir el html:5 pueden usar el: !+Tab y ya se les va a hacer la estructura
haz un arbol de verdad

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.

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

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=“UTF-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=“utf-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