Skip to content
Practicantes

2. Programación Web - FrontEnd

Programación Frontend

HTML5

  1. Repaso de HTML5, con MarkSheet - Tutorial de HTML y CSS
    • ¿Qué es HTML?
    • ¿Qué es un lenguaje de marcado?
    • En MarkSheet - Tutorial de HTML y CSS, estudiar las secciones indicadas:
      • Sección Web
      • Sección HTML 5
        • HTML Basics
        • HTML Content, hasta HTML Forms
    • Con lo aprendido anteriormente, cree un documento HTML donde liste las etiquetas estudiadas y coloque un ejemplo de las mismas [Tarea #5]
    • Realizar el proyecto mostrado en este video y crear un repositorio de Github donde aplique los conocimientos estudiados anteriormente You Can Learn HTML in Under 1 Hour + Project (Beginner Friendly) [Tarea #6]. Puede realizar la página con el contenido a su elección, pueden ser deportes, música, series de televisión, etc

Apoyo: Los apuntes de Majo - HTML CheatSheet

Documentación oficial MDN

Programación Frontend

CSS

  1. Repaso de CSS, con MarkSheet - Tutorial de HTML y CSS
    • ¿Qué es CSS, para qué se utiliza?
    • En marksheet.io, completar y dejar resumen de:
      • Sección CSS3
        • CSS Basics
        • CSS Text
        • CSS Box Model
        • CSS Positioning
        • Advanced CSS, hasta CSS Responsiveness
    • Repaso de FlexBox para maquetado, con Flexbox Froggy. Debe completar los ejercicios del sitio web y adjuntar capturas de cada nivel completado en un documento de Google Docs [Tarea #7]
    • Repaso de Grid para maquetado, con CSS Grid Garden. Debe completar los ejercicios del sitio web y adjuntar capturas de cada nivel completado en un documento de Google Docs [Tarea #8]
    • Utilizando la página realizada anteriormente, agreguele diseño utilizando CSS. Puede ver los videos siguientes para comprender mejor como funciona el CSS. [Tarea #9]

Apoyo: Videos del canal Slaying the dragon y Midudev, sobre caracaterísticas de CSS muy utilizadas

Diseño responsive

diseño responsive

  1. Diseño responsive o responsivo
    • ¿Qué es un diseño responsive y porque es necesario?
    • ¿En qué se diferencia un diseño responsive de uno adaptativo?
    • ¿Qué son media queries?
    • ¿Cómo se puede realizar un diseño responsive?
    • Ver el video Master Media Queries And Responsive CSS Web Design Like a Chameleon! e indicar ejemplos de uso de Media Queries
    • Colocar la respuesta a las preguntas anteriores en un documento de Google Docs [Tarea #10]

Frameworks CSS

Frameworks CSS

  1. Frameworks de CSS

    • ¿Qué es un framework?

    • Investigue 3 frameworks más usados de CSS en la actualidad, coloque información de ellos, para que se utilizan

    • Con apoyo de la documentación oficial, Bootstrap 5.3 cree una nueva pestaña (página) en el sitio web creado anteriormente donde utilice Bootstrap para observar la diferencia de trabajar con framework y trabajar solamente con CSS [Tarea #11]

JavaScript

JavaScript

  1. JavaScript
    • ¿Qué es Javascript?
    • ¿Porqué se debe utilizar JavaScript?
    • Siga el siguiente curso de JavaScript y deje un ejemplo por cada sección realizada: Aprende JavaScript. Debe dejar sus contancias en un documento de Google Docs [Tarea #12]
    • Consulte los apuntes de JavaScript de Los apuntes de Majo - JavaScript
    • Consulta la documentación sobre el DOM y manipulación de elementos HTML con Javascript en MDN - Tutorial práctico de manipulación del DOM con JavaScript: ejercicios y ejemplos
    • Continuando con el sitio web creado con Bootstrap anteriormente, agregue interactividad al mismo. Cree un formulario, donde se validen los datos ingresados por el usuario, al dar clic en un botón llamado “enviar” [Tarea #13]

Felicidades, ¡Has terminado! Meta