🚀 Tech News - Priscila Moura

O Tech News é um portal de notícias dedicado a cobrir notícias da área tech. Ele foca em estruturação semântica de um portal de notícias real e layouts modernos com CSS avançado. Este protótipo faz parte dos meus estudos na Faculdade de Tecnologia Rocketseat.

📝 Sobre o Projeto

O objetivo foi criar um portal de notícias tecnológico funcional e visualmente impactante. Através deste projeto, consolidei conhecimentos práticos de CSS Grid para o layout principal e Flexbox para componentes de navegação, seguindo um design moderno e organizado.

🎨 Design System e Planejamento

Antes de codar, estudei o guia de estilos para garantir que a tipografia e as cores estivessem em harmonia. Utilizei o conceito de CSS Variables no :root para garantir que a tipografia e as cores estivessem em harmonia, facilitando a manutenção do código.

💻 Seções em Destaque

🛠️ Grid de Notícias

Nesta seção, utilizei CSS Grid com grid-template-areas para criar um layout complexo e organizado. Cada card de notícia possui efeitos de interatividade e sobreposição de gradientes.

📱 Navegação e Menu

O cabeçalho foi construído com Flexbox e Grid, garantindo que o logo, o menu e a busca fiquem perfeitamente alinhados em qualquer tela.

🚀 Tecnologias Utilizadas

• HTML5: Estrutura semântica com tags como article, aside e section.
• CSS3: Uso de Variáveis, Grid Layout, Flexbox e CSS Nesting.
• Figma: Planejamento visual.
• VS Code: Ambiente de desenvolvimento e organização de pastas.

📚 O que eu aprendi?

• O poder do CSS Grid: Entendi como criar layouts de grade complexos de forma muito mais simples que o modelo tradicional.
• Variáveis CSS: Aprendi a centralizar o estilo do projeto, tornando-o escalável e fácil de modificar.
• Organização Profissional: Como separar o CSS em arquivos (header.css, sections.css, utility.css) para facilitar a leitura.

Por Priscila Moura 🦊