Testimonial Grid Website

This repository contains the source code for a website developed using HTML and Tailwind CSS. It demonstrates how Tailwind CSS can be used to create modern and responsive layouts efficiently. The testimonials are displayed in a grid that adapts to different screen sizes, providing an excellent user experience on both mobile devices and desktops.

Certificate of Completion

This project was developed during the course Tailwind CSS From Scratch | Learn By Building Projects, taught by Brad Traversy.
You can view the certificate of completion below:
Certificate of Completion

Table of Contents

• Installation
• Using VSCode and the GoLive Extension
• Main Features
• Folder Structure

Installation

1. Clone the repository:

   git clone https://github.com/your-username/your-repository.git
   

2. Navigate to the project directory:

   cd your-repository
   

Using VSCode and the GoLive Extension

To view the website locally, you can use Visual Studio Code with the GoLive extension. Follow the steps below:

1. Install Visual Studio Code: If you do not have VSCode installed, download it here.

2. Install the GoLive extension:

   • Open VSCode.
   • Go to the Extensions tab (or press Ctrl+Shift+X).
   • Search for "Live Server" and install the extension by Ritwick Dey.

3. Open the project in VSCode:

   • Navigate to the project directory and right-click.
   • Select "Open with Code" (or open VSCode and use File > Open Folder...).

4. Start the GoLive server:

   • With the project open in VSCode, right-click the index.html file in the sidebar.
   • Select "Open with Live Server".
   • This will open a new browser window with the website rendered.

Main Features

Testimonials Section

• Testimonials Grid: Displays testimonials from graduates who have completed a bootcamp, sharing their experiences and success stories.
• Images and Names: Each testimonial includes an image of the graduate and their name, emphasizing the authenticity of the testimonials.
• Responsive Design: Utilizes Tailwind CSS to create a responsive layout that adapts to different screen sizes.

Use of Tailwind CSS

• Efficient Styling: The project makes extensive use of Tailwind CSS to style components quickly and efficiently.
• Utility Classes: Uses Tailwind CSS utility classes to apply styles directly in the HTML, making the code easy to maintain and read.

Folder Structure

├── css
│   └── style.css        # Main CSS file
├── images
│   └── ...              # Images used on the website
├── index.html           # Main HTML file
├── input.css            # Input CSS file
├── package-lock.json    # Package lock file
├── package.json         # Project manifest file
└── tailwind.config.js   # Tailwind CSS configuration file

Testimonial Grid Website

Este repositório contém o código-fonte de um site desenvolvido em HTML e Tailwind CSS. Demonstrando como o Tailwind CSS pode ser utilizado para criar layouts modernos e responsivos de maneira eficiente. Os depoimentos são apresentados em uma grade que se adapta a diferentes tamanhos de tela, proporcionando uma ótima experiência de usuário em dispositivos móveis e desktops.

Certificado de Conclusão

Este projeto foi desenvolvido durante o curso Tailwind CSS From Scratch | Learn By Building Projects, ministrado por Brad Traversy.
Você pode visualizar o certificado de conclusão abaixo:
Certificado de Conclusão

Índice

• Instalação
• Usando o VSCode e a Extensão GoLive
• Funcionalidades Principais
• Estrutura de Pastas

Instalação

1. Clone o repositório:

   git clone https://github.com/seu-usuario/seu-repositorio.git
   

2. Navegue até o diretório do projeto:

   cd seu-repositorio
   

Usando o VSCode e a Extensão GoLive

Para visualizar o site localmente, você pode usar o Visual Studio Code com a extensão GoLive. Siga os passos abaixo:

1. Instale o Visual Studio Code: Se você não tem o VSCode instalado, baixe-o aqui.

2. Instale a extensão GoLive:

   • Abra o VSCode.
   • Vá para a aba de Extensões (ou pressione Ctrl+Shift+X).
   • Pesquise por "Live Server" e instale a extensão de Ritwick Dey.

3. Abra o projeto no VSCode:

   • Navegue até o diretório do projeto e clique com o botão direito.
   • Selecione "Abrir com Code" (ou abra o VSCode e use Arquivo > Abrir Pasta...).

4. Inicie o servidor GoLive:

   • Com o projeto aberto no VSCode, clique com o botão direito no arquivo index.html na barra lateral.
   • Selecione "Open with Live Server".
   • Isso abrirá uma nova janela do navegador com o site renderizado.

Funcionalidades Principais

Seção de Depoimentos

• Grade de Depoimentos: Exibe depoimentos de graduados que completaram um bootcamp, compartilhando suas experiências e histórias de sucesso.
• Imagens e Nomes: Cada depoimento inclui uma imagem do graduado e seu nome, enfatizando a autenticidade dos depoimentos.
• Design Responsivo: Utiliza Tailwind CSS para criar um layout responsivo que se adapta a diferentes tamanhos de tela.

Uso do Tailwind CSS

• Estilização Eficiente: O projeto faz uso extensivo do Tailwind CSS para estilizar componentes de forma rápida e eficiente.
• Classes Utilitárias: Usa classes utilitárias do Tailwind CSS para aplicar estilos diretamente no HTML, tornando o código fácil de manter e ler.

Estrutura de Pastas

├── css
│   └── style.css        # Arquivo CSS principal
├── images
│   └── ...              # Imagens usadas no site
├── index.html           # Arquivo HTML principal
├── input.css            # Arquivo CSS de entrada
├── package-lock.json    # Arquivo de bloqueio de versão de pacote
├── package.json         # Arquivo de manifesto do projeto
└── tailwind.config.js   # Arquivo de configuração do Tailwind CSS