Skip to content

Latest commit

 

History

History
157 lines (92 loc) · 8.06 KB

README.md

File metadata and controls

157 lines (92 loc) · 8.06 KB
Raw

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

Dúvidas: 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