Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/daviteixeira-dev/website-with-just-html-css-and-javascript

This project is a responsive website developed entirely with HTML, CSS and JavaScript, with a mobile-first approach, the site has been carefully optimized for SEO, including meta tags, structured data and several best practices to improve performance in Google searches.
https://github.com/daviteixeira-dev/website-with-just-html-css-and-javascript

css html javascript mobile-first seo

Last synced: about 2 months ago
JSON representation

This project is a responsive website developed entirely with HTML, CSS and JavaScript, with a mobile-first approach, the site has been carefully optimized for SEO, including meta tags, structured data and several best practices to improve performance in Google searches.

Awesome Lists containing this project

README 

        
# Site de Reviews e Blog






Este é um projeto desenvolvido com o objetivo de oferecer uma visão completa e imparcial sobre os melhores cursos de manicure e pedicure disponíveis online. No site, o usuário pode explorar reviews detalhados, vantagens de cada curso e respostas às dúvidas mais comuns, com a possibilidade de comparar cursos e escolher o que mais se adequa às suas necessidades e aspirações profissionais.



Hospedado na Vercel e otimizado para SEO e performance, o site é totalmente responsivo e oferece uma experiência aprimorada tanto para usuários de dispositivos móveis quanto para tablets e desktops.



## ✨ Funcionalidades



### 📝 Página Principal - Reviews de Cursos



- Descrição dos Cursos: Listagem dos principais cursos com análises detalhadas, incluindo vantagens, diferenciais e principais informações sobre cada um.

- Botões de Ação: Cada curso conta com um botão de ação que direciona o usuário para a página de venda oficial.

- Seção de Vantagens: Descreve as principais vantagens dos cursos, ajudando o usuário a entender os benefícios de investir em cada um.

- Perguntas Frequentes: Responde às dúvidas mais comuns sobre os cursos de manicure e pedicure, facilitando a tomada de decisão.



### 📚 Blog



- Artigos Complementares: Conteúdo adicional que explora temas do universo da manicure e pedicure, com dicas, tendências e práticas do mercado. Este espaço visa atrair e engajar usuários, oferecendo informações relevantes e de valor.



## 🛠 Tecnologias Utilizadas



Este site foi construído utilizando as tecnologias básicas de desenvolvimento web:



- HTML5: Marcações semânticas para SEO e acessibilidade;

- CSS3: Design responsivo com abordagem "mobile-first" e uso de media queries para adaptação em telas de tablet e desktop;

- JavaScript: Interatividade básica e otimização da experiência do usuário.



## 🚀 Processo de Desenvolvimento



1. Mobile-First: Todo o design foi inicialmente concebido para dispositivos móveis, ajustando-se gradualmente para telas maiores via media queries.

2. SEO e Indexação: Site configurado com todas as meta tags essenciais para SEO e estruturação com robots.txt. O projeto foi cadastrado no Google Search Console para monitoramento de indexação e análise de tráfego orgânico.

3. Otimizações de Performance:

   - Imagens em Formato WebP: Todas as imagens foram convertidas para WebP, com variações de tamanho para diferentes dispositivos.

   - Preload de Fontes e CSS: Priorização de recursos essenciais para melhorar o tempo de carregamento.

   - Defer no JavaScript: Scripts carregados de forma assíncrona para evitar bloqueio de renderização.

   - Configurações de Cache: Melhorias de cache para otimizar o carregamento nas visitas subsequentes.

4. Auditoria e Melhoria de Performance: Após concluir o desenvolvimento, o site foi auditado com o PageSpeed Insights, com ajustes realizados para garantir pontuação máxima em: Performance; SEO; Boas Práticas e Acessibilidade.

5. 📊 Dados Estruturados: Implementação de dados estruturados para otimizar a visibilidade nas pesquisas do Google, exibindo informações detalhadas sobre os cursos diretamente nos resultados de busca e potencializando o tráfego orgânico.



## 🌐 Deploy



O site está hospedado na Vercel, com integração ao Google Search Console para monitoramento de indexação e análise de tráfego.



## 👀 Como Visualizar o Projeto



Para ver o site ao vivo, acesse: Link para o Site.



## 💯 Pontuação no Lighthouse



Após todas as otimizações, o site obteve pontuação máxima em:






## 🔍 Conclusão



Este projeto é um exemplo completo de site responsivo, otimizado para performance e SEO, com foco em oferecer uma experiência eficiente e de valor para o usuário.



### 👨‍💻 Desenvolvido por: Davi Teixeira