-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dcd49ad
commit 520d028
Showing
1 changed file
with
156 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <url do seu fork>`. | ||
| - 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: | ||
|
|
||
| - `<!DOCTYPE html>` que é uma declaração que define o tipo de documento como HTML5. | ||
|
|
||
| - `<html>` é a tag raiz que contém todo o conteúdo da página. | ||
|
|
||
| - `<head>` é 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. | ||
|
|
||
| - `<meta charset="UTF-8">` define o conjunto de caracteres usado na página como UTF-8, que é uma codificação de caracteres amplamente utilizada. | ||
|
|
||
| - `<title>` 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 |