Repaso general

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repaso</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <!-- En el html solamente tenemos el contenido no tenemos nada de estilo-->
    <h1 id="titulo">Hola que tal</h1>
    <h6>Yo muy bien</h6>
    <p class="extra">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur possimus et. Tempora dolorem
        tempore in debitis distinctio, sunt incidunt exercitationem praesentium non maxime aspernatur, sit velit
        officiis! Ut, iusto?</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam illo repellendus dicta deleniti voluptates. Modi,
        maxime ab quasi accusamus consectetur doloribus sunt autem libero asperiores illum velit fugiat similique neque.
    </p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li class="movido">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <p>Esto es un bloque</p>
    </div>
    <header>
        <h1>Bloque de cabecera</h1>
    </header>
    <main>
        <aside><p>Barra lateral</p></aside>
        <section>
            <article>
                <h3 class="extra">Artículo 1</h3>
            </article>
            <article>
                <h3>Artículo 2</h3>
            </article>
            <article>
                <h3>Artículo 3</h3>
            </article>
        </section>
        <section id="galeria">
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
            <div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
        </section>
    </main>
</body>

</html>
/*Estilo de todos los elementos de mi web */
*{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
    overflow-x: hidden;
    /* defino  una variable para todos los elementos que estén dentro del body */
    --fondo:yellow;
}
/*Estilo de una etiqueta */
h1{
    color:rgb(81, 81, 81);
}
/* clase y va a todos los elementos de esa clase */
.extra{
    background-color: blanchedalmond;
}

/* id que es un elemento único */
#titulo{
    /* Utilizo calc para que el ancho sea el de la página menos 200px */
    width: calc(100% - 200px);
    margin: auto;
    background-color: black;
    color: blanchedalmond;
    text-align: center;
    /* Aplicamos la animación */
    animation-name: baile;
    animation-duration: 6s;
    animation-delay: 3s;
}
article{
    margin-left: 50px;
    padding: 2em;
    background-color: gainsboro;
    float: left; /* los elementos se coloquen unos al lado de otros */
}
/* todos los h3 dentro de un article */
article h3{
    margin: 0;
}
.movido{
    position: relative;
    left: 50px;
}
.imagen{
    border: solid 2px gray;
    box-shadow: 5px 5px 5px gray;
    text-align: center;
    transition: 2s;
}
.imagen img{
    width: 100%;
    /* las transiciones tarden 2seg en ejecutarse */
    transition: 2s;
}
/* La imagen se hace grande al pasar por encima */
.imagen img:hover{
    transform: scale(1.2,1.2);
}
/* Cambiamos el color al pasar por encima */
.imagen:hover{
    /* uso la variable fondo definida antes */
    background-color:var(--fondo);
}
/* con el flex consigo que todos los elementos estén alineados y responsive */
#galeria{
    display: flex;
    clear: both;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/* Con el media query controlo que en determinadas resoluciones cambie el estilo para que
quede mejor */
@media  screen and (max-width:500px) {
    article{
        margin: 50px 0;
        float: none;
    }
    
}

/* Animación de cuatro pasos en los que cambiamos tamaño, rotación y colores */
@keyframes baile {
0%{
    transform: scale(0.5,0.5);
    color:black;
}    
25%{
    color:red;
    transform: rotate(20deg);
}
50%{
    color:black;
    transform: scale(2,1.5);
}
75%{
    transform: rotate(-20deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de layout con grid</title>
    <link rel="stylesheet" href="css/layout.css">
</head>
<body>
    <header id="pageHeader"><h1>Tornillería martínez</h1>></header>
    <article id="mainArticle"><h1>Tornillería Martínez</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p></article>
    <nav id="mainNav"><ul>
        <li>Inicio</li>
        <li>Nosotros</li>
        <li>Productos</li>
        <li>Contacto</li>
        <li>Servicios</li>
    </ul></nav>
    <div id="siteAds"><img src="https://picsum.photos/100"/><img src="https://picsum.photos/100"/></div>
    <footer id="pageFooter">(C) Diseño mortal</footer>
</body>
</html>
body { 
    display: grid;
    grid-template-areas: 
      "header header header"
      "nav article ads"
      "footer footer footer";
    grid-template-rows: 80px 1fr 70px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    }  
  header, footer, article, nav, div {
    padding: 1.2em;
    background: gold;
    }
  #pageHeader {
    grid-area: header;
    }
  #pageFooter {
    grid-area: footer;
    }
  #mainArticle { 
    grid-area: article;      
    }
  #mainNav { 
    grid-area: nav; 
    }
  #siteAds { 
    grid-area: ads; 
    } 
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "ads"
        "nav"
        "footer";
      grid-template-rows: 80px 1fr 70px 1fr 70px;  
      grid-template-columns: 1fr;
   }
  }

