#Parte 1 - Criando meu primeiro site
Como criar um site usando HTML, CSS e colocando ele online para outras pessoas poderem acessar.
Nessse tutorial nós vamos criar uma página simples, apenas para exibir algumas informações e vamos hospedar no github pages para todo mundo poder acessar.
Antes de começar vamos a alguns requisitos:
- Ter uma conta no github Se você ainda não tem uma conta no Github acesse o link abaixo e crie uma conta. Ter uma conta no github ou similares, é fundamental para quem deseja seguir a carreira de desenvolvedor.
Ter o github instalado na sua máquina Para podermos colocar nossos projetos no Github precisamos instalar o Git na máquina. Vou deixar aqui em baixo alguns links explicando como é a instalação de acordo com o sistema operacional. %[atlassian.com/git/tutorials/install-git#mac.. %[atlassian.com/git/tutorials/install-git#lin.. %[atlassian.com/git/tutorials/install-git#win..
Ter algum editor de código É importante que você já tenha algum editor de código instalado na sua máquina. Existem vários e você pode testar para ver com qual você mais se identifica. No meu caso o meu favorito é o VSCode então eu vou deixar o link para você baixar, caso você queira experimentar. %[code.visualstudio.com/download]
Tendo cumprido todos os requisitos, vamos começar a programar.
O primeiro passo é criar o esqueleto do site. Vamos começar inserindo quais as informações o nosso site vai ter e quais serão os recursos que ele irá utilizar para apresentar os dados para o usuário, garantindo uma boa experiência. Vamos começar então analisando o design e identificando as partes do site. Eu gosto de primeiro separar as grandes caixas que compõe o site. Quando eu olho para o design eu consigo enxergar 3 caixas. Uma caixa é o container que é a maior caixa, ele vai englobar as caixas menores. As outras duas caixas são as caixas de imagem e a de informação.
Olhando com atenção vamos notar que a caixa de informação pode conter outras duas caixas.
Você deve estar pensando, por que raios separar em caixas ? O separar em caixas é um exercício para ajudar a organizar o código de modo em que ele faça sentido, isso ajuda na hora de criar as divs da página (principalmente quando você precisar voltar nesse código depois de um tempo).
Agora que já organizamos como precisamos desenvolver, vamos efetivamente escrever o código. Crie uma pasta com o seu nome e dentro dessa pasta vamos criar dois arquivos, um para o HTML e outro para o CSS. (os comandos abaixo podem ser executados no terminal)
mkdir marcellecode
touch index.html
touch style.css
Vamos abrir o index.html no editor de código e inserir as informações do cabeçalho.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarcelleCode</title>
<link rel="stylesheet" href="./style.css">
</head>
Depois vamos escrever as nossas caixas dentro da tag body
<body>
<div class="container">
<div class="info-container">
<div class="info_description">
</div>
<div class="info_list-stack">
</div>
</div>
<div class="avatar-container">
</div>
</div>
</body>
Com as caixas criadas vamos colocar o restante das informações. Adicione a imagem que você quer utilizar na mesma pasta que está o código e dentro da div "avatar-container" você vai inserir uma tag img como no código abaixo:
<div class="avatar-container">
<img src="./profile_img.png" alt="logo do meu perfil">
</div>
É muito importante que você preencha o atributo "alt" para tornar o seu site acessível para todos os usuários. Agora dentro dentro da div "info_description" vamos colocar o titulo e o subtitulo, conforme o código abaixo:
<div class="info_description">
<h2>MarcelleCode</h2>
<h3>Fullstack Developer</h3>
</div>
A última informação que falta é a lista com as tecnologias que você trabalha
<div class="info_list-stack">
<h5>HTML</h5>
<h5>CSS</h5>
<h5>JS</h5>
</div>
Se você salvar e abrir o arquivo no navegador, você vai ver que ele vai estar parecido com a imagem abaixo:
Agora chegou o momento de deixar esse site mais bonito, a primeira coisa que vamos fazer é importar o arquivo de fontes para podermos utilizar no nosso site, a própria google disponibiliza um arquivo com diversas fontes para você utilizar de forma gratuita. Dentro da tag "head" vamos adicionar mais duas tags "link" para importar as fontes
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Montserrat:wght@300&family=Montserrat:wght@500&display=swap"
rel="stylesheet">
A nossa tag head então vai ficar assim:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarcelleCode</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Scriptfamily=Montserrat:wght@300display=swap"rel="stylesheet">
</head>
Com as fontes adicionadas, vamos para o arquivo style.css. A forma como eu costumo criar o CSS é criando o estilo para as caixas maiores e depois para as caixas menores, então eu vou criar a minha classe "container". Eu já vou começar colocando a cor de fundo Como eu preciso que a caixa informação e a caixa imagem estejam uma ao lado da outra eu vou colocar que a propriedade display vai ser do tipo flex. Isso faz com que os elementos que estão dentro da minha div se tornem flexiveis e mais fáceis de posicionar. A próxima propriedade que eu vou definir é o flex-direction, que vai definir a direção que eu quero que os elementos de dentro da div sejam exibidos. No caso como eu quero um bloco ao lado do outro, eu vou utilizar o flex-direction do tipo row. A próxima propriedade é o justify-content, que eu vou usar para definir como deve ser o posionamento dentro do meu container. Nesse caso eu quero que eles tenham um espaçamento entre eles e que eles também tenham algum espaçamento das bordas da página, para isso eu vou usar o space-evenly. Por enquanto o nosso style.css está dessa forma:
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
E o nosso site até o momento está assim
Continuando a personalização da página, vamos configurar o nosso background. No design o background tem um estilo gradiente e para fazer esse efeito vamos utilizar a propriedade background com o valor "linear-gradient" para fazer esse efeito. No caso do design os valores do linear-gradient que eu usei foram esses:
background: linear-gradient(90deg, #FFB56B 0%, #FEB271 14.29%, #FCAF76 28.57%, #F9AC7B 42.86%, #F6AA81 57.14%, #F2A885 71.43%, #EEA68A 85.71%, #E9A58E 100%);
Mas vamos entender essa sintaxe, por partes.
O primeiro valor que o background recebe é o tipo de gradiente, depois o código da cor (que pode ser hexadecimal ou RGB) e em seguida um valor que vai indicar até que parte do elemento aquela cor vai ocupar.
Agora que entendemos, vamos inserir a propriedade background dentro da classe container no style.css. Então nosso arquivo style.css por enquanto está assim:
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: linear-gradient(90deg, #FFB56B 0%, #FEB271 14.29%, #FCAF76 28.57%, #F9AC7B 42.86%, #F6AA81 57.14%, #F2A885 71.43%, #EEA68A 85.71%, #E9A58E 100%);
}
A próxima agora vamos finalizar os estilos do container, vamos ajustar o tamanho e qual a posição que eu quero que os elementos tenham. Agora a classe container vai estar assim:
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: linear-gradient(90deg, #FFB56B 0%, #FEB271 14.29%, #FCAF76 28.57%, #F9AC7B 42.86%, #F6AA81 57.14%, #F2A885 71.43%, #EEA68A 85.71%, #E9A58E 100%);
width: 100vw;
height: 100vh;
align-items: center;
}
Com o container pronto, vamos ajustar a caixa de informação. No arquivo style.css, vamos criar a classe responsável por ela e configurar o como eu quero que os elementos dessa caixa sejam posicionados.
.info-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
}
Para adicionar as fontes agora eu vou utilizar uma sintaxe um pouco diferente, eu vou informar ao navegador que eu quero que ele aplique a fonte ao h2 e o h3 que estão dentro da caixa info_description. Dessa forma eu evito que esse estilo seja aplicado a outros h2 e h3 que forem usados no meu site
.info_description h2 {
font-family: Dancing Script;
font-size: 80px;
font-weight: 400;
line-height: 96px;
margin: 0;
}
.info_description h3 {
font-family: Montserrat;
font-size: 36px;
font-weight: 400;
line-height: 44px;
margin: 0;
}
Agora para finalizar a caixa informação, precisamos ajustar a caixa de stack para colocar cada item um do lado do outro. Então novamente vamos pedir utilizar o display flex.
.info_list-stack {
display: flex;
flex-direction: row;
justify-items: center;
justify-content: center;
width: 100%;
}
Para aplicar o estilo apenas a cada item de dentro da caixa stack, temos duas formas de fazer (que não estão erradas), que são:
.info_list-stack > * {
margin-right: 15px;
font-family: Montserrat;
font-weight: bold;
font-size: 14px;
}
/*ou*/
.info_list-stack > h5 {
margin-right: 15px;
font-family: Montserrat;
font-weight: bold;
font-size: 14px;
}
Se salvarmos o arquivo e atualizarmos a página, ele vai estar parecido com a imagem abaixo
A única coisa que falta para finalizarmos o desenvolvimento é ajustar a caixa imagem. Vamos adicionar as mesmas propriedades da caixa de informação e ajustar a borda da imagem
.avatar-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
height: 100%;
}
.avatar-container > img{
border-radius: 100%;
}
E assim ficou o nosso site, no próximo artigo vamos fazer o deploy no github para disponibilizar ele na internet para todo mundo poder acessar.
Você pode consultar o código do projeto no link abaixo