Curso Diseño Frontend HTML CSS JavaScript
¡Hola a todos!
¡Estoy emocionado de anunciar comenzamos entrenamientos a este curso Hola estudiante, si alguna vez has querido crear sitios web impresionantes pero no sabías cómo empezar, este entrenamiento es fundamental para tu proceso formativo.
Este equipo inicialmente tiene como fin transferir conocimientos de backend y frontend para los entrenamientos a senasoft 2023
Bienvenido al Taller, hablaremos de:
-
Html5
-
CSS3
-
javaScript
-
Bootstrap
-
Git
-
PHP
-
React
-
Angular
-
MySql
Temario Curso de Diseño Frontend HTML, CSS, JavaScript y Git
HTML5
1.1 Etiquetas Huérfanas / Compuestas
1.2 Estructura semántica
1.3 Etiquetas semánticas
1.4 Atributos comunes y generales
1.5 Estructura del documento
1.6 Identación y herencias
1.7 Box modelCSS
2.1 Estructura sintaxis
2.2 Tipos de incorporación CSS: – Interno – Externo – En línea
2.3 Identación, herencias y comentarios
2.4 Niveles de especificidad
2.5 Flexbox grid, Breakpoints
2.6 Mediaqueries
2.7 Pseudo Elementos
2.8 Pseudo Clases
2.9 Z-indexGit
5.1 Introducción a Git y control de versiones
5.2 Github
5.3 Repositorios
5.4 Control de cambios y push
5.5 Terminología y comandos básicos de Git
5.6 Metodología
- Bootstrap
4.1 Librería
4.2 Componentes
4.3 Incorporación: – CDN – Librería local
4.4 Incorporación de componentes, helpers, layout
4.5 Identación, herencias y comentarios
4.6 Display Grid
4.7 Flexboxgrid
4.8 Grid systems
4.9 Breakpoints
JavaScript
3.1 Introducción a JavaScript
3.2 Variables y tipos de datos
3.3 Operadores y expresiones
3.4 Estructuras de control: – Condiciones (if, else if, else) – Bucles (for, while, do-while) – Switch
3.5 Funciones y ámbito de variables
3.6 Objetos y propiedades
3.7 Arrays y bucles de iteración
3.8 Eventos y manipulación del DOM
3.9 jQuery (opcional)
Profe Jlopez explica el curso, no se olviden darle like y suscribirsen al canal
Enlaces de interes
Recursos especializados
Videotutoriales explicativos
Herramientas recomendadas
- Drag and drop con javascript: https://drag-and-drop.formkit.com
- SQLFlow herramienta que visualiza bases de datos: https://sqlflow.gudusoft.com/#/
- Creador de personas que no existen: https://thispersondoesnotexist.com/
- Pagina de Iconos: https://fontawesome.com/
- Creador de Gradientes: https://cssgradient.io/
- Creador de imagenes con IA: https://firefly.adobe.com
Etiqueta huérfanas son las que no tienen compañeras
Las etiquetas compuestas son las que si tienen compañera
Las etiquetas huérfanas son las que no tienen cierre y las compuestas son las que si tienen cierre
Las etiquetas huérfanas son aquellas que no tienen como tal una hermana al final, son solo la etiqueta con sus atributos y valores en ciertos casos.
Las etiquetas compuestas son aquellas que si tienen una hermana, tienen como tal un cierre, y dentro de el se puede agregar contenido.
En HTML las etiquetas huérfanas son las que no necesitan tener etiqueta de cierre, y las compuestas son las que son etiqueta de apertura y cierran con una misma etiqueta pero añadiendo un «/» que indicaría que es la de cierre.
Etiqueta Huérfana: Es la etiqueta principal la cual controla a sus «hijos». Ejemplo:
Etiqueta Compuesta: es cuando una etiqueta es abierta pero también se debe cerrar. Ejemplo:
Una etiqueta huérfana es aquella que funciona por sí sola y no tiene un acompañante que la cierre. ()
Una etiqueta compuesta es aquella que tiene dos pares de etiquetas y sin la una ni la otra no funcionan. ()
Etiqueta huérfana: Etiqueta que está sola o es de solo una parte.
Etiqueta compuesta: Etiqueta de dos partes, apertura y cierre.
Las etiquetas huérfanas son aquellas que están solas y no tienen un cierre, es decir que funcionan independientemente. Por ejemplo:
Las etiquetas compuestas son aquellas que requieren una apertura y un cierre para su funcionamiento. Por ejemplo:
las etiquetas huérfanas son las que no tienen cierre y las compuestas abren y cierran
Etiqueta compuesta: la etiqueta compuesta es la que son dos ya que una abre y la otra cierra.
Etiqueta huérfana: es la que solo lleva una etiqueta sola y solo abre para insertar un elemento por ejemplo un imagen
Lo que yo entiendo por etiquetas huérfanas y etiquetas compuestas:
-Etiquetas Huérfanas: Las etiquetas huérfanas son las que no necesitas un segundo mayor o menor que, solo existen esas solitas abriendo y cerrando, por ejemplo, .
-Etiqueta Compuesta: Son las que necesitan un mayor y menor que, o sea que puede que tengan contenido dentro de ellas son lo contrario a las huérfanas o sea, por ejemplo, .
Etiqueta Huerfana: es una etiqueta la cual no tiene cierre por ejemplo una etiqueta la cual tiene «»
Etiqueta compuesta: es una etiqueta la cual puede tener mas etiquetas dentro como «» y poner dentro «» «» o «
etiqueta compuesta son las que tienen una hermana y sin ella no funcionaria la etiqueta tiene q estar abierta y cerrada
y la etiqueta huerfana solo se necesita estar cerrada y no necesita de una hermana
Las etiquetas huérfanas tienen un atributo y un valor lo cual las compuestas también tienen, la diferencia de estas dos es que las compuestas tienen un cierre con un / con el mismo nombre por ejemplo
La etiquetas huérfanas son aquellas que no necesitan de una etiqueta «par» de cierre para que cumpla su función dentro del código, las etiquetas compuestas se presenta de manera que existe una etiqueta de apertura y una de cierre.
etiqueta compuesta : es la que abre y cierra
etiqueta huérfana : es la que no necesita estar cerrada
Etiqueta compuesta: Esta etiqueta necesita de una hermana y sin ella no funciona, ambas deben estar abiertas y cerradas apropiadamente (, ).
Etiqueta huérfana: Esta etiqueta no necesita de una hermana para funcionar, solo debe estar abierta y cerrada, tener su etiqueta-atributo-valor y ya.
Las etiquetas compuestas son las que tienen un punto de apertura y un punto de cierre, estas pueden tener contenido dentro de ellas y funcionar por aparte, las etiquetas compuestas siempre deben tener un cierre para que funcionen. Un ejemplo de esto es la etiqueta ( ).
Las etiquetas huérfanas son aquellas que no tienen un punto de cierre, y pueden funcionar. Un ejemplo de esto <img
La etiqueta huérfana es la encargada de insertar elementos específicos ej una imagen lo cual indica que se debe poner en ese espacio el elemento.
La etiqueta compuesta nos ayudan a cuadrar el contenido de nuestro sitio web ya que con ella podemos acomodar el texto y su contenido asociado
Las etiquetas huérfanas en html son aquellas que, sin tener una apertura y un cierre, funcionan por sí solas. Estas no pueden contener otras etiquetas en su interior ya que contarían como atributos de las mismas. Por el contrario, las etiquetas compuestas son aquellas que para funcionar, si o si deben tener una apertura y un cierre, y estas pueden contener otras etiquetas a parte por dentro. Por ejemplo:
– Etiqueta huérfana. No tiene ni apertura ni cierre y funciona por sí misma.
– Etiqueta compuesta. Tiene que tener apertura y cierre para funcionar y puede contener otras etiquetas dentro de sí.
Las etiquetas huérfanas son las etiquetas encargadas de ingresar un elemento especifico, ya sea una imagen, gif o video y las etiquetas compuestas son las encargadas de encerrar la información, ya sea un texto o lista y tienen la característica de que estas tienen una etiqueta de apertura y otra para cerrar.
Una etiqueta huérfana son aquellas que no tienen un cierre porque solo son para un objetivo en especifico y las etiquetas compuestas son aquellas que abren y cierran para agregar mas elementos con variados
Expectativa altas 🤟
Compromiso y responsabilidad, espero de tu parte
Profe, no me gusta el código, pero haré lo posible por entender.
Brillith Marcela Martínez agradezco tu franquesa, haré que ames el codigo
Me gustó mucho la clase, muy didáctico.
Voy un 30% algo nuevo para mí pero se me dificulta
Y eso que es hasta ahora el comienzó
Profe realmente no se mucho sobre el tema pero realmente me gustaria aprender mas sobre codigo especialmente en videojuegos
Albert Einstein no sabia como viajar en el tiempo, sin embargo descubrio la teoria de la relatividad
Me encanta el contenido del curso, es practico, muy intuitivo y amigable.
Y eso que no hemos escrito ni una linea de codifgo aún
Muchas gracias por la explicación, me gustaria aprender mas sobre código
debes seguir mi canal y estar pendiente al blog
Me gusto mucho la introducción de la clase, me parece muy interesante todo esto de codificar pero no entiendo mucho como hacerlo, espero aprender y poder hacer cosas bacanas.
Debes seguir mi canal y estar pendiente al blog
profe, se ve una clase muy interesante pero soy muy mala para esto
Albert Einstein no sabia como viajar en el tiempo, sin embargo descubrio la teoria de la relatividad
Es mi primera clase con el profesor y me ha caído muy bien, al parecer sus clases serán entretenidas, anqué siento que a veces habla muy rápido.
Espero aprender mucho, la verdad soy pésima en código y quiero mejorar en ello.
Muchas gracias, en realidad me gustaria empaparme mucho más en estos temas y aprender
Debes seguir mi canal de youtube y estar leyendo este blog
se ve un tema complejo en su totalidad, «pero la practica hace al maestro».
Albert Einstein no sabia como viajar en el tiempo, sin embargo descubrio la teoria de la relatividad
Me parece increíble el poder crear paginas a partir de códigos, el material es innovador e interactivo; Aunque en lo personal no soy muy buena, voy a dar lo mejor de mi.
Albert Einstein no sabia como viajar en el tiempo, sin embargo descubrio la teoria de la relatividad
Es un tema de mucho interés y con mucha complejidad, debido a esto es muy bueno prestar mucha atención y por aparte ir mirando cosas que nos puedan llegar a servir para ir superando todo el tema
Siempre practicar lo convertira en un maestro
La programación tiende a ser muy compleja y aburrida (o así me la enseñaron e hicieron ver), pero tengo la certeza de que este curso me ayude a cambiar esa perspectiva y a mejorar mi relación con esta área.
Un 100% depende del compromiso y la responsabilidad
Me parece excelente que tengamos un blog en donde podamos interactuar, ver el gran material disponible que tenemos a nuestra disposición el cual nos servirá para aprender y encontrar las herramientas para realizar nuestros trabajos. Espero poder realizar una pagina web de gran calidad.
Asi se hará, aprendiz con responsabilidad y compromiso
Profe a pesar de mis bajos conocimientos del tema estoy seguro de que sus clases me podrán ayudar a acceder a un nivel mas alto en comparación a mis habilidades actuales Junto a resultados mas profesionales.
la practica lo convertira en experto
Holaaaaa profe la clase está súper interesante la información muy clara y al punto, me gusta mucho más la ilustración, en código soy un 0+0, pero me gustaría aprender para desarrollar más mis habilidades profesionales y tener un buen portafolio. Saludos cordiales ✌️
Lo puede lograr asistiendo a mi taller y tomando apuntes
Me parece muy interesante este tema de código me gustaría aprender mas de esto ya que no tengo todo el conocimiento sobre código , la explicación me llamo mucho la atención por que son cosas de las que casi no había escuchado y espero poder saber mas de ellas y ponerlas en practica.
si relacionas lo aprendido con tu dia a dia, sera mucho mas facil que apruebes mi taller
0 el código en mi vida, no entiendo por ningún lado, pero hay actitud:).
la actitud se tiene, pero yo necesito mas aptitud con «p»
Excelente profe , muy bacano e interesante el blog y toda la clae en general quisiera aprender cosas nuevas aunque no es algo que a me llama muchísimo la tención voy a dar mi 100% de mi para apender clase tras clase con usted.
lo mas m gusta es el diseño y la fotografía pero base a todo lo que usted nos explico es una parte super fundamental , es decir que todas se nutren de todas
Gracias por su compromiso y responsabilidad
Me parece chevere
y eso que no hemos escrito codigo
Buenas tardes, comparto mi portafolio web:
Jonatan David Gómez Goyeneche
Ficha: 2823501
https://goye1410.github.io/Portafolio-Jonatan-Gomez/
hola profesor buenas tardes le hago envío de mi portafolio:
https://kmilo-22.github.io/portafoliofinaldeverdad/blog.html
Comparto link en github de mi portafolio web: https://designbycana.github.io/Portafolio-web/
Carol Gutiérrez
Producción Multimedia 2823501
Buenas tardes profesor, le comparto el enlace de mi portafolio web:
Alejandra Rodríguez Rico
Ficha#2823501
https://aleetdesign.github.io/Portafolio-Web-/
Jean Christopher Diaz
ficha:2823501
portafolio web
Kevin Daniel Brausin
ficha:2823501
portafolio web
https://brausindann.github.io/portafolio/
Miguel Angel leal hernandez
2847628
https://mikel26012.github.io/portafolio-con-vertices/
https://jonathanhr0331.github.io/portafoli1/
Link de mi portafolio actualizado Jonathan Stiven herrera rubio Ficha 2847628
Dahiana Becerra
Ficha 3199584
Considero que es crucial abordar temas con diferentes lenguajes de programación, es decir, no centrarse solo en los «principales» (HTML y/o CSS), mas bien, adentrar en la sintaxis de otros lenguajes. Se explican los temas de manera breve y bastante sencilla, permitiendo una constante retroalimentación del lenguaje aprendido. Espero seguir fundando mis conocimientos en lenguaje PHP de manera mas practica como lo permite el material audiovisual.
Espero que los programas educativos continúen evolucionando para ofrecer experiencias de aprendizaje satisfactorias con el entorno digital, que esta en constante evolución.
Éxitos.
Ficha: 3199584 – Producción de Multimedia
Me parece un buen blog: contiene el temario, enlaces de interés y videos explicativos. Excelentes para una persona que no conoce del mundo de la programación, ya que le da una guía por donde empezar.
Personalmente me parece muy interesante, la programación es un mundo muy amplio del que siempre podemos aprender.
hola profe, soy de la ficha 3199584 de producción multimedia.
mi nombre es harold, me gusta la programación, se me hizo muy interesante los lenguajes de programación como HTML, CSS, JAVA, me gusta la manera en la cual explica todos los temas abordados, se me hizo interesante todo lo que se puede explorar en este campo y lo que se realiza con la programación, esta bien explicado los componentes también de los aparatos electrónicos.
Espero con este cursoi ser un buen programador con capacidades avanzadas en JavaScript, CSS y HTML
Me parece muy interesante este tema de código me gustaría aprender mas ya que no tengo mucho conocimiento sobre código , la explicación me llamo mucho la atención por que son cosas de las que casi no había escuchado y espero poder saber mas y ponerlas en practica.
Muy interesante el contenido
esta bacano para ser un buen programador
Esta bueno, tiene bastantes cositas interesantes y truquitos curiosos
Lo que espero de este curso es fortalecer mis conocimientos acerca de la programación, tener habilidades y poder crear excelentes páginas web.
Me parece que esta muy completo y nos aporta mucho para nuestra formación.
Muchas gracias por la explicación, me gustaria aprender mas sobre código
Me gusta mucha la estrucura y el contenido
Esta muy interesante para aprender
Espero aprender sobre programación para progresar en mis proyectos, tengo muy buenas expectativas.
Hola profe muchas gracias, el contenido es amplio y muy interesante
Me gusta como se desglosan todos los temas de programación gracias!
Me interesa poder aprender este tema, espero que sea claro y especifico con cada aspecto, quiero enfocarme en el desarrollo de paginas web para apoyar a mis compañeros en el proyecto, así que espero poder entender y que todo salga muy bien, gracias.
Es un blog interesante y me gustaría aprender de todo un poco
Nicolas Sierra y Alejandro Mendoza esperamos muchas cosas positivas respecto a este aprendizaje, esperamos aprender lo que mas podamos, todo conocimiento adquirido es de excelente utilidad.
ficha 2996013
produccion multimedia
La verdad me parece un tema un poco extenso y complejo espero que en el curso pueda aprender y dejar todos los temas claros para poder programar
2996013- Producción de multimedia
Aprendiz: Diana Carolina Bonilla Torres
Tengo expectativas muy buenas respecto a este curso, me gustaría enfatizar y aprender en cuanto a diagramación, es un tema que me gusta mucho y me serviría para homologar para diseño web.
Realmente no se mucho de programción, asi que mis expectativas es aprender bien y con facilidad sobre todo lo que es la programación
espero aprender de esta clase
ficha: 2996013_ prod.multimedia
kevine.garcia.mancipe@gmail.com
Tengo muy buenas expectativas sobre estos cursos de animación, espero adquirir muy buenos conocimientos:)
Ciertamente, mi conoimiento con respecto a la programación es casi nulo, asi que mis expectativas con respecto al curso son algo elevadas ya ue deseo aprender y entender lo mejor posible todo lo que pueda con respecto al tema 😀
2996013-Producción multimedia
Tengo altas expectativas respecto a los lenguajes HTML, CSS Y JavaScript ya que son temas que me generan gran interes y los cuales creo que son muy importantes para el desarrollo de mi carrera.