🐱💻 Para poner un texto en negrita podemos usar <strong> o <b>, la diferencia es que el primero se utiliza para hacer énfasis en un texto (destacar en búsquedas) y el otro simplemente para darle un aspecto visual.
Empieza por acá
Mi primera línea de código
Fundamentos de Programación
¿Qué es HTML/CSS/JS?
JavaScript no es Java
Primeros pasos en el navegador con alert
HTML, CSS, JavaScript de verdad
Los apuntes de Freddy en PDF
Primer proyecto: Peso en otro planeta
Peso en otro planeta
Obteniendo datos del usuario
Flujo y condicionales
Segundo proyecto: Dibujando con Canvas
Cómo funcionan Window y Document
El DOM: nuestro lugar de trabajo en la web
Dibujando en el DOM
Qué son las Funciones en JavaScript
Ciclos while y for en JavaScript
Eventos y Formularios en HTML y JavaScript
Detectar eventos del teclado con JavaScript
Dibujar en canvas con las flechas del teclado
Tercer proyecto: Villa platzi
Funciones matemáticas y números aleatorios en JavaScript
Uso y carga de imágenes en Canvas
Cuarto proyecto: Pakimanes
División, módulo y residuo en JavaScript
Clases y Arrays en JavaScript
Quinto proyecto: Cajero automático
Diagrama de Flujo del Cajero Automático
Implementación del Cajero Automático
Sexto proyecto: Cliente/Servidor
Modelo Cliente/Servidor
Primer servidor web con express
Programación de Hardware y Electrónica con Arduino
¿Cómo funciona un circuito electrónico?
¿Cómo programar un Arduino?
Programación de circuitos con C, Arduino y Sketch
Cómo programar un Arduino con Javascript y Node
Construye un Robot con JavaScript
Robot para riego de plantas en Arduino, Javascript y Node
Materiales de apoyo
Las mejores notas de los estudiantes
¿Cuál lenguaje de programación aprender primero?
La Web con Visión Profesional
Contenido Bonus
Qué son tablas de verdad y compuertas lógicas
Recap Curso Gratis de Programación Básica
Recap Programación básica
Recap Programación básica ENG
HTML, CSS, JavaScript de verdad
5/37Recursos
Los archivos HTML funcionan con etiquetas, por ejemplo
Hola mamá **ya casi aprendo**
Todos los contenidos en HTML deberían estar dentro de una etiqueta, y todos los archivos HTML tienen esta estructura, cómo
<title>Título de la página</title>
Contenido de la página
La etiqueta que te permite escribir CSS dentro de HTML es <style>, se coloca dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se coloca antes de terminar el body.
Recuerda:
Los nombres de las variables tienen algunas reglas, cómo, no pueden tener espacio, debe empezar siempre con una letra, las minúsculas y las mayúsculas importan.
Indentación, tienes bloques de código, estos deben ir un poco a la derecha.
Los programadores pasan 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante seguir buenas prácticas. Es importante ver las extensiones de los archivos.
Ejemplo de etiquetas HTML
HTML: <!-- Asi se escriben comentarios en HTML -->
CSS: /* Asi se escriben comentarios en CSS */
JS: // Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */
<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc... -->
<meta charset="utf-8"/>
<!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que
se coloca para que las tildes sean reconocidas por el navegador, pero es una
buena practica cerrarla, otros ejemplos: <br>"pasaria a esto"<br/>, etc... -->
<title>Mi primer archivo HTML</title>
<!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
<style type="text/css"> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head */
/* type="text/css" Esto es un atributo de la etiqueta */
body
{
background-color: #AAAAFF;
/* background-color es el atributo que cambia el color de fondo de tu pagina */
color: white;
/* Color es el atributo que cambia el color del texto de tu pagina */
font-family: Helvetica;
/* font-family es el atributo que cambia la fuente de tu pagina */
}
strong
{
background-color: #FFAAAA;
/* Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff */
}
</style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
<p>Hola <strong>mama ya casi</strong> aprendo</p>
<!-- <strong/> sirve para poner negrita -->
<p>Esto es un parrafo</p>
<!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
por etiquetas, la mas sencilla es <p/> -->
<script type="text/javascript"> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
var $x = 1;
// var declara una variable, como let o const //
var _y = 2;
// Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
var Freddy_Vega1 = $x + _y;
document.write("El valor de Z es " + Freddy_Vega1);
// document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
</script>
</body>
</html>
Aporte creado por: Josan Guerra
Aportes 3760
Preguntas 1492
Ordenar por:
Hola, para todos los nuevos que estamos aquí y tenemos el error cuando empezamos a trabajar con la etiqueta <style>, (el body no nos cambiaba de color y teniamos que escribir todo manual y eso) despues de estar leyendo un poco y travesiando, he encontrado que el problema esta cuando nombramos el tipo de archivo.
Freddy nos dijo nombrarlo “primero.html”, pues bien, leí que la ultima versión de html es la versión 5, asi que cuando vayan a nombrarlo nombreenlo con .html5
Y les va a funcionar. Esa es la solución. 😉
Hola. Bueno este es mi resultado después de ver ‘HTML, CSS, JavaScript de verdad’
MicroResumen
- Buenas Prácticas => Son estándares sobre la escritura de código, de tal manera que varios programadores puedan escribir e interpretar el código sin que les sea extraño su comprensión.
- Los programadores pasan entre el 80% y el 90% leyendo e interpretando código, y un 10% a 20% escribiendo código.
- Identar Código => Forma parte de las buenas prácticas, ayuda a interpretar mas rápido el código organizándolo.
- Todo lo que debe ejecutarse antes de cargar la página debe ser definido dentro de la etiqueta <Head></Head>.
- Sintaxis => Son reglas de escritura de los lenguajes de programación, estas deben ser respetadas para que el código funcione correctamente.
- Las variables pueden nombrarse tanto con palabras copo también números, aunque existen ciertas restricciones como por ejemplo, deben ser escritos de la misma manera tanto al crearse como también al utilizarse, ya que javascript así como la gran mayoría de los lenguajes profesionales de programación, distingue las mayúsculas y las minúsculas, si el nombre va a estar compuesto por dos palabras, estas deben ir unidas con guión bajo ( _ ), si se va a utilizar números, estas no pueden ir al comienzo del nombre (ej: 2_Fredy) si pueden ser dentro de la estructura del nombre o al final del mismo(Fre2dy, Fredy_2).
- Los programas son un 90% similares, y solo un 10% distintos, esta diferencia se debe a las reglas especiales que pueden contener las mismas.
- Atributo de la etiqueta solo puede ser declarado en el inicio del mismo, mas no al final.
Espero les sirva
¿Por que no me cambia algunos colores en Atom? (posible solución):
1- En la parte inferior derecha del programa (Atom) aparece HTML y le das click.
2- Se habré una ventana, en el buscador le pones H (el inicial de HTML) y dentro de las opciones aparece: HTML (go) y le das click.
No se si esto es correcto, pero me funciono.
los créditos le corresponden a este: https://platzi.com/comentario/913353/
Sitio donde encontraran etiquetas y su definición
Hola puse el script al principio y antes del final del body y de todas formas cuando recargo la pagina me aparece primero el alerta y recién cuando doy aceptar aparece el diseño de la pagina. No entiendo que hice mal? en ninguno de los dos casos muestra el diseño de la pagina
Por si alguien no encuentra estos simbolos en su teclado <>, pueden usar los comandos
"Alt+60" para <
“Alt+62” para >.
Todo genial. Para los que no les salen los colores en las etiquetas. Van a la parte inferior derecha y dna click en HTML (está en mayúsculas) luego se abre una ventana y le dan en Auto Detect y listo, todas las etiquetas serán con colores 👍
Aqui encontre una pagina con algunas etiquetas para los que gusten y quieran experimentar mas durante el curso.
http://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html
Recomiendo los curso de google actívate te enseña html y css gratis.
Solo por aportar algo al curso, es válido aclarar que <strong></strong> no es negrita, semánticamente es hacer un énfasis en algo. Podrían confundirse los nuevos estudiantes.
A todos los nuevos compañeros les recomiendo Visual Studio Code en vez de Atom, es bastante mejor.
Reglas de código en Javascript
- Una variable (var) no puede tener 2 palabras separadas con un espacio, debe ser “underscore” o “guion bajo” o “rayita al piso” 😉 (_)
- No iniciar el caracter de una variable con número, siempre debe iniciarse con una letra.
- No puedes usar signos raros como: Ñ o tildes.
- Las minúsculas y las mayúsculas son diferentes.
- Puedes iniciar un caracter de una variable con un (_) o ($) y no hay problema.
escribo la etiqueta script al final de la etiqueta body pero aún así el navegador me lee primero el script, ¿a que se debe?
Hola compañeros les comparto mi ejercicio.
Si a alguien no le resalta algunos comandos (específicamente los de JS y CSS), deben cambiar el lenguaje a HTML (Go) en la parte de abajo
Yo tengo una pregunta que no sé si se resuelva en alguna parte posterior del curso, pero me gustaría saber para alguien que ya tiene bagaje en el mundo de la programación cómo organizar los diferentes comandos que se tienen por código, es decir, como creo una bibilioteca efectiva de comandos para cada código y no confundirme entre uno y otro. Cualquier respuesta es bien recibida!
freddycasateconmigo.png
Buenas practicas: escribir código de manera que otros programadores lo puedan entender.
**Identacion: **Lo que esta dentro de un bloque de código se corre un poco a la derecha con la tacla tab del teclado.
Estilos: se ponen en un archivo aparte o dentro de la etiqueta head ya que en esta etiqueta esta todo lo que no se ve, esto se llama “metadatos”.
Sintaxis: Reglas de los lenguajes de programación.
Etiquetas:
<strong></strong> = Negritas
<p></p> = Párrafo
<head></head> = Cabecera, siempre se encuentra después de la etiqueta html.
<title></title> = Para poner nombre al archivo en el navegador, la etiqueta title es la que usa google para mostrar las paginas en el buscador.
<body></body> = va dentro de esta etiqueta lo que se observa de manera visual en el navegador.
<style></style> = Código que no es html este es css (código de estilos en cascada), ese te asigna a etiquetas especiales, id o clases, permite añadir diseños a ciertas etiquetas.
body{} = dentro de las llaves se crean atributos para dar diseño a la pagina, los atributos terminaran en “;”.
<script></script> = para colocar JavaScript, la forma mas fácil de colocarlo es antes del cierre de la etiqueta body, ponerla al final es una buena opción porque así ya estaría cargado todo el diseño de la pagina.
document.write(""); = para escribir un mensaje con JavaScript.
var = son variables, el nombre de las variables pueden ser letras y números, opero estas no permiten espacios, para poner espacio se utiliza el under escope (_) es el guion bajo, no se puede poner un numero al inicio del nombre de la variable, no se pueden utilizar símbolos “raros” y tiene que escribirse exactamente y no mayúsculas y la mandas a mandar en minúsculas.
<!DOCTYPE html> = Es un estándar de buenas practicas de HTML 5, esta etiqueta se encuentra antes de la etiqueta html.
<style type=“text/css”> = Atributo de la etiqueta.
<script type=“text/javascript”> = Atributo de la etiqueta.
<html>
<head>
<title> FREDDY CRACK </title>
</head>
</html>
Controles & Opciones que te facilitaran a vida:
Ctrl + S (Para guardar)
Ctrl + Mas (Para aumentar tamaño)
Ctrl + - (Para disminuir espacio)
80% de tu tiempo dedicalo a
Leer codigo para entender
20% de tu tiempo dedicalo a crear y
Escribir tu propio codigo
¡Hola, comunidad! 😄 Si a ustedes les sale primero el alert en Chrome no se preocupen, es cuestión de su navegador, pueden probar con otro navegador o simplemente continuar sin preocuparse del proceso. Recuerden que este curso es algo viejito por lo tanto Chrome ya no funciona de la misma manera.
Bueno que opinan pensé no lograrlo.
Para todos los que no se les colorea el texto vayan a la parte inferior del programa y busquen “HTML” denle click y luego seleccionen “Auto Detect”.
Un abrazo! 😉
Hola Buenas Noches.
Tengo una pregunta, estaba haciendo el ejercicio que iba desarrollando freddy, siempre se dispara primero el scrip no importa donde lo ponga(sea al principio de la etiqueta body o al finalizar la etiqueta body )
No importa si coloco el alert al inicio o <body> o antes de acabar </body> el alert siempre carga primero que toda la página 😒
Si a alguno no le salen las ayudas de color de texto que brinda Atom, cambien en la parte inferior derecha, el HTML grammar a uno que diga** HTML con Tree-Sitter.**
Para los que estan usando Atom, podrian querer activar las lineas guia (Indent Guide)
- Vayan en la parte superior izquierda a donde dice “Edit”
- Denle un click en “Preferences”
- Otro click mas en donde dice “<> Editor”
- Marcamos la casilla en donde dice “Show Indent Guide”
Si les parecen importantes los comentarios esto les sera útil:
→Así se comenta en html:
<!-- tu comentario -->
→Así se comenta en javascript una linea:
// tu comentario //
→Así se comentan varias lineas en javascript :
/* tus comentarios */
→Así se comenta en css:
/*tu comentario */
Además estas son algunas etiquetas de uso frecuente en html:
<b> o <strong>: Negrita
<i> o <em>: Cursiva
<u>: Subrayado
Todas las etiquetas deben cerrarse respectivamente. Espero les sea útil 😃
No se me resaltaron los comandos pero funciono bien todo
Ya me siento programadora JAJAJA
Hola.En esta clase de Platzi de 27 minutos, Aprendi y logre comprender las bases solidas de diseño web.En UDEMY tome un curso de 3h y **No logre entender nada.**Personalmente creo Platzi es un ejemplo mundial de pedagogía.
Gracias 😃
Código comentado “<!-- -->” es la manera de comentar en HTML, al mismo tiempo que hice hacía mi código lo comente para no olvidar etiquetas, espero les sea útil 😄
<!DOCTYPE html> <!-- Parte de una buena practica -->
<html> <!-- <html> = Etiqueta de arranque -->
<head> <!-- <head> = Cabecera, el head es siempre la primera etiqueta despues de html -->
<title>Mi primera linea de codigo en HTML</title> <!-- <title> = Titulo de la pagina web -->
<style type="text/css">
body
{
background-color: black;
color: white;
font-family: Helvetica;
<!-- <style> = Estilos de diseño de la pagina web pertenecen a css, background-color: = color de fondo, color = color: de fuente, font-family: = tipo de fuente -->
}
strong
{
color: red;
}
</style>
</head>
<body> <!-- <body> = Contenido visual, todo lo que sale dentro del navegador -->
<p>Hola <strong>Mundo :D</strong> </p> <!-- <strong> = negritas -->
<p>Este es otro parrafo</p> <!-- <p> = parrafo -->
<script>
var x = 1;
var y = 2;
var z = x + y;
<!-- var = Variables donde podemos guardar informacion -->
document.write("El valor de Z es " + z); <!-- document.write = Es la forma de escrbir dentro de JS -->
</script>
</body>
</html>
El SCRIPT SIEMPRE AL FINAL ! jaja ley !
Si en ATOM tienes problemas de que no se colorean ciertas palabras o etiquetas como body o strong, guarda el archivo y cierra el mismo y vuelve abrirlo y en automático se colorea.
Para quienes no les funciona el auto-complete dentro de la etiqueta style, lo que deben de hacer es pulsar ctrl+shift+L y seleccionar HTML (Go) como lenguaje.
Esta opción toma en cuenta que vas a escribir código css dentro de un archivo html, no es buena práctica, pero ahorita para ir aprendiendo está bien hacerlo.
en este vídeo aprendí lo de un semestre en la universidad :😕
Aquí puedes conseguir el código de colores:
https://html-color-codes.info/codigos-de-colores-hexadecimales/
SI no les carga bien los colores en Atom, en la barra de abajo a la derecha parece “HTML” haciendo clic pueden cambiar el lenguaje. Si le dan en “Auto Detect” recarga los colores y ya los muestra bien.
Despues de colocar el <style> </style> todos las palabras en el Atom que tenian color dejaron de tenerlo, todo siguio funcionando igual en atom pero las letras estaban blancas
me pasa algo raro con atom, hasta cierto punto me aparecen coloreadas las etiquetas, despues de la mitad del ejercicio dejaron de aparece, pero sigue funcionando normal a la hora de actualizar en el navegador
existen profesores buenos y despues esta este caballero que es un capo enseñando
a mi me aparece la alerta antes de cargar toda la pagina aunque la ponga justo antes de que cierre body (min 19:30)
Hola, he revisado mi texto y está bien escrito, pero no me coloca las palabras en negrita
Para activar el color de body debajo de <style> solo hace falta en Atom Ctrl + Shift + L Auto Detect
Muy buen curso de programación básica. Freddy es un gran profesor !
… Saludos comunidad !
_ = underscore o guion bajo, A qui en Venezuela solo se le dice (“piso”)
Para ser mi primer curso de programación, esta bien entendible.
Como curiosidad: con Safari se me cumple que las caja de texto generadas con “alert” aparece antes o después de cargar la pagina según si están codificadas al principio o al final de <body> pero con chrome me aparece siempre antes de cargar la página aunque el código esté escrito al final de <body>.
(Tampoco lo voy a investigar, hay mucho camino por delante)
https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/
ese link lo subió alguna persona en un comentario… la verdad es muy útil para los que nunca habían usado Atom (soy uno de esos)… si ven el comentario den like, se lo merece…
![]()
Alguien me puede decir porque no se me ponen de colores algunas cosas (si funciona solo no se ponen de colores.
y otra cosa, aun que ponga el script al final, la alerta se hace al principio.
PLSSS HELP
Buenas Practicas:
Pasamos la mayor parte del tiempo leyendo y entendiendo cogigo; las buenas practicas ayudan a hacer ese codigo mas legible
Algunas buenas practicas:
- Usa la indentacion; asi entendemos mejor (mas visualmente) las relaciones de subordinacion
- Usa variables autoexplicativas
- Coloca todas las etiquetas (aunque no parezcan necesarias)
Hola, cuando escribo body luego de las etiquetas <style> el programa lo lee como si fuera un texto normal y no me permite seguir, DEBEN HACER LO SIGUIENTE: Atom, si es igual tu caso, dale en la parte inferior derecho un apartado que dice HTML, al darle click saldrán unas opciones, solo dale en Auto Detect.
la peor parte es tener que volver al trabajo en ves de seguir con esto 😦
Yo estoy siguiendo los mismos pasos que Freddy, pero cuando el hace las etiquetas “<style>” y pone “body” entre ambas etiquetas, a el le sale de color rojo, a mi no me sale nada, sólo se queda en gris. ¿Alguien que me explicara qué puedo hacer? Gracias se los agradecería.
<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body
</style>
</head>
<body>
<p>Hola <strong>mama ya casi</strong> aprendo</p>
<p>Este es otro parrafo</p>
</body>
</html>```
Muy buena esta clase, bastante información de una sola vez y perfectamente definida. 😃
<!DOCTYPE html>
<html>
<head>
<title>Mi primer HTML</title>
<style type="text/css">
body{
background-color: #AAAAFF;
color: #FFFFFF;
font-family: Helvetica;
}
strong{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola mama, <strong>ya casi aprendo</strong></p>
<p>Este es otro párrafo</p>
<script type="text/javascript">
var x = 1;
var y = 2;
var z = x + y;
alert("Mensaje especial con alerta");
document.write("Mensajito curioso! El valor de Z es: " + z);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Diccionario </title>
<style type="text/css">
Body{
background-color: #597C99;
color: #FF886E;
font-size: 20px;
font-family: cursive;
}
</style>
</head>
<body>
<p> <"body"> Aquí se escribe la estructura del texto.</p>
<p> <"!Doctype html"> Esta etiqueta es muy inecesaria hoy en día, pero puede ser encontrado en lenguaje de software viejo</p>
<p> <"head"> Aquí van los metadatos como estilos de diseño y título de la página</p>
<p> <"title"> Aquí va el título de la pestaña </p>
<p> <"style"> Nos permite agregar diseño, <"style type=text/css"> es lo mismo pero escrito de forma vieja</p>
<p> "background-color" Aquí cambiamos el color de fondo. No es una etiqueta, es sólo una variable de <"Style"> </p>
<p> "color" Aquí cambiamos el color de la letra del texto de <"body"> (ya que ese el bloque de texto que esta siendo modificado por <"Style"). No es una etiqueta, es sólo una vairable de <"Style"> </p>
<p> <"p"> Esta etiqueta sólo define un parrafo.</p>
<p> <"/"> Así es como se cierra una etiqueta. </p>
<p> "font-size" Aquí cambiamos el tamaño de la letra </p>
<p> "font-family" Aquí cambiamos la tipografía</p>
<p> "{ }" Esto sirve para abrir y cerrar bloques de código</p>
<p> <"script"> Es la etiqueta que nos permite colocar código de programación</p>
<p> "Document.Write" es la opción que nos permite escribir en "body" usando javascript</p>
<script>
alert("Esto es un alert (y son muy molestos)");
var x = 1;
var y = 2;
var z = x + y;
document.write("Todo empieza sabiendo que sí el valor de X es " + x);
document.write(" sumado al valor de Y que es " + y);
document.write(" entonces X + Y es igual a Z, es decir " + z);
</script>
</body>
</html>```
Ya sabía programar en Python pero ahora quiero aprender desde cero.
Me aparece siempre el mensaje primero antes que cargue el contenido de la pagina. He probado en varios navegadores.
<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body
{
background-color: #AAAAFF;
color:white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola <strong>mamá ya casi</strong> aprendo</p>
<p>Este es otro párrafo</p>
<script>
alert(“Mensaje especial con alerta”);
</script>
</body>
</html>
Cuál es la razón por la que independientemente de donde ubique la etiqueta <script> siempre obtengo el mensaje de alerta antes que el cuerpo (etiquetas <p>)?
La versión del editor atom que descargué no me colorea muchas partes del código como lo hace el editor que utilizas en el video, aún así el código corre sin problemas. A que se debe eso ? Es cuestión de cambiar las configuraciones ? o son detalles de la versión ?
Le añadi unos cuantos detalles de mi parte mientras fui curioseando pero al fin escribi mi primer codigo!
Para los que tuvieron el problema de que la alerta se dispara primero y luego carga el contenido html
Revisando en diversos foros e incluso aqui mismo en Platzi, me enteré que ni en Chrome ni en Edge funciona de está manera en las versiones más recientes (2022).
Podrían intentar cargar su archivo .html en Firefox y veran como funciona tal y como Freddy lo expone.
Desde mi punto de vista, les recomendaria a todos el visual studio code excelente programa
Apuntes de la clase.
He visto en los comentarios que a algunos, al igual que a mi, Atom no me reconocía la sintaxis dentro de los scripts. He seguido las orientaciones de eduardogonzalezgarcia y, al pulsap Ctrl+Shift+L encontré que HTML estaba seleccionado, lo cambié a Automático y listo, ahora si me funciona.
soy un niño de 14 años y me encanta tu taller Freddy y todo se me hace fácil
Si tiene algun problema con su editor de texto respecto a que no le autocompleta las funciones o le corrige como sucede en el video ell consejo es que deben presionar CTRL + SHIFT + L y seleccionar la sintaxis del lenguaje que se esta usando en este caso yo coloque html(go).
Si quieren investigar más comandos, pueden encontrar mucha información en https://www.w3schools.com/css/
Cuando estén escribiendo el código, y al cerrar una etiqueta ven que se rompe eliminando los colores y dejando el texto en blanco, pueden poner CTRL + SHIFT + L y les sale una lista, allí deben elegir HTML o HTML (Go) y listo.
<!DOCTYPE html>
<html>
<head>
<title>Holi mundo cruel</title>
<style type="text/css">
body
{
background-color: pink;
color: gray;
font-family: Century;
}
strong
{
background-color: black;
}
</style>
</head>
<body>
<p>Hola <strong>Villegas</strong> ya casi aprendo a ser todo un hacker papa</p>
<p>Usd es un pirobo por comerse a la novia de MegaPlex</p>
<script type="text/javascript">
var a = "sos";
var b = " un ";
var c = "pirobo";
var d = a + b + c;
document.write("Te quiero decir que " + d);
</script>
</body>
</html>
Bueno, al final lo único que no quedó claro fue que los programadores pasan 90% del tiempo leyendo y 20% escribiendo y que los lenguajes son 90% similares y 20% distintos 🤭🤭🤭. Grande Fredy parcero, el mejor definitivamente!!!
Hola!
En el video Freddy menciona que el alert se mostrara al usuario dependiendo de la posicion dentro del codigo. El problema que tengo es que tengo mi Script lo mas cercano al cierre de mi body y a pesar de eso me lanza el alert apenas abro el archivo en mi navegador, lo hace indistintamente porque lo moví al principio y hace lo mismo. Estoy haciendo algo mal?
Buenas tardes gente!! Cómo están? Tengo el código tal cual está escrito en el video pero me dispara el alerta apenas le doy refresh y luego muestra el contenido, como si el script del mensaje de alerta lo hubiera ubicado al principio de body… pero está colocado antes del cierre. No entiendo porque se ejecuta así. Alguien tiene idea de cúal puede ser el error?
Con las actualizaciones de Chrome se te activa primero el script aunque lo pongas al final .
Mis apuntes.
reglas de las variable:
- Las variables no dejan espacio
- El primer caracter de una variable siempre tiene que ser una letra. NO un numero.
- No se pueden usar signos raros
- la mayuscula y la minuscula Importa
los lenguajes de programacion son un 80% similar y un 20% distinto
los programadores pasan el 80% son leyendo código y el 20 al 10% escribiendo código
No cometa el error de escribir codigo complejo. Escribe el código de la manera mas legible posible
mensaje de script hay que ponerlo al final de la pagina
Hola, coloco el script al final o al principio del body y siempre aparece primero la ventana de alert y luego el contenido del body
alguien noto que en el minuto 25:27 Fredy dice que los programadores pasan el 90% leyendo codigo y el 20% escribiendo, lo siento no pude evitar el comentario por que lo repite dos veces, jajaja la suma de los datos serian en total un 110%
no entiendo porque puse el alert al final antes del final de body y me salió pero no me cargaba la pagina hasta que le di ok
90% + 20% = 110%
Like this
Esta es una excelente herramienta para insertar colores, muy buena para hacer degradados
http://www.colorzilla.com/gradient-editor/
- Los programadores de verdad pasan del 80 al 90 % LEYENDO CÓDIGO
- El otro % se lo pasa ESCRIBIENDO
Hola buena madrugada, soy desarrollador de software hace 6 años, y estaba buscando como enseñarle a mi hijo codificar, y es lo mejor, sencillo y concreto. Excelente!!
Reglas para nombrar variables:
1.- No aceptan espacios en blanco: Si necesitas una variable compuesta por mas de una palabra puedes utilizar el símbolo: _ . Ejemplo: freddy_vega.
2.- No se pueden utilizar números al inicio del nombre de la variable: Debe empezar siempre con una letra, los números pueden utilizarse después.
3.- Evitar asignarles símbolos “raros” como la ñ o las tildes: Raros para el idioma inglés, que son el idioma de los creadores de JS y HTML.
4.- Tener en cuenta que JavaScript diferencia entre mayúsculas y minúsculas, por lo que la variable: Freddy no es igual a la variable: freddy.
estoy armando un grupo de whatsapp para compartir conocimiento, podremos conversqr de varios temas para resolver dudas, y por que no emprender en algun momento.
*Estructura básica de un documento .html
<!DOCTYPE html>
<html>
<head>
<title>Título en la pestaña del navegador</title>
<style>
body
{
background-color : black;
color : white;
}
</style>
</head>
<body>
<h1>Título princial de la pàgina</h1>
<p>Contenido de la página</p>
<script>
console.log("Mensaje en la consola");
</script>
</body>
</html>
<html>
<head>
<title>mi primer archivo</title>
<style>
body{
}
</style>
</head>
<body>
<p> hola <strong>mamá ya casi aprendo</strong></p>
<p> este es otro parrafo</p>
</body>
</html>
alguien me puede ayudar, por que body no se me resalta en atom
Dentro de la etiqueta html podemos declarar el idioma en el cual va estar todo en nuestro programa con como por ejemplo…
<html lang=“es”>
Les comparto un proyecto escolar que hice con el programa dreamweaver el cual subí mi proyecto a un repositorio en GitHub https://thelaststar122.github.io/-diseases/ espero les guste.
Yo tengo una pregunta. Cuando estaba escribiendo mi código, idéntico al de Freddy, cuando comencé a escribir lo que estaba debajo de “<style>”, no se me coloreó esa sección (todos me salen en gris), y tampoco me aparecían las guías del código como a Freddy (para autocompletar, por ejemplo, mientras ponía “background-color”). ¿Por qué me sucede esto?
Hola! No puedo usar la etiqueta Body dentro de STYLE (No me aparece en tono rojo las letras de “BODY” sino en gris). ¿Qué hago?!
Hola en mi caso ni cambia de color (<strong>) ni se refleja en navegador, que hago?
acabo de empezar con la programación c:
Símbolos utilizados, en Windows:
Alt + 123 {
Alt + 125 }
Alt + 60 <
Alt + 62 >
Alt + 35 #
Hola! +Alguien sabe por que al poner el “body” que esta dentro de la etiqueta “style” Atom no me lo lee como codigo, y me lo pone gris, como texto normal. Gracias!
hola, buenas tardes!
quisiera preguntar por que en mi Atom no salen algunas palabras de colores, ni me ayuda como se menciono en el video.
muchas gracias…
En mi caso en el editor de código, desde body dentro de la etiqueta <style> y <script> no me genera color en el código escrito, aunque si hay efecto en el navegador respecto a los cambios que voy haciendo.
Hay alguna razón?
Hola para todos los que presentan el problema que los códigos le salen igual cuando ejecutan en el NAVEGADOR cuando graben el arhivo deben hacer como .html en el caso primero.html Y FUNCIONAAAAAAAAAAAAA
Les recomiendo Visual Studio Code , a mi parecer es mas practico y sencillo 😄
saludos
Confieso que mi profesión no tiene nada que ver con esto.
Estoy haciendo este curso para salirme de cursos de mi zona de confort y que podría entender más fácilmente.
Mi cabeza va a explotar con tantas indicaciones, pero lo sacaré adelante. No sé si tomar notas veo el video, o ver el video y no tomar notas. En Fin.
…
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.