Ejemplos variables

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/variables.css">
</head>
<body>
    <h1>Hola que tal</h1>
    <h2>Muy bien</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic dolore provident minus commodi veniam, nihil necessitatibus sint nulla. Quidem explicabo facere repellendus perspiciatis ea! Impedit in eum sapiente! Et, quaerat.</p>
    <div id="anuncio">Esto es un anuncio</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>
html{
    --gris:blue; /* las variables se definen con dos guiones: -- */
    --blanco:yellow;
    --tamanyo:2em;
}
h1{
    color:var(--gris);
}
#anuncio{
    --blanco:white; /*sobreescribiendo la variable blanco */
    color:var(--blanco);
    background-color:   var(--gris);
    font-size: var(--tamanyo);
}
ul{
    background-color: var(--gris);
    color: var(--blanco);
}

CSS avanzado

Usamos los pseudoelementos, principalmente, para insertar contenido antes y después de los elementos ¿Con que objeto? Para hacer flipadas.

Pseudoelementos

Ejemplos de uso

Más ejemplos

Si los usamos junto con hover se consiguen cosas increíbles:

Tutorial pseudoelementos y animaciones

CSS3 incorpora funciones matemáticas que nos permiten poner valores que sean el resultado de un cálculo:

Funciones matemáticas

https://css-tricks.com/a-complete-guide-to-calc-in-css/

Explicadas con ejemplos

Algunos casos prácticos

Tipografía fluida con clamp

Aplicar máscaras a imágenes:

mask-image

Algunos ejemplos

Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:

Css variables

Css variables

Guía con ejemplos

Usarlas como un PRO

La función attr:

Css attr

Css attr

En content funciona en todos los navegadores, pero de momento no está completamente implementada para usarla en otros sitios.

Ejemplo transformación

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplos transiciones</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div id="transicion1">Hola que tal</div>
    <div id="transicion2">Yo muy bien</div>
    <div id="transicion3">Me alegro</div>
 <div id="transicion4">Estamos en matrix</div>
</body>
</html>
div{
    width: 200px;
    height: 200px;
    background-color: orange;
}
#transicion1{
    transition: width 2s, transform 3s,background-color 4s;
}

#transicion1:hover{
    transform: rotate(45deg);
    width:300px;
    background-color: darkgreen;
}

#transicion2{
    background-color: blue;
    transition: transform 3s,background-color 4s;
}

#transicion2:hover{
    transform: skewX(45deg);
    background-color: rgb(255, 225, 58);
}

#transicion3{
    background-color: rgb(244, 35, 198);
    transition: transform 3s,background-color 4s;
}

#transicion3:hover{
    transform: rotateX(360deg);
    background-color: #26e53d;
}
#transicion4{
    background-color: rgb(75, 234, 255);
    transition: transform 3s,background-color 4s;
}

#transicion4:hover{
    transform: matrix(2,.3,.4,3,200,200);
    background-color: #f4ff7a;
}

Media queries para dispositivos

En w3school:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Ejemplos:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Tutorial bastante completo:

https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/

En css trick:

https://css-tricks.com/a-complete-guide-to-css-media-queries/

Lista de resoluciones para todos los dispositivos:

Media Queries for Standard Devices

Las más comunes:

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Un artículo muy bueno sobre uso de media query.

https://www.toptal.com/designers/responsive/introduction-to-responsive-web-design-pseudo-elements-media-queries

 

Qué es el diseño responsive:

https://i.workana.com/glosario/que-es-el-diseno-responsive/

Ejemplos responsive:

https://web.dev/responsive-web-design-basics/

