Bookmark-Manager-Website

This repository contains the source code for the Bookmark Manager website developed using HTML and Tailwind CSS. It showcases the use of Tailwind CSS to create a modern, responsive, and accessible website. The website includes several sections like hero, features, testimonials, and more.

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

Navigation

• Responsive Navigation Bar:
  • Desktop: Features, Download, FAQ, and Login options.
  • Mobile: Hamburger menu with the same options.

Hero Section

• Headline: "An Easy-to-Use Bookmark Organizer"
• Description: Organize your favorite websites efficiently with a clean interface.
• Buttons:
  • Get It On Chrome
  • Get It On Firefox
• Illustration: Hero image for visual appeal.

Features Section

Simple Bookmarking

• Image: Visual representation.
• Description: Bookmark in one click with an intuitive drag-and-drop interface.
• Button: More Info

Speedy Searching

• Image: Visual representation.
• Description: Intelligent search feature to quickly locate your saved sites.
• Button: More Info

Easy Sharing

• Image: Visual representation.
• Description: Share your bookmarks and collections effortlessly.
• Button: More Info

Download Section

• Headline: "Download the Extension"
• Description: Available for Chrome, Firefox, and Opera.

Download Boxes

• Chrome:
  • Minimum Version 62
  • Button: Add & Install Extension
• Firefox:
  • Minimum Version 55
  • Button: Add & Install Extension
• Opera:
  • Minimum Version 46
  • Button: Add & Install Extension

FAQ Section

• Headline: "Frequently Asked Questions"
• Accordion: Expandable sections for each question.

Questions Include:

1. What is Bookmark?
2. How can I request a new browser?
3. Is there a mobile app?
4. What about other Chromium browsers?

Newsletter Section

• Headline: "Stay in the Loop with Our Latest Updates"
• Description: Join 35,000+ users.
• Form: Subscribe by entering your email address.

Footer

• Navigation Links: Features, Download, FAQ.
• Social Media: Facebook, Twitter icons.

Folder Structure

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

Bookmark-Manager-Website

Este repositório contém o código-fonte do site Bookmark Manager desenvolvido usando HTML e Tailwind CSS. Ele demonstra o uso do Tailwind CSS para criar um site moderno, responsivo e acessível. O site inclui várias seções como hero, recursos, depoimentos e mais.

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 ver o certificado de conclusão abaixo:
Certificado de Conclusão

Índice

• Instalação
• Usando VSCode e a Extensão GoLive
• Principais Funcionalidades
• 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 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 tiver o VSCode instalado, baixe-o aqui.

2. Instale a extensão GoLive:

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

3. Abra o projeto no VSCode:

   • Navegue até o diretório do projeto e clique com o botão direito.
   • Selecione "Open with 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.

Principais Funcionalidades

Navegação

• Barra de Navegação Responsiva:
  • Desktop: Opções de Recursos, Download, FAQ e Login.
  • Mobile: Menu hamburguer com as mesmas opções.

Seção Hero

• Título: "Um Organizador de Favoritos Fácil de Usar"
• Descrição: Organize seus sites favoritos de forma eficiente com uma interface limpa.
• Botões:
  • Obtenha no Chrome
  • Obtenha no Firefox
• Ilustração: Imagem hero para apelo visual.

Seção de Recursos

Bookmarking Simples

• Imagem: Representação visual.
• Descrição: Salve favoritos com um clique usando uma interface intuitiva de arrastar e soltar.
• Botão: Mais Informações

Busca Rápida

• Imagem: Representação visual.
• Descrição: Recurso de busca inteligente para localizar rapidamente seus sites salvos.
• Botão: Mais Informações

Compartilhamento Fácil

• Imagem: Representação visual.
• Descrição: Compartilhe seus favoritos e coleções sem esforço.
• Botão: Mais Informações

Seção de Download

• Título: "Baixe a Extensão"
• Descrição: Disponível para Chrome, Firefox e Opera.

Caixas de Download

• Chrome:
  • Versão Mínima 62
  • Botão: Adicionar e Instalar Extensão
• Firefox:
  • Versão Mínima 55
  • Botão: Adicionar e Instalar Extensão
• Opera:
  • Versão Mínima 46
  • Botão: Adicionar e Instalar Extensão

Seção FAQ

• Título: "Perguntas Frequentes"
• Acordeão: Seções expansíveis para cada pergunta.

Perguntas Incluem:

1. O que é Bookmark?
2. Como posso solicitar um novo navegador?
3. Existe um aplicativo móvel?
4. E quanto a outros navegadores Chromium?

Seção de Newsletter

• Título: "Fique por Dentro das Nossas Atualizações"
• Descrição: Junte-se a 35.000+ usuários.
• Formulário: Inscreva-se inserindo seu endereço de e-mail.

Rodapé

• Links de Navegação: Recursos, Download, FAQ.
• Mídias Sociais: Ícones do Facebook, Twitter.

Estrutura de Pastas

├── css
│   └── style.css        # Arquivo CSS principal
├── images
│   └── ...              # Imagens usadas no site
├── js
│   └── script.js        # Arquivo JavaScript para alternância de tema
├── index.html           # Arquivo HTML principal
├── package-lock.json    # Arquivo de bloqueio de pacotes
├── package.json         # Arquivo de manifesto do projeto
└── tailwind.config.js   # Arquivo de configuração do Tailwind CSS