Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es FullStack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
Existen tres estándares importantes para generar productos web. Estos son los lenguajes o estándares que entiende todo navegador web:
Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, entre otros). Es el lenguaje con el que clasificamos o etiquetamos cada parte del documento, dejándole saber al navegador qué información va a visualizar y qué valor tiene para nosotros. De esa manera, presentamos: Barras de Navegación, Secciones, artículos, listas, títulos de diferentes tamaños, audios, videos, imágenes, entre otros.
Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML. Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales o, en nuestro caso, las páginas web.
Es lenguaje que se emplea para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son: bases de datos, servidores de diversa índole, información derivada de la interacción de cada página en sí.
Aporte creado por: SebasSD, Alexis Martinez, AntonioCrypto
Aportes 326
Preguntas 27
les quiero dejar los aportes que más me gustaron.
espero haber sido de ayuda.
vine a este curso porque necesito hacer una página web que le prometí a un amigo xD será que haré mi primera página web?
**Hola, antes de comenzar el curso me gustaría compartirles la siguiente ayuda: **
Para aprender HTML no existe ningún requerimiento previo, sin embargo mientras lo aprendemos es muy buena idea ir conociendo un poco de otros temas a continuación les dejo enlaces para que les den una leída, y así tengan una mejor noción de lo que es la web y como esta construida, por ejm:
Estos conceptos también los encuentran en el curso de Fundamentos de Ingeniería de Software.
En resumen,
Internet es toda la infraestructura técnica de comunicación que permite que todas las computadoras se conecten.
La Web es un conjunto de documentos HTML enlazados a través de hipertexto.
Estas son mis notas: Este curso es excelentes
Y aquí voy… construyendo mi futuro:
Yo ya tome los cursos básicos de la ruta de arquitectura de FrontEnd, pero me gustan los cursos de Diego, ya que siempre enseña lo más nuevo.
Aquí les dejo un enlace donde están todas las etiquetas de HTML 5.
http://html5doctor.com/
Hola. Vengo después de bastante tiempo dehaber tocado este tema:
Metodología de estudio.
Te deseo exitos from the bottom of my heart.
Por un segundo pensé que estaba en el baño jaja. ¡Estaba esperando el curso con mucha emoción!!.
Mi meta de este año es ser una Desarrolladora Front end, y vengo desde 0 con todas las ganas a aprender este maravilloso mundo 😃
Para los que NUNCA han hecho algo de programación (como yo), les recomiendo hacer el curso de PREWORK para tener la máquina a punto y algunos conocimientos previos a este curso.
HTML: Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, etc) Es el lenguaje con el que clasificamos o etiquetamos cada parte del deocumento, dejándoles saber al navegador, que información va a visualizar y que valor tiene para nosotros.
De esa manera, presentamos: Barras de Navegación, Secciones, articulos, listas, títulos de diferentes tamaños, audios, videos, imágenes, entre otros.
CSS: Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML. Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales, en nuestro caso, las páginas web.
JAVASCRIPT: Es lenguaje que se usa para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son: bases de datos, servidores de diversa índole, información derivada de la interacción de cada página en sí.
Estaba esperando por este curso, seguro estará genial 🥰
○ HTML (HyperText Markup Language): En resumen, se encarga de todo lo que es el texto; el lenguaje de marcado para hacer websites.
CSS (Cascading Style Sheets): Hojas de estilo en cascada, tiene que ver con todo lo estético, diseño, color, fuente, tamaño de letra, etc.
Aporte de clase:
○ HTML (HyperText Markup Language): En resumen, se encarga de todo lo que es el texto; el lenguaje de marcado para hacer websites.
○ CSS (Cascading Style Sheets): Hojas de estilo en cascada, tiene que ver con todo lo estético, diseño, color, fuente, tamaño de letra, etc.
JavaScript (JS): Es el encargado de hacer que los dos conceptos anteriores se ejecuten, su función puede ir desde hacer que funcione un simple botón, hasta llenado de formularios automáticos, es un lenguaje que funciona de manera nativa dentro de los navegadores.
Estoy tan emocionado te tomar este curso con usted 😄
Explica las cosas tan claras y limpias!
Es un curso mas largo de lo que estamos acostumbrados pero se que aprovechare cada segundo y sacare mucho conocimiento cuando obtenga ese diploma.
Vamonos con todo.
He tomado dos cursos con Diego y es el mejor profesor de Platzi, sin duda alguna, ¡me emociona mucho este curso!
Quien este año en el curso de html y css?
estas son mis notas:
Notas de clase:
.
Existen tres estándares importantes para generar productos web:
.
El curso esta muy bien y lleno de contenido, les recomiendo fuertemente que hagan notas y aportes de cada clase sin excepción y que se tomen el tiempo de comprender y practicar todos los temas, ya que puede parecer sencillo, pero si es tu primera vez te va costar y puedes llegar a frustrarte, así que les recomiendo mucho chicos que mas que ver muchas clases, entiendan al 100 los temas que les muestran
2 de los 3 estándares para ser desarrollador web.
HTML
"Es el lenguaje que utilizamos para poderle dar estructura a la información que vamos a compartir con los usuarios y que el usuario va a ver en el proyecto final".
CSS
Es el lenguaje o el estándar que utilizamos para poder dar estilos y darle toda la interacción a esa información para que el usuario pueda tener una buena presentación de la misma y pueda generar la mejor interacción y experiencia con nuestro producto.
Hola, compañeros, vengo del futuro y quiero ayudarlos. 🧙♂️
Estrategias para tomar mejor el curso.
Descarga el repositorio💻 del curso y luego sobre el código del profesor comenta todo lo que él diga referente a la utilidad de cada: etiqueta, atributo, etc. (Así documentas tu código y puedes replicar todo de manera más fácil)
Estudia con preguntas ❓, aprovechemos que podemos tomar los Quiz todas las veces que queremos, ve mira las pregunta, anótalas y luego ve todas las clases y vas respondiendo.
Aunque a mi no me funciona tanto el método Cornell para tomar notas es muy interesante.
No te esfuerces en tomar nota, ✏ suena extraño pero muchos compañeros ya lo hicieron en formatos super geniales, toma eso y escribe sobre sus notas y así tiene unas notas potenciadas.
No tomes las clases sin saber nada, 🕵️♂️ mira el titulo y busca en internet un video sencillo de como funciona o que es y después miras la clase, así ya tendrías el doble de preguntas.
Esto no es de memorizar, en internet ya existen personas que han hecho todo lo que tu necesitas, inspírate de esas personas y SOLO aprende la bases, necesitar entenderlo todo, no memorizarlo.
Opinión
Realmente creo que tu al igual que todos los estudiantes que entramos a este curso tiene las mismas ilusiones, ya sean aprender o mejorar tu calidad de vida, así que realmente no te desmotives, ya tomaste tu decisión de hacerlo, ya vas muy adelante.
Comprende que el proceso de aprendizaje es traumático, trata de ser justo contigo y toma el tiempo que necesites al absorber los conocimientos, si algo no te funciona no te deprimas, toma un paseo, descansa del computador por ese día, necesitamos otros espacios de esparcimiento para aprender mejor.
Información resumida de esta clase
#EstudiantesDePlatzi
Vamos a ver 2 de los 3 estándares más importantes para generar productos web
Estos dos estándares son HTML y CSS
HTML lo usamos para darle estructura a la información
CSS lo usamos para darle estilo e interacción a la información, el objetivo es darle la mejor experiencia al usuario
Es importante que entendamos bien CSS
Regreso un par de meses después a este curso, porque mi progreso en lo absoluto ha sido lineal y en ocasiones hay cosas básicas que debo reafirmar. En aquel entonces no pude terminarlo porque lo sentía “demasiado” pero estoy decidida a ser una frontend así que aquí vamos otra vez 😃
esta pagina puede ser de apoyo para el curso.
✨ Energía, concentración y entusiasmo, para continuar aprendiendo.
¿Qué paso con el curso de desarrollo web online de Leonidas Esteban?
Mucha info para ver acá: https://developer.mozilla.org/es/ En español y con prácticas.
HTML: Para definir el contenido.
CSS: Para definir los estilos.
JAVASCRIP: Para definir la interactividad.
Estamos listos para 7 horas de puro html y css Gracias Diego estábamos esperando este curso 💪🏼
Esperaba con ansias este curso
Acabo de empalmar el curso de Responsive Design con Leonidas hace 2 horas aprox, hace 1 semana que sabía que se venía este curso y al terminar el de responsive, empalmar con este, Diego da buenas clases con fundamentos y contexto ✌
Iniciando el curso. Espero terminarlo esta semana
(。・∀・)ノ゙
Buen augurio con el profe Diego De Granda, ojala pueda responder todas mis dudas.
Me inculca confianza el profesor 😃
ojalá diosito y la práctica hagan que por fin en algo me vaya bien. I hope so
Hola a todos, no tengo conocimiento en programación, estoy realizando este curso como un reto personal, estoy muy animado porque en realidad es algo totalmente nuevo para mí.
Estoy empezando el reto de 3 semenas , estoy emocionada por aprender y comprender sobre este mundo de la programacion
Vengo a este curso para aprobar el reto de “Crea tu primera pagina web”
Estoy emocionado por esto y me siento seguro de estar acá porque ya vi el curso de Frontend developer y ademas ya practiqué durante una semana
Lenguas que entiende un navegador:
cual es la diferencia entre js, html y css
Mis notas 😄
<h5>Los 3 estandares de la web.</h5>Aquí solo hablaremos de HTML y CSS, los cuales son la estructura principal de una web estática antes de pasar a ser dinámica.
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. HTML elements are the building blocks of HTML pages.
https://en.wikipedia.org/wiki/HTML
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
https://en.wikipedia.org/wiki/CSS
Les comparto este repositorio de github, puden revisar toda una estrutura de HTML.
https://github.com/elmergustavo/Examples-HTML
espero con este curso terminar de aprenderlo de una manera solida.
HTML es el lenguaje que utilizamos para darle estructura a la información.
CSS es el lenguaje o standard, que utilizamos para poder dar estilos a esa información. Para que el usuario tenga la mejor experiencia en su interacción con nuestro producto.
: es el lenguaje utilizado para darle estructura a la información que va a ver el usuario en el proyecto final.
• CSS (Cascading Style Sheets): es el lenguaje o estándar usado para darle todo el estilo e interacción a esa información para que el usuario pueda tener una buena presentación y así generar la mejor interacción y experiencia con nuestro producto.
Muy ansiosa de comenzar este curso.
Había comenzado antes el de Git y Github, pero no lo quise terminar porque me costaba practicar sin tener conocimientos de HTML y CSS. En mi experiencia, recomendaría primero comenzar este curso y luego seguir con el de Git y Github, mucha suerte a todos los que iniciamos!
Hace algunos años hacía pequeñas prácticas de desarrollo web, incluso llegué a tomar el primer curso de Diseño y Desarrollo Web de Mejorandola (Hoy Platzi), pero por cuestiones de la vida me enfoqué a otras cosas y lo dejé de lado, el año pasado que me suscribí a Platzi me hice el propósito de tomar esta escuela y vamos retomar, si bien ya tengo bases y me acuerdo de algunas cosas (No de todo exactamente) hay que repasar y aprender nuevas cosas.
Por aquí estaré compañeros, les mando un saludo hasta donde se encuentren.
estoy muy animado por este curso
HTML.- Es el lenguaje para poder darle estructura a la información que compartiremos con los usuarios
CSS.- Es el estándar para darle estilos e interacción a la información, para mejorar la experiencia del usuario.
Cuando comienzas, en mi experiencia lo que mas trabajo le va a costar a todo mundo entender es la gerarquia de los elementos, el por que un maquetador crea un div dentro de otro div y por que no se ve en la pantalla, te recomiendo de verdad que veas un video, practiques unas 2 o tres horas jugando con lo aprendido y despues pases al siguiente
No puedo ver los vídeos desde mi celular me aparece un error
The media playback was aborted fue to curruptiion problem or because the media used features
Esperando lo mejor, del mejor!!
html -> estructura de la pagina
css -> la estetica
Javascript -> el funcionamiento
Viene la demencia Bro! saludos desde Panamá, i’m ready for this shit!
Llevaba días esperándolo yo, es mi próximo paso en la ruta, a tomar apuntes gente!
CSS es muy importante y muy amplio, no desanimes!
Creo que HTML y CSS estan un poco subestimados, pero la realidad es que dominar CSS es algo bastante interesante, tanto como lo puede ser un lenguaje de programación, creo que de a poco hay que ir dandole mayor importancia a CSS. Es lo que nos transmite todo!
Este curso me va a gustar, y lo voy a disfrutar. ❤️
Aquí retomando el curso, lo había dejado olvidado y es importante repasar los aspectos básicos de este mundo, vamos con toda!
HTML maqueta, CSS estiliza y JS interactua.
Esta es una estructura base de proyectos web que se puede usar en casi todo, incluyendo algunos frameworks
En este caso, dentro de assets se crean las siguientes carpetas:
quisiera que valla defrente al grano como crear un sitio web para poder promocionar mi emprendimieto
Me llama la atención algo, entiendo que html y css son lenguajes. pero no había relacionado la palabra estándar al referirme a ellos. No lo había pensando así. Y tiene sentido, porque sin ellos no se puede desarrollar jeje
RESUMEN CLASE 1:
QUE APRENDERAS SOBRE
HTML Y CSS
Existen tres estándares importantes para generar productos web.
Estos son los lenguajes o estándares que entiende todo navegador web:
HTML
CSS
JavaScript
I.- HTML
Estructura de los documentos que se visualizan en los navegadores (Chrome, Edge, Firefox, Safari, Opera, entre otros).
Es el lenguaje con el que clasificamos o etiquetamos cada parte del documento, dejándole saber al navegador qué información va a visualizar y qué valor tiene para nosotros.
De esa manera, presentamos:
Barras de Navegación
Secciones
Artículos
Listas
Títulos de diferentes tamaños
Audios
Videos
Imágenes, entre otros.
II.- CSS
Es el lenguaje con el que le damos estilos a todo el contenido previamente etiquetado con HTML.
Es el encargado o usado para darle todo el aspecto visual de manera profesional, usando estándares de diseño de documentos y logrando así la correcta visualización de textos y recursos audiovisuales en formatos digitales o, en nuestro caso, las páginas web.
III.- JAVASCRIPT
Es lenguaje que se emplea para crear o brindar a las páginas web la capacidad de interactuar con el usuario y los recursos asociados a una página web, como lo son:
Bases de datos
Servidores de diversa índole
Información derivada de la interacción de cada página en sí.
IV.- DIFERENCIAS ENTRE “HTML, CSS y JavaScript”
HTML es la estructura, como si fuese el esqueleto de un ser humano o los cimientos de un edificio.
Por ejemplo: una página web que funciona, pero sin interactividad, colores ni diseño.
CSS corresponde a lo estético, como la piel de ser humanos.
La pintura y adornos de los edificios o la manera en que es posible que la estructura del html se vea mejor para los usuarios.
JavaScript equivale a los músculos, lo que da esa interactividad a las personas para moverse y realizar acciones como correr.
##¿Qué aprenderás sobre HTML y CSS?
Ok… Intentare que CSS sea mi mejor amigo y unido a HTML se puede hacer mucho.
Gracias!
¡Vamos a darle! 😄
Increible, mi experiencia previa en programación fue en basic II en 1986, ahora me di el tiempo para trabajar en Wordpress y ese curso me derivo a este, espero poder comprender cada uno de los detalles que comparte Diego y hare mi mejor esfuerzo.
Para mayor información y practicas
Recursos para Desarrolladores
https://developer.mozilla.org/es/
MI pequeño aporte
Estándares Importantes para ser desarrollador web Estándares que entiende un navegador
HYML
(HyperText Markup Language)
Lenguaje que se usa para estructurar la información, permite darle forma semántica a la web
CSS
(Cascading Style Sheets)
Lenguaje que se usa para poder dar estilos e interacción a la informacion. Es el que da el aspecto visual
JAVASCRIPT (JS)
Es el encargado de hacer que los dos conceptos anteriores se ejecuten
A ver.
HTML: Da estructura a la información
CSS: Da estilos e interacción a toda la información para que usuario tenga una buena presentación e interacción.
Iniciemos
Este catedrático me cae muy bien. Genial.
A comenzar de nuevo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.