9 principios del diseño responsive:

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Menú hamburguesa solo CSS:

https://codepen.io/alvarotrigo/pen/MWEJEWG

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}

Layout 2 parte

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Corner</title>
    <link rel="stylesheet" href="css/estilos.css" />
</head>

<body>
    <header>
        <h1>The Corner</h1>
        <nav>
            <p>Inicio</p>
            <p>Productos</p>
            <p>Servicios</p>
            <p>Contacto</p>
        </nav>
    </header>
    <section id="eslogan">
        <h2>Bienvenidos a <span class="destacado">The Corner</span> la mejor academia para aprender.</h2>
        <h2>Cada día te preparamos para el futuro.</h2>
    </section>
    <section id="portada">
        <img src="img/academia.png" alt="academia" />
        <article>
            <h3>Aulas</h3>
            <p>Las mejores aulas de toda Barcelona.
                Medios técnicos inigualables.</p>
        </article>

    </section>
    <div class="separador"></div>
    
    <section id="caracteristicas">
        <article class="caracteristica">
            <p class="numero">1</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
        <article class="caracteristica">
            <p class="numero">2</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
        <article class="caracteristica">
            <p class="numero">3</p>
            <div>
                <h4>Titulo</h4>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
                    reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
                    harum est praesentium mollitia.</p>
            </div>
        </article>
    </section>
    <h2 class="texto_separador">Recent work</h2>
</body>

</html>
*{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}
header{
    background-color: black;
    color: white;
    padding: 2em;
    /*
    De esta manera se organizan los dos elementos de la cabecera, el h1 y el nav
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
}
nav{
    display: flex;
    float: right;
}
nav p{
    margin: 0 1em;
}
nav p:hover{
    color: yellow;
    cursor: pointer;
}
section{
    margin:2em;
    padding: 1em;
}
#eslogan{
    text-align: center;
    line-height: 3em;
}
.destacado{
    background-color: green;
    color: white;
    border-radius: 6px;
    padding: .2em;
}
#portada{
    position: relative;
}
#portada img{
    width: 100%;
}
#portada article{
    position: absolute;
    bottom: 2em;
    left: 2em;
    width: 30%;
    background-color: #00000095;
    color: white;
    padding: 3em;
}
.separador{
    border-bottom: solid 1px #8f8f8f;
    margin: .4em 3em;
}
#caracteristicas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 0;
}
.caracteristica{
    display: flex;
    align-items: start;
    width: 30%;
    padding: 1em;
}

.numero{
    background-color: gray;
    border-radius: 50%;
    font-size: 1.5em;
    width: 1.3em;
    text-align: center;
    padding: .1em;
    margin: 0.1em 1em;
    flex-shrink: 0; /*para evitar que se distorsione */
}
.numero:hover{
    background-color: green;
    color:white;
}
.texto_separador{
    margin: .4em 3em;
    display: flex;
    align-items: center;
}
.texto_separador::after {
    content: '';
    flex: auto;
    margin-left: 1rem;
    border-top: 1px solid #8f8e8e;
  }

Ejemplo Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/grid.css"/>
</head>
<body>
    <div id="contenedor">
        <div id="primero" class="elemento">1</div>
        <div id="side" class="elemento">2</div>
        <div id="content" class="elemento">3</div>
        <div id="footer" class="elemento">4</div>
        <!--
        <div class="elemento">5</div>
        <div class="elemento">6</div>
        <div class="elemento">7</div>
        <div class="elemento">8</div>
        <div class="elemento">9</div>
        <div class="elemento">10</div>
        -->
    </div>
</body>
</html>
.elemento{
    border: solid 2px gray;
    padding: 1em;
    background-color: aquamarine;
}
#contenedor{
    display: grid;
     grid-template-columns: 150px 2fr 1fr; /* unidades relativas al espacio libre */
     grid-template-rows: 1fr repeat(2,2fr);
     grid-template-areas:  'header header header header'
                           'side content content content'
                           'side content content content'
                           'side content content content'
                           'footer footer footer footer'
                           
                           ;
}
#primero{
    grid-area: header;
}
#side{
    grid-area: side;
}
#content{
    grid-area: content;
}
#footer{
    grid-area: footer;
}

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

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

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Interactiva:

https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771