Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es FullStack?

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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

22/55
Recursos

Aportes 863

Preguntas 79

Ordenar por:

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

Hola como van 😃
Les dejo un PDF con toda la sintaxis cd CSS3 ❤️. Espero les guste y les ayude
https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf


💚

Me recomendaron estas dos páginas web para practicar Flexbox y Css Grid
Flexbox: https://flexboxfroggy.com/#es
Css Grid: https://cssgridgarden.com/#es

Ya voy en el nivel 12 de flexbox y la de css grid no la he probado, pero échenle un ojo, son muy buenas.

Lista de compra con el bananero sapee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Esta es una lista de productos">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="./style.css">
  <title>Lista de compra</title>
</head>
<body class="bodycontainer">
  <header>
    <nav>
      <h1 class="titulillo">Soy la lista del super!</h1>
    </nav>
  </header>
  <main>
    <figure class="bananerillo-container">
      <img class="bananerillo-image" src="../../Curso_HTML_CSS/Imagenes/f608x342-588537_618260_0.jpeg" alt="imagen del bananero sapee!" right>
    </figure>
    <section class="container">
      <ul class="lista" >
        <li>Frutas</li>
          <ol class="items">
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Manzana</a></li> 
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Platano</a></li>
          </ol>
        <li>Carnes</li>
          <ol class="items">
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Pollo</a></li> 
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Carne molida</a></li>
          </ol>
        <li>Verduras</li>
          <ol class="items">
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Limon</a></li> 
            <li><a href="https://www.youtube.com/watch?v=f5nAQT44i8Q&ab_channel=ELBANANEROOFICIAL">Zanahoria</a></li>
          </ol>
      </ul>
    </section>
    <section class="mensajillo">
      <p>Creado con amor</p>
    </section>
  </main>
</body>
</html>

CSS

.bodycontainer {
  background: darkslategrey;
}

