Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Quiz: Responsive Design

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Web fonts

43/55
Recursos

Las Web Fonts son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y dependiendo del mismo cada uno de ellos posee estilos diferentes.

Algunas Generic Families

  • Serif: son un tipo de fuente de estilo formal o cl谩sico como Times New Roman.

  • Sans-serif: No tienen acabado en las puntas, como: Verdana.

  • Cursive: Son las que tienen estilo cursivo.

  • Monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono.
    驴Como puedo saber que tipo de fuente tengo instaladas en mi navegador?

  • Men煤>Configuraci贸n>Dise帽o>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif

驴Como puedo importar tipos de fuentes a mi proyecto?

  1. Ir a Google Fonts.
  2. Seleccionar la fuente.
    Seleccionar Estilo de fuente.
  3. Agregar al proyecto, se considera buena pr谩ctica agregar las fuentes utilizando la etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la p谩gina.

Buenas Pr谩cticas: cargar una sola fuente. Importarlas siempre en la etiqueta del head.

Contribuci贸n creada con los aportes de: Germ谩n Ceballos

Repasa qu茅 es Full stack

Aportes 146

Preguntas 41

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Hola!! otra forma de tener varias fuentes para nuestro proyecto sin tener que importarlas desde un link externo es descargado la fuente directamente de google fonts, crear una carpeta fonts en el proyecto almacenar alli los archivos .ttf y luego en el archivo de css importarlas desde alli. el atributo font-family le pondremos el nombre de la fuente y en el src: la ruta donde esta almacenado el archivo .ttf

@font-face{
font-family: 鈥楥hakraPetch-Regular鈥;
src: url(鈥/fonts/ChakraPetch-Regular.ttf);
}

Seg煤n conceptos de dise帽o hay varias recomendaciones para elegir la fuente / tipograf铆a:

  • Para textos en digital (Como p谩ginas web) usamos fuente sans-serif sin esas terminaciones (setifas).
  • Las fuentes con Serifa se recomiendan para impresas o en digital para titulos.

Para calcular el interlineado usamos la siguiente regla:

鈥2 puntos m谩s que la fuente (Fuente de 8px pues interlineado de 10px)鈥

Esta pagina llamada FontPair Te muestra ejemplos de Fuentes que puedes combinar en tus proyectos para que estos tengan sentido!
Dale una checadita, Saludos compa帽eros.

Varios puntos interesantes a sumar:

  1. La 鈥減untitas al final鈥 en la tipografias serif se llaman serifas.

  2. En realidad al grosor no se le dice muy gorditas 馃榿, se le dice peso de la tipograf铆a.

  3. Tal como indic贸 Diego en la clase, no es bueno cargar muchas tipograf铆as, normalmente se usan un m谩ximo de 2 tipograf铆as. Pero tambi茅n es bueno no cargar muchos pesos distintos de una tipograf铆a porque eso compromete el rendimiento, solo agrega a la importaci贸n los pesos que necesites.

  4. Para que el renderizado de la tipograf铆a sea mas eficiente es buen practica colocarlo en el head antes de cargar el CSS, de modo que cuando el CSS cargue ya tiene disponible las tipograf铆as.

NOTA: He estado haciendo algunas pruebas y a pesar de no tener una informaci贸n oficial creo que Google esta haciendo algunas pruebas con sus tipograf铆as en Google Chrome. He creado proyectos donde no importo la tipograf铆a, pero si llamo a la fuente en el CSS y se renderizan correctamente, claro, solo en Google Chrome鈥

Son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y dependiendo del mismo cada uno de ellos posee estilos diferentes.

Algunas Generic Families

  1. serif: Son un tipo de fuente de estilo formal o cl谩sico como Times New Roman.
  2. sans-serif: No tienen acabado en las puntas, como: Verdana.
  3. cursive: Son las que tienen estilo cursivo.
  4. monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono.

驴Como puedo saber que tipo de fuente tengo instaladas en mi navegador?

Men煤>Configuraci贸n>Dise帽o>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif

驴Como puedo importar tipos de fuentes a mi proyecto?

  • Ir a Google Fonts.
  • Seleccionar la fuente.
  • Seleccionar Estilo de fuente.
  • Agregar al proyecto, se considera buena pr谩ctica agregar las fuentes utilizando la etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la p谩gina.

Buenas Pr谩cticas
Cargar una sola fuente.
Importarlas siempre en la etiqueta del head.

Un resumen de casi todo.

  1. Selectores . # p *
  2. Psudoclases y psudoelementos :class ::element
  3. Regla de CSS selector + {} + declaraci贸n(propiedad: valorPropiedad;)
  4. Modelo de caja: content + padding + border + margin
    NOTA: para no generar scroll, usamos la siguiente regla:
    *{box-sizing: border-box;
  5. Herencia en CSS: el c贸digo que se le va a pasar de un "padre"
    a un 鈥渉ijo鈥
  6. Orden de declaraci贸n y especificidad en selectores:
    6.1 Importancia
    6.2 Especificidad
    6.3 Orden en las fuentes
    6.1: 6.1.1 Hoja de estilo de agente usuario(navegador)
    6.1.2 Declaraciones normales en hojas del autor (.css)
    6.1.3 Declaraciones importantes (!important)
    6.2: Especificidad:
    !important
    inline styles
    #id
    .class
    tag
    6.3: En tus estilos, las declaraciones al final del documento
    anular谩n a las que sucedan antes en caso de conflicto.
  7. Combinadores:
    7.1 Adjacent Sibling
    div + p {Aplica una regla al selector indicado cercano}
    7.2 General Sibling div ~ p {Aplica el mismo estilo
    siempre y cuando existan como hermanos en la misma
    linea}
    7.3 Child
    div > p {El padre que sea mayor, a su hijo directo}
    7.4 Descendant
    div p {todas las etiquetas que est茅n en el contenedor}
  8. Medidas
    8.1 Absolutas: No va a cambiar sin importar el tama帽o del dispositiva.
    8.1.1: px
    8.2 Relativas: El tama帽o varia seg煤n el dispositivo.
    8.2.1 em: es un acr贸nimo de element y lo que hace es
    tomar el tama帽o de fuente que tenga el padre
    directo.
    8.2.2 rem: Rem hace referencia al font-size declarado en
    la etiqueta HTML (62.5%).
    8.2.3 Max-width/Max-height: Define el ancho y alto que un
    elemento puede tener.
    8.2.4 Min-width/Min-height: Define el ancho y el alto
    m铆nimo, que un elemento
    puede tener.
    8.2.5 Porcentaje % : Designa el porcentaje a usar, en el
    espacio en uso.
    8.2.6 vw y vh: view width y view height usan de 1% a
    100% del tama帽o del viewport.
  9. Position: Modifica el lugar en el que se encuentran las
    cajas etiquetas, por defecto todos tiene como
    valor predeterminado static.
    9.1 static, relative, absolute, fixed, sticky
    las propiedades botton left right top, no est谩n
    disponibles en el valor static.
  10. Display: La propiedad display especifica como se muestra
    un elemento html. Todos los elementos tienen
    alg煤n tipo de display. Si un elemento no se ve
    en pantalla, es porque seguramente su display
    es none.
    10.1 Block: siempre comienza en una nueva linea y
    ocupa 100% el espacio del width.
    10.2 Inline: no comienzan en una nueva linea y solo
    ocupan el ancho necesario. no se le puede
    agregar margin.
    10.3 inline-block: Combinaci贸n de los 2 anteriores.
  11. Display: flex (flexbox):https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  12. Display: grid https://css-tricks.com/snippets/css/complete-guide-grid/
  13. Variables: Permiten asignar cualquier valor a una
    propiedad cuyo nombre podemos elegir
    libremente.
    Ejemplo: :root{鈥搉ombre-variable: valor;}
    ejemplo: var (鈥搉ombre-variable);
  14. Web fonts: Buena pr谩ctica
    *solo cargar 1 fuente por proyecto.
    *importarlas siempre en la etiqueta head.

NOTA: Es buena practica antes de iniciar mis estilos:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5% /Esto si quieres usar Rem como medida/
}

