CursosEmpresasBlogLiveConfPrecios

Instalando Firefox, Chrome y usando sus DevTools

Clase 4 de 18 • Curso de Prework: Configuración de Entorno de Desarrollo en Windows

Clase anteriorSiguiente clase

Contenido del curso

Herramientas para la web
  • 1

    ¡Tenemos una nueva versión de este curso!

    00:29
  • 2
    Qué es un navegador web

    Qué es un navegador web

    07:31
  • 3
    Qué aprenderás para configurar tu entorno de desarrollo en Windows

    Qué aprenderás para configurar tu entorno de desarrollo en Windows

    05:20
  • 4
    Instalando Firefox, Chrome y usando sus DevTools

    Instalando Firefox, Chrome y usando sus DevTools

    11:53
Editor de texto
  • 5
    Editor de texto: instalando el tuyo

    Editor de texto: instalando el tuyo

    07:34
  • 6
    Extensiones y personalización de Visual Studio Code

    Extensiones y personalización de Visual Studio Code

    11:04
  • 7
    Cómo usar Live Server en proyectos reales de HTML y CSS

    Cómo usar Live Server en proyectos reales de HTML y CSS

    07:27
Linux dentro de Windows
  • 8
    ¿Qué es Windows Subsystem for Linux?

    ¿Qué es Windows Subsystem for Linux?

    04:50
  • 9
    Instalación de Windows Subsystem for Linux

    Instalación de Windows Subsystem for Linux

    11:17
  • 10
    Configuración de Ubuntu en WSL

    Configuración de Ubuntu en WSL

    15:41
  • 11

    Instalación de VirtualBox

    01:01
  • 12

    Instalando Ubuntu en una máquina virtual

    01:52
  • 13
    Comandos básicos de la terminal e instalación de Node.js

    Comandos básicos de la terminal e instalación de Node.js

    15:16
  • 14
    Cómo configurar tu primer proyecto en React.js

    Cómo configurar tu primer proyecto en React.js

    09:53