.lista {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.items {
  font-weight: 300;
}
.container {
  background: #E8E800;
}
.titulillo {
  background: #00E874;
  color: white;
}
.mensajillo {
  background: #00E874;
  color: white;
  font-size: large;
  font-weight: 600;
}
.bananerillo-container{
  block-size: 200px
  width: 100px; height: 20px;
}
.bananerillo-image {
  width: 250px;
  position: relative;
  top:  50px;
  left: 200px;
}
`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista de compras</title>
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="Lista de compras.css" />
  </head>
  <body>
    <body>
      <head>
        <h1>Lista del supermecado</h1>
      </head>
      <main>
        <ul class="pedido">
          <p>Frutas</p>
          <li>
            <ol class="container">
              <figure>
                <img src="Pera.png" alt="" />
                <figcaption class="nombre">Pera</figcaption>
              </figure>
              <figure>
                <img src="Manzana.png" alt="" />
                <figcaption class="nombre">Manzana</figcaption>
              </figure>
              <figure>
                <img src="Plátano.png" alt="" />
                <figcaption class="nombre">Plátano</figcaption>
              </figure>
            </ol>
          </li>
          <li>
            Carnes
            <ol class="container">
              <figure>
                <img src="Cerdo.png" alt="" />
                <figcaption class="nombre">Cerdo</figcaption>
              </figure>
              <figure>
                <img src="Res.png" alt="" />
                <figcaption class="nombre">Res</figcaption>
              </figure>
              <figure>
                <img src="Pollo.png" alt="" />
                <figcaption class="nombre">Pollo</figcaption>
              </figure>
            </ol>
          </li>
          <li>
            Vegetales
            <ol class="container">
              <figure>
                <img src="Tomate.png" alt="" />
                <figcaption class="nombre">Tomate</figcaption>
              </figure>
              <figure>
                <img src="Zanahoria.png" alt="" />
                <figcaption class="nombre">Zanahoria</figcaption>
              </figure>
              <figure>
                <img src="Cebolla.png" alt="" />
                <figcaption class="nombre">Cebolla</figcaption>
              </figure>
            </ol>
          </li>
        </ul>
      </main>
    </body>
  </body>
</html>
body {
  background-color: #4faf;
}

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

h1 {
  margin: 20px;
  text-align: center;
  font-size: 40px;
}
.pedido {
  font-size: 30px;
  margin: 10px;
  padding: 20px;
  list-style-type: none;
}
ul li ol.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  width: 100%;
  padding: 5px;
}
ul li ol figure img {
  width: 200px;
  height: 200px;
  padding: 5px;
}
ul li ol figure figcaption.nombre {
  font-size: 25px;
  padding: 0px 50px;
}

Necesito práctica… las cosas no se colocan donde quiero… ayssss

body{
background-color: bisque;
display: flex;
justify-content: center;
align-items: center;
}
h1{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-weight: bold;
font-size: large;
text-align: center;

}
h2{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-size: small;
font-weight: bold;
text-align: center;
}

section{
background-color: rgb(236, 236, 250);
display: flex;
justify-content: space-around;

}

ul{
font-weight: bold;
padding: 20px;

}
ul ol{
font-weight: lighter;
margin-top: 20px;

}

img{
width: 200px; height: 200px;

}
video{
align-content: center;
height: 400px;
}

Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina ya sea color, tamaño, espacios, lugares de posición y más.

Cómo implementar CSS en nuestro HTML
Archivo CSS
esta es la mejor práctica en especial cuando tendremos mucho CSS, tendremos un archivo *.css y en el head del html pondremos las etiqueta <link rel=”stylesheet” href=”la direccion”>
y se aplicará el css de nuestro archivo
Etiqueta style
si tendremos poco css es posible usar la etiqueta style y directamente usarlo ahi
CSS embebido
esto no es muy bueno hacerlo pero se puede hacer si solo aplicaremos pocos atributos a pocas etiquetas con el atributo style en la etiqueta

Sintaxis CSS
Se comenta con /* contenido*/
la sintaxis es la siguiente
(cosa a modificar)
{
atributo: valor ;
atributo2: valor2;

}

Selector por elemento
Se indican con etiqueta{} en CSS (ejemplo p{} o h1{})
en html se aplicará a todas las etiquetas del tipo indicado
Esto es útil si queremos darle el mismo estilo a todos los elementos de un tipo como párrafo o titulos
Clases
se generan con .nombre{} en CSS
en html se indican con el atributo class=”nombre”
Esto sirve para dar el mismo estilo a muchos elementos distintos
Id
se generan con #nombre en CSS
en html se indica con el atributo id=””
Esto es útil si sólo lo usaremos con una etiqueta

mi lista

Compañeros les comparto el siguiente enlace de un cheatsheet Css intereactivo con la ventaja de que podran comprender de manera mas rapida las propiedades y podran copiar el codigo que se generar y posterior pegar el codigo a sus proyectos.

Espero les sirva. Saludos

Yo ya estoy diseñando mi página web ya que llevo varios meses aprendiendo de este tema (y de otros) y quiero empezar a hacer freelance.
No se preocupen si no les sale a la primera, yo también sigo equivocándome en ocasiones y de hecho en este curso he aprendido un montón de cosas que en tutoriales de youtube no decían!
Así que ánimo, la plataforma los está llevando por un camino bastante bueno para volverse expertos rapidamente!
Y recuerden, prueba, error y aprendizaje!

Lista de recetas 👩‍🍳

HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <meta name="Descripcion" content="Una pagina de prueba, para el curso HTML"/>
        <meta name="robots" content="index,follow"/>
        <title>Pagina de pruebas</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <header>
            <nav></nav>
        </header>
        <main>
            <H1 class="titulo">Lista de mercado</H1>
            <div class="container">
                <div class="container-cate">
                    <ul>
                    <li class="subtitulos-li">Frutas</li>
                    <ol>
                        <li class="lista"><a href="https://frutas.consumer.es/manzana/propiedades">Manzana</a></li>
                        <figure><img src="./Image/Manzanas.jpg" alt="Imagen de manzanas"></figure>
                        <li class="lista"><a href="https://www.infoagro.com/diccionario_agricola/traducir.asp?i=1&id=13&idt=2">Durazno</a></li>
                        <figure><img src="./Image/Durazno.jpg" alt="Imagen de durazno"></figure>
                        <li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Pera.html">Pera</a></li>
                        <figure><img src="./Image/Peras.jpg" alt="Imagen de pera"></figure>
                        <li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Sandia.html">Sandia</a></li>
                        <figure><img src="./Image/Sandia.jpg" alt="Imagen de sandia"></figure>
                    </ol>
                    </ul>
                </div>
                <div class="container-cate"> 
                    <ul>
                        <li class="subtitulos-li">Verduras</li>
                    <ol>
                        <li class="lista"><a href="https://www.frutas-hortalizas.com/Hortalizas/Presentacion-Zanahoria.html">Zanahoria</a></li>
                        <figure><img src="./Image/Zanahoria.jpg" alt="Imagen de Zanahoria"></figure>
                        <li class="lista"><a href="https://boletinagrario.com/ap-6,tomate,204.html">Tomates</a></li>
                        <figure><img src="./Image/Tomate.jpg" alt="Imagen de tomates"></figure>
                        <li class="lista"><a href="https://www.frutas-hortalizas.com/Frutas/Presentacion-Limon.html">Limon</a></li>
                        <figure><img src="./Image/Limones.jpg" alt="Imagen de Limones"></figure>
                        <li class="lista"><a href="https://www.frutas-hortalizas.com/Hortalizas/Presentacion-Lechuga.html">Lechuga</a></li>
                        <figure><img src="./Image/Lechuga.jpg" alt="Imagen de Lechuga"></figure>
                    </ol>
                    </ul>
                </div>
            </div>
            <p>Desafío cumplido!!!</p>
        </main>
        <footer>

        </footer>
    </body>
</html>```

**CSS**




body{
display: flex;
background-image: url(./Image/Fondo.jpg)

}

.titulo{
font-family: Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif;
font-size: 50px;
-webkit-text-stroke: 2px black;
color: #e8eddf;
display: flex;
justify-content: center;
}
.container{
width: 1200px;
display: flex;
justify-content: space-around;
}
.container-cate{
padding: 10px;
background-image: url(./Image/Fondo-notas.jpg);
border-radius: 15px;
border: solid black;
}
.subtitulos-li{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
font-size: 22px;
font-weight: bold;
padding-bottom: 15px;
}
.container img{
width: 150px;
border-radius: 15px;
}
ol{
display: flex;
flex-direction: column;
}
li{
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
}
a{
color: green;
}```

HTML:

<!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/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:[email protected];700;900&display=swap" rel="stylesheet">
</head>
<body>
    <main class="main">
        <h1>Lista de la compra</h1>
        <div class="contenedor">
            <ul>
                <li class="fw-900">Pasta
                    <ol>
                        <li><img src="./images/macarrones.jpg" alt="macarrones"><a href="https://www.divinacocina.es/macarrones-a-la-carbonara/" target="_blank">Macarrones</a></li>
                        <li><img src="./images/espaguetis.jpg" alt="espaguetis"><a href="https://www.recetasderechupete.com/espaguetis-con-setas-y-panceta/8589/" target="_blank">Espagetis</a></li>
                    </ol>
                </li>
                <li class="fw-900">
                    Carne
                    <ol>
                        <li><img src="./images/conejo.jpg" alt="conejo"><a href="https://www.recetas.net/receta/1011/Conejo-a-la-catalana" target="_blank">Conejo</a></li>
                        <li><img src="./images/pato.jpg" alt="pato"><a href="https://www.recetasderechupete.com/pato-a-la-naranja/11656/" target="_blank">Pato</a></li>
                    </ol>
                </li>
                <li class="fw-900">
                    Verdura
                    <ol>
                        <li><img src="./images/pimiento-rojo.jpg" alt="pimiento rojo"><a href="https://www.recetasderechupete.com/receta-de-lentejas-light-al-estilo-tradicional/938/" target="_blank">Pimiento rojo</a></li>
                        <li><img src="./images/zanahoria.jpg" alt="zanahoria"><a href="https://www.nooddle.es/receta/sopa-de-zanahoria-y-patata" target="_blank">Zanahoria</a></li>
                    </ol>
                </li>
            </ul>
        </div>
    </main>
</body>
</html>

CSS:
body {
font-family: ‘Lato’, sans-serif;
font-size: 62.5%;
background-color: #fafafafa;
}

h1 {
font-weight: 900;
font-size: 2.5rem;
text-align: center;
}

.main {
width: 80%;
margin: 0 auto;
}

.contenedor {
border: 1px solid white;
padding: 2rem 0;
border-radius: 0.7rem;
overflow: hidden;
background-color: white;
-webkit-box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
box-shadow: -1px 0px 7px -2px rgba(0,0,0,0.75);
}

ul, ol {
list-style: none;
padding: 0;
}

ul {
display: flex;
justify-content: space-evenly;
}

ol {
display: flex;
flex-direction: column;
}

li {
text-align: center;
}

a {
text-decoration: none;
}

img {
height: 150px;
width: 150px;
object-fit: cover;
display: block;
margin-top: 3rem;
}

.fw-900 {
font-weight: 900;
font-size: 2rem;
/* margin-top: 2rem; */
}

a {
font-weight: 700;
font-size: 1.5rem;
color: black;
}

Resultado:

Ya que andamos en epocas navideñas hice mi lista así

Y esto es el Css que utilicé

20. Mis apuntes sobre: “¿Cómo utilizamos CSS?: etiqueta, selector, class y por ID”

Se puede agregar el CSS de 3 maneras:

(La forma recomendada es como un link a un archivo externo CSS).

  1. Como link hacia un archivo externo “.css”:
<link rel="stylesheet" href="/CSS/claseCss/style.css">
  1. Como un bloque de código CSS dentro del head del HTML:
<style>
p{
   color:blue;
   font-size: 30px;
}
</style>
  1. Como un atributo dentro de una etiqueta HTML (estilo embebido):
<body>
    <main>
        <p style="color:red">I'm a text</p>
    </main>
</body>

Se pueden agregar estilos en CSS la siguiente manera, colocando en la etiqueta en HTML class=“parrafo” o id=“texto”:

/* selector por elemento*/
p{
    color:blue;
    font-size: 40px;
}

/* selector por class */
.parrafo{
    color:red;
}

/*selector por ID*/
#texto{
    color:green;
    font-size: 24px;
}

Les comparto el código HTML generado en clase:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clase CSS</title>
    <link rel="stylesheet" href="/CSS/claseCss/style.css">
</head>
<body>
    <main>
        <p class="parrafo">I'm a text</p>
        <p id="texto">Soy otro texto</p>
    </main>
</body>
</html>

vi que algunos lo hicieron super chevere, creo que me falta un poco de practica y eso es lo que hare, practicar y practicar.

Mi lista al estilo de platzi

Notas de la clase

<code> 


:root{
    --first-color:#181c3c;
    --second-color: #98CA3F;
}

body{
    position: relative;
    margin: 0;
    background-color: #181c3c;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1{
    text-align: center;
    color: var(--second-color);
}

a{
    text-decoration: none;
}

section{
    width: 150px;
    padding: 10px 20px;
    margin: 10px;
    background-color: #ffffff;
    color: var(--first-color);
    border-color: var(--first-color);
    border-radius: 10px;
}

.link__item{
    color: var(--first-color);
}

.link__item:hover{
    color: var(--second-color);
}

.shop__item{
    color: var(--second-color);
}

.shop__item:hover{
    color: #ffffff;
}

.container{
    display: flex;
    justify-content: center;
}

.img__item{
    width: 20px;
    height: 20px;
}

.ref__img{
    width: 50px;
    height: auto;
}


<code> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Lista de supermercado"> 
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi lista del super</title>
    <link rel="stylesheet" href="./CSS/styles.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <header>
        <h1>Mi lista del super</h1>
        <h1><a href="https://www.rappi.com.co/tiendas/tipo/market" target="_blank" class="shop__item"><i class='bx bx-shopping-bag'></i></a></h1>
    </header>
    <main>
        <div class="container">
            <section>
                <h2>Frutas <img src="./IMG/icono_manzana.png" alt="" class="img__item"></h2>
                <ul>
                    <li><a href="https://www.nestlecocina.es/coleccion/recetas-con-manzanas" target="_blank" class="link__item">Manzana</a></i></li>
                    <img src="./IMG/ref_manzana.png" alt="Esto es una Manzana" class="ref__img">
                    <li><a href="https://www.nestlecocina.es/ingredientes/recetas-con-pera" target="_blank" class="link__item"> Pera</a></li>
                    <img src="./IMG/ref_pera.png" alt="Esto es una Pera" class="ref__img">
                    <li><a href="https://www.nestlecocina.es/coleccion/recetas-con-fresas-y-fresones"  target="_blank" class="link__item">Fresa</a></li>
                    <img src="./IMG/ref_fresa.png" alt="Esto es una fresa" class="ref__img">
                </ul>
            </section>
            <br>
            <section>
                <h2>Carnes <img src="./IMG/icono_carne.png" alt="" class="img__item"></h2>
                <ul>
                    <li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/" target="_blank" class="link__item">Res</a></li>
                    <img src="./IMG/ref_res.png" alt="Esto es una res" class="ref__img">
                    <li><a href="https://www.cocinacaserayfacil.net/recetas-con-pollo/" target="_blank" class="link__item">Pollo</a></li>
                    <img src="./IMG/ref_pollo.png" alt="Esto es un pollo" class="ref__img"> 
                    <li><a href="https://www.recetasgratis.net/Cerdo-busqCate-1.html" target="_blank" class="link__item">Cerdo</a></li>
                    <img src="./IMG/ref_cerdo.png" alt="Esto es un cerdo" class="ref__img">
                </ul>
            </section>
            <br>
            <section>
                <h2>Verduras <img src="./IMG/icono_patatas.png" alt="" class="img__item"></h2>
                <ul>
                    <li><a href="https://www.cocinacaserayfacil.net/salsa-tomate-casera-receta/" target="_blank" class="link__item">Tomate</a></li>
                    <img src="./IMG/ref_tomate.png" alt="Esto es un tomate" class="ref__img">
                    <li><a href="https://www.pequerecetas.com/receta/7-recetas-con-zanahoria/" target="_blank" class="link__item">Zanahoria</a></li>
                    <img src="./IMG/ref_zanahoria.png" alt="Esto es una zanahoria" class="ref__img">
                    <li><a href="https://www.buzzfeed.com/rachelysanders/recetas-deliciosas-con-papas" target="_blank" class="link__item">Patata</a></li>
                    <img src="./IMG/ref_papa.png" alt="Esto es una papa" class="ref__img">
                </ul>
            </section>
            <br>
            <section>
                <h2>Lácteos <img src="./IMG/icono_vaca.png" alt="" class="img__item"></h2>
                <ul>
                    <li><a href="https://www.recetasderechupete.com/top-10-de-postres-con-leche/16835/" target="_blank" class="link__item">Leche</a></li>
                    <img src="./IMG/ref_leche.png" alt="Esto es una caja de leche" class="ref__img">
                    <li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-yogurt/" target="_blank" class="link__item">Yogur</a></li>
                    <img src="./IMG/ref_yogur.png" alt="Esto es un yogur" class="ref__img">
                    <li><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-queso/" target="_blank" class="link__item">Queso</a></li>
                    <img src="./IMG/ref_queso.png" alt="Esto es queso" class="ref__img">
                </ul>
            </section>
        </div>
    </main>
    
</body>
</html>

Me costo dos horas pero lo logré, tome algunas ideas.

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-widht, initial-scale">
        <title>Lista Supermercado</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <header>
            <h1>Lista del Supermercado</h1>
        </header>
        <main>
            <section>
                <ul>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1485962093642-5f4386e84429?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
                    <ol>
                        <strong>
                            Frutas
                        </strong>
                    </ol>
                    <li>
                        &#127824;
                        3 Peras
                        <input type="checkbox">
                    </li>
                    <li>
                        &#127815;
                        1 Kg Uvas
                        <input type="checkbox">
                    </li>
                    <li>
                        &#127822;
                        4 Manzanas
                        <input type="checkbox">
                    </li>
                    <li>
                        &#127818;
                        1 kg Mandarinas
                        <input type="checkbox">
                    </li>
                    <li>
                        &#127816;
                        2 Melones
                        <input type="checkbox">
                    </li>
                    </figure>

                    <figure>
                        <img src="https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
                        <ol>
                            <strong>Carnes</strong>
                        </ol>
                        <li>
                            &#129385;
                            3 kg Res
                            <input type="checkbox">
                        </li>
                        <li>
                            &#128022;
                            2 kg Cerdo
                            <input type="checkbox">
                        </li>
                        <li>
                            &#129363;
                            1 kg Tocino
                            <input type="checkbox">
                        </li>
                        <li>
                            &#x1F414;
                            2 pollos
                            <input type="checkbox">
                        </li>
                        <li>
                            &#128031;
                            2 kg Pescado
                            <input type="checkbox">
                        </li>
    
                    </figure>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1557844352-761f2565b576?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
                        <ol>
                            <strong>Vegetales</strong>
                        </ol>
                        <li>
                            &#x1F34B;
                            2 kg Limones
                            <input type="checkbox">
                        </li>
                        <li>
                            &#129364;
                            4 kg Papa criolla
                            <input type="checkbox">
                        </li>
                        <li>
                            &#129361;
                            2 kg Aguacate
                            <input type="checkbox">
                        </li>
                        <li>
                            &#129477;
                            2 kg Cebolla
                            <input type="checkbox">
                        </li>
                    </figure>
                </ul>
                <ol><strong>
                    Receta:
                    <a href="https://www.youtube.com/watch?v=BxRZol7vrAI" target="_blank">Rollo de Carne</a>
                </strong>
                </ol>

            </section>
        </main>
    </body>
</html>

CSS3

html {
    background-color: #395873;
}

h1 {
    color: #BACBD9;
    text-align: center;
}

figure {
    max-width: 200px;
    overflow: hidden;
}
img {
    max-width: 300px;
    height: 150px;
}

strong {
    color: #8FBDD9;
    font-size: 25px;
}

li {
    color: white;

}

ul {
    display: inline-flex;
}

a {
    color: white;
}

https://uigradients.com/#CheerUpEmoKid
aqui podemos encontrar colores muy bonitos para modificar nuestro background!
se los recomiendo mucho.

No olvides las 3 maneras de aplicar estilos a los diversos elementos en HTML5:

**El código HTML (eliminé las lists para obtener el efecto deseado)
**

<!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">
    <link rel="stylesheet" href="css/styles.css">
    <title>Alimentos</title>
</head>
<body>
    <header>
        <h1 class="titulo1">Lista de <span class="titulo-span">alimentos</span></h1>
    </header>
    <section class="seccion">
        <article>
            <h2 class="lista-item" id="fruta">Frutas</h2>
            <figure>
                <img class="imagen-producto" src="img/alimento_fresa.png" alt="Una fresa sobre fondo azul">
                <figcaption class="desc-producto">Fresa</figcaption>
            </figure>
            <figure>
                <img  class="imagen-producto" src="img/alimento_durazno.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
                <figcaption class="desc-producto">Durazno</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_lulo.png" alt="Una fresa sobre fondo azul">
                <figcaption class="desc-producto">Lulo</figcaption>
            </figure>
            <figure>
                <img  class="imagen-producto" src="img/alimento_manzana.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
                <figcaption class="desc-producto">Manzana</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_naranja.png" alt="Una fresa sobre fondo azul">
                <figcaption class="desc-producto">Naranja</figcaption>
            </figure>
            <figure>
                <img  class="imagen-producto" src="img/alimento_uva.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
                <figcaption class="desc-producto">Uva</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_banano.png" alt="Una fresa sobre fondo azul">
                <figcaption class="desc-producto">Banana</figcaption>
            </figure>
            <figure>
                <img  class="imagen-producto" src="img/alimento_maracuya.png" alt="tres duraznos jugosos y rebanados sobre un fondo blanco">
                <figcaption class="desc-producto">Maracuya</figcaption>
            </figure>
        </article>
        <hr>
        <article>
            <h2 class="lista-item" id="carne">Carnes</h2>
            <figure>
                <img class="imagen-producto" src="img/alimento_carne_res.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
                <figcaption class="desc-producto">Carne de Res</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_carne_cerdo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
                <figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Cerdo</a></figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_camaron.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
                <figcaption class="desc-producto">Camarón</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_conejo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
                <figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Conejo</a></figcaption>
            </figure>

            <figure>
                <img class="imagen-producto" src="img/alimento_higado.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
                <figcaption class="desc-producto">Higado</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_atun.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
                <figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Atún</a></figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_pescado.png" alt="Una porción de punta de anca con papas fritas y ensalada sobre un tablon de madera">
                <figcaption class="desc-producto">Mojarra</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_pollo.png" alt="Una costilla de cerdo a termino medio con hojas de oregano">
                <figcaption class="desc-producto"><a href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/" target="_blank">Pollo</a></figcaption>
            </figure>
        </article>
        <hr>
        <article>
            <h2 class="lista-item" id="verdura">Verduras</h2>
            <figure>
                <img class="imagen-producto" src="img/alimento_lechuga.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
                <figcaption class="desc-producto">Lechuga Crespa</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_tomate.png" alt="Una un tomate grande">
                <figcaption class="desc-producto">Tomate</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_brocoli.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
                <figcaption class="desc-producto">Brócoli</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_cebolla-larga.png" alt="Una un tomate grande">
                <figcaption class="desc-producto">Cebolla Larga</figcaption>
            </figure>


            <figure>
                <img class="imagen-producto" src="img/alimento_cebolla.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
                <figcaption class="desc-producto">Cebolla</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_cilantro.png" alt="Una un tomate grande">
                <figcaption class="desc-producto">Cilantro</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_espinaca.png" alt="Una plantación de lechuga crespa que se extiende hacia el horizonte">
                <figcaption class="desc-producto">Espinaca</figcaption>
            </figure>
            <figure>
                <img class="imagen-producto" src="img/alimento_remolacha.png" alt="Una un tomate grande">
                <figcaption class="desc-producto">Remolacha</figcaption>
            </figure>
        </article>
    </section>
    <footer>
        <h3 class="pie"><span class="pie-span">Desarrollado con amor por </span><a href="https://www.mrd2.co">MRD2</a></h3>
    </footer>
</body>
</html>```

**El código CSS**



@font-face{
font-family: ‘montserrat-medium’;
src: url(’…/fonts/Montserrat/Montserrat-Medium.ttf’);
}

@font-face{
font-family: ‘montserrat-bold’;
src: url(’…/fonts/Montserrat/Montserrat-Bold.ttf’) ;
}

@font-face{
font-family: merryweather-regular;
src: url(’…/fonts/Merriweather/Merriweather-Regular.ttf’);
}

@font-face{
font-family: caveat-semibold;
src: url(’…/fonts/Caveat/Caveat-SemiBold.ttf’);
}

body{
background-color: #ECEEED;
padding: 0px;
margin: 0px;
}

header{
padding-top: 0px;
margin-top: 0px;
background-color: #bb2205;
padding-bottom: 10px;
}

a{
text-decoration: none;
}

hr{
width: 200px;
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid #d2d3c9;
}
.titulo1{
text-align: center;
font-family: merryweather-regular;
color: #FFFFFF;
margin: 0px;
}

.titulo-span{
font-family: caveat-semibold;
color: #f6830f;
font-size: 60px;
}

li{
list-style-type: none;
}

.lista-item{
font-family: montserrat-bold;
text-align: center;
list-style-type: none;
font-size: 30px;
}

#fruta{
color: #FF0040;
}

