Selectores básicos CSS

<!DOCTYPE html>
<html>

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

<body>
    <header>
        <div><img src="img/baldosa.jpg"></div>
        <div>
            <h1>hola</h1>
        </div>
        <ul>
            <li>
                <h1>Que pasa??</h1>
            </li>
        </ul>
        <h1>Hola</h1>
        <h1>Hola</h1>
    </header>
    <h1>Hola que tal estamos. Yo muy bien.</h1>
    <h1 id="especial" class="varios sombra">Hola que tal <span class="susto">estamos</span>. Yo muy bien.</h1>
    <h1 class="varios tipo sombra">Hola que tal estamos. Yo muy bien.</h1>
    <h1 class="tipo">Hola que tal estamos. Yo muy bien.</h1>
    <h1 class="varios sombra">Hola que tal <span>estamos</span>. Yo muy bien.</h1>
    <h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
    <h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
    <h1 class="sombra verde">Hola que tal <span class="verde">estamos</span>. Yo muy bien.</h1>
    <a href="pepe.html">ENlace</a>
    <a href="fotos.html">ENlace</a>
    <a href="articulos.html">ENlace</a>
    <div>
        <p>parrafo</p>
        <p>parrafo</p>
        <p>parrafo</p>
        <p>parrafo</p>
        <p>parrafo</p>
    </div>
    <footer>
        <div>
            <div>
                <p>Párrafos dentro de muchos divs</p>
                <p>Párrafos dentro de muchos divs</p>
                <p>Párrafos dentro de muchos divs</p>
                <p>Párrafos dentro de muchos divs</p>
                <p>Párrafos dentro de muchos divs</p>
                <a href="">Enlace</a>
            </div>
            <p>estoy solo</p>
            <p>estoy solo</p>
            <p>estoy solo</p>
           
        </div>
    </footer>
</body>

</html>
h1{
    color:blue;
    clear: both;
}
#especial{
    color:red;
    background-color: green;
}
#especial .susto{
    background-color: yellow;
}
.varios{
    color:green;
}
.varios span{
    color:yellow;
}
.tipo{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.sombra{
    text-shadow: 10px 10px 5px grey;
}

/*El estilo se aplica a las dos clases */
.tipo, .sombra{ 
   font-size:4em;
}
/* El estilo se aplica a todos los headers y a todas las imágenes */
header, img{
border:1px solid black;
}

/*El estilo se aplica a todas las imágenes que estén dentro de un header*/
header img{
    width:20%;
    float: left;
}
/*Esto se aplica a todos los h1 dentro del header, estén donde estén (anidados dentro de otros elementos) */
header h1{
    color:purple;
}

/*Esto se aplica a todos los h1 hijos directos del header, si hay anidación no se aplica */
header > h1{
    color:salmon;
}
header + h1{
    background-color: sienna;
}

/*Todos los elementos de clase verde que estén dentro de un h1 */
h1 .verde{
    background-color: green;
}
/* Todos los h1 que además tengan la clase verde */
h1.verde{
    background-color: green;
}
[class]{
    border:3px solid black;
}
/*Todos los elementos con un atributo href que empieza por 'foto' */
[href^=foto]{
    background-color: chartreuse;
}
.susto:hover{
    background-color: chocolate;
}

p:last-child{
color:red;
}

Ejemplo layout bootstrap

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/estiloboot.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <header class="col-12 bg-info"><h1>Cabecera</h1></header>
        </div>
        <div class="row">
           <aside class="col-sm-2 col-md-3 bg-success">
               <ul>
                   <li>111111</li>
                   <li>111111</li>
                   <li>111111</li>
                   <li>111111</li>
               </ul>
           </aside>
           <section class="col-sm-8 col-md-6 bg-info" id="contenido">
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores esse illum qui. Ut laudantium fuga officia esse at harum pariatur dicta. Reprehenderit excepturi quibusdam fuga debitis eaque nemo adipisci!</p>
           </section>
           <aside class="col-sm-2 col-md-3 bg-danger">
           <img src="img/baldosa.jpg" width="50">
        </aside>
        </div>
        <div class="row">
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
        </div>
        <div class="row">
            <footer class="col-12 bg-warning"><p>Esto es el pie</p></footer>
        </div>
    </div>

</body>

</html>

article{
    background-color: paleturquoise;
    border:1px solid black;
}
@media (max-width:576px){
  #contenido{
      order:-1;
  }
}

Bootstrap

Para empezar, nuestra amiga w3schools:

https://www.w3schools.com/bootstrap4/default.asp

Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:

https://getbootstrap.com/docs/4.6/getting-started/introduction/

Aquí encontraremos diferentes bootstraps tuneados:

https://bootswatch.com/

Y aquí templates listos para usar:

https://colorlib.com/wp/free-bootstrap-templates/

En trifulcas hay código de muchos ejemplos:

https://trifulcas.com/ejemplos-bootstrap/

https://trifulcas.com/ejemplo-bootstrap-2/

https://codepen.io/ajaypatelaj/pen/prHjD

Un análisis exhaustivo del grid de bootstrap:

https://trifulcas.com/analisis-del-grid-de-bootstrap/

Ejemplos del grid de bootstrap:

https://coreui.io/docs/layout/grid/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

https://freefrontend.com/bootstrap-grid-examples/

Layout flexbox + media query

 <header>
        <h1>Cabecera</h1>
    </header>
    <div class="slider"></div>
    <main>
        <section>
            <h1>Contenido</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
                pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
        </section>
        <section>
            <h1>Contenido</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
                pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
        </section>
        <section>
            <h1>Contenido</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
                pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
        </section>
        <section>
            <h1>Contenido</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
                pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
        </section>
    </main>
    <footer>
        <p>Pie de página</p>
    </footer>
header{
    height:150px;
    background-color: burlywood;
}
.slider{
    width: 100%;
    height: 300px;
    background-image: url('../img/baldosa.jpg');
    background-size: cover;
}
main{
    display: flex;
    flex-wrap: wrap;
}
main section{
    flex:25%;
}
@media (max-width:728px){
    main section{
        flex:50%;
    }
}

@media (max-width:400px){
    .slider{
        height: 100px;
    }
    footer,aside{
        display: none;
    }
    main {
        flex-direction: column;
    }
}

Layout flex responsive

<!DOCTYPE html>
<html>

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

<body>
    <header>
        <h1>Cabecera</h1>
    </header>
    <main>
        <aside>
            <ul>
                <li>aaaa</li>
                <li>aaaa</li>
                <li>aaaa</li>
                <li>aaaa</li>
            </ul>
        </aside>
        <section>
            <h1>Contenido</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
                pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
        </section>
    </main>
    <footer>
        <p>Pie de página</p>
    </footer>
</body>

</html>

main{
    display: flex;
}

@media (max-width:728px){
    main{
        flex-direction: column;
    }
}

@media (max-width:400px){
    footer,aside{
        display: none;
    }
}

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/

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

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

Flexbox

Hoy hemos visto una manera más eficiente de maquetar, utilizando la propiedad Flexbox. En w3schools la explican bien:

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

Podemos ver las propiedades de una manera muy visual aquí:

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

Aquí lo podemos ver animado:

https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2

Y aquí otra guía completa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Templates con flexbox:

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Cómo calcular como crecen y se encogen los elementos (no es tan sencillo como parece):

https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink

Ejemplos prácticos de cómo hacer cosas con flexbox:

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

18 recursos interesantes:

https://bashooka.com/coding/css3-flexbox-resources/

https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/

Un juego para aprender flexbox:

https://codepip.com/games/flexbox-froggy/