驴Les ha pasado que encuentran fuentes hermosas y quieres saber cuales son?
Les recomiendo la app Adobe Capture. Tomas una foto y detecta que fuente es. Adem谩s tambi茅n puede calcular la paleta de colores.
Una buena app para Fronted鈥檚

Platzi tiene un curso de tipograf铆a que tomar茅 muy pronto. 鉁ㄢ湪鉁 https://platzi.com/clases/diseno-tipografia/

Anatom铆a de la letra

Consejo de un dise帽ador, nunca usen fonts descargadas de DaFont, siempre estan mal construidas y funcionan mal. 馃槂

驴Qu茅 pasa cuando descargamos nuestra propia fuente?

Lo instal茅 as铆 en el CSS, pero 驴es la mejor manera? y 驴c贸mo implemento el &display=swap?

@font-face {
  font-family: Levenim MT Regular; /* Esta al estar primera se pone por defecto si no se indica el bold */
  src: url(./fonts/lvnm_1.ttf);
  font-family: Levenim MT Bold;
  src: url(./fonts/lvnmbd_1.ttf);
}
html {
  font-size: 24px;
}
.uno {
  font-family: 'Levenim MT Regular', sans-serif;
}
.dos {
  font-family: 'Levenim MT Bold', sans-serif;
}

Wow todo esto que hemos visto en css est谩 para repasarlo muuuchas veces. Por lo menos tengo uqe ver unas 2 o 3 veces m谩s el m贸dulo. Excelente maestro Degranda!

Les dejo una p谩gina que sugiere colores y fuentes 馃槈

https://typespiration.com

Web Fonts


Google fonts

Una herramienta muy 煤til es Google Webfonts Helper, que toma la fuente que quieras de Google Fonts y te la genera en formatos eot, ttf, svg, woff, woff2, para mayor compatibilidad. Tambi茅n te muestra el CSS para importarlos.

Para descargar fuentes para tus proyectos https://fonts.google.com/ copiar el link, usamos una por buenas practicas e importarla siempre en la etiqueta <head> no poner el @import en el .CSS (mala practica)

En la clase anterior nos dej贸 los enlaces a p谩ginas donde podemos importar nuestras fuentes, les dejo los links de igual forma por aqu铆:

https://material.io/resources/icons/?style=baseline

https://fontawesome.com

https://fonts.google.com/?preview.text=&preview.text_type=custom

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

Espero les sea de ayuda.

Clase 43 - Web fonts


驴Cu谩les son las familias de fuentes m谩s comunes que nos encontraremos en el navegador?

  • Serf. (Times New Roman, Georgia)
  • Sans-serf. (Helvetica, Verdana)
  • Cursive. (Dancing script)
  • Monospace. (Courier new, Roboto mono)

驴C贸mo puedo saber que tipo de fuentes tengo instaladas en mi navegador?

  • Men煤.
  • Configuraci贸n.
  • Dise帽o.
  • Personalizar fuentes.
  • Fuete serf/fuente Sans-serf

驴D贸nde puedo encontrar fuentes diferentes a las que tenemos instaladas en nuestro navegador?

  • Google fonts.

驴C贸mo podemos usar las fuentes de Google fonts?

  • Buscamos la fuente que necesitamos y damos clic sobre ella.
  • Damos clic en 鈥淪elect this style鈥 para elegir el o los tama帽os de esa fuente que queremos agregar a nuestro proyecto.
  • Elegimos si queremos embeber la fuente en el proyecto usando c贸digo CSS o por medio de un link que podemos agregar a HTML. En este caso la mejor pr谩ctica es hacerlo por medio del link.
  • Usamos la regla que nos proporciona Google Fonts a los elementos que queremos darle dicha fuente.

驴Por qu茅 es mala pr谩ctica que agreguemos fuentes por medio del elemento @import?

  • Porque afecta el performance de la p谩gina web.

驴Para qu茅 sirve el display:swap que agreg贸 Google fonts a sus fuentes?

  • Esto nos permite hacer que el navegador cargue todo el proyecto como siempre lo hace y despu茅s de esto el navegador aplica las fuentes.