#carne{
color: #bb2205;
}

#verdura{
color: #0D8D2C;
}

article{
margin-left: auto;
margin-right: auto;
display: block;
width: 92%;
margin-top: 20px;
}

figure{
display: inline-block;
}

.imagen-producto{
border-radius: 20px;
box-shadow: 3px 3px 50px #BDBFBE;

}

.desc-producto{
font-family: merryweather-regular;
text-align: center;
margin-top: 15px;
}

.pie{
text-align: center;
font-family: montserrat-bold;
font-size: 18px;
}

.pie-span{
font-family: caveat-semibold;
font-size: 22px;
color: #f6830f;
}


HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/>
        <title>Mi lista de compras</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <header>
           <h1>Lista de compras by Marie</h1>
        </header>
        <main>
            <div id=contenedor>
            <section id=frutas>
            <h3>Frutas</h3>
            <ul>
                <li><img src="./Pics/Manzanas.jpg" alt="Unas manzanas" width="150"><br>5 Manzanas 🍎</li>
                <br>
                <li><img src="./Pics/Peras.jpg" alt="Unas peras" width="150"><br>4 Peras 🍐</li>
                <br>    
                <li><img src="./Pics/Pinas.jpg" alt="Unas piñas" width="150"><br>2 Piñas 🍍</li>
                <br>
                <li><img src="./Pics/Fresas.jpg" alt="Unas fresas" width="150"><br>1 paquete de fresas 🍓</li>
                <br>
                <li><img src="./Pics/Banano.jpg" alt="Unos bananos" width="150"><br>1 banano 🍌</li>
             </ul>
             <p>
                 ¡Y ya estamos listos para nuestra 
                 <a class="links" href="https://www.recetasnestle.com.co/recetas/ensalada-de-fruta-con-queso" target="_blank">ensalada de frutas!</a> 
             </p>
            </section>
            <section id=verduras>
             <h3>Verduras</h3>
             <ul>
                <li><img src="./Pics/Lechuga.jpg" alt="Una lechuga" width="150"><br>1 lechuga romana 🥗</li>
                <br>
                <li><img src="./Pics/Pepinillos.jpg" alt="Unos pepinillos" width="150"><br>4 pepinillos 🥒</li>
                <br>    
                <li><img src="./Pics/Ajonjoli.jpg" alt="Ajonjolí" width="150"><br>1 ajonjolí 🥗</li>
                <br>
                <li><img src="./Pics/Ajo.jpg" alt="Unos ajos" width="150"><br>4 ajos 🧄</li>
             </ul>
             <p>
                 Y con un par de ingredientes más, nuestra 
                 <a class="links" href="https://www.cocinafacil.com.mx/recetas-de-comida/receta/ensalada-de-atun-y-aguacate/" target="_blank">ensalada</a>
                  estará lista.
            </p>
            </section>
            <section id=carnes>
             <h3>Carnes</h3>
             <ul>
                <li><img src="./Pics/Carne.jpg" alt="Carne" width="150"><br>1 kg de carne 🍖</li>
                <br>
                <li><img src="./Pics/Pollo.jpg" alt="Pollo" width="150"><br>1 bandeja de pollo 🍗</li>    
                <br>
                <li><img src="./Pics/Chorizos.jpg" alt="Unos chorizos" width="150"><br>4 chorizos 🌭</li>
                <br>
                <li><img src="./Pics/Tocino.jpg" alt="Tocineta" width="150"><br>1 paquete de tocineta 🥓</li>
             </ul>
             <p>
                 ¡Para hacer la mejor 
                 <a class="links" href="https://www.recetasnestle.com.co/recetas/picada-tipica" target="_blank">picada!</a>
             </p>
            </section>
            </div>
             <p id=final>Hecho con amor 💚</p>
        </main>
    </body>
