Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estilos en el header

6/26
Recursos

Aportes 108

Preguntas 29

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Esta clase varias cosas me “rechinaron”:

  • No me queda claro la razón de usar position: fixed en el body,
  • Tampoco el reset del padding que es innecesario
  • Los nombres de clases me resultan muy largos y creo que no tiene mucho de BEM.
  • Crea un grid con 2 fr (1 y 1) donde luego adentro le agrega al child un height, que podría haberle asignado directamente al tamaño de cada row en vez de usar fr.
  • Me resultó extraño el abuso de uso de sections, hasta creo que podrían usarse menos para lograr el mismo resultado.

Tengo que ver la próximas clases, pero me parece poco práctico realmente.

** *nota **
en vez de usar :
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
top:0px;
es valido usar :
width: 100vw;
height: 100vh;

Un error que cometía mucho al inicio con Flex-box es que me confundía con el lugar en donde poner las propiedades justify-content y align-items. Estás propiedades siempre se trabajan en un contenedor padre que contenga la propiedad display: flex. Les comparto una guía de css-tricks que me ayudo mucho para aprender a utilizar Flex-box.

CONSEJO: Como parte de las buenas prácticas no es recomendable resetear los estilos con el asterisco:
Para eso ya está Normalize.css, hace que los navegadores procesen todos los elementos de manera más consistente y en línea con los estándares modernos. Precisamente se dirige solo a los estilos que necesitan normalizarse.
Dejo el link: https://necolas.github.io/normalize.css/8.0.1/normalize.css

También se pude usar:

body {
  min-height: 100vh;
}

creo qe es erroneo poner display:inline; cuando ya el elemento “a” es de linea no de bloque, y colocar justify-items: flex-end; esta de mas ,ya que el self ya lleva al contenedor a la derecha osea hay codigo de mas bueno eso pude ver revisando el codigo, capas este mal pero para aprender al detalle estoy practicando elemento por elemento y tratar de comprender el flujo

En este caso, da igual poner
header .header-icons { }

que solo poner
.header-icons { }

Ya que solo tenemos esa clase en una sección. Si tuviéramos esa misma clase en otras secciones donde quisiéramos que se viera diferente, pues se necesitaría la aclaración…

Si quieren evitarse tener que hacer el “reset” de los elementos HTML a mano y que aun asi tengan las mejores prácticas en su página, les recomiendo que usen Normalize CSS que les hara todo el trabajo por ustedes, es simplemente codigo css que debemos de poner en un archivo aparte (yo normalmente hago esto) e importarlo como el primer archivo css en su pagina HTML, así tendrán las mejores practicas de CSS, además de que el código viene comentado detallando que hace cada parte. se los recomiendo para sus proximos proyectos.

Pienso que el instructor colocó mucho código CSS para hacer el header, yo lo logré con dos clases solamente y usando Display Flex (Aparte que el curso es de Grid), pero de igual manera al él haberlo hecho de una manera larga, aprendí sobre Justify-self, no hay camino largo que venga con mala indencion 😄 #NuncaParesDeAprender

No sé por qué hicimos un código tan grande sólo para poner las dos líneas. Yo hice esta versión y se mira exactamente cómo la de la clase con menos código:

header {
  width: 100%;
  display: grid;
  grid-template-rows: 50px 90px;
}

header .header-icons-container {
  width: 100%;
  display: flex;
  background-color: #47cfac;
  justify-content: flex-end;
  align-items: center;
}

header .header-icons-container .icons {
  margin-right: 50px;
}

Recomendación:

Les sugiero que los colores y tamaños de fuentes los agreguen como variables. Hacer esto les va hacer la vida muchos mas fácil en un futuro.
Debido que si tienen un color en distintos botones y en algunas otras partes de la pantalla como en el header y desean hacer algunos cambios solo lo tendrán que hacer una vez si tienen variables.

