This repository contains the source code for a website developed using HTML and Tailwind CSS. The website is a prototype for the Clipboard app, which allows users to track and organize everything they copy.
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
-
Clone the repository:
git clone https://github.com/your-username/your-repository.git
-
Navigate to the project directory:
cd your-repository
To view the website locally, you can use Visual Studio Code with the GoLive extension. Follow the steps below:
-
Install Visual Studio Code: If you do not have VSCode installed, download it here.
-
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.
-
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...
).
-
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.
- With the project open in VSCode, right-click the
- Description: Introduces the Clipboard app and its benefits.
- Buttons:
- Download for iOS: Button to download the app for iOS.
- Download for Mac: Button to download the app for Mac.
- Description: Explains how Clipboard stores and organizes copied text snippets.
- Quick Search: Easily search your snippets by content, category, web address, application, and more.
- iCloud Sync: Instantly saves and syncs snippets across all your devices.
- Complete History: Retrieve any snippet from the first moment you started using the app.
- Description: Shows that snippets can be accessed from anywhere.
- Tools:
- Create Blacklists: Easily organize snippets by creating blacklists.
- Plain Text Snippets: Remove unwanted formatting from copied text for a consistent look.
- Sneak Preview: Quick preview of all snippets on your Clipboard for easy access.
- Description: Displays logos of major companies that use or support Clipboard.
- Description: Call to action to download the app.
- Buttons:
- Download for iOS: Button to download the app for iOS.
- Download for Mac: Button to download the app for Mac.
├── 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
Este repositório contém o código-fonte de um site desenvolvido em HTML e Tailwind CSS. O site é um protótipo do aplicativo Clipboard, que permite aos usuários rastrear e organizar tudo o que copiam.
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
-
Clone o repositório:
git clone https://github.com/seu-usuario/seu-repositorio.git
-
Navegue até o diretório do projeto:
cd seu-repositorio
Para visualizar o site localmente, você pode usar o Visual Studio Code com a extensão GoLive. Siga os passos abaixo:
-
Instale o Visual Studio Code: Se você ainda não tem o VSCode instalado, baixe-o aqui.
-
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.
-
Abra o projeto no VSCode:
- Navegue até o diretório do projeto e clique com o botão direito do mouse.
- Selecione "Abrir com Code" (ou abra o VSCode e use
Arquivo > Abrir Pasta...
).
-
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 sendo renderizado.
- Com o projeto aberto no VSCode, clique com o botão direito no arquivo
- Descrição: Introduz o aplicativo Clipboard e suas vantagens.
- Botões:
- Download for iOS: Botão para baixar o aplicativo para iOS.
- Download for Mac: Botão para baixar o aplicativo para Mac.
- Descrição: Explica como o Clipboard armazena e organiza trechos de texto copiados.
- Quick Search: Pesquisa rápida por conteúdo, categoria, endereço web, aplicativo, e mais.
- iCloud Sync: Sincronização instantânea de snippets em todos os dispositivos.
- Complete History: Recupera qualquer snippet desde o início do uso do aplicativo.
- Descrição: Mostra que os snippets podem ser acessados de qualquer lugar.
- Ferramentas:
- Create Blacklists: Criação de listas negras para organizar snippets.
- Plain Text Snippets: Remoção de formatação indesejada dos textos copiados.
- Sneak Preview: Visualização rápida de todos os snippets.
- Descrição: Mostra logotipos de grandes empresas que usam ou apoiam o Clipboard.
- Descrição: Chamada para ação para baixar o aplicativo.
- Botões:
- Download for iOS: Botão para baixar o aplicativo para iOS.
- Download for Mac: Botão para baixar o aplicativo para Mac.
├── 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