</html>```


CSS

body {
    background: linear-gradient(to bottom, rgb(0, 87, 128), white)
}

h1 {
    align-items: center;
    width: 600px;
    text-align: center;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: white;
    font-size: 30px;
    font-style: italic;
    font-weight: bolder;
    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
    background: #44a9d1;
    padding: 20px; 
    border: 5px solid #5878ca;
    margin: 20px auto;
    border-radius: 35px 0px 35px 0px;
}

#contenedor{
    margin: 20px auto;
    text-align: center;
}

section {
    vertical-align: top;
    display: inline-block;
    width: 300px;
    background: #44a9d1;
    padding: 20px; 
    border: 5px solid #5878ca;
    margin: 20px;
    border-radius: 35px 0px 35px 0px;
}

h3{
    text-align: center;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: white;
    font-size: 20px;
    font-style: italic;
    font-weight: bolder;
    text-shadow: 2px 2px 2px black;
}

li{
    text-align: center;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: black;
    font-weight: bold;
}

p{
    text-align: center;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: white;
    font-style: italic;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}

#final {
    align-items: center;
    width: 600px;
    text-align: center;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    color: #44a9d1;
    font-size: 30px;
    font-style: italic;
    font-weight: bolder;
    text-shadow: 1px 1px 2px black;
    margin: 20px auto;
}```

Me gustó el resultado 😃

CSS utilizado:

* {
    background-color: #012a4a;
    font-family: 'Segoe UI';
    padding: 0;
    margin: 0;
}

img {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    border-radius: 100px;
}

h1 {
    padding: 20px;
    text-align: center;
    background-color: #fca311;
}

.menu {
    text-align: center;
    background-color: #fca311;
}

ul {
    border: 5px solid #073b4c;
    padding: 80px;
    display: inline-block;
    margin: 35px;
    border-radius: 20px;
    color: aliceblue;
}

ol {
    margin-top: -40px;
    margin-bottom: -40px;
}

No es mucho, pero es trabajo honesto 😄

RESULTADO

HTML

CSS

Después de muchos ensayos😁😁😁


Lo hice todo de nuevo para recordar lo aprendido. Creo que con las clases que siguen aprenderé a poder poner cada lista que dividí en un contendor para poder cambiar de posición. Además mover la posición de los button e input type “submit”

<!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>Lista del supermercado</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
        <h1>Lista del supermercado</h1>
        <section>
            <ul class="meat">
                <h3>Carnes</h3>
                <li>
                    <a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Pollo</a>
                    <img src="https://estaticos.miarevista.es/media/cache/1140x_thumb/uploads/images/article/5e5d78c35cafe81b4d6105b8/carne-pollo.jpg" alt="pollo" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Res</a>
                    <img src="https://dam.cocinafacil.com.mx/wp-content/uploads/2019/05/cortes-de-carne-01.png" alt="res" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Cerdo</a>
                    <img src="https://gourmet.expob2b.es/uploads/fotos_noticias/2017/09/w800px_16205-128419-hablamos-de-la-carne-de-cerdo.jpg" alt="cerdo" width="100px">
                </li>
            </ul>

            <ul class="vegetables">
                <h3>Verduras</h3>
                <li>
                    <a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Frutas</a>
                    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/frutas-1552246920.jpg?crop=1.00xw:0.753xh;0,0.105xh&resize=980:*" alt="frutas" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Espinaca</a>
                    <img src="https://www.clikisalud.net/wp-content/uploads/2016/07/mantener-frescura-espinaca.jpg" alt="espinaca" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Cebolla</a>
                    <img src="https://www.clikisalud.net/wp-content/uploads/2016/10/cebolla.jpg" alt="cebolla" width="100px">
                </li>
            </ul>

            <ul class="milk">
                <h3>Lácteos</h3>
                <li>
                    <a target="_blank" href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Leche</a>
                    <img src="https://thefoodtech.com/wp-content/uploads/2020/05/jarras-vasos-con-leche.jpg" alt="leche" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-res/">Yogurt</a>
                    <img src="https://cdn-3.expansion.mx/dims4/default/5eb0946/2147483647/strip/true/crop/5472x3648+0+0/resize/800x533!/quality/90/?url=https%3A%2F%2Fcherry-brightspot.s3.amazonaws.com%2F9e%2F70%2F25103ecf4f379f1216e4430dd07c%2Fshutterstock-449274190.jpg" alt="yogurt" width="100px">
                </li>
                <li>
                    <a target="_blank" href="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/">Avena</a>
                    <img src="https://i.blogs.es/fdd250/1366_20001/1366_2000.jpg" alt="avena" width="100px">
                </li>
            </ul>
        </section>
    </main>
    
</body>
</html>
<code>
body{
    margin: 0;
}

h1{
    display: block;
    text-align: center;
    font-size: 32px;
    color: #1c1c1c;
    font-weight: 700;
    font-family: sans-serif;
}

main{
    text-align: center;
    display: block;
    margin: 0 200px;
    background-color: rgba(255, 252, 203, 0.308);
    padding: 25px;
}

section{
    display: inline-block;
}

section ul{
    display: inline-block;
    padding: 0 30px;
}

section ul h3{
    text-align: center;
    font-size: 28px;
    color: #3a3a3a;
    font-weight: 600;
    font-family: sans-serif;
}

section ul li{
    display: block;
    margin-bottom: 20px;
}

section li a{
    font-size: 24px;
    font-family: sans-serif;
    font-weight: 400;
    text-decoration: none;
    display: block;
}

section .meat li a{
    color: rgb(58, 14, 23);
}

section .vegetables li a{
    color: rgb(14, 78, 17);
}

section .milk li a{
    color: rgb(189, 181, 75);
}

section ul li img{
    border-radius: 50%;
    margin-top: 8px;
    height: 100px;
}

buenísimo
aqui aprovechando el especial de todo free el 30 31 de octubre de 2020

Estructura del css

Me es grato encontrar muchos ejemplos en los comentarios, de los cuales me basaré para mejorar mi codificaciòn en css, mientras les comparto mi avance del reto. Saludos! ! 😁

El feedback es bienvenido🙂

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

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Esta página te moestrará gatitos">
        <meta name="robots" content="index,follow">
        <title>Lista del super</title>
        <meta name="viewport" content="width=device-width, inicial-scale=1.0">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <header>
            <h1>Lista del super</h1>
           
        </header>
        <main>
              <ul>
                  <li class="item_title">Frutas</li>
                        <ol>
                            <li class="item_subtitle"> Manzanas 
                                <p>
                                    <img src="./pics/manzana.jpg" alt="Manzanas">
                                </p>
                            </li>
                            <li class="item_subtitle">Uvas 
                                <p>
                                    <img src="./pics/uvas.jpg" alt="Uvas" >
                                </p>
                            </li>
                            <li class="item_subtitle">Naranjas
                                <p>
                                    <img src="./pics/naranjas.jpg" alt="Naranjas" >  
                                </p>
                            </li>
                            <li class="item_subtitle">Peras
                                <p>
                                    <img src="./pics/pera.jpg" alt="Peras" >
                                </p>
                            </li>
                            <li class="item_subtitle">Aguacates
                                <p>
                                    <img src="./pics/aguacate.jpg" alt="Aguacate" >
                                </p>
                            </li>
                      </ol> 
                  <li class="item_title">Verduras</li>
                      <ol>
                            <li class="item_subtitle">Calabazas 
                                <P>
                                    <img src="./pics/calabaza.jpg" alt="Calabazas" >
                                </P>
                            </li>
                            <li class="item_subtitle">Zanahorias
                                <p>
                                    <img src="./pics/zanahorias.jpg" alt="Zanahorias" >
                                </p>
                            </li>
                            <li class="item_subtitle">Brocoli
                                <P>
                                    <img src="./pics/brocoli.jpg" alt="Brocoli" >
                                </P>
                            </li>
                            <li class="item_subtitle">Papas
                                <p>
                                    <img src="./pics/papas.jpg" alt="Papas" >
                                </p>
                            </li>
                            <li class="item_subtitle">Espinacas
                                <p>
                                    <img src="./pics/espinaca.jpg" alt="Espinacas" ">
                                </p>
                            </li>
                      </ol>
                    <li class="item_title">Carnes</li>
                        <ol>
                            <li class="item_subtitle" >
                                <a href="https://www.youtube.com/watch?v=00uRfnaHrEo" target="_blank">
                                    Pechuga de pollo
                                        <p>
                                            <img src="./pics/pollo.jpg" alt="Pechuga de pollo" >
                                        </p>
                                </a>
                            </li>
                            <li class="item_subtitle">
                                <a href="https://www.youtube.com/watch?v=h6D62cZXkwc" target="_blank" >
                                    Alitas
                                        <p>
                                            <img src="./pics/alitas.jpg" alt="Alitas de pollo" >
                                        </p>
                                </a>
                            </li>
                            <li class="item_subtitle">
                                <a href="https://www.youtube.com/watch?v=9OUncLeeuCw" target="_blank">
                                    Filete de pescado
                                        <p>
                                            <img src="./pics/pescado.png" alt="Pechuga de pescado" >
                                        </p>
                                </a> 
                            </li>
                            <li class="item_subtitle">
                                <a href="https://www.youtube.com/watch?v=Hww4Cqz4v30" target="_blank">
                                    Carne molida
                                        <p>
                                            <img src="./pics/molida.jpg" alt="Carne molida" >
                                        </p>
                                </a> 
                            </li>
                        </ol>  
                </ul>      
        </main>
    </body>

