fm recipe page

Mentor de front -end - Solução de página de receita

Esta é uma solução para o desafio da página de receita no mentor do front -end. Os desafios do mentor do front -end ajudam a melhorar suas habilidades de codificação, construindo projetos realistas.

Índice

• Visão geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Construído com
  • O que eu aprendi
  • Desenvolvimento contínuo
  • Recursos úteis
• Autor
• Agradecimentos

Visão geral

O desafio

O resumo deste projeto foi criar a página de receita e fazer com que pareça o mais próximo possível do design, começando com os seguintes ativos:

• JPEG Design Arquivos para layouts para celular e desktop
• Guia de estilo para fontes, cores, etc.
• Ativos de imagem otimizados
• Arquivos de fonte variável e estática
• Arquivo html com conteúdo pré-escrito

Captura de tela

Links

• Solução de mentor de front -end
• Repositório do GitHub
• Site ao vivo

Meu processo

Construído com

• Marcação semântica HTML5
• Propriedades personalizadas do CSS
• Fluxo de trabalho com primeiro celular

O que eu aprendi

Esta solução inclui três coisas que eram novas para mim:

• Marcadores de listas de estilo
• Modelando tabelas HTML
• Usando consultas de mídia

A página de receita contém duas listas não ordenadas com tempo de preparação e ingredientes, respectivamente, e uma lista ordenada com as instruções.

Para a lista ordenada, estilizei os balcões usando o ::marker :

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

O estilo dos marcadores da lista para as listas não ordenadas foi um pouco mais desafiador. No arquivo de design do JPEG para o layout móvel, os marcadores não ficam ao lado da primeira linha de texto, mas estão centralizados na vertical se o conteúdo do texto do item da lista envolver duas linhas. Usei marcadores personalizados com o ::before elemento pseudo-elemento para posicionar os marcadores com o FlexBox:

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

Para uma melhor acessibilidade, usei role="list" nos elementos <ul> no HTML. Sem ele, list-style: none faz com que o navegador Safari não reconheça mais as listas na árvore de acessibilidade, e o leitor de tela não anunciaria mais informações como o número de itens.

Desenvolvimento contínuo

Eu preciso aprender a otimização da imagem! Atualmente, o maior arquivo deste projeto é a captura de tela que fiz para este ReadMe. Aprendi a otimizar os arquivos de fonte. Agora, o tamanho do arquivo da captura de tela é maior que o tamanho de todos os arquivos de fonte combinados.

Recursos úteis

• Estilo de lista criativa de Michelle Barker para web.de - Este artigo me ajudou a descobrir como estilizar os marcadores da lista para as listas ordenadas e não ordenadas.
• Tabelas de estilo no MDN - Este artigo é uma boa atualização para técnicas básicas de estilo de tabela.

Autor

• Mentor de front -end - @sabineemden
• Mastodon - @sabineemden

Agradecimentos

Este projeto usa a redefinição CSS de Josh Comeau.

As famílias de fontes usadas neste projeto são jovens serif e roupas. As fontes são licenciadas sob a licença de fonte aberta.