diff --git a/project.html b/project.html
new file mode 100644
index 0000000..e8c8add
--- /dev/null
+++ b/project.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="PT-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>etapas de um website</title>
+</head>
+<body>
+    <h1> ANTES DE UM HTML</h1>
+    <hr/>
+    <h2>História dos computadores</h2>
+      <u>(1951-1959)</u>
+      Os computadores de primeira geração funcionavam por meio de circuitos e válvulas eletrônicas. Possuíam o uso restrito, além de serem imensos e consumirem muita energia.
+      Um exemplo é o <i> ENIAC</i> (<strong>Eletronic Numerical Integrator and Computer</strong>)que consumia cerca de 200 quilowatts e possuía 19.000 válvulas.
+       <br>
+      <a href="https://pt.wikipedia.org/wiki/ENIAC">ENIAC</a>
+      
+       <p><small>Abaixo voçê pode ver uma lista das proximas gerações com datas e imagens:</small></p>
+      <ul>
+         <li> 2 geração<a href="https://static.todamateria.com.br/upload/se/gu/segundageracao.jpg?auto_optimize=low"><strong>(1959-1965)</strong></a>
+         <li> 3 geração<a href="https://static.todamateria.com.br/upload/te/rc/terceirageracao.jpg?auto_optimize=low"><strong>(1965-1975)</strong></a>
+         <li> 4 geração<a href="https://static.todamateria.com.br/upload/co/mp/computadorquartageracao.jpg?auto_optimize=low"><strong>(1975-até os dias atuais)</strong></a>
+      </ul>
+       <i>mas oque cada geração trouxe de inovação ?</i>
+       <small>"tecnologia/componentes"</small>
+       <ol>
+         <li>geração</li><strong>Válvulas termiônicas</strong>
+         <li>geração</li><strong>Diodos e Transistores</strong>
+         <li>geração</li><strong>Circuitos integrados</strong>
+         <li>geração</li><strong>Microprocessadores</strong>
+       </ol>
+       <blockquote>" OBS: alguns acreditam que <B>já</B> estamos na <u> 5 geração</u>"</blockquote>
+       <hr>
+    <h2>O que são <i>Servers</i>?</h2>
+    <p><b>Um servidor,</b> em suma, é um computador com grande capacidade de <u>armazenamento</u><br> e processamento cujo objetivo é conectar outros computadores através de uma <strong>Rede</strong></p>
+    
+    
+    <strong>Conceitos de serves</strong><i><small>( parte logica)<i></small>
+      <h4><small>"imagem ilustrativa de um servidor"</small></h4>
+      <img src="https://th.bing.com/th/id/R.e21843152509a62670df44a81bca37d5?rik=1%2bWU8O0rQ8sehA&pid=ImgRaw&r=0" alt="3px";width=11px">
+      <ul>
+         <li>Software</li>
+         <li>sitema operacionais</li>
+         <li>Monitoramento</li>
+         <li>Servidor Web</li>
+         <br>
+         <a target="_blank" href="https://marquesfernandes.com/tecnologia/o-que-e-um-servidor-e-para-que-serve/#:~:text=O%20que%20%C3%A9%20um%20Servidor%20e%20para%20que,o%20Cliente%20se%20comunicada%20com%20o%20Servidor%20"> Entenda mais sobre os servidores</a>
+      <hr>
+    <h2>Como é uma estrutura básica de um HTML?</h2>
+     <p>A Linguagem de Marcação de Hipertexto <strong>(HTML)</strong>é uma linguagem de computador que compõe a maior parte das páginas da internet e dos aplicativos online.<br> Um hipertexto é um texto usado para fazer referência a outros textos, enquanto uma linguagem de marcação é composta por uma série de marcações que dizem para os servidores da web qual é o estilo e a estrutura de um documento.</p>
+     <h3>Como é uma estrutura <u>html</u>?</h3>
+     <p>Bom.tudo começará com a tag html, com isso podemos montar nossas meta tags <small>(lado do servidor onde não será visivel para o cliente)</small>
+     </p>
+     <p> Depois adicionamos o que a gente chama de <mark>"cabeça"</mark> do nosso site</p>
+     <p> consequentemente depois da cabeça (<strong>head</strong>) vem o <mark>corpo</mark>.(<strong>body</strong>)</p>
+     <blockquote>Uma observação! tudo que estiver no body, será visivel para o cliente</blockquote>
+     <h4> Mais afinal...se o html é um arquivo de marcação.<br>oque seria uma linguagem então ?</h4>
+     <hr>
+     <h3> O que é linguagem de programação ?</h3>
+     <p> É uma linguagem escrita formal que especifica um conjunto de instruções <br>e regras usada para gerar programas.(<small>SOFTWARE</small>)</p>
+    <ul>
+      <li>SERVER-SIDE</li>
+      <li>CLIENT-SIDE</li>
+      </ul>
+      <p><strong>Uma linguagem muito conecida que pode atuar dos dois lados é o <mark>JAVA SCRIPT</mark>,por causa de uma <b>engineer dentro dos navegadores</b></p>
+         <FONT style="color: rgb(255, 255, 255);background-color: black;">V-8</FONT>
+         <br>
+         <br>
+      <a target="_blank" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide">guia completo sobre java script,para o seu conhecimento</a>
+      <br>
+      <br>
+      <a target="_blank" href="https://pt.wikipedia.org/wiki/Front-end_e_back-end">server VS client, entenda o que é</a>
+ 
+  
+</body>
+</html>
\ No newline at end of file
