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
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á!
- Vamos começar fazendo o Fork do nosso projeto em: https://github.com/falvojr/cv
- Ao criar o projeto podemos utilizar o próprio GitHub como IDE utilizando o (.) na página inicial do projeto.
- 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!
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.
- 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.
🔴 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
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.
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