:root {
    --font-small: 1.2rem;
    --font-medium:1.4rem;
    --font-laarge: 1.6rem;
    --color-prymary: #47cfac;
}
<code> 

técnicamente este selectos no es necesario justify-items: flex-end;

Así va hasta ahora mi proyecto, haciéndolo en Mobile First como enseñó el profe en un curso anterior en la escuela de Desarrollo Web.

Cuántos trucos tiene bajo la manga Diego para maquetar? Increíble!

Ya me adelante un poquito y va quedando así 😄
Lo que suelo hacer en estos cursos es no copiar el código si no hacer el mío propio y si me atoro en algo puedo guiarme.
Pero siempre veo todas las clases por qué siempre se aprende algo nuevo o una forma diferente de hacer algo.

comparto el codigo de main.css avanzado hasta la clase

body {
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
}

a {
    text-decoration: none;
    display: inline;
    color: black;
}

header {
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows:  1fr 1fr;
}

header .header-icons-container {
    width: 100%;
    height: 50px;
    display: grid;
    background-color: #47cfac;
}

header .header-icons-container .icons {
    width: 300px;
    height: auto;
    display: flex;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}

Hola compañ[email protected]:

¿Ocurre algo si, para posicionar los elementos del header, utilizo valores como flex-end y space-between? Veo que el profe utiliza un grid, pero me resulta más sencillo con esos valores…

Cual es la diferencia entre position: fixed y overflow:hidden para no hacer scroll?

Es muy importante ser específicos, a la hora de poner los nombres de las clases.

header{
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 2fr;
}

header .header-icons-container{
    display: grid;
    background-color: #47cfac;
    justify-content: end;
}

