Layout-StructBoost

Projeto básico de layout com Html e Css

LINK do Projeto:

https://layout-structboost.netlify.app/

Structboost - 1° Projeto do Codeboost

LINK do Figma:

https://www.figma.com/file/W6LAZ1sDyDYS1nakb5vVRa/Struct-Boost-%7C-Codeboost?type=design&node-id=0-1&mode=design

Parte 1 - Configurações iniciais

• Criação da estrutura de pastas.
• Configuração de Resets CSS.
• Configurção de fontes.

Parte 2 - Criando o Style Guide

• Definição de variáveis de cores.
• Configuração de padrões de tipografia.
• Criação do Grid principal (layout).

Parte 3 - Criando os componentes

• Organização do CSS.
• Criação de padrões (componentes) que se repetem no projeto.

Parte 4 - Exportando imagens do Figma

• Exportação das imagens utilziadas no Figma.

Parte 5 - Header

• Codificando o Header do projeto.
• Uso de tags semânticas e display flex.

Parte 6 - Section Hero

• Codificando a Section Hero ("s-hero") do projeto.
• Lembrando que amplamente utilizado no universo web, um hero é uma seção que tem como objetivo destacar algo, ocupando toda a largura da tela (e opcionalmente toda a altura), preenchendo-a geralmente com uma imagem ou uma cor de fundo, aplicando sempre uma ideia central.
• Uso dos conceitos overflow, z-index, position relative e absolut, ::before e ::after.

Parte 7 - Section "Transformando Ideias em Realidade Digital!"

• Codificando a section "s-digital".
• Posicionamento de componentes, previamente codificados, com Display Flex.

Parte 8 - Section "Domine a Arte do Front-end"

• Codificando a section "s-art".
• Posicionamento de componentes, previamente codificados, com Display GRID.

Parte 9 - Section "newsletter"

• Codificando a section "s-newsletter".

Parte 10 - Footer

• Codificando o Footer.

Parte 11 - Responsividade (Parte 1)

• Utilizando media query (@media).
• Aplicando responsividade no header.
• Aplicando responsividade na section "s-hero".
• Aplicando responsividade na section "s-digital".

Parte 12 - Responsividade (Parte 2)

• Aplicando responsividade na section "s-arte".
• Aplicando responsividade na section "s-newsletter".
• Aplicando responsividade no footer.

Parte 13 - Animações

• Aplicação de efeitos com Keyframes.
• Aplicação de efeitos com a biblioteca AOS (Animate On Scroll Library).