Iniciando o projeto de E-commerce, desafio de Frontend do Programa ONE

Olá, seja muito bem vindo(a), no artigo de hoje vamos começar a desenvolver o desafio de Frontend do Programa ONE, turma 3 da qual estou participando. O desafio em si trata do desenvolvimento de um e-commerce voltado a games, com um design bem simples e elegante. 

Enquanto desenvolvo esse projeto, irei documentar o processo em artigos e no final colocarei o projeto no github e no meu portfólio, a ideia não é copiar o design, mas sim produzir um e-commerce próprio, que tenha o meu estilo.

Iniciarei construindo uma pasta para armazenar os meus arquivos chamada “loja-jogos-player-one”, em seguida criaremos a estrutura inicial das pastas de arquivos ( https://francileudo-frontend.blogspot.com/2022/08/02-estruturando-pastas-e-arquivos-em-um.html). Após isso, construí a estrutura inicial do HTML e adicionei o reset no CSS global, como tentarei construir outras páginas além da inicial, terei um global.css para adicionar a estilização comum a todas elas.

Antes de começar a construir o projeto instalei o commitzen, não é obrigatório mas gosto dos meus commits padronizados no github ultimamente. Tem um tutorial que eu fiz, bastante simples (https://francileudo-frontend.blogspot.com/2022/08/tutoriais-configurando-o-commitzen.html).

Agora, partindo para o nosso projeto, temos inicialmente que construir o header dele, nesse ponto eu já divido o HTML nas três tags <header>, <main> e <footer>, uma abaixo da outra. Indo para o header eu primeiro adicionei duas divs onde a primeira teria um ícone de controle de videogame do iconify e o nome da loja, já no segundo eu adicionei um botão de login ver se consigo deixá-lo funcional mais para frente (desafio).

Nesse momento, decidi não escolher cores para o site e estilizar o header com o básico: display flexível; alinhamento de itens e botão em cinza mesmo. Ainda irei ver uma paleta de cores legal para já começar a utilizar no próximo artigo. 

O código atual do projeto se encontra no meu github no seguinte repositório: https://github.com/fransilva0/e-commerce-player-one. A medida que for construindo e escrevendo os artigos do projeto, vou atualizando o repositório para que você tenha acesso aos códigos e também para adicionar ao meu portfólio no final, rsrs. Um abraço e até a próxima.

publicação original: https://francileudo-frontend.blogspot.com/2022/10/iniciando-o-projeto-de-e-commerce.html