Autoral - Desenvolvimento do Projeto Website MochaFrap | Coffee

Desenvolvimento próprio do design e codificação do projeto website MochaFrap.

Indíce

Visão Geral

Desafio | Screenshot | Links

Meu Processo

Construído com | O que eu aprendi | Recursos úteis

Considerações Finais

Autor

Visão Geral

Desafio

O desafio foi construir este projeto por inteiro, incluindo o design e layout. Os usuários devem ser capazes de:

• Vizualizar o layout ideal tanto para dispositivos mobiles quanto para desktops;
• Vizualizar os estados de foco para elementos interativos.

Screenshot

Links

• URL da solução: Index
• URL do site: Site

Meu processo

Construído com

• HTML5 com tags semânticas;
• Propriedades personalizadas de CSS;
• Acessibilidade;
• Flexbox;
• Media-queries;
• Mobile first.

O que eu aprendi

• Linkar fontes externas;
• Utilizar variáveis no CSS;
• Acessibilidade web;
• Trabalhar com o flexbox;
• Desenvolver uma página responsiva, com mobile first.

 <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=Roboto:wght@400;700&display=swap" rel="stylesheet">

:root {
  --fonte-principal: "Roboto";
}

body {
  font-family: var(--fonte-principal);
}

.produto__icones {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
  
@media screen and (min-width: 1024px) {}

Recursos úteis

• Guia Completo do Flexbox - Este é um artigo incrível que me ajudou a entender melhor de como funciona o Flexbox e quais são suas propriedades.
• Media Queries - Este é um outro artigo do mesmo autor que também foi muito importante para eu ter uma melhor noção sobre as dimensões de telas dos dispositivos móveis.

Considerações Finais

Autor

• Website - Beatriz Slan
• Linkedin - in/beatriz-slan