Article image
Rosângela Severo
Rosângela Severo28/03/2024 21:30
Compartilhe

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

Compartilhe
Comentários (1)
Cristian Francisco
Cristian Francisco - 29/03/2024 12:27

Top, parabéns!