body {
    background-color: rgba(49, 198, 218, 0.2);
}

h1 {
    text-align: center;
    font-family: cursive;
    font-style:normal;
    
}

li {
    display: inline-block;
    text-align: center;
    padding-inline-end: 50px;
}

img {
    height: 150px;
    width: 150px;
    border-radius: 75px;
    display: inline-block;
}

.item_title {
    font-family: sans-serif;
    font-style:normal;
    text-align: right;
    font-size: 20px;
    padding-block-start: 20px;
    padding-block-end: 20px;
}
 
.item_subtitle :hover {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: normal;
    font-size: 15px;
    color: black;
}

 

Me base en el diseño de de Jeniffer Fernández


Mi lista con nuevas características.

Cambiando estilo a las listas

La lista de la compra, no pude dedicarle mucho tiempo pero esto fue lo que me salio.

Todavía es nivel pollito 🙈 pero me está gustando mucho el curso 😍

Bueno, yo simplemente quería aplicar todo lo aprendido hasta ahora pero como un post dirigido a esta clase:

Bueno aqui les dejo mi resultado, se que no es la gran cosa pero bueno, poco a poco jeje ❤️

¡Saludos! apenas voy aprendiendo ^_^

Código de 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">
        <link rel="stylesheet" href="./CSS/style.css">
        <title>ShopList</title>
    </head>
    <body>
        <header>

        </header>
        <main>
            <h1>Shop List by Ramiro López</h1>
            <section>
                <p class="title">Today's recipe</p>
                <h2><a href="https://www.bettycrocker.com/recipes/cheddar-stuffed-chicken-breasts/9ee916a8-22ae-44d4-9910-2880fa599d6c" target="_blank" >Cheddar-Stuffed Chicken Breasts</a></h2>
                <img class="recipe" src="./IMG/recipe.jpg" alt="Image of recipe">
                <p class="subtitle">Ingredients: </p>
                <ul>
                    <li class="list">4 Boneless skinless chicken breast halves (1 1/4 pounds) <br> <img class="ingredients" src="./IMG/chicken breast.jpg" alt="Image of Chiken breast"></li>
                    <li class="list">1/4 Teaspoon salt <br> <img class="ingredients" src="./IMG/teaspoon salt.jpg" alt="Image of salt"></li>
                    <li class="list">1/4 teaspoon pepper<br> <img class="ingredients" src="./IMG/pepper.jpg" alt="Image of pepper"></li>
                    <li class="list">3 ounces Cheddar cheese<br> <img class="ingredients" src="./IMG/cheese.jpg" alt="Image of cheese"></li>
                    <li class="list">1 tablespoon butter or margarine, melted<br> <img class="ingredients" src="./IMG/margarine.jpg" alt="Image of margarine"></li>
                    <li class="list">1/4 cup salsa<br> <img class="ingredients" src="./IMG/sauce.jpg" alt="Image of sauce"></li>
                    <li class="list">Chopped fresh cilantro, if desired<br> <img class="ingredients" src="./IMG/cilantro.jpg" alt="Image of cilantro"></li>
                </ul>
            </section>
        </main>
        <footer>

        </footer>
    </body>
</html>

Código de CSS

body{
    margin: 0;
    background-color: brown;
}

section{
    margin-left: 10%;
    margin-right: 10%;
    padding: 15px;
    background-color: white;
    border-radius: 15px;
}

h1{
    color: white;
    font-size: 40px;
}

h2{
    color: green;
}

.list{
    color: green;
}

.recipe{
    height: 350px;
}

.ingredients{
    width: 150px;
}

.title{
    color: brown;
    font-size: 35px;
    font-style: italic;
}

.subtitle{
    color: brown;
    font-size: 30px;
}

Dejeeeeen de hacer cosas que todavia no vimooooos, me siento un inutil jajajaja

Comparto lo aprendido!! 👇👇👇

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>Desafío 1</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <h1>Soy la lista del super!!</h1>
    </header>
    <section>
      <ul>
        <div class="contenedor">
          <img src="./fruits.jpg" alt="imagen de frutas" />
        </div>
        <li class="tipo">Frutas:</li>
        <ol>
          <li>Manzana 🍎</li>
          <li>Banana 🍌</li>
          <li>Naranja 🍊</li>
          <li>Sandía 🍉</li>
          <li>Pera 🍐</li>
          <li>Frutilla 🍓</li>
        </ol>
      </ul>
      <ul>
        <div class="contenedor">
          <img src="./vegetables.jpg" alt="imagen de carnes" />
        </div>
        <li class="tipo">Carnes:</li>
        <ol>
          <li>Pollo 🍗</li>
          <li>Salmón 🍣</li>
          <li>Marisco 🍤</li>
          <li>Cerdo 🍖</li>
          <li>
            <a
              href="https://www.youtube.com/watch?v=BSYpe_93x-0"
              target="_blank"
              >Bife de chorizo 🥩</a
            >
          </li>
        </ol>
      </ul>
      <ul>
        <div class="contenedor">
          <img src="./meats.jpg" alt="imagen de vegetales" />
        </div>
        <li class="tipo">Verduras:</li>
        <ol>
          <li>Tomate 🍅</li>
          <li>Berenjena 🍆</li>
          <li>Choclo 🌽</li>
          <li>Brocoli 🥦</li>
          <li>Palta 🥑</li>
          <li>Cebolla 🧅</li>
        </ol>
      </ul>
    </section>
    <footer>
      <p>Creado por Martín!! 👨‍🍳</p>
    </footer>
  </body>
</html>

CSS:

body {
    background: papayawhip;
    font-family: 'Courier New', Courier, monospace;
}
header {
    color: darkred;
    display: flex;
    align-items: center;
    justify-content: center;
}

section {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.tipo {
    font-weight: bolder;
    font-size: 18px;
}
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.contenedor {
    height: 200px;
    width: 200px;
    margin-top: 10px;
    margin-bottom: 30px;
}
a {
    text-decoration: none;
}

HTML:

<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="./css/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=Outfit:[email protected]&family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Lista de super</title>
</head>
<body>
    <header><p>By Miguel Hernádez</p></header>
    <main>
        <h1 class="title">Soy una sexy lista de super ;)</h1>
        <section class="Fruit">
            <ul class="Fruit-list"><li>Frutas</li></ul>
                <ol>
                    <div>
                        <li>Manzana</li>
                        <figure><img src="./assets/apple.png" alt="Manzana"></figure>
                        <div><input type="checkbox" checked="checked"></div>
                    </div>
                    <div>
                        <li>Fresa</li>
                        <figure><img src="./assets/strawberry.png" alt="Fresa"></figure>
                        <div><input type="checkbox" checked="checked"></div>
                    </div>
                    <div>
                        <li>Platano</li>
                        <figure><img src="./assets/bananas.png" alt="Platano"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                    <div>
                        <li>Kiwi</li>
                        <figure><img src="./assets/kiwi.png" alt="Kiwi"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                </ol>
        </section>
        <section class="Meat">
            <ul class="Meat-list"><li>Carnes</li></ul>
                <ol>
                    <div>
                        <li>Pollo</li>
                        <figure><img src="./assets/hen.png" alt="Pollito"></figure>
                        <div><input type="checkbox" checked="checked"></div>
                    </div>
                    <div>
                        <li>Puerco</li>
                        <figure><img src="./assets/pork.png" alt="Puerco"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                    <div>
                        <li>Res</li>
                        <figure><img src="./assets/cow.png" alt="Vaquita"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                </ol>
        </section>
        <section class="Vegetables">
            <ul class="Vegetables-list"><li>Verduras</li></ul>
                <ol>
                    <div>
                        <li>Zanahoria</li>
                        <figure><img src="./assets/carrot.png" alt="Zanahoria"></figure>
                        <div><input type="checkbox" checked="checked"></div>
                    </div>
                    <div>
                        <li>Brocoli</li>
                        <figure><img src="./assets/broccoli.png" alt="Brocoli"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                    <div>
                        <li>Papa</li>
                        <figure><img src="./assets/potato.png" alt="Papa"></figure>
                        <div><input type="checkbox"></div>
                    </div>
                </ol>
        </section>
    </main>
    <footer>
        <ul class="copyright">
            <li><a href="https://www.flaticon.com/free-icons/fruit" title="fruit icons">Fruit icons created by Icongeek26 - Flaticon</a></li>
            <li><a href="https://www.flaticon.com/free-icons/chicken" title="chicken icons">Chicken icons created by Freepik - Flaticon</a></li>
            <li><a href="https://www.flaticon.com/free-icons/pig" title="pig icons">Pig icons created by monkik - Flaticon</a></li> 
            <li><a href="https://www.flaticon.com/free-icons/cow" title="cow icons">Cow icons created by Victoruler - Flaticon</a></li>
            <li><a href="https://www.flaticon.com/free-icons/carrot" title="carrot icons">Carrot icons created by Freepik - Flaticon</a></li>
            <li><a href="https://www.flaticon.com/free-icons/broccoli" title="broccoli icons">Broccoli icons created by Freepik - Flaticon</a></li>
            <li><a href="https://www.flaticon.com/free-icons/potato" title="potato icons">Potato icons created by Freepik - Flaticon</a></li>
        </ul>
    </footer>
</body>
</html>

CSS:

body{
    font-family: 'Outfit', sans-serif;
    font-family: 'Quicksand', sans-serif;
    margin: 0;
}

main{
    width: 100%;
    display: grid;
    place-items: center;
}

section{
    -webkit-box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 26px -4px rgba(0,0,0,0.75);
}

.Fruit-list{
    background-color: Gold;
    display: inline-block;
    color: white;
    border-radius: 5px;
    padding: 3px;
}

.Meat-list{
    background-color: orangered;
    display: inline-block;
    color: white;
    border-radius: 5px;
    padding: 3px;
}

.Vegetables-list{
    background-color: limegreen;
    display: inline-block;
    color: white;
    border-radius: 5px;
    padding: 3px;
}

.Fruit{
    margin: 5px;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    border-style: solid;
    border-width: 3px;
    border-color: gold;
}

.Meat{
    margin: 5px;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    border-style: solid;
    border-width: 3px;
    border-color: orangered;
}

.Vegetables{
    margin: 5px;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    border-style: solid;
    border-width: 3px;
    border-color: limegreen;
}

