Skip to content

CarolineCDFreitas/Projeto-Final-Mod1-LOreal-Paris

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Página Inicial da L'Oréal Paris - Desktop e Mobile

Esse é o projeto final do módulo 1 do Curso Vai Na Web. O objetivo era criar, a partir de um arquivo do Figma, uma página inicial da L'Oréal Paris para desktop e para mobile.

As especificações do projeto foram:

  • Uso de HTML Semântico;
  • SCSS organizado;
  • Nomenclatura Coerente;
  • Design Responsivo.

Referência 🔎

Aprendizados 📖👩🏾‍💻

O principal objetivo do projeto foi aplicar todo o conteúdo aprendido no módulo 1, que englobou HTML e SASS, respectivamente focando em marcação e estilização.

Alguns dos tópicos aplicados foram:

HTML 👷🏾‍♀️

  • Boas práticas de SEO (como a tag meta description);
  • Boas práticas de acessibilidade;
  • Escrita compatível com a semântica da linguagem;
  • O uso de links externos, como o do .css, Google Fonts, etc.)

SASS 🧑🏾‍🎨🎨

  • Reset (*);
  • Flexbox;
  • Box Model;
  • Position;
  • Uso da função clamp();
  • Nesting;
  • Media queries;
  • Medidas relativas;
  • Pseudo-classes;
  • Tipografia;
  • O conceito de "Everything in CSS is a box 📦".

GIT E GITHUB 💻🚅

  • Iniciar e criar repósitorios locais e remotos;
  • Fazer commits de alterações;
  • Enviar alterações para o repositório remoto com push;
  • Criar e atualizar o arquivo README.md.

Screenshots 📸

Mobile 📱

Mobile Version

Mobile version2

Mobile version Paisagem

Mobile version Paisagem2

Tablet 🔳

Tablet version

Tablet version2

Desktop 💻

Desktop version

Desktop version2

Recursos 📚💻

Ferramentas 🪛

Documentação 📘

Vídeos 📹

CHEAT SHEET

Dicas 💡

  • O conceito de Mobile First é mais fácil de implementar do que parece;
  • Use bordas para visualizar melhor a estrutura CSS/SCSS;
  • Se você ainda está se familiarizando com Media Queries, pode começar criando arquivos diferentes para cada dispositivo e depois mesclar;
  • Tudo bem errar, tudo bem dar um tempo, mas nunca desista!;
  • Dica de ouro: Leia sempre!! É tudo linguagem, e você precisa ler e entender!

About

Projeto Final do Módulo 1 do Curso de Front-End do Vai Na Web

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published