驴Cu谩les son las buenas pr谩cticas que debemos de seguir para usar fuentes externas?

  • Cargar s贸lo una fuente por proyecto (M谩ximo 2).
  • Usar la etiqueta <link> dentro de la etiqueta <head>.

Muy pr谩ctico, aunque tengo una duda. 驴Si selecciono varias alternativas de la misma fuente, c贸mo cambio entre una y otra? Ejemplo: Si aplico la Roboto light, y quiero cambio a Roboto Black 700 en otra 谩rea

Tome el curso de Introducci贸n al dise帽o.
Todas las Serif son para papel e impresi贸n.
Para digital son sans-serif. Podr铆a utilizarce en el digitalas las Serif siempre que tenga una justificaci贸n por dise帽o.
Les recomiendo aprobar el curso de Introducci贸n al dise帽o, les dar谩 una visi贸n m谩s clara para elecci贸n de colores, como maquetar, alinear, lo fundamental para un dise帽o balanceado.

Hola!

Solo era para comentar que en el quiz de CSS en la pregunta de cu谩les son los elementos de una caja CSS, la respuesta correcta tiene un typo en Content, qued贸 como Context.

Un saludo! 馃寵

para usar lasfuentes y variar en la misma fuente se usa

font-weight :

de acuerdo a esto:
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

Como sugerencia, procuren usar fuentes en formato woff o convertir sus fuentes existentes a dicho formato. Son m谩s ligeras, por lo que mejora el tiempo de carga.

En el curso de introducci贸n al dise帽o se menciona que se recomienda tener 2 fuentes como m铆nimo y 3 como m谩ximo. Tambi茅n que al hacer textos largos digitales usar una fuente sans-serif ya que es menos cansado a la vista.

Para usar iconos y los mismos como fuente en tu web site recomiendo usar icomoon , siempre me a resultado muy 煤til.

Comparto los apuntes de la clase 馃槂

En el quiz que viene a continuaci贸n se debe corregir un textico:

El diablo est谩 en los detalles. Hagamos primero lo f谩cil (poner la fuente en el head, por ejemplo) y luego ataquemos lo complejo.

Si quieren ver las fuentes que tienen instaladas en su computadora pueden ir a https://wordmark.it/

Excelente Diego, este curso me ha llevado de solo imaginarme a como se podria crear una pagina web, a conocer todos los conceptos y las buenas practicas 鈥 Ahora lo que queda es comenzar a crear nuestros propias paginas para ir ganando experiencia poco a poco.

Performance: La velocidad a la que las p谩ginas web se descargan y se muestran en el navegador web del usuario

Supongo que puedo descargar la fuente e integrarla a los directorios de mi proyecto. Esto evitar铆a el problema del performance con el uso de import?

Les comparto una pagina donde es bueno buscar fuentes:

Dejo un art铆culo sobre el uso de web fonts super bueno! 馃槃

Recomiendo el curso de Lettering aqu铆 en Platzi, donde se explica muy bien el tema de las fuentes y su impacto visual, los distintos elementos que las componen, etc.

Recomiendo fontSquirrel, es muy util tambi茅n para el tema de generar y descargar fuentes para la web 馃槂

WEBFONT

  • Una webfont te va a permitir utilizar mas recursos de fuentes que disponemos en sitios como googlefon.

  • Tenemos dos forma de a帽adir estas fuentes directo de googlefon con:

    • @import

      style>
      @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
      </style>
      

      Mediante esto, importamos la fuente a nuestro css para despu茅s llamarla bajo el nombre de dicha fuente, sin embargo, no es tan buena practica por la forma en la que se carga.

    • <link>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    

    De esta forma a帽adimos la fuente a nuestro head del documento html, y con esto conseguiremos que la carga sea m谩s optima, posterior a eso utilizamos la regla de css para llamar a nuestra fuente.

    font-family: 'Nunito', sans-serif
    

    NOTA: la forma 鈥淍import鈥 y 鈥<link>鈥 usan la misma regla css.

