Primeiro Front-End - Blog Responsivo

📝 Descrição

Este projeto é um blog simples e totalmente responsivo, desenvolvido com HTML, CSS, Bootstrap, jQuery e JavaScript. O objetivo principal é criar uma página que se adapte a diferentes tamanhos de tela, como desktops, tablets e dispositivos móveis.

Este blog foi desenvolvido para demonstrar como podemos criar layouts responsivos que melhoram a experiência do usuário, independentemente do dispositivo utilizado.

Imagem do Blog:

Link do vídeo

🔧 Tecnologias Utilizadas

• HTML: Estruturação do conteúdo do blog.
• CSS: Estilização e criação da responsividade para o layout.
• Bootstrap: Framework utilizado para acelerar o desenvolvimento da interface e garantir uma boa responsividade.
• jQuery: Biblioteca JavaScript para simplificar a manipulação do DOM e adicionar interatividade.
• JavaScript: Utilizado para adicionar funcionalidades interativas ao blog.

🛠️ Como foi feito

1. Estrutura HTML:

A estrutura do blog foi criada utilizando HTML5, com a utilização de elementos semânticos, como <header>, <main>, <section>, e <footer>, que ajudam a organizar melhor o código, tornando-o mais legível e fácil de manter.

2. Responsividade com CSS e Bootstrap:

Para garantir que o blog seja responsivo, utilizamos CSS e o framework Bootstrap. O Bootstrap ajuda a criar layouts que se adaptam automaticamente a diferentes dispositivos e tamanhos de tela. O uso de media queries também foi essencial para ajustar o layout em dispositivos de diferentes tamanhos.

3. Interatividade com jQuery e JavaScript:

• jQuery foi utilizado para manipulação do DOM de forma simplificada e para adicionar interações dinâmicas, como animações e efeitos de transição.
• JavaScript foi usado para implementar funcionalidades interativas no blog, como a atualização de conteúdo sem a necessidade de recarregar a página.

4. Design Adaptável:

O design foi feito para ser adaptável a diferentes resoluções de tela, garantindo que o blog fique bem em dispositivos como:

• Desktops grandes.
• Tablets.
• Celulares.

Além disso, a navegação e os outros elementos do blog foram ajustados para ficarem acessíveis e responsivos em qualquer tipo de tela.

⭐ Como Rodar o Projeto

1. Clone o Repositório:

Para rodar este projeto localmente, clone este repositório em sua máquina:

git clone https://github.com/jhonatanthiago/primeiro-front-end.git

2. Abra o Projeto:

Após clonar o repositório, entre na pasta do projeto e abra o arquivo index.html no seu navegador:

cd primeiro-front-end

3. Verifique o Blog Responsivo:

Agora você pode ver o blog em ação no seu navegador, testando a responsividade ao redimensionar a tela ou visualizando-o em diferentes dispositivos.

📋 O que foi feito

• Estruturação do layout: A página foi criada com a estrutura básica de um blog, com áreas de cabeçalho, conteúdo e rodapé.
• Design Responsivo: A principal tarefa foi garantir que o design fosse responsivo. Isso foi feito com a utilização de Bootstrap, media queries e o modelo de layout flexível (Flexbox).
• Interatividade: Foram implementados efeitos interativos utilizando jQuery e JavaScript para melhorar a experiência do usuário.

📝 Licença

Este projeto está licenciado sob a licença MIT - veja o arquivo LICENSE para mais detalhes.

Alterações feitas:

1. Tecnologias Utilizadas: Adicionei Bootstrap, jQuery e JavaScript nas tecnologias usadas no projeto.
2. Como foi feito: Expliquei o uso do Bootstrap para facilitar a criação de um layout responsivo, a utilização do jQuery para manipulação do DOM e animações, e o uso de JavaScript para adicionar interatividade.
3. O que foi feito: Acrescentei a implementação de funcionalidades interativas com jQuery e JavaScript.

Com essas atualizações, o README agora reflete melhor as tecnologias utilizadas no seu projeto e fornece uma explicação clara de como o blog foi feito!