https://github.com/denetodev/blog-preview-card

Este projeto é um cartão de pré-visualização de blog, criado como parte de um desafio do Frontend Mentor. Utiliza HTML5, CSS e Bootstrap para um design responsivo e elegante, exibindo imagem, título, resumo, data de publicação e informações do autor.
https://github.com/denetodev/blog-preview-card

bootstrap5 css3 design html5 mobile-first-workflow semantic-web website

Last synced: 21 days ago
JSON representation

Este projeto é um cartão de pré-visualização de blog, criado como parte de um desafio do Frontend Mentor. Utiliza HTML5, CSS e Bootstrap para um design responsivo e elegante, exibindo imagem, título, resumo, data de publicação e informações do autor.

• Host: GitHub
• URL: https://github.com/denetodev/blog-preview-card
• Owner: denetodev
• Created: 2024-08-17T16:58:09.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-17T19:47:57.000Z (4 months ago)
• Last Synced: 2024-11-19T05:58:22.979Z (about 1 month ago)
• Topics: bootstrap5, css3, design, html5, mobile-first-workflow, semantic-web, website
• Language: HTML
• Homepage: https://deusdeteneto.github.io/Blog-preview-card/
• Size: 236 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Blog Preview Card Solution

Este projeto é uma solução para o [desafio de cartão de pré-visualização de blog no Frontend Mentor](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS). Os desafios do Frontend Mentor ajudam a melhorar suas habilidades de codificação ao construir projetos realistas.

## Índice de conteúdos

- [Visão geral](#visão-geral)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [Meu processo](#meu-processo)

  - [Construído com](#construído-com)

  - [O que eu aprendi](#o-que-eu-aprendi)

  - [Desenvolvimento contínuo](#desenvolvimento-contínuo)

  - [Recursos úteis](#recursos-úteis)

- [Autor](#autor)

- [Agradecimentos](#agradecimentos)

## Visão geral

### Screenshot

![Screenshot do Projeto](https://raw.githubusercontent.com/deusdeteneto/Blog-preview-card/main/design/desktop-design.jpeg)

### Links

- URL da Solução: [Adicionar URL da solução aqui](https://www.frontendmentor.io/solutions/blog-preview-card-2SsC28zUFI)

- URL do Site: [Adicionar URL do site aqui](https://deusdeteneto.github.io/Blog-preview-card/)

## Meu processo

### Construído com

- HTML5 semântico

- Propriedades personalizadas de CSS

- Flexbox

- Bootstrap 5.3.3

- Workflow mobile-first

### O que eu aprendi

Durante o desenvolvimento deste projeto, aprendi a aplicar técnicas de centralização de elementos e a utilizar classes utilitárias do Bootstrap para estilizar o componente de maneira eficiente. Também trabalhei na criação de um layout responsivo que se adapta bem a diferentes tamanhos de tela.

Aqui está um exemplo de código que utilizei:

```html

  

    

  

```

### Desenvolvimento contínuo

Para projetos futuros, desejo aprimorar minha habilidade em trabalhar com CSS Grid e explorar mais recursos avançados do Bootstrap. Também pretendo continuar melhorando a semântica do HTML e otimizar a performance dos sites que desenvolvo.

### Recursos úteis

- [Documentação do Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) - A documentação oficial do Bootstrap foi essencial para entender como utilizar classes utilitárias e componentes de forma eficiente.

- [CSS Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Este guia foi muito útil para entender as nuances do Flexbox e como aplicar essas técnicas no projeto.

## Autor

- LinkedIn - [Deusdete Neto](https://www.linkedin.com/in/deusdeteneto)

- Frontend Mentor - [@deusdeteneto](https://www.frontendmentor.io/profile/deusdeteneto)

- GitHub - [Deusdete Neto](https://github.com/deusdeteneto)

## Agradecimentos

Gostaria de agradecer à comunidade do Frontend Mentor pelos desafios inspiradores e pelo feedback construtivo durante este projeto.