CursosEmpresasBlogLiveConfPrecios

Reto de Programación 100 Días: PlatziCodingChallenge

Clase 1 de 18 • Curso Práctico de HTML y CSS

Contenido del curso

Introducción

  • 1
    Reto de Programación 100 Días: PlatziCodingChallenge

    Reto de Programación 100 Días: PlatziCodingChallenge

    Viendo ahora
  • 2
    Construcción de un Clon Web con HTML y CSS

    Construcción de un Clon Web con HTML y CSS

    03:21 min

Análisis y creación del proyecto

  • 3
    Maquetación HTML5: Clon de Página Web

    Maquetación HTML5: Clon de Página Web

    03:09 min
  • 4
    Organización de Archivos y Carpetas en Proyectos Web

    Organización de Archivos y Carpetas en Proyectos Web

    05:49 min

Chrome Dev Tools como herramienta

  • 5
    Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real

    Uso de Herramientas de Desarrollo en Navegadores para Depuración y CSS en Tiempo Real

    03:05 min

Header Google Clone

  • 6
    Maquetación Semántica HTML5: Estructura y Navegación Básica

    Maquetación Semántica HTML5: Estructura y Navegación Básica

    06:56 min
  • 7
    Estilos CSS para Clonar el Header de una Página Web

    Estilos CSS para Clonar el Header de una Página Web

    08:27 min
  • 8
    Posicionamiento Horizontal de Elementos en Listas HTML

    Posicionamiento Horizontal de Elementos en Listas HTML

    08:43 min
  • 9
    Colocación de iconos e imágenes en la barra de navegación HTML/CSS

    Colocación de iconos e imágenes en la barra de navegación HTML/CSS

    09:42 min

Contenido principal Google Clone

  • 10
    Maquetación HTML de un Clon de Google Paso a Paso

    Maquetación HTML de un Clon de Google Paso a Paso

    08:05 min
  • 11
    Estilos CSS para Posicionar Logos y Contenido en HTML

    Estilos CSS para Posicionar Logos y Contenido en HTML

    07:54 min
  • 12
    Estilos CSS para Inputs: Diseño y Personalización

    Estilos CSS para Inputs: Diseño y Personalización

    10:58 min
  • 13
    Efecto Hover y Sombra en Inputs con CSS

    Efecto Hover y Sombra en Inputs con CSS

    13:11 min
  • 14
    Estilización de Botones en HTML y CSS

    Estilización de Botones en HTML y CSS

    10:28 min

Footer Google Clone

  • 15
    Construcción de un Pie de Página con HTML y Enlaces

    Construcción de un Pie de Página con HTML y Enlaces

    04:14 min
  • 16
    Estilos CSS para posicionamiento y diseño de contenedores en HTML

    Estilos CSS para posicionamiento y diseño de contenedores en HTML

    10:57 min

Cierre

  • 17
    Uso de CSS Grid y Flexbox para Diseño Web

    Uso de CSS Grid y Flexbox para Diseño Web

    02:14 min
  • 18
    Evaluación y Reflexión del Proyecto Clon de Google

    Evaluación y Reflexión del Proyecto Clon de Google

    00:44 min