header .header-icons-container .icons{
    width: 300px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

Un header diferente, a cambiar diseños

Esta es la primera vez que veo que el NAV no es lo primero que se pone, y la manera como utiliza todo para jugar con la pagina me parece grandiosa, soy principiante, claro esta, pero igual me impresiono mucho.
Excelente el curso.

Min 10:40, creo que el justify-items: flex-end fue innecesario.

Funciona igual colocando al padre:
justify-content: end;
Al hijo:
justify-content: space-between;

Si… creo que el justify-items:flex-end fue inncesario 🕶

Asi hice todo solo usando flex;

header {
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: column;
}

header .header-icons-container {
    width: 100%;
    height: 3rem;
    background-color: #47cfac;
    display: flex;
    justify-content: flex-end;
}

header .header-icons-container .icons{
    width: 300px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 2rem;
}

Buen clase, en mi caso no utilice flex, creo que grid es una mejor forma de centrar horizontalmente las anclas de redes sociales y también de enviarlas a la derecha.

header .header-icons-container {
  display: grid;
  align-items: center;
  justify-content: right;
  background: #48cfad;
}

header .header-icons-container .icons {
  margin-right: 50px;
}```

Compañeros ¿Es necesario el justify-items: flex.end?

Gracias… por fin entendí

Sí quedó

Flexbox tiene sólo justify content, justif-.items es la propiedad de grid y debe ir junto con display: grid.

Hay una propiedad llamada inset que te permite usar de forma rápida la inserción de las cuatro propiedades top, left, right, botton.

Cabe mencionar que inset, no tiene ningún efecto sobre los elementos no posicionados es decir los estáticos. En otras palabras tu elemento debe declararse con un position ya sea relative, absolute, fixed o sticky.


  • Sintaxis
    inset sigue la misma sintaxis de valores múltiples de padding y margin. Es decir acepta hasta 4 valores y fluyen en el sentido de las agujas del reloj.

  • Ejemplo

.body {
  inset: 1em 2em 3em 0; /* top right bottom left */
  inset: 10% 5% -10%;   /* top left/right bottom */
  inset: 0 10px;        /* top/bottom y left/right */
  inset: 20px;          /* todos los valores = 20px */
}

  • Entonces nuestro código puede quedar así:
body {
	margin: 0;
	padding: 0;
	position: fixed;
	inset: 0;
}

Arquitectura BEM (Bloques, Elementos y Modificadores) y sus beneficios:
💡Se enfoca en la reutilización de código , es decir, permite tener un mejor entendimiento sobre la estructura de nuestro proyecto.
💡Permite especificidad : Puedes usar un selector único para cada regla, es decir, te permite permite hacer menos repeticiones.
💡 Hay mayor independencia : Cada bloque se puede mover a cualquier parte del documento, sin afectar el estilo.
💡 Mayor simplicidad : El entendimiento en la lectura del código y la lógica es simple, de esta forma al momento de crear las clases tienes un mejor control absoluto hacia dónde haces referencia dentro la estructura de tu proyecto.

Muy buena clase nomas no entiendo mucho sobre la Propiedad Display: Grip;

5. Estilos en el header:

Primero vamos a “resetear” los estilos, en la clase no lo explica mucho, pero esto es muy importante.

¿Por qué?

Porque cada navegador maneja sus valores de márgenes, padding y box sizing (Digamos Chrome, Firefox, Edge y Safari) y sus versiones mobile, entonces, para establecer todos los padding y margin por defento a 0 (cualquiera sea el navegador de donde se vea) usamos lo siguiente en el inicio de CSS:

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Recomiendo mucho el uso de Firefox Developer para ayudarte visualmente con Flex y Grid, por ejemplo así se ve la página en Firefox Developer, tengo seleccionado el contenedor flex para ver su disposición en el espacio:

Además les comparto el código CSS de la clase, hice pequeñas modificaciones, porque en este caso de página pequeña no es necesario especificar una clase dentro de otra, al ser de un solo uso:

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/*SHARED*/
a {
    text-decoration: none;
    display: inline;
    color: black;
}
.grid {
    display: grid;
}
.flex {
    display: flex;
}
/*HEADER*/
.header {
    width: 100%;
    height: 140px;
    grid-template-rows: repeat(2, 1fr);
}
.header-icons-container {
    width: 100%;
    height: 50px;
    background-color: #47cfac;
}
.header-icons {
    width: 300px;
    height: auto;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}

Estoy haciéndolo en el navegador Edge, y tuve que agregarle al

header {
  width: 100vh;
}

Lo comento porque el aporte de min-height no me funcionó correctamente o como yo lo esperaba

Alguien más piensa que hay código innecesario en el CSS que escribió el profesor?

Cual es la necesidad de traducir Justify como Justificar?

Hola, en mi Editor de código V. S. C. al terminar de dar estilo y color guardo el código para despues correrlo desde la barra de funciones pero solo me permite correelo si realizo debuging y cuando termina de cargar, me aparece un error 1088 o algo asi y me pide abrir forzosamente un archivo jason para el navegador. ¿Que puedo hacer para correrlo normalmente?

GRANDEEEEEE

Me confundió usando tanto flex, antes de ver el video lo intenté yo y los coloqué con menos líneas, aunque igual puede que lo que el hace tenga mejores prácticas y complique menos las cosas en un futuro.

Otra manera para tener el mismo resultado con CSS grid

<code>  
header .header-icon-container{
    width: 100%;
    height: 50px;
    display: grid;
    background-color: #47cfac;
    justify-content: end;
}

header .header-icon-container .icons {
display: grid;
grid-template-columns: repeat(5, 1fr);
place-items: center;
 justify-content: space-between;
 margin-right: 50px;
}

Esta página me ha servido bastante para entender todo lo relacionado con grid. Espero que les sea útil!

https://css-tricks.com/snippets/css/complete-guide-grid/

Tened en cuenta que el profe lo hace a propósito para que resolvamos por nosotros mismos y no sea puro copia y pego.

En mi caso quedó así mi codigo

header .header-icons-container {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: end;
    background-color: #47cfac;
}
header .header-icons-container .icons {
    width: 300px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

Si quieren ahorrarse unas lineas de código usen justify-items: flex-end; en la clase header .header-icons-containery eliminen justify-self: end; de la clase header .header-icons-container .icons

No costaba nada juntar todos las imagenes en un enlace, o subir el diseño en Figma u.u

Podemos acceder a un color picker desde el dev tools. Muy útil para saber el color de alguna imagen.

El uso del “color picker” en este caso considero está mal, ya que como había citado en el video 3 la unidad correspondiente te da una carpeta con assets (imagenes, textos, fuentes, etc).

y como pueden ver el color correcto es:
#61f2f5

lo que literalmente va a causar una variación a lo establecido.

Comparto mi código del header en Sass, vengo del curso de pre-procesadores y estoy poniendo en practica lo aprendido, cualquier mejora es bien recibida

Para los que no entiendan porque el profe usa " position : fixed " les dejo el siguiente video como guía https://www.youtube.com/watch?v=FTSdAPvSjpc

Para eliminar estilos predeterminados del navegador, es recomendable utilizar: Normalize.css

Para que el body no tenga scroll también se le puede aplicar un height de 100 vh y resetear los valores de todas las etiquetas con el selector universal.

Para que ocupe todo el espacio de la pantalla verticalmente podemos hacer también lo siguiente, restarle al vh del main la longitud vertical de el header menos el footer, vamos a suponer que el fotter más el header suman 300px

.main {
	height: calc(100vh - 300px)
}

metodología Bem > metodologías

luego de tomar el curso de Desarrollo web online (en donde tratan el display de flex) y el de CSS Grid, me quedan las siguientes dudas:

  • qué diferencia hay entre usar auto y inherit para que el contenedor hijo tome la misma altura que su elemento contenedor?,
  • veo se han usado propiedades de display: grid, justify-items y justify-self en un display: flex, y el primero con valores de justify-content, esto es correcto? 🤔

otra forma con menos código de hacerlo. Nota(El nav de abajo lo puse en el main por el home que esta en dropbox, parece que esta en el main desconozco si es mala practica usar navs en el main.)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/normalize.css">
  </head>
  <body>
    <header>
      <nav class="navtop">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">Instagram</a>
        <a href="">Linkedin</a>
        <a href="">Youtube</a>
      </nav>
    </header>
    <main>
        <nav class="navbottom">
            <a href="">logo</a>
            <a href="./profile.html">Sobre mí</a>
        </nav>
    </main>
  </body>
</html>

CSS

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;

    /*forma 1.- Para que nuestra pagina no haga scroll
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */

    /*forma 2*/
    width: 100vw;
    height: 100vh;
}

a{
    text-decoration: none;
    display: inline;
    color: black;
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #47cfac;
}

.navtop {
    margin-right: 40px;
}

.navtop a {
    padding: 10px;
}

hay que tener en cuenta lo siguiente : static es por defecto

absolute lo que hace es que el elemento no sigue el flujo normal y se pocicione segun el navegador y los demas elementos se acomodan entre ellos y hacen cuenta que ese elemento absolute no existe.
relative la diferencia que tiene con absolute es que los elementos si hacen de cuenta que existe , quiere decir que si movemos el elemento, quedara un hueco y además el elemento no se mueve segun el navegador si no desde donde estaba,
y fixed es parecido a absolute, pero el elemento al hacer scroll nos seguira por el scroll porque este se pociciona segun el viewport

en resumen si el puso fixed al body quiere decir que no habra scroll a menos que se haga un footer en otro bloque semantico y lo que pasara es que se superpondra sobre el footer, hay muchas formas de evitar scroll , esta es una forma dependiendo el caso (truquitos) asi como en ekl anterior curso del clon de google que el usaba el footer con pocicion absolute en bottom 0px para que el fotter no generara scroll

Les recomiendo mucho la herramienta llamada PickPick, nos ayuda a extraer colores de básicamente lo que queramos, también trae una regla muy útil y más funcionalidades.
Este es link: PickPick

excelente clase se aprende mucho en el proceso

Por qué el justify-self: end;???

tube que ver un video en youtube (la cual les recomiendo es la de ED team) para entender mas sobre el fixed.

excelente la forma de limpiar el navegador que trae valores por defecto y poder empezar a crear con mejores practicas desde el inicio el diseño

Se aprenden muchos detalles de maquetado.

Estupenda explicación instructor Diego, ya cada vez va teniendo forma el header del blog.

:v chalecos

Para que la página no haga scroll también podemos poner overflow: hidden; en x o en y.

¿Qué objeto tiene asignar a ‘0’ las propiedades de top, right, bottom y left, si al margin se le está asignando ‘0’?

Aprendiendo otras formas de realizar el header. No está de más aprender.

¿Por qué si uso Firefox no interpreta los estilos hasta este punto de la misma manera?

Las anclas no salen bien ordenadas 😦…

¿por que uso position fixed en el body?

Tambien se puede hacer con overflow:hidden; para ocultar el scrollbar

Les recomiendo Colorzilla, es un plugin para Chrome que nos permite tener colorpicker y mas herramientas en el navegador. Muy bueno.

  • Para acceder al inspector de elementos en windows = Ctrl + shift + i

Genial

No sabia como se ocultaba el scroll

Perfecto 😃

no sabia aquel tip para obtener el color especifico de un elemento. Me llevo una valiosa información XD

No entiendo porqué usa justify-items: flex-end; primero y luego usa justify-content: space-between; dos lineas mas abajo, según yo solo tomaría el space between y no sirve de nada la linea con el flex-end

Excelente clase!!

Sobre la propiedad position

La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento.

Hay cinco valores de posición diferentes:

  • static
  • relative
  • fixed
  • absolute
  • sticky

Los elementos se posicionan utilizando las propiedades top, bottom, left y right . Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca primero. También funcionan de manera diferente según el valor de la posición.
Fuente: https://www.w3schools.com/css/css_positioning.asp

wowwwww eso del color picker del inspector de elementos no lo conocia!

Me encantan los cursos y dar un repaso de las cosas que he visto en otros.

No sabia el truco para extraer el color del inspector de elementos. Super gracias

Hola, porfa ayudenme compañeros. Me sale alineado asi, muy junto.

Es bueno ver la clase y atender sugerencias pero en ocasiones utilizar archivos como normalize ayudan demasiado y evitas tanto código.

La metodología BEM divide la interfaz de usuario en bloques independientes para crear componentes escalables y reutilizables. Explicamos cómo funciona.
BEM (Block, Element, Modifier o Bloque, Elemento, Modificador) es una metodología ágil de desarrollo basada en componentes. Fue creada por la empresa Yandex para desarrollar sitios en poco tiempo y con un soporte de largo plazo.

El objetivo final de BEM es dividir la interfaz de usuario en bloques independientes para crear componentes escalables y reutilizables. Propone un estilo descriptivo para nombrar cada una de las clases a utilizar, permitiendo así crear un estructura de código consistente.

BLOQUES, ELEMENTOS Y MODIFICADORES (BEM)
Para lograr su objetivo, la metodología se centra en la reutilización de código. Además, busca otorgar un mayor entendimiento hacia qué nos referimos cada vez que construimos un nuevo proyecto. Como resultado, crea una documentación explícita en cada nueva declaración.

BEM tiene como horizonte modularizar lo máximo posible cada uno de los bloques de código dispuesto. Se centra en tres parámetros o variables posibles: Bloques (div, section, article, ul, ol, etc.), elementos (a, button, li, span, etc.) y modificadores. Estos últimos se definen de acuerdo a la posterior utilización que haga el desarrollador a cargo.

Bloques
Es un contenedor donde se encontrarán los diferentes elementos. Por ejemplo, un encabezado (header), una barra lateral (sidebar/aside) un área de contenido principal (main) y un pie de página (footer), se consideraría cada uno como un bloque.

El bloque de elementos corresponde a la raíz de la clase y deberá ir siempre primero. Cuando ya está definido es posible nombrar los elementos que compondrán la estructura final y su contenido.

A mi me funciono así

header .header-icons-container .icons{
    width:100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

Sigamos 😄

Excelente explicación.

Ma pareció demasiado código CSS. El header podría haberse simplificado solo con flexbox. Justify-items: flex-end y justify-self end me pareció un exceso innecesario.

Hoy aprendí dos cosas:

  • El posicionamiento fijo del body cuando no quieres que tenga scroll y…

  • La búsqueda del color que necesites a través del inspector.

Mi estructura seria diferente, los section los agrego de otra manera y creo que el código se puede mejorar, sin embargo, a forma de ir enseñando para tener ciertas bases no esta mal.

El display inline de la etiqueta:

<a href="#"></a>

No es necesario, ya que ese es su display por defecto.

Comprendo con lo que dicen sobre los headers compañeros, pero deben entender que este curso es para los que tienen poca o nula comprension al escribir CSS, y yo considero que diego lo hace de esa manera para que vayan machacando la idea de como seria el orden al momento de realizar los estilos.

una vez que aprendas bien el flujo. entonces si puedes quitar le header y solo poner clases. Aunque tambien comento en cursos pasados esta es la mejor manera para ser especificos en el estilo y no perder el control de ellos cuando alguien mas colabora en el mismo proyecto, todo esta bien identificado.

y como dice el compañero jose ortiz se puede escribir de diferentes maneras los estilos y llegar al mismo resultado. Saludos ✌🏻

Si coloca clase a un elemento, no es necesario colocar adelante el nombre de la clase padre header .header-icons-container .icons

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Blog</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
    <body>
        <header class="header-container">
            <section>
                <div>
                    <a href="/">Facebook</a>
                    <a href="/">Twitter</a>
                    <a href="/">Instagram</a>
                    <a href="/">linkedin</a>
                    <a href="/">Youtube</a>
                </div>
            </section>
        </header>
    </body>
</html>

CSS

.header-container{
    width: 100vw;
    height: 50px;
    display: grid;
    grid-template-columns: 6fr 3fr;
    justify-content: center;
    align-items: center;
    background-color: #48cfad;
}


section{
    grid-column-start: 2;
}

div{
    display: flex;
    flex-wrap: nowrap;
    margin-right: 50px;
}

section div a{
    padding-left:20px;
    text-decoration: none;
    color: #ffffff;
}

Trate de ahorrar código y creo que obtuve el mismo resultado 😄 espero les sirva.

a {
    text-decoration: none;
    color: black;
}
header {
    width: 100%;
    display: grid;
    grid-template-rows: 50px 90px;
}
.header__icons-section {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #47cfac;
}
.header__icons-container {
    width: 300px;
    margin-right: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Pueden poner un # dentro del href, para que no se les recargue la pagina al tocar los enlaces. Luego cuando tengan el link, lo cambian y listo.

<section class=“header-icons-container”>
<div class=“icons”>
<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">Instagram</a>
<a href="#">Linkedin</a>
<a href="#">Youtube</a>
</div>
</section>

Para usar el pick de color, en lel Inspector:
Pincha en cualquier línea de la pestaña Styles y escribe: color : blue;
Para avanzar de color a blue, presiona el tabulador y finaliza con otro tabulador para que aparezca ;.
Una vez finalizado aparecerá un cuadrado con el color especificado delante de la palabra blue (en esta caso, sólo como ejemplo y por ser palabra corta, usé blue pero puede ser cualquier otro).
Pincha ese cuadrado y aparecerá la lupa que te permitirá seleccionar el color que buscas dentro de la página al hacer clic en el área que lo contenga. Hecho esto, aparecerá el código del color en la línea donde estaba blue. Listo, ahora copiar y pegar en tu proyecto.

¿ Dónde encuentro los iconos, imágenes, página ?