Al trabajar con fuentes locales, cuando nuestro proyecto incluye fuentes que nos entregaron los dise帽adores en un archivo, el procedimientos que implemente seria el siguiente:
En el HEAD de HTML:

<link rel="stylesheet" href="./fonts/SoberTexto-Regular.otf">
    <link rel="stylesheet" href="./fonts/SoberTitular-Regular.otf">

Y en CSS

@font-face {
    font-family: Sober;/* Aqu铆 yo le estoy asignado este nombre a la familia */
    src: url(./fonts/SoberTitular-Regular.otf), url(./fonts/SoberTexto-Regular.otf);
    /* Estas ultimas son la ubicaci贸n del archivo en el proyecto local */


html {
       font-family: Sober;
  }

Y as铆 cargar铆a en el proyecto la fuente.

Me faltar铆a ver como llamar cada tipo de fuente espec铆ficamente, trabajare en eso 馃槂

Recomiendo checar la propiedad font-display es genial 馃槂
como buenas pr谩cticas, no tener demasiadas fuentes en el proyecto.

Que bueno que ya tenemos los Quiz en Desktop, todos los cursos deber铆an tener xD

RESUMEN CLASE 43:
WEB FONTS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web FontsS</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto+Mono&family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
    <main>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur commodi laborum explicabo ipsum tempora nesciunt aliquid facere tenetur veritatis consequuntur reprehenderit molestiae qui, consectetur, labore maxime minima sapiente, doloribus esse!
        </p>
    </main>
</body>
</html>

CSS

html {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.2rem;
}

Hola, tenga en cuenta que si deciden incluir la tipograf铆a dentro de su proyecto:

@font-face {  
  font-family: 'Ubuntu';
  src: url(../fonts/Ubuntu-Light.ttf);
  font-display: swap;
}

utilizar font-display: swap para evitar pantallas vac铆as en textos, utilizando las fuentes por defecto del navegador, hasta que cargue la fonts del proyecto.

Tambi茅n pueden agregar en HTML un preload para que cargue primero el archivo de la fuente.

<link rel="preload" href="./fonts/Ubuntu-Light.ttf" as="font" type="font/ttf" crossorigin>

Paso una web donde esta explicado con mayor detalle lo mencionado anteriormente. preload-fonts

Google Fonts (anteriormente llamado Google Web Fonts) es un directorio interactivo de uso libre bajo la aplicaci贸n que programa interfaces para fuentes de la web. Fue lanzado en 2010, y renovado en 2011.

BUENAS PRACTICAS

Importar las fuentes en el head del html:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap" rel="stylesheet">

En lugar:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');

Ac谩 dejar茅 mi resumen de clase con 3 incisos:

  1. Realic茅 con HTML el cuadro de fuentes presentado en el video, aprend铆 css b谩sico para tablas y como ejercicio para colocar fuentes.
  2. Se alcanza a notar lo dicho sobre 鈥榙isplay=swap鈥 al cargar la p谩gina. Verifiquenlo desde aqui presionar F5 (recargar) con intervalos de 2 seg para notar el cambio.
  3. Hay una explicaci贸n sobre rel=鈥減reconect鈥 comantariado en el HTML, pueden verlo con el inspeccionador de elementos o en el c贸digo siguiente.


HTML

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>WebFonts</title>
	<link rel="stylesheet" href="./style.css" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
		href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Great+Vibes&family=Roboto+Mono:wght@300;500;700&display=swap"
		rel="stylesheet"
	/>
	<!--
		Este 煤ltimo link trae las fuentes de google fonts, para este caso trae 3 fuentes en diversos tama帽os (grueso de fuente / font-weight)
		Dancing Script: 400,500,700
		Roboto Mono: 300,500,700
		Great Vibes (ancho 煤nico o normal)
		&display=swap es una propiedad anidada desde google fonts que le permite al navegador cargar y renderizar todo el contenido de la p谩gina con la fuente predeterminada del navegador y cuando el proyecto completo est茅 listo realizar el cambio de fuente.

		link rel="preconnect" se utiliza para realizar una conexi贸n previa a un servidor sin llamar datos, abre la conexi贸n. El atributo 'crossorigin' realiza una conexi贸n segura (adicional) a un servidor para obtener los datos
	-->
</head>
<body>
	<header class="main-header">
		<h1 class="main-header__title">WebFonts</h1>
	</header>
	<section class="generic-fonts">
		<p class="generic-fonts__description">Aqui ver谩s una relaci贸n de fuentes gen茅ricas y como lucen</p>
		<table class="fonts-table">
			<thead class="fonts-table__header">
				<tr class="fonts-table__row">
					<th class="fonts-table__cell fonts-table__cell--header">Nombre gen茅rico</th>
					<th colspan="2" class="fonts-table__cell fonts-table__cell--header">Ejemplos de fuente</th>
				</tr>
			</thead>
			<tbody class="fonts-table__body">
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__serif--serif">serif</td>
					<td class="fonts-table__cell font__serif--times-new-roman">Times New Roman</td>
					<td class="fonts-table__cell font__serif--georgia">Georgia</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__sans-serif--sans-serif">sans-serif</td>
					<td class="fonts-table__cell font__sans-serif--helvetica">Helvetica</td>
					<td class="fonts-table__cell font__sans-serif--verdana">Verdana</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__cursive--cursive">cursive</td>
					<td class="fonts-table__cell font__cursive--dancing-script">Dancing Script</td>
					<td class="fonts-table__cell font__cursive--great-vibes">Great Vibes</td>
				</tr>
				<tr class="fonts-table__row">
					<td class="fonts-table__cell font__monospace--monospace">monospace</td>
					<td class="fonts-table__cell font__monospace--courier-new">Courier New</td>
					<td class="fonts-table__cell font__monospace--roboto-mono">Roboto Mono</td>
				</tr>
			</tbody>
			<tfoot class="fonts-table__footer">
				<tr class="fonts-table__row">
					<td colspan="3" class="fonts-table__cell">
						Muestra de fuentes tomada del
						<a href="https://platzi.com/clases/2008-html-css/31229-web-fonts/" target="_blank">gr谩fico en el curso</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<article class="explanation">
			<h2 class="explanation__title">Buenas practicas al incrsutar fuentes</h2>
			<ol class="best-practices">
				<li class="best-practices__element">Solo cargar una fuente por proyecto</li>
				<li class="best-practices__element">Importar siempre las fuentas desde la etiqueta head</li>
			</ol>
		</article>
	</section>
</body>


CSS

/*
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Great+Vibes&family=Roboto+Mono:wght@300;500;700&display=swap');

Es una mala practica, las fuentes deben cargarse desde el la etiqueta head en el documento HTML

*/

:root {
	--border-table-color: #cfcfcf;
	--header-bg-color: darkgreen;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-family: sans-serif;
}

a {
	color: blue;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.main-header {
	padding: 0.5em;
}

.main-header__title {
	text-align: center;
	font-size: 2em;
}

.generic-fonts {
	padding: 1em;
	margin: 0 auto;
	max-width: 38em;
}

.generic-fonts__description {
	text-align: center;
	padding: 1em;
}

.fonts-table {
	margin: 0 auto;
	width: 100%;
	border-spacing: 0;
	text-align: center;
	border-collapse: separate;
}

.fonts-table__header {
	background-color: var(--header-bg-color);
	border: 2px solid var(--header-bg-color);

	color: white;
}

.fonts-table__row .fonts-table__cell:last-child {
	border-left: none;
}

.fonts-table__row .fonts-table__cell:nth-child(2) {
	border-right: none;
	border-left: none;
}

.fonts-table__header .fonts-table__cell {
	border: none;
}

.fonts-table__header .fonts-table__cell--header {
	padding: 0.75em 1em;
}

.fonts-table__cell {
	padding: 0.25em 0.5em;
	border: 1px solid var(--border-table-color);
	border-top: none;
	width: 33.33%;
}

.fonts-table__body {
	border-top: none;
}

.font__serif--serif {
	font-family: serif;
}

.font__serif--times-new-roman {
	font-family: "Times New Roman", serif;
}

.font__serif--georgia {
	font-family: Georgia, serif;
}

.font__sans-serif--sans-serif {
	font-family: sans-serif;
}

.font__sans-serif--helvetica {
	font-family: Helvetica, sans-serif;
}

.font__sans-serif--verdana {
	font-family: Verdana, sans-serif;
}

.font__cursive--cursive {
	font-family: cursive;
}

.font__cursive--dancing-script {
	font-family: "Dancing Script", cursive;
}

.font__cursive--great-vibes {
	font-family: "Great Vibes", cursive;
}

.font__monospace--monospace {
	font-family: monospace;
}

.font__monospace--courier-new {
	font-family: "Courier New", monospace;
}

.font__monospace--roboto-mono {
	font-family: "Roboto Mono", monospace;
}

.fonts-table__footer {
	font-size: 0.75em;
	text-align: right;
}

.fonts-table__footer .fonts-table__cell {
	border: none;
}

.explanation {
	padding: 0.5em;
}

.explanation__title {
	margin: 1em auto;
}

.best-practices {
	padding-left: 1.25em;
}

.best-practices__element {
	line-height: 1.5em;
}

Generic-Families:

Mi novia es arquitecta, y me ense帽o una pagina donde puedes configurar letras para sus dise帽os del trabajo, y la verdad me gusto mucho, esta es la pagina:

https://www.dafont.com/es/

Lol, toda mi vida cre铆 que la serif y sans-serif eran fuentes y no categor铆as de fuentes y que de ellas part铆an much铆simas m谩s.

Una consulta es buena practica cargar un tipo de fuente. Y despu茅s si quiero modificar fuentes en CSS a alguna de mis etiquetas podr铆a hacerlo? cual predominar铆a en el renderizado? gracias!

Si est谩s en un sitio web y ves una fuente que te gusta, puedes usar esta extensi贸n de Chrome para saber cual es 馃槂

Es correcto usar google fonts para hacer import o font-face de una fuente en CSS o link en HTML: [https://fonts.google.com/]https://fonts.google.com/

La mejor pr谩ctica es hacer el link en HTML, por defecto google fonts pone display=swap.

Les dejo otro link tambi茅n muy bueno para elegir fuentes.
https://es.bestfonts.pro/

chrome-extension://ohcpnigalekghcmgcdcenkpelffpdolg/mobile_app.html

esta extension te permite saber el codigo de cualquier color que este en tu navegador, es super util para practicar cuando uno quiere compiar un color que le gunto en una foto o una pag web

驴Cu谩l ser铆a la mejor practica para colocar una 煤nica fuente, en el selector universal, el html o body?

Swap le da a la fuente un per铆odo de bloque de cero segundos y un per铆odo de intercambio infinito. Esto significa que el navegador dibuja texto inmediatamente con un respaldo si la fuente de la fuente no est谩 cargada, pero cambia la fuente tan pronto como se carga. Similar al bloque, este valor solo debe usarse cuando la representaci贸n de texto en una fuente en particular es importante para la p谩gina, pero la representaci贸n en cualquier fuente seguir谩 transmitiendo un mensaje correcto. El texto del logotipo es un buen candidato para el intercambio, ya que mostrar el nombre de una empresa con una alternativa razonable transmitir谩 el mensaje, pero eventualmente utilizar谩 el tipo de letra oficial.

display=swap ; signinfica que primero carga todo el contenido de la p谩gina y luego cambia el tipo de letra. Importarlo en el head es buena pr谩ctica.

Los import no son buenas practicas porque nos pegan en performance. La mejor practica es no importar tus fuentes en tus estilos sino ponerlas adentro del head.
Como buena practica no es bueno cargar m谩s de una fuente externa. Porque pega en performance. Si tenemos que cargar 2 fuentes que este bien justificado esta perfecto pero si tenemos mas de 2 ya es un problema para nuestro performance se puede convertir un problema a la hora de renderizar.
Importarla siempre en la etiqueta head.

Una vez que efectuado el enlace de la fuente con la etiqueta link, usar la propiedad: font-weight para utilizar los diferentes tama帽os seleccionados en google fonts.
Ejemplo:
.nueve {
font-family: 鈥楻oboto鈥, sans-serif;
font-weight: 900;
}

驴Por que existen paginas que cargan en segundos y otras en varios?
Pues existen varios factores, pegar un import de las fuentes es uno de ellos

fuentes - Sans Serif sin linea al final estilo plano usada en Google Docs y similares

Qu茅 forma tan sencilla de explicar esto. En otro curso hicieron un enredo de esta parte.

Ok, entendido el Display=Swap.
Eso me va a ayudar para un par de proyectos. Eso de sentir que se detiene la carga del sitio para que las fuentes se terminen de cargar es muy peye.

Por que no es buena practica importar las fuentes en el CSS con el @import ??

馃摑 Las tipograf铆as web permiten especificar los archivos de tipo de letra.

Muchisimas gracias profe por la explicaci贸n鈥

Este curso tiene muchos elementos clave, me esta gustando bastante鈥

se puede hacer un import en css directamente pero no es tan bueno para el performance es decir para el rendimiento, y eso se convierte en mala practica, yo personalmente importo por link o descargo las fuentes en formato woff

.

Por fin pude ver la diferencia entre sans-serif y serif y el uso, la verdad no sab铆a por qu茅 se colocaban al final de la fuente desscrita en css: 鈥楾ahoma鈥︹, sans-serif;

El tema dice WEB FONTS, no solamente FONTS.

Yo por lo general cuando quiero usar fuentes diferentes uso las de Google Fonts

Google font la verdad que es una herramienta bastante 煤til y muy f谩cil de usar!

Home Platzi 2020

Home Platzi Junio 2022

Buenas pr谩cticas a pr谩cticar e.e

Desde un archivo externo con la etiqueta <style>, como atributo en una etiqueta HTML.

D铆ganme que notan el error de sintaxis. (Pregunta del quiz)

Les comparto este link donde google nos comparte varios art铆culos sobre fuentes para conocer un poco m谩s del tema, son peque帽as gu铆as para orientarnos mejor sobre que tipograf铆a elegir para nuestro proyecto https://fonts.google.com/knowledge

Parece algo basico, pero es muy interesante.

Les recomiendo este sitio web para descargar todo tipo de fuentes tipogr谩ficas: https://www.dafont.com/es/

Tremenda clase, brutal la verdad en la forma como interactuamos con paginas externas, mas para fuentes nuevas

Buenas noches, colegas, as铆 voy avanzando y aplicando lo nuevo sobre lo anterior aprendido en las primeras clases.

Encontr茅 una FUENTE Sans-serif con puntas en las esquinas de las letras como las fuentes Serif*

La fuentes es:
Cambria Math

buenas practicas solo cargar 1 fuente externa e importarla en la etiqueta head

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Existen fuentes ya instaladas en tu computadora por defecto

  • En google font puedo descargar much铆simas fuentes

  • Los import en CSS no son buenas pr谩cticas, lo mejor es importarla en html y en la etiqueta de head

  • Como buena pr谩ctica es solo importar 1 o 2 fuentes por proyecto, ya que si tenemos m谩s de 2 fuentes podemos tener problemas en el tiempo de renderizado

https://type-scale.com/ les recomiendo esta web para setear los estilos de las fuentes. Es muy buena! saludos

google fonts chicos!

  • Para buenas pr谩cticas solo usar una fuente.
  • Si cargamos dos tienen que estar bien justificados.
  • M谩s de dos puede generar problemas.
  • Importarlas siempre en la etiqueta head.

Excelente clase, muy clara y 煤til.
La verdad una buena fuente bien escogida le da mucha personalidad a tu p谩gina.

S煤per interesante esta clase.

Para elegir la fuente / tipograf铆a:
馃馃馃

  • Para textos en digital (Como p谩ginas web) usamos fuente sans-serif sin esas terminaciones (setifas).

  • Las fuentes con Serifa se recomiendan para impresas o en digital para titulos.
    Para calcular el interlineado usamos la siguiente regla:
    鈥2 puntos m谩s que la fuente (Fuente de 8px pues interlineado de 10px)鈥