diff --git a/README.md b/README.md index 8c499546..a805b1fe 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,157 @@ -# Curriculum Vitae (CV) Online +# Curriculum Vitae Online + +Sejam todos bem vindos ao projeto de Curriculum Vitae Online oferecidos pela Digital Innovation One. + +O projeto tem como objetivo montar nossa primeira página web que será a replica de um CV Online, utilizando conceitos de html e Github Pages. Ao fim teremos nosso currículo pronto e disponível de forma estática. + +Ele também pode ser utilizado como currículo ‘vitae’ e portfolio pessoal. + + +**Fork do projeto:** + +https://github.com/digitalinnovationone/cv + +## Duvidas: +https://github.com/digitalinnovationone/cv/issues + +**Referências:** + +W3C: https://www.w3schools.com/howto/howto_website_create_resume.asp + +### ✅ Desenvolvendo Seu Curriculum Vitae Online: + +Há várias formas de iniciar o desenvolvimento do seu projeto, como: + +- Fazer o Download da Pasta peLo GitHub: Faça o download da pasta pelo GitHub: você pode clicar no botão "Code" e depois em "Download ZIP" para baixar uma cópia do projeto compactado em um arquivo ZIP. Basta extrair os arquivos e começar a trabalhar. +- Você pode fazer o fork do projeto: Ao fazer o fork, você cria uma cópia do projeto em seu próprio repositório do GitHub. Para isso, basta clicar no botão "Fork" na página do projeto. Em seguida, você pode clonar o repositório do seu próprio GitHub em sua máquina local, utilizando o comando `git clone `. +- Por fim, você pode e tem toda a liberdade para criar do ZERO seu CV online; + +**Agora Vamos Lá!** + +1. Vamos começar fazendo o Fork do nosso projeto em: https://github.com/falvojr/cv +2. Ao criar o projeto podemos utilizar o próprio GitHub como IDE utilizando o (.) na página inicial do projeto. +3. Github Pages para visualizamos e compartilhamos nosso CV online com todos. + +**Dicas:** + +Para visualizar o resultado do seu projeto no navegador, você pode utilizar o Live Server, uma extensão do VSCode que permite abrir o projeto no navegador e atualiza-lo automaticamente a cada alteração no código ou pode utilizar o Github Pages. + +Lembre-se de incluir comentários no seu código para facilitar a compreensão e a manutenção futura do projeto. Boa sorte! + +### 📑 CONCEITOS UTILIZADOS + +### 🔴 HTML: + +Algumas das principais tags e conceitos que utilizamos para o desenvolvimento desse projeto foram: + +- `` que é uma declaração que define o tipo de documento como HTML5. + +- `` é a tag raiz que contém todo o conteúdo da página. + +- `` é onde as informações de cabeçalho da página são colocadas, como o título da página, o conjunto de caracteres, links para arquivos de estilo e fontes externas. + +- `` define o conjunto de caracteres usado na página como UTF-8, que é uma codificação de caracteres amplamente utilizada. + +- `` define o título da página, que geralmente é exibido na guia do navegador. + +- `<link>` é usado para importar arquivos de estilo externos e fontes da web. + +- `<body>` é onde todo o conteúdo visível da página é colocado, como texto, imagens e elementos interativos. + +- `<nav>` define uma seção de navegação, como um menu de navegação. + +- `<div>` é uma tag genérica usada para agrupar outros elementos e criar contêineres de layout. + +- `<h2>` - Define um cabeçalho de segundo nível. + +- `<p>` - Define um parágrafo de texto. + +- `<i>` - Define um elemento de texto em itálico. + +- `<hr>` - Define uma linha horizontal. + +- `<b>` - Define um texto em negrito. + +- `id` - Define um identificador exclusivo para um elemento. + +- `<br>` - Define uma quebra de linha. + +- `<span>` - Define um pequeno trecho de texto. + +- `fa` - É a classe de ícones do Font Awesome. + +- `w3` - É a classe de estilo do W3CSS. + +- `style.css` - É o nome do arquivo CSS externo. + +- `<footer>` define a seção de rodapé da página. + + +### 🔴 CSS: +- w3-twothird: define um elemento com largura de dois terços do contêiner pai. +- w3-container: define um contêiner com largura máxima de 1170 pixels e centralizado horizontalmente. +- w3-center: centraliza o conteúdo horizontalmente dentro de um elemento. +- w3-card: cria um elemento com sombra que se assemelha a um cartão. +- fa: aplica estilos aos ícones da fonte Awesome. + +Propriedades CSS utilizadas no exemplo: + +- color: define a cor do texto. +- background-color: define a cor de fundo do elemento. +- font-size: define o tamanho da fonte. +- padding: define o preenchimento interno do elemento. +- margin: define a margem externa do elemento. +- text-align: define o alinhamento horizontal do texto. +- box-shadow: cria uma sombra ao redor do elemento. +- display: define o tipo de exibição do elemento (por exemplo, block, inline, flex, etc). +- border-radius: define o raio dos cantos do elemento. + +Outros conceitos CSS: + +- Definição Seletores Id e Class: O seletor de ID é indicado pelo caractere '#' seguido pelo nome do ID do elemento HTML. O seletor de classe é indicado pelo caractere '.' seguido pelo nome da classe do elemento HTML. +- Font Awesome: é uma biblioteca de ícones vetoriais que podem ser personalizados com CSS. É comumente usado para adicionar ícones a sites e aplicativos da web. +- Box model: é um conceito fundamental do CSS que define como um elemento HTML é renderizado. Cada elemento é composto por conteúdo, preenchimento, borda e margem, que juntos formam o "modelo de caixa" do elemento. +- Responsividade: é a capacidade de um site ou aplicativo da web de se adaptar a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência de usuário consistente em todos eles. No exemplo, a classe .w3-twothird é usada para definir a largura de um elemento em dois terços do contêiner pai, tornando-o responsivo em telas de diferentes tamanhos. + + +### 📚 DICIONÁRIO FRONTEND + +🔴 HTML: + +- `<!DOCTYPE html>` - Define o tipo de documento como HTML +- `<html>` - Inicia o documento HTML +- `<head>` - Início do cabeçalho +- `<meta>` - Define o conjunto de caracteres como UTF-8 +- `<title>` - Define o título da página +- `<link>` - Importa o arquivo de estilo externo +- `<body>` - Define o corpo do documento HTML +- `<nav>` - Define a barra de navegação da página +- `<div>` - Cria um elemento de divisão genérico +- `<img>` - Define uma imagem a ser exibida +- `<button>` - Cria um botão clicável + +### 🔴 CI / CD - CI (Integração Contínua) e CD (Entrega Contínua) + +O CI e CD são duas práticas essenciais para a área de desenvolvimento de software, pois, eles tem como objetivo facilitar e agilizar o processo de entrega de software de qualidade. + +CI é um processo em que desenvolvedores integram o código que estão trabalhando com frequência em um repositório compartilhado, o que permite que o código seja testado automaticamente assim que é integrado. Isso ajuda a garantir que o código funcione corretamente e que não haja conflitos com outras partes do sistema. + +Já o CD é um processo que visa automatizar a entrega do software em produção de forma contínua, assim que o código passa por todos os testes necessários. Isso permite que as alterações no software sejam entregues rapidamente e de forma confiável. + +Em resumo, CI e CD são práticas que ajudam a garantir a qualidade do software e a agilizar o processo de entrega, tornando-o mais confiável e eficiente. + +### 🔴 Github Pages + +O GitHub Pages é um serviço de hospedagem de sites estáticos oferecido pelo GitHub. Ele permite que você crie um site estático usando HTML, CSS e JavaScript e hospede-o diretamente em um repositório do GitHub. + +O GitHub Pages é frequentemente usado por desenvolvedores e equipes de desenvolvimento para hospedar documentação de projetos, sites pessoais, blogs e portfólios. Ele é fácil de configurar e pode ser usado gratuitamente, com opções para personalizar o domínio do site e usar temas predefinidos para criar rapidamente um site atraente. + +Além disso, o GitHub Pages também suporta Jekyll, um gerador de sites estáticos que permite que você crie um site mais complexo com menos esforço, oferecendo recursos como geração automática de páginas e layouts. + + +**Saiba mais sobre HTML, Emojis:** + +Sobre html: https://developer.mozilla.org/pt-BR/docs/Web/HTML + +Emojis: https://www.w3schools.com/charsets/ref_emoji.asp -Referência W3C: https://www.w3schools.com/howto/howto_website_create_resume.asp