O projeto VeganFood foi desenvolvido como uma forma de praticar HTML5, CSS3 e Javascript. Trata-se de uma serviço de assinatura de comida vegana, à qual os clientes poderão escolher dentre uma lista de opções os alimentos que mais gostam e assim serão montadas suas refeições pela equipe de Nutricionistas e, posteriormente, entregues a sua casa. Possui 2 planos: Básico e Premium. O projeto foi desenvolvido com HTML Semântico, CSS3 com Flexbox e CSS Grid, metodologia BEM (Block Element Modifier) para nomear classes e vanilla Javascript para fazer os seguintes efeitos: Menu mobile, rolagem suave(smooth scroll), menu scroll fixo e animação ao Scroll. Esse projeto teve como base o curso Build Responsive Real-World Websites with HTML and CSS do professor Jonas Schmedtmann
- Utilizei como base 7-1 architecture pattern para criar os arquivos do SASS dentro do diretório src/scss. Lá consta um arquivo principal chamado main.scss que tem a função de importar os arquivos parciais dentro de sua respectiva pasta.
- Em cada pasta, consta um arquivo index.scss que lista cada um dos outros arquivos, no mesmo diretório, que vão ser incluídos na importação.
- O diretório build consta o arquivo main.css minificado para o deployment do projeto.
- Adicionei SASS ao projeto como uma forma melhor de organizar os diferentes componentes e, por conseguinte, uma melhor manutenção ao mesmo.
O projeto foi desenvolvido com JavaScript, além de HTML5 e SASS(SCSS). Foi usado NPM como gerenciador de pacotes e GULP para compilar SASS em CSS, além de outras dependências utilizadas no desenvolvimento, tais como: Adicionar prefixos proprietários, minificação(compressão).
Para Iniciar o projeto, faça o clone desse repositório ou baixe de forma local em seu sistema. Você pode visualizar clicando no link Veganfood.
Antes de começar, você precisa instalar, em sua máquina, as seguintes ferramentas: Git, Node.js e um editor de código, como VSCode.
Siga as instruções abaixo para obter uma cópia local:
# Clone este repositório.
$ https://github.com/carla-santos/veganfood.git
# Acesse a pasta do projeto no seu terminal/cmd/(Git bash).
$ cd veganfood
# Instale as dependências.
$ npm install
# Execute a aplicação.
$ gulp dev
Utilize uma ferramenta como o Live Server para criar um servidor local e executar o projeto.
- Lançamento inicial
📦 Dependências
- Adiciona as dependências de desenvolvimento: babel, babel-loader, eslint, eslint-config-prettier, webpack e webpack-cli.
- Atualiza as dependências de desenvolvimento: autoprefixer, cssnano, gulp-sass, postcss e sass.
- Elimina as dependências de desenvolvimento: gulp-concat, gulp-rename e gulp-terser.
🧰 Outras mudanças
- Atualiza arquivo de configuração do Webpack.
- Refatora Scroll Suave.
- Cria pasta components .
- Elimina componenente animation fade.
- Refatora Menu mobile.
- Refatora navegação fixa.
- Refatora galeria.
- Refatora Slider.