ul{
    list-style: none;
    font-size: 20px;
    font-weight: bold;
    padding: 0;
}

ol{
    display: flex;
    flex-direction: column;
    padding: 0;
}

ol div{
    background: WhiteSmoke;
    margin: 2px;
    border-radius: 10px;
    height: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
}

ol div li{
    list-style: none;
}

ol div figure{
    margin-inline-start: 10px;
    margin-inline-end: 10px;
}

ol div img{
    width: 20px;
    height: 20px;
}

ol div div{
    margin-right: 5px;
    flex-grow: 1;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
}

body {
    padding: 0;
    margin: 0;
    background-color: rgb(14, 12, 158);
}

header {
    background-color: rgb(237, 229, 10);
    margin: auto;
    height: 80px;
    padding-top: 2%;
}

header h1 {
    text-align: center;
    display: inline;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 50%;
    margin-bottom: auto;
}

img {
    height: 250px;
    width: 250px;
    border-radius: 5%;
}

.clasificacion {
    font-size: 2em;
    list-style-type: none;
    color: white;
}

.producto{
    color: white;
    font-size: 1.2em;
}

.producto a {
    text-decoration: none;
    color: white;
}

.contenedor{
    background-color: purple;
    float: left;
    width: 35%;
    margin-left: 8%;
}

footer {
    position:fixed;
    color: white;
    bottom:0;
    width: 100%;
    height: 25px;
    margin:0;
    padding-left: 2%;
    background-color: rgb(237, 229, 10);
}

Les comparto mi lista✔️

Este es mi resultado al reto con los conocimientos que hemos adquirido y un poco de busqueda.

Quiero aprender maquetación si no estoy mal para organizar los elementos a mi antojo.
Estoy muy motivado!

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">
    <meta name="description" content="La lista del supermercado">
    <title>Lista del supermercado</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <header>
        <h1>Soy la lista del super!</h1>
    </header>

    <main>
        <section class="lista">
            <ul>
                <li class="frutas">
                    <h3>Frutas</h3>
                    <ol>
                        <li>
                            <a href="https://www.recetasnestle.com.mx/recetas/postres/manzanas-con-canela">Manzana
                                🍏</a>

                        </li>
                        <li>
                            <a
                                href="https://www.quericavida.com/recetas/empanadas-de-platano-maduro-y-queso/21b4e266-eff2-4870-8b10-875045b015bb">Platano🍌</a>
                        </li>
                    </ol>
                </li>
                <li class="carnes">
                    <h3>Carnes</h3>
                    <ol>
                        <li>
                            <a href="https://www.youtube.com/watch?v=8fz_GMOP5Qc">Pollo🍗</a>
                        </li>
                        <li>
                            <a href="https://www.recetasgratis.net/receta-de-carne-molida-con-papas-42329.html">Carne
                                Molida🧆</a>
                        </li>
                    </ol>
                </li>
                <li class="verduras">
                    <h3>Verduras</h3>
                    <ol>
                        <li>
                            <a href="https://www.directoalpaladar.com/postres/bocaditos-de-limon-receta-1">Limón🍋</a>
                        </li>
                        <li>
                            <a
                                href="https://www.hogarmania.com/cocina/recetas/aperitivos/croquetas-zanahoria-20005.html">Zanahoria🥕</a>
                        </li>
                    </ol>
                </li>
            </ul>
        </section>
        <article>
            <h1>Platillos</h1>
        </article>
        <section class="imagenes">
            <picture>
                <source media="(min-width:450px)" srcset="./img/manzanas.jpg">
                <img src="./img/manzanas.jpg" alt="Postre de manzanas">
            </picture>
            <picture>
                <source media="(min-width:450px)" srcset="./img/platanos.jpg">
                <img src="./img/platanos.jpg" alt="Postre de platano">
            </picture>
            <picture>
                <source media="(min-width:450px)" srcset="./img/pollo.jpg">
                <img src="./img/pollo.jpg" alt="Platillo de pollo">
            </picture>
            <picture>
                <source media="(min-width:450px)" srcset="./img/carne molida.jpg">
                <img src="./img/carne molida.jpg" alt="Empanada de carne molida">
            </picture>
            <picture>
                <source media="(min-width:450px)" srcset="./img/limon.jpg">
                <img src="./img/limon.jpg" alt="Postre de limón">
            </picture>
            <picture>
                <source media="(min-width:450px)" srcset="./img/zanahoria.jpg">
                <img src="./img/zanahoria.jpg" alt="Platillos de zanahoria">
            </picture>
        </section>
    </main>

    <footer>
        <h4>Creado con amor!!</h4>
    </footer>
</body>

</html>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
header {
    background-color: #f9844a;
    font-size: 30px;
    border: 1px solid #023047;
    text-align: center;
    /* margin-bottom: 15px; */
    padding: 25px 0;
    color: #4d908e;
}

.lista ul{
    padding-top: 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    padding-bottom: 25px;
    /* border: 1px solid #023047; */
}

.lista ul h3{
    padding-bottom: 5px;
}

.lista ul li{
    list-style: none;
}

.lista ul li {
    padding-top: 10px;
    padding-bottom: 10px;
}

.frutas {
    border: 1px solid #023047;
    width: 100%;
    text-align: center;
    background-color: #90be6d;
    color: #2d6a4f;
}

a{
    text-decoration: none;
    cursor: pointer;
    transform: scale(1);
    transition: 0.15s;
}
a:hover {
    transform: scale(1.2);
}

.carnes {
    border: 1px solid #023047;
    width: 100%;
    text-align: center;
    background-color: #f94144;
    color: #f9844a;
}

.verduras {
    border: 1px solid #023047;
    width: 100%;
    text-align: center;
    background-color: #d8f3dc;
    color: #2d6a4f;
}

article{
    background-color: #f9844a;
    font-size: 30px;
    border: 1px solid #023047;
    text-align: justify;
    /* margin-bottom: 15px; */
    padding: 25px 0;
    color: #4d908e;
}

.imagenes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    background-color: #000814;
}

.imagenes img{
    width: 100%;
    height: 250px;
    transform: scale(1);
    transition: 0.15s;
    cursor: pointer;
}


.imagenes img:hover{
    transform: scale(1.2);
}

.imagenes img:not(hover){
    transform: scale(0.8);
}



Mi lista de compras:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Lista de Compras</title>
</head>
<body>
    <main>
        <h1>Lista de Compras</h1>
        <ol>
            <li class="listas">
                <h2>Carne</h2>
                <ul>
                    <li>
                        <figure>
                            <img src="./src/pechuga.jpeg" alt="pechuga de pollo">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=kfLproHPRVM">Pechuga de Pollo</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/carneMolida.jpg" alt="Carne Molida">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=pyvjroHtpHM">Carne Molida</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/salmon.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=Ki5bUd08GAQ">Salmon</a>
                    </li>
                </ul>
            </li>
            <li class="listas">
                <h2>Biberes</h2>
                <ul>
                    <li>
                        <figure>
                            <img src="./src/salmon.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=BDqeVnxFoa8">Espaguetis</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/garbanzos.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=ZPkjghdBhB4">Garbanzos</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/quesoCrema.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=ePr6sih0Fvk">Queso Crema</a>
                    </li>
                </ul>
            </li>
            <li class="listas">
                <h2>Verduras</h2>
                <ul>
                    <li>
                        <figure>
                            <img src="./src/papas.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=GcYTes0aOPU">Papas</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/lentejas.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=SwdhZlsgnf4">Lentejas</a>
                    </li>
                    <li>
                        <figure>
                            <img src="./src/albahaca.jpg" alt="Salmon">
                        </figure>
                        <a href="https://www.youtube.com/watch?v=9cYZ_E6Kpv4">Albahaca</a>
                    </li>
                </ul>
            </li>
        </ol>

        <h3>Espero que les agusten las recetas 😉👌</h3>
    </main>
</body>
</html>

CSS:

body {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    background-color: darkcyan;
    text-align: center;
}

img {
    width: 5em;
    height: auto;
    border-radius: 30px;
    padding: 10px;
}

a {
    text-decoration: underline;
    color: white;
}

ol,ul {
    list-style-type: none;
}

ol {
    display: flex;
    box-sizing: content-box;
    justify-content: center;
}

.listas {
    padding: 5px;
    border-radius: 30px;
    border: solid 5px white;
    background-color: darkgoldenrod;
    margin: 15px;
}

Comparto mi ejemplo.

así quedo después de usar css

body{
    background-color: #e29578;
}
#Titulo
{
    color: #edf6f9;
    background-color: #006d77;
    width: 600px;
    font-size: 50px;
    text-align: center;
}
#canasta
{
    width: 150px;
    text-align: center;
}
#SubTitulo
{
    color: #edf6f9;
    background-color: #83c5be;
    width: 600px;
}
.tipo
{
    font-size: 25px;
    color: #006d77;
    background-color: #ffddd2;
    width: 250px;
}
.producto
{
    font-size: 20px;
    color: #83c5be;
    background-color: #edf6f9;
    width: 210px;
}
main
{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #006d77;
}

Esta quedando di-vi-na la web para ser solo una lista

https://cssreference.io/

Aqui hay buenas referencias de CSS y todas sus funciones, espero les sirva.

Aprendiendo poco a poco 😃

Así mi lista del super con poquito CSS

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

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

