Minha Primeira Página Web utilizando HTML e GitHub Pages

#GitHub
#HTML
#CSS

O objetivo do projeto era montar nossa primeira página web replicada de um CV online, utilizando os conceitos de HTML e GitHub Pages. O resultado foi um currículo pessoal pronto e disponível de forma estática.

O primeiro passo do projeto foi fazer um fork, ou seja, criar uma cópia de: https://github.com/falvojr/cv .

Após o fork, utilizei o próprio GitHub como IDE, utilizando o (.) na página inicial do projeto.

Ativei o GitHub Pages para poder vizualizar e compartilhar o meu currículo com todos.

Os conceitos utilizados para a realização desse projeto foram: HTML, CSS e GitHub Pages.

HTML

<!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.

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.

Quem tiver interesse em conhecer o resultado do meu desafio, segue o link:

https://rosangelasevero79.github.io/cv/

Fontes:

DIO: https://github.com/digitalinnovationone/cv

Dúvidas: https://github.com/digitalinnovationone/cv/issues

W3C: https://www.w3schools.com/howto/howto_website_create_resume.asp