Shortly-Website

This repository contains the source code of a website developed in HTML, Tailwind CSS, and JavaScript. The website is a pre-styled prototype designed for shortening links. It offers a visually appealing and responsive layout, making it easy to integrate into various projects or use as a standalone solution.

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

Hero Section

• Introduces the site with a striking title and a navigation menu.
• The navigation menu includes links to various sections of the site and features a hamburger menu for mobile devices.
• Responsive design ensures that the menu is intuitive and accessible on different devices.

Shorten Section

• Provides an input field for users to enter a URL and shorten it.
• Displays shortened links with a "Copy" button for ease of use.
• Responsive design ensures a consistent user experience across different devices.

Stats Section

• Displays advanced statistics on link performance.
• Provides insights into user interactions with the shortened links.
• Utilizes a responsive design to maintain readability on different devices.

Features Section

• Highlights key features of the service, such as brand recognition, detailed records, and customizability.
• Each feature is represented with an icon, title, and description.
• Responsive layout ensures accessibility on both desktop and mobile devices.

Call to Action Section

• Encourages users to start using the link shortening service.
• Includes a prominent "Get Started" button.
• Styled to stand out and draw user attention.

Footer Section

• Contains navigation links, social media icons, and contact information.
• Organized into sections for Features, Resources, and Company.
• Social media icons link to various platforms, allowing users to connect with the service.

Folder Structure

├── css
│   └── style.css        # Main CSS file
├── images
│   └── ...              # Images used on the site
├── js
│   └── script.js        # Main JavaScript file
├── 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

---

Shortly-Website

Este repositório contém o código-fonte de um site desenvolvido em HTML, Tailwind CSS e JavaScript. O site é um protótipo pré-estilizado projetado para encurtar links. Ele oferece um layout visualmente atraente e responsivo, facilitando a integração em vários projetos ou o uso como uma solução autônoma.

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ê ainda 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 do mouse.
   • 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 sendo renderizado.

Funcionalidades Principais

Seção Hero

• Introduz o site com um título marcante e um menu de navegação.
• O menu de navegação inclui links para várias seções do site e possui um menu de hambúrguer para dispositivos móveis.
• O design responsivo garante que o menu seja intuitivo e acessível em diferentes dispositivos.

Seção Shorten

• Fornece um campo de entrada para os usuários inserirem um URL e encurtá-lo.
• Exibe links encurtados com um botão "Copiar" para facilitar o uso.
• O design responsivo garante uma experiência de usuário consistente em diferentes dispositivos.

Seção Estatísticas

• Exibe estatísticas avançadas sobre o desempenho dos links.
• Fornece insights sobre as interações dos usuários com os links encurtados.
• Utiliza um design responsivo para manter a legibilidade em diferentes dispositivos.

Seção Recursos

• Destaca as principais funcionalidades do serviço, como reconhecimento de marca, registros detalhados e personalização.
• Cada funcionalidade é representada com um ícone, título e descrição.
• O layout responsivo garante acessibilidade em dispositivos desktop e móveis.

Seção Call to Action

• Incentiva os usuários a começarem a usar o serviço de encurtamento de links.
• Inclui um botão "Get Started" proeminente.
• Estilizado para se destacar e atrair a atenção do usuário.

Seção Rodapé

• Contém links de navegação, ícones de mídia social e informações de contato.
• Organizado em seções para Recursos, Recursos e Empresa.
• Os ícones de mídia social são links para várias plataformas, permitindo que os usuários se conectem com o serviço.

Estrutura de Pastas

├── css
│   └── style.css        # Arquivo CSS principal
├── images
│   └── ...              # Imagens usadas no site
├── js
│   └── script.js        # Arquivo JavaScript principal
├── 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