Tomar examen

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

      #PlatziCodingChallenge || PlatziCodingChallenge

      En este blog post te tengo 4 puntos esenciales y un reto especial para que de una vez por todas logres aprender a programar desde cero o vencer ese bloqueo que te ha impedido seguir aprendiendo.

      Cuando yo tuve que aprender a programar yo estaba estudiando la universidad, pero, no aprendí por una materia o una tarea, en mi universidad estaban lanzando un concurso de robots seguidores de línea y me llamó la atención participar, así que hice equipo con un par de amigos y entramos al concurso, el reto fue programar un microcontrolador, no tenía la más mínima idea del lenguaje ensamblador y no sabía que se podía programar directo con C (lenguaje que ya había trabajado antes en clases), es más ni siquiera sabía el proceso de llevar el código al chip, pero no importó decidí comenzar.

      Encontré código de ejemplo en ensamblador que con botones prendían un led u otro led según el botón y adapté esa lógica (sin realmente saber qué hacía cada línea de código) a que cada sensor de línea le diera un comando a los motores del robot sigue líneas, progamé mi primer robot, con el tiempo entendí qué hacía cada comando que había utilizado, pasé a utilizar C, entendí la electrónica, máquinas de estados, los algoritmos de control y en conjunto con el club de robótica de mi universidad, del cual era uno de los estudiantes a cargo, logramos participar y ganar varios concursos nacionales e internacionales.

      Comienza preguntándote ¿qué quieres programar?

      Ten claridad de qué quieres programar, pero no te demores en tomar la decisión elige un objetivo y aprende sobre qué tecnologías se utilizan, si me lo preguntas yo te recomiendo que aprendas HTML, CSS y JavaScript ya que el Desarrollo Web es hoy en día uno de los campos con mayor demanda y crecimiento, los navegadores te permiten llevar tus aplicaciones web a móviles, tablets, computadores y estos van a continuar mejorando como plataforma e incluso las naves espaciales utilizan estas tecnologías. Si tienes otras ideas, en los siguientes enlaces puedes aprender más de diferentes temáticas que puedes aprender en Platzi, ¿Aplicaciones móviles? ¿Videojuegos? ¿Ciencia de Datos?

      Programa.

      No te preocupes por entender todo sobre el desarrollo web, o el lenguaje/la tecnología que hayas elegido, empieza ya mismo.

      Para ayudarte lanzamos hoy el reto #PlatziCodingChallenge, donde encontrarás diariamente un desafío nuevo en nuestros foros para que lo resuelvas, compartas en redes sociales, veas tus logros y superes tus bloqueos, comprométete contigo misma o contigo mismo y nosotros te daremos retos diarios para que te mantengas enfocada o enfocado en aprender todos los días.

      Este reto durará cien días y conforme avance encontrarás desafíos cada vez más complejos y retadores que podrás agregar a tu portafolio de proyectos.

      Aprende los fundamentos.

      Con nuestras escuelas de temas relacionadas a computer science como e ingeniería de software queremos llevarte a un nivel donde no te preocupes por pasos a seguir para lograr un resultado, queremos enseñarte a pensar cómo resolver problemas específicos a la tecnología y que puedas plantear tus propias soluciones, esto es lo que llamamos "entender los fundamentos" en nuestra nueva Escuela de Desarrollo Web por ejemplo queremos que entiendas el navegador, HTML, CSS y JavaScript, con esos conocimientos sólidos podrás hacer lo que quieras y para que sigas expandiendo sobre eso seguiremos sacando cursos específicos de frameworks, procesos y librerías para que tengas todo lo que necesitas en tu suscripción.

      ¡Cuéntame! ¿Entrarás a la escuela de Desarrollo Web? ¿Participarás en los 100 días del #PlatziCodingChallenge? Quiero saber tus respuestas en los comentarios y si te animas a entrar comparte tu decisión con la comunidad Platzi en twitter, si gustas etiqueta a @platzi, y etiquétame @celismx, nos vemos en los desafíos diarios, te comparto el primero a continuación:

      Obtén respuestas inmediatasProfundiza lo que acabas de ver

      Comentarios

      Conny Linares

      Conny Linares

      student•
      hace 6 años
        Eduardo Rodriguez

        Eduardo Rodriguez

        student•
        hace 5 años
        Eugenio Condori

        Eugenio Condori

        student•
        hace 5 años
      Yenny Taborda Ramírez

      Yenny Taborda Ramírez

      student•
      hace 6 años
        César González Frías

        César González Frías

        student•
        hace 5 años
        Añaqui Apolinar Morales

        Añaqui Apolinar Morales

        student•
        hace 5 años
      Carlos Eduardo Gomez García

      Carlos Eduardo Gomez García

      teacher•
      hace 5 años
        Humberto José Piña Brochero

        Humberto José Piña Brochero

        student•
        hace 5 años
        Benjamin Allen Ramirez Horna

        Benjamin Allen Ramirez Horna

        student•
        hace 3 años
      Royer Guerrero Pinilla

      Royer Guerrero Pinilla

      student•
      hace 6 años
        Leobardo Adrian Diaz Ruiz

        Leobardo Adrian Diaz Ruiz

        student•
        hace 6 años
        Daniel Alexander Llumiquinga

        Daniel Alexander Llumiquinga

        student•
        hace 6 años
      Lina María Ureña Bolívar

      Lina María Ureña Bolívar

      student•
      hace 5 años
        Luis Eduardo Rodríguez Ramírez

        Luis Eduardo Rodríguez Ramírez

        student•
        hace 5 años
      Jose Luis Barbosa Cepeda

      Jose Luis Barbosa Cepeda

      student•
      hace 5 años
        Pedro Isaac Aguilar

        Pedro Isaac Aguilar

        student•
        hace 4 años
      Jose Tellez

      Jose Tellez

      student•
      hace 6 años
      Daniel Omar Hernández Muñoz

      Daniel Omar Hernández Muñoz

      student•
      hace 5 años
      Roxsy Velasquez

      Roxsy Velasquez

      student•
      hace 6 años
      Diego Rubio

      Diego Rubio

      student•
      hace 6 años
        Edgar Ramón González Contreras

        Edgar Ramón González Contreras

        student•
        hace 6 años
      Santiago Rodriguez Chaves

      Santiago Rodriguez Chaves

      student•
      hace 4 años
      Giselly Romero Nuñez

      Giselly Romero Nuñez

      student•
      hace 5 años
      Sura Naileth Cedeño Lopez

      Sura Naileth Cedeño Lopez

      Team Platzi•
      hace 6 años
      Ricardo Alfonso Chavez Vilcapoma

      Ricardo Alfonso Chavez Vilcapoma

      student•
      hace 3 años
        Oscar Jaimes Perea

        Oscar Jaimes Perea

        student•
        hace 3 años
      Costa Sofia Ayelen

      Costa Sofia Ayelen

      student•
      hace 6 meses
        Alfonso Galeano Conde

        Alfonso Galeano Conde

        student•
        hace 6 meses
      Laura Ramirez

      Laura Ramirez

      student•
      hace 5 años
        Francisco Ponce

        Francisco Ponce

        student•
        hace 5 años
        Adriana Joali Rebollar Cid

        Adriana Joali Rebollar Cid

        student•
        hace 5 años
      Andrés Felipe García Rendón

      Andrés Felipe García Rendón

      student•
      hace 5 años
      Abdul Orlando Florez Lopez

      Abdul Orlando Florez Lopez

      student•
      hace 5 años
        Alex Romero

        Alex Romero

        student•
        hace 5 años
      Israel Vasquez

      Israel Vasquez

      student•
      hace 5 años
      Eduard Perez

      Eduard Perez

      student•
      hace un año

      Hola! Aquí pueden encontrar el consolidado de todos los retos #PlatziCodingChallenge ;)

      Muchas gracias por el dato

      Muchas gracias, estoy seguro que me servirá

      No domino nada bien aún, me confundo mucho aún pero vamo'a darle con moral, equivocándome y luego corrigiendo es que aprenderé!

      Y como vas ahorita? ando igual :c

      Si te interesa puedo ayudarte a que domines poco a poco lo que aprendes buscame en twitter @anaqui_apolinar

      Ufff llego un poco tarde para eso jaja

      Yo igual jajaja

      tarde? mirame a mi ;_;

      Creo que he llegado muy tarde, repetirán este evento?

      x2

      x3

      Me está entrando la curiosidad de hacer un mini robot, muy interesante 🤖... Wow, ¿algún consejo?

      El camino más fácil es aprender arduino y conceptos básicos de electrónica

      a darle con el curso practico de HTML y CSS!! <3

      Para después darle a JavaScript!!! .... Ya he adoptado el lema: Nunca parar de aprender, de Platzi.

      BUen dia, no sabía que existía esta sección, cómo puedo verla asesoría de ayer? queda grabada?

      A penas me enteré que esto fué realizado, igualmente comence a programar 2 meses después de que inicio la convocatoria, así que al menos trataré de hacerlo a mi forma jeje

      Disculpen, Quedan grabadas las sesiones?

      super iniciativa para practicar y hacer con nuestras habilidades recien aprendidas, y para consolidar los conocimientos

      Viejo, te veo en la mayoria de cursos de la web. Se ve que le andas metiendo duro al estudio.

      vamos con toda e este curso vamos a ser fullstack <3

      no me equivoqué estoy en la clase y la academia correcta, para empezar ya. Soy nueva al igual que la mayoría pero lo importante aca es #Noparardeaprender

      Suerte y Exitos a todos y muchas ganas

      Vamos que para luego es tarde :D

      12/03/20232 Y ESPERO NO SEA DEMASIADO TARDE CON FE 😅

      Nunca es tarde para aprender 😎

      El mejor momento era ayer y el segundo mejor momento es hoy...

      #nuncaparesdeaprender 👍🏻

      Hola alguien haciendo el curso en 2025

      Hola, acá aprendiendo desde CERO... 2025...

      Hola! Gracias por tan buenos cursos! y tan amenos. Necesito saber qué curso debo hacer para habrir mi propia pagina en internet con carrito de compras y poder cobrar desde mi página a mis clientes sin depender de marketplace como Mercadolibre. Gracias!

      Hola Laura,

      Si el proyecto que buscas no requiere tantas customization lo mejor sería seguir la Ruta de Desarrollo con Wordpress nos muestra como hacer una página online de ese tipo.

      Si por otro lado quisieras complementar con cursos de ventas la Escuela de E commerce y Negocios Digitales. esta muy buena :D.

      Hola, el curso de "creación de tiendas online con woocommerce" es súper bueno, puedes hacer tu tienda desde cero con wordpress y usar mercado pago y paypal como opciones de pago para tus clientes!

      Excelente tu historia, yo también fui parte del club de electrónica de mi universidad. Soy tecnólogo en electrónica egresado de la universidad del Valle.

      Los retos del #PlatziCodingChallenge ya pasaron por lo que calculo en las fechas, en ese caso donde los encuentro para igual hacerlos????

      Estaba buscando en el foro y no los encontré, gracias de antemano, si tienen link o ubicación especifica les agradecería!

      Aquí puedes encontrarlos. Son 8 en total. https://platzi.com/blog/platzi_web_challenge/

      Terminaron los 100 días verdad ¿Dónde está la lista de 100 retos u_u?

      Para aprender HTML de manera efectiva, combina teoría con práctica inmediata. Utiliza recursos interactivos donde puedas escribir código y ver resultados en tiempo real. Plataformas como Platzi ofrecen ejercicios y proyectos que refuerzan los conceptos aprendidos. Realizar retos prácticos, como los del #PlatziCodingChallenge, te ayudará a aplicar lo que aprendes. No dudes en comenzar a construir tu propio sitio web mientras estudias. ¡La práctica es clave para dominar HTML!