Git y Github
  • 15
    Instalando Git

    Instalando Git

    09:22
  • 16
    Vinculando nuestra llave SSH en Github

    Vinculando nuestra llave SSH en Github

    09:14
  • 17
    Subiendo nuestro primer repositorio

    Subiendo nuestro primer repositorio

    14:05
  • 18
    ¿Qué es lo que sigue?

    ¿Qué es lo que sigue?

    04:40
    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    💡 Aquí está un pequeño tutorial de lo que Celis menciona para subir imágenes en esta sección:

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Excelente aporte por el GIF :D

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Así es mucho más simple de entender. Gracias!

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Soy el único que no sabía del shortcut windows + shift + s
    ?

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      jejeje, yo igual no sabía

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Puedes configurarlo en los settings para que se ejecute con solo oprimir la tecla Prnt Scrn

      Win + I > Accesibilidad > Teclado > Print Screen Shortcut (ni idea como será en español)

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Se ve interesante!

    Captura de pantalla 2020-10-07 173653.png

    PD: Platzi Team, por favor consideren poder agregar imágenes a los comentarios con tan solo copiar y pegar, seria genial :D

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      También opino que es mas practico la opción de copiar y pegar al momento de hacer una captura de pantalla D:

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Opino lo mismo.

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Yo estoy utilizando Edge al 100% desde hace un tiempo y va de maravilla. De hecho tiene una calificación de 100 en el score de accesibilidad VS otros navegadores

    https://www.html5accessibility.com/

    2020-10-07 20_37_01-Window.png
      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      concuerdo contigo.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Igual. Lo llevo usando un mes aprox. y me ha parecido super bueno

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Para poder entrar al inspector de elementos en Chrome pueden usar:

    F12 Ctrl + shift + i Clic derecho y seleccionar inspeccionar

    Para tomar una captura de pantalla en Windows: Tecla Windows + shift + s

    Saludos :D

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Es lo que iba a comentar, yo lo conocía con F12. Buen aporte.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      muchas gracias por el aporte, me lo has aclarado muy bien, saludos

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Hola mi nombre es Olga Padilla Mendoza, vivo en Barcelona pero soy Colombiana. Estoy recién incorporada a este mundo del desarrollo web. Me siento muy perdida pero una amiga me hablo de ustedes y me paso el enlace de sus 48 horas para conoceros y ver vuestras clases y la tuya para descargar los programas es genial.

    Gracias y felicidades.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Hola Olga, yo soy peruano. El mundo del desarrollo web es inmenso y sin duda tener estas clases te ayudaran a aprender de forma rapida y ordenada. Espero hayas continuado tu aprendizaje, yo estoy en la ruta de backend con JS, pues me interesa ser programador full stack

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      hola yo tambien soy peruana

      quiero ser buena en tecnologia
    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    En lugar de mostrar los navegadores, mostraré toda orgullosa el menú de inicio de mi PC, en especial el espacio designado para tener las herramientas de desarrollo y un super background para recordarme siempre, que nunca hay que parar de aprender.

    I am ready to learn!

    de Diseñadora Gráfica a Web Developer! 🤩😍

    Screenshot 2021-02-22 133135.png

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Esta muy genial, tendras un excelente extra skill como diseñadora. Por cierto me llevo el Bulk utiliy rename, justo necesitaba algo asi je

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Gracias por tu aporte, acomodé mi escritorio de igual forma.

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Cuando usan: Windows + shift + S les aparece en el panel de notificaciones de Windows la captura, le dan click y allí les sale una un menú para guardarla como imagen en una carpeta, dibujar etc

    Captura de pantalla 2020-10-08 093619.png
      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Exactamente! No es necesario abrir Paint :D

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Vivi engañado toda mi vida xd

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Google chrome versión desarrollador https://www.google.com/intl/es-419/chrome/dev/

    Chrome-Dev.jpg

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Gracias Alvaro.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Probaste también el Firefox Dev? Es genial! Tiene opciones para desarrollo originales, que el Chrome no, y que facilitan muchísimo el trabajo, sobre todo con la maquetación.

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años
    borrar tbm.png
      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Valla que gran aporte

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      a mi también se me instaló el firefox en aragones, alguien sabe como cambiarle el idioma a español?

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Les recomiendo muchísimo que prueben el navegador Brave & Brave Dev son muy buenos ambos como opción alternativa. https://brave.com/es/

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Yo tengo ya tres años utilizándolo y es excelente.

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Hola Compis, descárguense Brave DEV en el siguiente enlace--> https://brave.com/download-dev/ es en mi opinion el mejor navegador hasta el momento a parte de safari ;)

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      es mejor que chrome?

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Ah chanfle!! Ya somos dos compa!! También lo uso y la verdad es excelente (y)

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Estudio **ing. de software **y hasta hora me vengo a enterar de estas herramientas gracias! ❤

    instalacion firefox-dev.png

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Tampoco lo sabia

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Se ve tan épico🤩 el logo de Firefox azul, se ve tan para Developers hehe. 💪😎

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    ¿Los navegadores para devs me servirán en el caso de que no sea desarrollador web?

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Claro, si te pueden servir :)

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      por supuesto amigo

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    🛠️ Herramientas instaladas correctamente:

    Chrome Dev.png
    Firefox Dev.png
    Usuario anónimo

    Usuario anónimo

    user•
    hace 4 años

    Repaso de la clase

    Clase 2 – Instalando Firefox, Chrome y usando sus DevTools


    ¿En qué idioma deberíamos de tener configurado nuestro computador y por qué?

    • Deberíamos de tener nuestro computador configurado en inglés ya que la industria del desarrollo web gira en este idioma.

    ¿En dónde podemos descargar las DevTools de Microsoft Edge?

    • En la Microsoft Store.

    ¿Cuál es la desventaja de tener usar las DevTools de Microsoft Edge?

    • Su versión aun está en preview, lo cual no la hace una herramienta libre de errores y que se deberá ir actualizando varias veces.

    ¿Cómo accedemos a las DevTools de Google Chrome?

    • CTRL + Shift + I.
    • Clic derecho -> Inspeccionar.

    ¿Con cuales Navegadores deberíamos de quedarnos para desarrollar web?

    • Google Chrome Dev.
    • Firefox Developer Edition.
      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Buen aporte. ¡gracias!

      Usuario anónimo

      Usuario anónimo

      user•
      hace 3 años

      Resumen muy bien estructurado, tome su heart

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Sería bueno que los comentarios se pueda ocultar, para ver el video más grande, hay pequeños detalles que son importantes y verlo en pantalla completa es un poco incómodo..

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Concuerdo contigo

      UwU.jpg
      Usuario anónimo

      Usuario anónimo

      user•
      hace 3 años

      Seria bueno, pero tambien hay la opción de pantalla completa, es el icono ubicado en la esquina derecha-inferior.

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Here we go:

    Captura de pantalla 2021-01-17 185207.jpg
    Entusiasmado de ya empezar a aprender y practicar lo mas posible.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Honestamente Firefox Dev es tremendamente bueno y original, lo prefiero por encima que el Chrome, sobre todo para desarrollar.

      Usuario anónimo

      Usuario anónimo

      user•
      hace 5 años

      Muchas gracias por la recomendación. @DavidAlejo

    Usuario anónimo

    Usuario anónimo

    user•
    hace 4 años

    Si ya tengo Chrome dev. o Firefox Dev, ¿para qué querría el otro? La pregunta es honesta; no es un sarcasmo con el que pretenda ridiculizar a Ricardo ni mucho menos

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Hola, Tomás. No para nada, puedes usar cualquiera de ambas de hecho, cada una tiene herramientas específicas que las hacen especiales, en general Google es para aprovechar el console para ver código escrito en JS. :)

      Usuario anónimo

      Usuario anónimo

      user•
      hace 4 años

      Particularmente tengo Firefox para navegación y Chrome para debbugear :D

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Me gusta cómo explica este profe, explica detalladamente, en mi opinión.

    dev.png

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads