Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
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
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
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
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
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
HTML (HyperText Markup Language) is a text markup language. It is used to give structure to the web site you are visiting.
Basic HTML structure in a Web page
- Container: main container
- Header: header of the page. Here you usually find the logo and the navigation menu of the site.
- Main content: main structure. For example, the feed or list of publications of a social network.
- Sidebar: secondary content of a page, usually found on the sides of the main content.
- Footer: footer of the page. This is located at the bottom of the website, except in cases of websites where the scroll (or navigation down) is infinite, therefore, it would not make sense to put it at the bottom.
HTML tags help us to differentiate which part of the content we are in.
The web is made up of three concepts:
- URL: Uniform Resource Locator. The unique identifier of the site in the browser (for example: https://platzi.com).
- HTTP: Hypertext Transfer Protocol. It is the standard used to send data via packets between the client and the server.
- HTML: is the code used to structure the content of your website, and give it meaning and purpose.
HTML stands for Hyper Text Markup Language (Hypertext Markup Language).
- Hyper Text means that the text has interactivity, connection with other documents.
- Markup means that it tags elements. That is why it is also known as a tag language.
HTML is an interpreted language. Also, HTML is a standard, so no matter what browser or device you run it from, the code remains the same anywhere.
Contributed by: Obed Paz, Christian Tambo, Marcelo Chavarría
Contributions 2114
Questions 81
Sort by:
Yo me encontré que la de CNN es muy parecida al ejemplo que nos compartió Diego 👇🏼
Un poco de su propia medicina 😃
La web se conforma de tres conceptos:
- URL => Uniform Resource Locator.
- HTTP => Protocolo de transferencia de hipertexto.
- HTML
HTML es el código que se utiliza para estructurar el contenido de tu web, y darle sentido y propósito.
HTML son siglas, Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto).
Hyper Text significa que el texto tiene interactividad, conexión con otros documentos.
_Markup _significa que le pone etiquetas a los elementos. Por eso también se le conoce como un lenguaje de etiquetas.
HTML es un lenguaje interpretado.
HTML es un estándar, así que no importa desde que navegador, que dispositivo se ejecute, es lo mismo en cualquier sitio. Sigue siendo el mismo código.
HTML (HyperText Markup Language) es un lenguaje de marcado de texto.
Anatomía de una página Web:
- Container.- Contenedor principal
- Header.- Cabecera de la página
- Main content.- Estructura principal, por ejemplo el post de un red social.
- Sidebar.- Contenido secundario de una página.
- Footer.- Pie de página.
Hay etiquetas en HTML que nos ayuda a diferenciar en donde estamos.
Encontré un complemento de Google para tomar los pantallazos completos de las paginas, llamado GoFullPage, espero sea de gran ayuda para los que quieran hacer la tareita!! 💚
En esta pagina este es el HEADER
Este es el MAIN
Este es el FOOTER
Si la primera página web fue una página blanca con hipervínculos para saltar a otras páginas ¿Cómo es que tenía hipervínculos para saltar a otras páginas si era la primera página? ¿Había otra página antes de la primera página? Esta duda no me va a dejar dormir.
Estructura de HTML
Página de un periódico local
Página de mi canal
Me imagino que el footer de youtube debe estar dentro del menu de navegacion
Tomé GitHub como ejemplo 😄
desarrolle una pequeña info para explicarles como procesa el navegador el css que usamos en nuestra web, esper que les guste 😃
Dejo más información sobre el tema, espero les sirva 😃
Listo, aquí esta mi resultado. 😁 Es sobre Machu Picchu el lugar que sueño conocer.
Hola! Estoy participando del challenge del 2022. Esta es mi tarea sobre esta clase:
Comparto la estructura de Gmail, a mí parecer 😁
Buenas tardes compañeros! comparto mi actividad desde Argentina. Elegí analizar la pagina de Ubisoft!
En la misma se distinguen claramente un Header con su logo y barra de navegación mas botones para ingresar al carrito y sign in y footer al final.
Lo que distingo (a criterio propio, corrigan si estoy entendiendo mal los conceptos) es que tanto Main Content como Sidebar son una fusión, donde el mismo main es un bar para scrollear.
Saludos!
- La parte verde es el header con un menú de varias opciones y categorías.
- La parte amarilla es el main content donde despliega muchas secciones con diferentes series y lo que he visto recientemente.
- La parte anaranjada es el footer con datos de la aplicación y más info del servicio.
Les recomiendo mucho realizar el ejercicio porque, les ayudará en futuros cursos como en: Figma, Ux Design…etc.
Estoy haciendo este curso por segunda vez
¿Qué opinan le agregarían algo?
Mi ejemplo: Marca - Diario deportivo
Anatomía de página web de una librería 😃.
Dejo acá mi aporte con una página de un juego de rol argentino muy conocido que me gusta mucho
!
prometo hacer algo de la escuela de diseño para la próxima.
Corrijan me si está mal plis.
HEADER, MAIN CONTENT
Hice el ejercicio con dos Web Apps.
ㅤ
ㅤ
Mi aporte
Un pequeño aporte para seguir estudiando, dejare la otra parte al inicio de css.
https://learn.shayhowe.com/html-css/building-your-first-web-page/
Header y logo
Reto:
Reto1!!!
HTML: Lenguaje de marcado de texto
Anatomía de una página web:
<container>
<header>
<sidebar>
<main content>
<footer>
sa
Ahora la mayoria de paginas usan div para maquetar, desde el inspector de elementos puede ver que usaban en mayor parte div.
Yo lo hice con esta pagina, muchas gracias por la clase.
Hola, aun no soy muy bueno identificando las estructuras de las paginas, espero me puedan ayudar o corregirme! 
espero haberlas identificado bien jajaja
Aquí mi aporte: Salió Petro y Madura… jaja
Quise probar con la página de ChatGPT3, es bastante sencilla entonces costó un poco identificar los elementos, pero yo lo deduje así:
Clase 6 - HTML: Anatomía de una página web
¿Qué significan las siglas HTML?
- Hypertext Markup Language.
¿Cuál era la apariencia que tenía la primera página web que se creó?
- Esta era una página totalmente blanca que contenía algunos hipervínculos.
¿Cuál es la función que tiene HTML que en sus inicios lo hizo tan revolucionario?
- Los hipervínculos que nos permitían saltar de página en página.
¿Por qué es importante que entendamos la anatomía de una página web?
- Porque seremos capaces de identificar las diferentes partes que componen una página web desde que está en su etapa de diseño.
¿Cuál es la anatomía básica de una página web?
- Container (Contenedor).
- Header (Encabezado).
- Logo (O nombre de la empresa).
- Navigation (Menú de navegación).
- Main Content (Contenido principal).
- Sidebar (Contenedor secundario).
- Footer (Pie de página).
- Header (Encabezado).
¿Todas las páginas web tienen como su anatomía la forma básica, por qué?
- No, su ubicación no es importante a la hora de construir una página web, lo que sí debemos de tener en cuenta son las secciones especiales que necesita una página web y su orden orden.
¿Qué información contiene la sección Main Content?
- La información principal de la página web.
¿Podemos dividir el contenido que tiene la sección Main Content en varias secciones?
- Sí.
¿En qué lugar está el Footer de Facebook y por qué?
- Este está en una barra lateral y el motivo de su ubicación es porque en Facebook existe algo llamado Scroll infinito, lo cual hace que nunca lleguemos al final de la página web.
Hola, mi nombre es Delia, estoy muy agradecida de poder tomar este curso y me agrada mucho que tengamos que hacer trabajos,. Aquí está lo que encontré de una página que me gusta mucho, tiene el Header y el Main Content, eñ Footer está más abajo pero se tenía que hacer un poco de croll y no sse veía en Footer en la imagen de la primera página, por eso no estáaquí, pero identifiqué el Footer más abajo, en donde se encontraba información para cursos y datos de contacto.
Saludos cordiales
Delia
Youtube
El header es la parte donde esta el logo de youtube situado arriba a la izquierda junto con una barra de navegación para buscar videos y diferentes herramientas a la derecha.
El main content sería toda la parte en la que aparecen los videos y shorts.
Esta pagina no cuenta con un footer debido a que el scroll es infinito.
Anatomía Google Calendar
Pude encontrar el header, el main content y side bar.
Creo que en este caso la sección de comentarios era muy larga para encontrar el footer, no estoy seguro.
Creo que iría así la anatomía de LinkedIn
Página de Fluency Academy
❤🐧❤
He aquí mi más sincera aportación, mis páginas favoritas ![]analizadas 😃
Want to see more contributions, questions and answers from the community?