<body>
    <main>
        <h1 class="titulo">Lista del Super!</h1>
        <ul>
            <li class="subtitulo">Frutas</li>
        </ul>
        <ol>
            <div>
                <li class="nombres"> <a target="blank"
                        href="https://cookpad.com/ar/recetas/8202723-tarta-de-pera-postre-muy-facil-economico-y-delicioso">Pera</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/pexels-any-lane-5945907.jpg"
                        alt="Esta es la imagen de una Pera">
                    <figcaption>Esta es la imagen de una Pera</figcaption>
                </figure>
            </div>
            <div>
                <li class="nombres"> <a target="blank"
                        href="https://www.paulinacocina.net/budin-de-banana-sin-huevo-facil/4988">Banana</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/pexels-juan-salamanca-61127.jpg"
                        alt="Esta es la imagen de una Banana">
                    <figcaption>Esta es la imagen de una Banana</figcaption>
                </figure>
            </div>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://www.recetasgratis.net/receta-de-jalea-de-mango-casera-15406.html">Mango</a></li>
                <figure>
                    <img class="imagen" src="./imagenes/pexels-anna-shvets-5217960.jpg"
                        alt="Esta es la imagen de un Mango">
                    <figcaption>Esta es la imagen de un Mango</figcaption>
                </figure>
            </div>
        </ol>
        <ul>
            <li class="subtitulo">Carnes</li>
        </ul>
        <ol>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://www.cocinacaserayfacil.net/cordon-bleu-pollo-receta/">Pollo</a></li>
                <figure>
                    <img class="imagen" src="./imagenes/pollo.jpg" alt="Esta es la imagen de un Pollo">
                    <figcaption>Esta es la imagen de un Pollo</figcaption>
                </figure>
            </div>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://www.afuegolento.com/receta/pescado-frito-crujiente/16403/">Pescado</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/pescado.jpg" alt="Esta es la imagen de un Pescado">
                    <figcaption>Esta es la imagen de un Pescado</figcaption>
                </figure>
            </div>
            <div>
            <li class="nombres"><a target="blank"
                    href="https://www.recetasgratis.net/receta-de-carne-molida-con-papas-42329.html">Carne Molida</a>
            </li>
            <figure>
                <img class="imagen" src="./imagenes/carne.jpg" alt="Esta es la imagen de una Carne Molida">
                <figcaption>Esta es la imagen de una Carne Molida</figcaption>
            </figure>
            </div>
        </ol>
        <ul>
            <li class="subtitulo">Verduras</li>
        </ul>
        <ol>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://cookpad.com/ar/recetas/14543540-papas-clasicas-al-horno-con-tips?via=search&search_term=papas">Papa</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/papa.jpg" alt="Esta es la imagen de una Papa">
                    <figcaption>Esta es la imagen de una Papa</figcaption>
                </figure>
            </div>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://www.hogarmania.com/cocina/recetas/aperitivos/croquetas-zanahoria-20005.html">Zanahoria</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/zanahoria.jpg" alt="Esta es la imagen de una Zanahoria">
                    <figcaption>Esta es la imagen de una Zanahoria</figcaption>
                </figure>
            </div>
            <div>
                <li class="nombres"><a target="blank"
                        href="https://www.directoalpaladar.com/recetas-de-legumbres-y-verduras/receta-facil-para-hacer-cebolla-caramelizada">Cebolla</a>
                </li>
                <figure>
                    <img class="imagen" src="./imagenes/cebolla.jpg" alt="Esta es la imagen de una Cebolla">
                    <figcaption>Esta es la imagen de una Cebolla</figcaption>
                </figure>
            </div>
        </ol>
    </main>
</body>

</html>>
<@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,[email protected],500&family=RocknRoll+One&display=swap');

.titulo {
    color: #9D2AA6;
    font-size: 50px;
    text-align: center;
    font-family: 'RocknRoll One', sans-serif;
}
.subtitulo {
    color: #FF0093;
    font-size: 30px;
    font-family: 'RocknRoll One', sans-serif;
    margin: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.nombres a {
    color: #D031FF;
    font-size: 25px;
    font-family: Josefin Sans;
    text-decoration: dashed;
}
ol{
    display: flex;
    width: 600px;
    justify-content: space-around;
    list-style: none;
    margin: 0 auto;
}
.imagen {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 30px;
}
div{
    text-align: center;
}
figcaption{
    margin-top: 5px;
    text-align: left;
    font-size: 15px;
    font-family: Josefin Sans;
    color: white;
}
body{
    background-color: black;
}>
body{
  background-color: #e6e6e6;
}

h1 {
  color: #23120b;
  font-size: 60px;
}

.subtitulo {
  color: #21209c;
}

a {
  color: #21209c;
}

a:hover {
  color: #ffa45b;
  font-size: 20px;
}

.imagen {
  width: 150px;
  padding: 10px 0px 10px 0px;
}

.titulo-seccion {
  font-size: 25px;
  color: #222831;
}

Estoy todo emocionado que le estoy entendiendo a esta clase xD

No hice muchos cambios pero se ve bien

Mi lista .jpg

codigo HTML

<!DOCTYPE html>
	<html lang="es">
	<head>
    	<meta charset="UTF-8">
    	<meta name="description" content="Esta pagina te mostrara fotos de gatos"/>
    	<meta name="robots" content="index,follow">
    <title>Compras</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
</head>
<body class="bodycontainer">
    <h1 class="titulo">Lista de compra.</h1> 
    <main>
        <figure>
            <img class="frutaimagen" src="./Imag/Fruta.jpg" alt="Imagen de frutas">
            <img class="carneimagen" src="./Imag/Carne.jpg" alt="Imagen de la carne">
            <img class="verduraimagen" src="./Imag/Verduras.jpg" alt="Imagen de la fruta">
        </figure>
            <div class="textocompra">
                <section class="frutatexto">
                <h3>Frutas</h3>
                <ul>
                    <li>Fresa. 🍓</li>
                    <li>limon. 🍋</li>
                    <li>durazno. 🍑</li>          
                 </ul>
                </section>
                <section class="carnetexto">
                <h3>Carnes</h3>
                <ul>    
                    <a href="https://www.youtube.com/watch?v=uMktbiDm8x8"><li>Carne de hamburguesa.🍔</li></a>
                    <li>tocineta.  🥓 </li>
                    <li>Huevos.  🍳</li>
                    <li>Chorizo. 🍖</li>       
                </ul>
                </section>
                <section class="verduratexto">
                <h3>Verduras</h3>
                <ul>   
                    <li>Avocado. 🥑</li>
                    <li>cebolla. 🧅</li>
                    <li>Tomate. 🍅</li>
                    <li>Ajo. 🧄</li>  
                </ul>
                </section>
            </div>    
    </main>
    <footer>

    </footer>
</body>

codigo CSS

/* class */
.bodycontainer{
 background-color: white;
  background-image: url(./Imag/tablanegra.jpg);  
background-repeat: no-repeat;
 background-size: cover;
}
.titulo {
 font-size: 50px;
	color: #FF9B00; 
  font-family: 'Segoe UI';
font-style: italic;
text-align: center;
vertical-align: middle;
padding: 8px;
border: 4px solid #E8E7E7;
border-radius: 100px;
}

img{
width: auto;
height: 100%;
object-fit: contain;
opacity: 0.9;
}

.frutaimagen {
 height: 220px;
 border: 1px ;
 border-radius: 40px;
	}

.carneimagen{
height: 225px;
border: 1px ;
border-radius: 60px;
position: relative;
left: 5%;
}

.verduraimagen{
height: 225px;
border: 1px ;
border-radius: 70px;
position: relative;
left: 10%;
}

.textocompra {
position: relative;
font-size: 20px;
color: white;
float: left;
width: auto;

}

.frutatexto{
position: relative;
left: 70%;
bottom: 11px;
   
}

.carnetexto{
position: relative;
left: 720px;
bottom: 165px; 
}

.verduratexto{
position: relative;
left: 1240px;
 bottom: 350px;
}

hola

asi va quedado mi Desafio y esta es la imagen

<body{
    background-color: beige;
  
}

header h1,h2{
    display: flex;
    justify-content: center;
    align-items: center;
}
header p{
    display: inline-block;
    padding: 20px 60px 0px;
    margin-top: auto;
    text-align: justify;
    font-family: 'Times New Roman', Times, serif;
    font-size: large;

}
main{
    padding: 0;
}

.main-ol, .mainbeef, .mainver{
    display: grid;
    height: auto;
    width: auto;
    grid-column-gap: 50px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* background-color: aquamarine;
    border-radius: 30px; */
    
}
.mainbeef, .mainver{
    grid-template-rows: 1fr;
}
figure{
    /* border: thin #c0c0c0 solid; */
    display: flex;
    /* flex-flow: column;
    padding: 25px; */
    margin: 0;
    justify-content: center;
    
}> 

En mi caso estaba creando una pagina de compras de mercado, así va quedando.

<body{
    background-color: rgb(46, 46, 46);
    overflow: auto;
}

#First-title-on-page{
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);
    text-align: center;
}

h2{
    text-align: center;
    font-family:'Times New Roman', Times, serif ;
    font-size: 25px;
    color: rgb(255, 255, 255);
    align-items: center;
    letter-spacing: 0.2cm;
}

.Market-text-items{
    text-align: center;
    color: rgb(202, 74, 0);
    font-family: Arial, Helvetica, sans-serif;
    
}
/*Boxes*/

.Navigation-form{
    background-color: #001868;
    overflow: auto;
    border-color: rgb(0, 0, 0);
    border:0.1cm;
    border-style: solid;
    border-radius: 1%;
    width: 500px;
    height: 25px;
    text-align: center;
    color: rgb(255, 255, 255);
    margin: 2cm;
}

#Consume-things-boxe{
    display: flex;
    justify-content: space-between;
    overflow:auto;
    align-items: center;
}

#Meats-align-box{
    
    margin: 2cm;
   border-radius: 15%;
    padding: 0.5cm;
    background-image:url(../Media/Font-meat.jpg);
}

#Fresh-align-box{
    margin: 2cm;
    border-radius: 15%;
    align-items: center;
    background-image: url(../Media/verde.jpg);
    padding: 0.5cm;
}

#Fruit-align-box{
    margin: 2cm;
    border-radius: 15%;
    align-items: center;
    background-image: url(../Media/Fruitf.jpg);
}

.General-items-aling{
   width: 200px;
   height: 200px;
   border-radius: 20%;
   
}

#Supermarket-place-boxe{
    background-image: url(../Media/Font-MKP.jpg);
    background-repeat: no-repeat;
    background-position: 50%, 50%;
    background-size: cover;
    justify-content: center;
}
> 

Hola a todos, comparto mi aporte con todo lo aprendido hasta ahora. Feliz de pertenecer a la comunidad de Platzi!!!

  • Así quedaria.

con la etiqueta <link rel=''stylesheet' href='style.css'>


Esta es mi lista con estilos

Un pequeño aporte 😅

Notes

<style> information tag

The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

style global attribute

The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

<div style="background: #ffe7e8; border: 2px solid #e66465;">
    <p style="margin: 15px; line-height: 1.5; text-align: center;">
        Well, I am the slime from your video<br>
        Oozin' along on your livin' room floor.</p>
</div>

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

CSS Properties

color

The color CSS property sets the foreground color value of an element’s text and text decorations and sets the <currentcolor> value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.

/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;

/* <hex-color> values */
color: #009900;
color: #009900aa;

/* <rgb()> values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);

/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);

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

font-size

The font-size CSS property sets the size of the font. Changing the font-size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

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

Types of selectors in CSS

CSS Element Selector

The element selector selects HTML elements based on the element name.

p {
  text-align: center;
  color: red;
}

CSS id selector

The id selector uses the id attribute of an HTML element to select a specific element. It is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

#para1 {
  text-align: center;
  color: red;
}

Note: An id name cannot start with a number!

CSS class selector

The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.

.center {
  text-align: center;
  color: red;
}

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

Mi resultado con respecto al reto con css ❤️

La tarea

Los primeros estilos fueron (y me maté buscando el uppercase)

Colocar por medio de una clase (grupo-alimentos) en negrita y mas grandecitos los grupos de alimentos (después le quitaré los números)

Colocar los títulos no tan grandes ()h1 y h2) que se vueran de otro color los en laces relevantes en el footer y el header.

Las imágenes ya las había colocado a tamaño con width="60" como atributo en cada imagen, pero inspeccionando el código (con “inspeccionar”) me fijé en como se coloca margen y al icononito junto a los enlaces le puse un poquito (8px) y les agregé class="icono".

Todos los enlaces llevan azul, porque se convertían en morados cuando se “visited” y cambie la fuente como se vió en el curso de programación básica donde el señor vega decia que la fuente predeterminada es una fuente terrible, por no decir lo que el dijo…😶😅




Lo peor de todo es que aún siento que el tutor va a leer este comentario (por lo cual no se si reir o llorar…) 🤣🤣🤣
\

Les dejo también el código (recortado) del ejercicio

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="Lista de alimentos a comprar en el supermercado." />
		<meta name="robots" content="noindex,nofollow,nocomen" />

		<title>Lista de compras</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<header>
			<h1>Lista de alimentos</h1>
			<h2><a href="../../">Volver a la página de inicio</a></h2>
			<h2>
				<a href="https://github.com/chybeat/platzi-curso-definitivo-de-html-y-css"
					>Ir al repositorio en Github</a
				>
			</h2>
		</header>
		<main>
			<section>
				<p>Listado de alimentos para comprar en el supermercado</p>
				<article>
					<ol>
						<li id="vegetales">
							<p class="grupo-alimentos">Vegetales / Truberculos</p>
							<ul>
								<li>
									<input title="Agregado a carrito" type="checkbox" id="brocoli" /><label
										for="brocoli"
										>Brocoli</label
									>
									<figure>
										<a href="./img/alimentos/brocoli-big.jpg"
											><img
												loading="lazy"
												src="./img/alimentos/brocoli-small.jpg"
												alt="brocoli"
												height="64"
										/></a>
										<figcaption>
											<a
												href="https://www.directoalpaladar.com/recetario/17-recetas-saludables-brocoli-para-restar-calorias-sumar-fibra-a-tus-platos"
												target="_blank"
												title="17 recetas saludables con brócoli para restar calorías y sumar fibra a tus platos"
												><img class="icono receta"
													src="./img/alimentos/receta-icon.svg"
													alt="icono-receta"
													height="16"
												/>Ver recetas con Brocoli</a
											>
										</figcaption>
									</figure>
								</li>
							</ul>
						</li>
					</ol>
				</article>
			</section>
		</main>
		<footer>
			<h2><a href="../../">Volver a la página de inicio</a></h2>
			<h2>
				<a href="https://github.com/chybeat/platzi-curso-definitivo-de-html-y-css"
					>Ir al repositorio en Github</a
				>
			</h2>

			<h3>Enlaces:</h3>
			<ul>
				<li>
					<a href="#vegetales">Vegetales</a>
				</li>
				<li>
					<a href="#frutas">Frutas</a>
				</li>
				<li>
					<a href="#proteinas">Proteinas / carnes</a>
				</li>
				<li>
					<a href="#grasas">Grasas</a>
				</li>
				<li>
					<a href="#salsas-condimentos">Salsas / condimentos</a>
				</li>
				<li>
					<a href="#harinas">Harinas</a>
				</li>
				<li>
					<a href="#granos">Granos</a>
				</li>
				<li>
					<a href="#varios">Golosinas / Bebidas / Varios</a>
				</li>
				<li>
					<a href="#lacteos">Lácteos</a>
				</li>
			</ul>
		</footer>
	</body>
</html>


** El CSS de por ahora:
\

html {
	font-family: Arial, Helvetica, sans-serif;
}
a {
	color: blue;
}

h1 {
	color: orange;
	font-size: 24px;
}

h2,
h2 a {
	color: darkgoldenrod;
	font-size: 18px;
}

/* clases */

.grupo-alimentos {
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

.icono {
	margin-right: 8px;
}

/* ID */

#vegetales {
	color: green;
}

#frutas {
	color: hotpink;
}

#proteinas {
	color: darkred;
}

#grasas {
	color: yellowgreen;
}

#salsas-condimentos {
	color: brown;
}

#harinas {
	color: burlywood;
}

#granos {
	color: green;
}

#varios {
	color: violet;
}

#lacteos {
	color: black;
}

No quedo como quería :c pero espero que en el avance el curso mejore D:

Hola gente hermosa, espero estén muy bien. 😃

Hoy quiero compartirles mi código de html , css y una imagen del reto que nos dejo el profesor, mi objetivo es que alguno de ustedes o varios de ustedes compartan conmigo una forma mas optima de realizar el reto, yo lo realice de la siguiente manera, aclaro soy aprendiz y esta fue mi solución.
Les agradezco su aporte.


Codigo html

<!DOCTYPE html>
<html lang=“es”>
<meta charset=“UTF-8” />
<meta name=“description” content=“esta pagina mostrara trabajos relacionados con publicidad, litigrafia” /> <!-- aqui va el mensaje donde se lee un poco mas al pie de la busqqueda de la pagina–>
<meta name=“robots” content=“index,follow” /> <!-- esta line le dice a los robots de busquedas filtrar y buscar por palabras clavesla pagina–>
<title>Lista del supermercado pie de pagina</title> <!-- aqui indicamos el titulo del heard paginaencabezado–>
<meta name=“viweport” content=“width=device-width, inictial-scale=1.0”> <!-- esta linea maneja el tamaño de la letra cuando se abra la pagina en dispositivos moviles–>
<link rel=“stylesheet” href="./listaSuperCss.CSS"> <!–En esta linea de codigo incluyo mi archivo de css estilo, es esencial. -->
</head>
<body>
<header>
<h3>Lista del supermercado</h3> <!-- esta etiqueta es para colocar titulos y llega hasta h6 variando el tamaño–>
</header>
<main>
<ul>
<li> <u> <strong> <h2>Verduras</h2></strong> </u></li>
<ol>
<figure>
<li><a href=“https://www.youtube.com/watch?v=nGfdyzWxBW0&ab_channel=Lasrecetastradicionalesdecocina” target="_blank">Tomate</a></li>
<img src="./fotoslistasuper/tomates.jpg" alt=“Estos son tomates frezcos”/>

              <figcaption>
                 Img de tomates frezcos
              </figcaption>
            </figure>

           <figure>
              <li> Zanahoria </li>
              <img src="./fotoslistasuper/Zanahoria-1140x703.jpg" alt="Estos son zanahorias"/>
              <figcaption>
                 Img de zanahorias
              </figcaption>
           </figure>

           <figure>
              <li> Pimentones </li>
              <img src="./fotoslistasuper/pimentones.jpg"/>
              <figcaption>
                 Img de Pimentones
              </figcaption>
           </figure>
           
           <figure>
              <li> Ajo </li>
              <img src="./fotoslistasuper/ajos.jpg"/>
              <figcaption>
                 Img de ajos
              </figcaption>
           </figure>
           
           <figure>
              <li> Pepinos </li>
              <img src="./fotoslistasuper/pepinos.jpg"/>
              <figcaption>
                 Img de Pepinos
              </figcaption>
           </figure>
           
           <figure>
              <li> Repollo </li>
              <img src="./fotoslistasuper/repollo.jpg"/>
              <figcaption>
                 Img de Repollo
              </figcaption>
           </figure>
        </ol>

        <li> <u> <strong><h2>Frutas</h2></strong> </u></li>
         <ol>
           <img src="./fotoslistasuper/manzanas.jpg"/>
           <li><a href="https://www.youtube.com/watch?v=yEMWUPVbhj0&ab_channel=JenniferSalasPostres" target="_blank">Manzanas</a></li>
           <img src="./fotoslistasuper/mandarinas.jpg"/>
           <li> Mandarinas </li>
           <img src="./fotoslistasuper/melon.jpg"/>
           <li> Melon </li>
           <img src="./fotoslistasuper/sandia.jpg"/>
           <li> Sandia </li>
           <img src="./fotoslistasuper/Guanabana.jpg"/>
           <li> Guanabana </li>
           <img src="./fotoslistasuper/Maracuya.jpg"/>
           <li> Maracuya </li>
        </ol>

        <li> <u> <strong> Carnes </strong> </u></li>
         <ol>
           <img src="./fotoslistasuper/pechuga.jpg"/>
           <li><a href="https://www.youtube.com/watch?v=dKKhds3zmrc&ab_channel=%C2%A1QueVivaLaCocina%21" target="_blank">Pechuga</a></li>
           <img src="./fotoslistasuper/carne_19.jpg"/>
           <li> res </li>
           <img src="./fotoslistasuper/cerdo.jpg"/>
           <li> Cerdo </li>
        </ol>
    
  </ul> <!-- esta son eqtiquetas de listas ul lista desordenada-->
 </main> 
 <footer></footer> <!-- aqui es donde se coloca la informacion de contacto de final de pagina-->
 <p></p> <!-- esta es una etiqueta que pone un titulo grande-->
</body>

</html>


Codigo CSS

h3 {
color:green;
font-size: 25px;
}

img{
width: 100px;
height: auto;
}


IMAGEN

No es mucho pero es trabajo honesto haha poco a poco! 🙌🏼