Executando verificação de segurança...
5

A saga de meu primeiro progeto "serío"(html e css)

Aqui está o texto corrigido:


No começo deste ano, eu recebi acesso à plataforma de cursos da B7Web. Então, lá fui eu fazer o curso que me parecia mais apropriado ao meu hardware(html e css). Acontece que uso o computador do meu pai para programar (devido ao notebook com Linux aqui de casa estar inusável). Porém, este computador tem restrições por ser um desktop de empresa e, além disso, meu pai o usa para trabalhar em home office durante o dia. Portanto, eu não poderia baixar programas como o VSCode. Sem falar que o computador é um Core 2 Duo com 4GB de RAM rodando Windows 10. Após vários momentos assistindo às aulas, cheguei ao primeiro projeto: era um site com o nome de Medicenter. Era um template bastante genérico, mas eu estava animado para usar todos os meus conhecimentos adquiridos.

Agora era hora de colocar a mão na massa e começar a trabalhar. Para minha mais profunda alegria, achei o Sublime Text 3 instalado no PC do meu pai, o que quebrou um galho gigantesco. Durante o processo, tive que apagar tudo e recomeçar devido a um código que era indescifrável. Senti a falta do Git, já que muitas vezes "quebrei o código". Depois de muitas dores de cabeça (mais do que gostaria), consegui "terminar" meu projeto. Faltaram etapas grandes do desenvolvimento, como deixar o site responsivo e fazer o rodapé, mas estou um pouco cansado deste projeto, pois demandou muito tempo. Ao tentar deixar meu código responsivo, tive alguns problemas, já que acabei comprometendo a limpeza do código durante a criação.

Para completar a novela, fui colocar meu projeto no GitHub para mostrar ao mundo todas as minhas habilidades, mas descobri que é algo mais complicado do que só subir a pasta do projeto. Ao ver um tutorial, percebi que precisaria do terminal do Windows (para isso, tenho que colocar o CMD como administrador, mas preciso da senha do administrador, que não possuo). Acho que consigo colocar no GitHub de outra maneira, mas isso será história para outra hora.

Em geral, esse foi o meu processo de desenvolvimento do meu primeiro projeto "sério". Agora quero pular para o próximo projeto e, principalmente, escrever um código mais limpo. Também quero descobrir como colocar meu código no GitHub para o mundo ver.

o meu codigo para curiosos:
html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=0"> 
    <link rel="stylesheet" type="text/css" href="assets/css/template.css">
    <title>Medicenter</title>
</head>
<body>

<header>
    <div class="container">
        <div class="logo">
            <a href=""><img src="assets/images/logo.png" alt="Logo"></a>     
        </div>
        <div class="menu">
            <nav>
                <ul>
                    <li class="active"><a href="">HOME</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">planos</a></li>
                    <li><a href="">suporte</a></li>
                    <li><a href="">parceiros</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<section id="banner">
    <div class="container column"> 
    
    <div class="banner_headline">
      <h1>Mediceter</h1>
      <h2>Na Medicenter, sua saúde é nossa prioridade.</h2>
    </div>
       
    <div class="banner_options">
      <div class="banner1">
        <div class="banner_title"> caso de emergência</div>
            <div class="banner_desc">Na Medicenter, estamos prontos para atender você nos momentos que mais precisa. Com uma equipe dedicada e instalações preparadas, garantimos cuidados rápidos e eficientes em casos de emergência. Sua saúde é nossa prioridade máxima.</div>          <!--configurações de banner-->
            <a href="">Saiba mais!</a>
      </div>

        <div class="banner2">
          <div class="banner_title"> Horários disponíveis</div>
          <div class="banner_desc">Marcar um horário na Medicenter é simples e rápido. Basta entrar em contato conosco por telefone ou através do nosso site, onde você pode escolher o melhor dia e horário para sua consulta. Estamos aqui para facilitar o cuidado com a sua saúde     </div> 
          <a href="">Saiba mais!</a> 
           
        </div>

        <div class="banner3">
            <div class="banner_title"> Horarios
              <div class="banner_horarios">Segunda - Sexta <div class="horas">8.00 - 17.00</div> </div>
              <div class="banner_horarios">Sabado       <div class="horas">9.30 - 17.00</div>  </div>
              <div class="banner_horarios">Domingo          <div class="horas">9.30 - 15.00 </div> </div>
        </div>
     </div>

   </div>
 
</section>

  <section id="geral">
    <div class="container">
       
       <section>
         <div class="widget">
<div class="widget">
                    <div class="widget_title">
                        <div class="widget_title_text">Latest News</div>
                        <div class="widget_title_bar"></div>

                    </div>
                    <div class="widget_body flex">

                        <article>
                            <a href="">
                                <div class="news_data">
                                    <div class="news_posted_at">12 DEC 12</div>
                                    <div class="news_comments">2</div>
                                </div>
                                <div class="news_thumbnail">
                                    <img src="assets/images/dr.jpg">
                                </div>

                                <div class="news_title">
                                   Lorem ipsum dolor sit amat velum.
                                </div>

                                <div class="news_resuem">
                                  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
                                </div>
                              </a>
                     </article>

                     <article>
                            <a href="">
                                <div class="news_data">
                                    <div class="news_posted_at">12 DEC 12</div>
                                    <div class="news_comments">2</div>
                                </div>
                                <div class="news_thumbnail">
                                    <img src="assets/images/dr.jpg">
                                </div>

                                <div class="news_title">
                                   Lorem ipsum dolor sit amat velum.
                                </div>

                                <div class="news_resuem">
                                  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
                                </div>
                              </a>
                     </article>

                     <article>
                            <a href="">
                                <div class="news_data">
                                    <div class="news_posted_at">12 DEC 12</div>
                                    <div class="news_comments">2</div>
                                </div>
                                <div class="news_thumbnail">
                                    <img src="assets/images/dr.jpg">
                                </div>

                                <div class="news_title">
                                   Lorem ipsum dolor sit amat velum.
                                </div>

                                <div class="news_resuem">
                                  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
                                </div>
                              </a>
                     </article>

                     <article>
                            <a href="">
                                <div class="news_data">
                                    <div class="news_posted_at">12 DEC 12</div>
                                    <div class="news_comments">2</div>
                                </div>
                                <div class="news_thumbnail">
                                    <img src="assets/images/dr.jpg">
                                </div>

                                <div class="news_title">
                                   Lorem ipsum dolor sit amat velum.
                                </div>

                                <div class="news_resuem">
                                  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. 
                                </div>
                              </a>
                     </article>

                     

                  </div>
          </div>  
       </section>
       
       <aside>
          <div class="widget">
            <div class="widget_title">
                
                  <div class="widget_title_text"> Departamentos</div>             
                     <div class="widget_title_bar"> </div>     
            </div>
                  <div class="widget_body">
                    <div class="deps">...</div>  
                  <div class="deps">...</div> 
                  <div class="deps">...</div> 
                  <div class="deps">...</div>  
                  <div class="deps">...</div> 
                  <div class="deps">...</div> 
                  </div>
          </div>  
       
          <div class="widget">
           <div class="widget_title">
                        <div class=" widget_title_text">Make an appointement</div>
                        <div class=" widget_title_bar"></div>
                    </div>
                    <div class="widget_body">
                        <div class="widget_desc_text">It is a long established fact that It is a long est
                            ablished fact that a reader will be distracted by.
                        </div>
                        <div class="widget_contact">
                            <div class="widget_contact_text">
                                <a href=""><img src="/assets/images/telefone.png" alt=""></a>
                                <u>by phones:</u><b> 1-800-643-4300</b>
                            </div>
                            <div class="widget_contact_text">
                                <a href=""><img src="/assets/images/telefone.png" alt=""></a>
                                <u>by email:</u><a href=""> [email protected]</a>
                            </div>

                            <div class="widget_contact_text">
                                <a href=""><img src="/assets/images/telefone.png" alt=""></a>
                                <u>or</u><a href=""> lih in the form </a> ond out contact page
                            </div>
                        </div>
                      </div>
                    </div>


           </div>
            </aside>
        </div>
    </section>
     
 <footer>
    <div class="container flexcolumn">
      <div class="footer_menu">
         
         <div class="fm_1">
           ...
         </div>

         <div class="fm_2">
           ...
         </div>
         
         <div class="fm_3">
           ...
         </div>

      </div>  

      <div class="footer_area">
         <div class="footer_area_item">
            <div class="widget">
              <div class="widget_title">
                <div class="widget_title_text">Medicenter Clinic</div>
                <div class="widget_title_bar"></div>
              </div>
              <div class="widget_body">
                ...
              </div>           
            </div>      
         </div>
         
    
         <div class="footer_area_item">
           <div class="widget">
              <div class="widget_title">
                <div class="widget_title_text">Latest News</div>
                <div class="widget_title_bar"></div>
              </div>
              <div class="widget_body">
                ...
              </div>  
           </div>
         </div>

         <div class="footer_area_item">
           <div class="widget">
              <div class="widget_title">
                <div class="widget_title_text">Latest Tweets</div>
                <div class="widget_title_bar"></div>
              </div>
              <div class="widget_body">
                ...
              </div>  
         </div>
      </div> 
    </div>

    <div class="footer_copy">
      compryth-Todos os direitos reservados
    </div>
 </footer> 
</body>

</html>

css:

* {
  font-family:Arial; 

}
body {
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: center;
    height: 120px;
}

.container {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Alterado para 100% para ocupar toda a largura */
    max-width: 990px; /* Máximo de 990px */
    padding: 0 10px; /* Adicionei padding para dar um respiro ao conteúdo */
    box-sizing: border-box; /* Para incluir o padding na largura total */
}

.logo {
    display: flex;
    align-items: center;
}

.menu {
    display: flex;
    align-items: center;
}

nav ul,
nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul {
    display: flex;
}

nav a {
    display: block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: #727272;
    font-family: Arial;
}

nav .active a,
nav a:hover {
    background-color: #39aae1;
    color: #ffffff;
}

#banner {
    display: flex;
    justify-content: center;  
    background-image: url('../images/img1.jpg');
    background-position: center;
    background-size: cover;
    height: 670px;
    width: 100%; /* Certificar que o banner ocupa toda a largura */
    padding: 0;
    margin: 0;
}

.column {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
}

.banner_headline {
    flex: 1;
    display:flex;
    flex-direction:column;  
    justify-content:center;
    margin: 0; /* Remove qualquer margem */
}

.banner_headline h1 {
  color:#ffffff;
  font-size:70px;
  text-shadow:1px 1px 0px #000000; 
  margin:0;
  padding:0;
  max-width:350px;  
}
.banner_headline h2 {
  color:#ffffff;
  font-size:21px;
  text-shadow:1px 1px 0px #000000; 
  margin:0;
  padding:0; 
  max-width:350px; 
  margin-top:30px;
}

.banner_options {
    height:210px; 
    display:flex;

    margin: 0; /* Remove qualquer margem */
}

.banner1,
.banner2,
.banner3{
  flex:1; 
  color:#ffffff;
  padding:20px;
}

.banner1{
 background-color:#39aae1; 
}

.banner2{
background-color:#0079c7; 

}

.banner3{
background-color:#2b4c99;


}

.banner_title{
    font-size:21px; 
}

.banner_desc{
    font-size:12px;
    margin-top:20px;
    margin-bottom:20px; 
}

.banner_options a {
    display:inline-block;
    border:1px solid #ffffff;
    padding:5px; 
    color:#ffffff;
    font-size:13px;
    text-decoration:none;
}

.banner_horarios{
 flex: 1;
 font-size: 14px;
border-bottom: 1px solid #527272;
margin-top: 20px;
padding-bottom: 5px;      
}

.horas{
  float: right;

}

#geral{
    display:flex;
    justify-content:center;

}

#geral section {
    flex:2;
}

#geral aside{
    flex:1;
}
.widget_title {
    margin-top:30px;
    margin-bottom:20px;                                                       
}

.widget_title_text {
  color:#000000;
  font-size: 21px;
  font-weight: bold;

}
.flex{
 display: flex;
 flex-wrap: wrap;
}
article{
  flex: 1;
  min-width: 300px;
  margin-right: 20px;
}


.widget_title_bar{ 
 width:50px;                           
 height:3px;
 background-color: #36a9e1;                          
 margin-top: 10px;
}

article .news_data {
    display: flex;
}

article .news_posted_at {
    background-color: #2b4c99;
    color: #fff;
    font-size: 12px;
    padding: 10px;
    margin-right: 2px;
}
article .news_comments {
    background-color: #39aae1;
    color: #fff;
    font-size: 12px;
    padding: 10px;
    
}
article .news_thumbnail {
    margin-top: 30px;
}
article .news_thumbnail img {
    width: 100%;
    height: auto;
}
 article .news_title {
margin-top:25px;
margin-bottom:25px;
font-size: 23px; 
 }

article .news_resuem{
color:#5c5c5c;
line-height: 19px;
font-size:14px;
margin-bottom:30px; 
}

a {
text-decoration:none; 
color:black;
}

.widget_body{
    display: flex;
    justify-content:space-around;
    flex: 1;
    align-items:center;
    flex-flow: row wrap; 
}
.deps{
 width: 140px;
    height: 140px;
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0079c7;
    display: flex;
}

.widget_contact_text{
    margin-bottom: 10px;
    margin: 5px;
    align-items: center;
    font-size: 13px;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid  #5c5c5c;
    margin-bottom: 10px;
} 

.widget_contact_text{
    display: flex;
    margin-left: 2px;
    margin-right: 1px;
}

.widget_contact_text,u{
    margin-left: 5px;
    color: #727272;
    font-size: 15px;
    text-decoration: none; 
}    


footer{
  background-color: #1e1e1e;
  display:flex;
  justify-content: center; 
}

.footer_menu{
  display: flex;
}
.fm_1,.fm_2,.fm_3 {
  flex: 1;
  color: #ffffff;
  padding: 20px;
}

.fm_1{
 background-color:#39aae1; 
}

.fm_2{
background-color:#0079c7; 

}

.fm_3{
background-color:#2b4c99;


}

.flexcolumn {
  flex-direction:column; ;
}

.footer_area{
  display:flex; 
}
.footer_area_item{
  color: white;
  flex: 1;
}
footer .widget_title_text {
  color: white;
}

.footer_copy{
  border-top:1px solid #2c2c2c;
  height: 40px;
  line-height: 40px;
  color: #5c5c5c;
  font-size:12px;
  margin-top: 30px; 
}

@media (max-width:600px) {
   .banner_headline h1 {
     font-size:55px;
   }

   .banner_headline h2{
   font-size: 17px;

   }
}
Carregando publicação patrocinada...
5

Jornada legal, Arthur! No começo você não precisa de VS Code não, dá para usar até o bloco de notas, não se preocupe. HTML e CSS realmente são super leves, principalmente considerando que você pode usar qualquer editor de texto e navegador para testá-los.

Você pode subir os arquivos para o GitHub usando a interface Web, veja a documentação. Em resumo:

Botão "Upload files" após ter clicado em "Add files" no repositório.

Eu editei sua publicação para corrigir a formatação de código. Tem um ícone de ajuda no editor de texto do TabNews, e se quiser procurar detalhes na Internet ou aqui no TabNews, pesquise por "formatação markdown".

Uma recomendação: experimente criar seus sites sem usar textos Lorem ipsum. Crie um texto que pareça real, em um tamanho adequado, isso te ajudará a ter noção se a interface está servindo de verdade ou se tem algum problema, se está muito cheia ou vazia etc. Hoje em dia, pode usar o ChatGPT para ajudar a gerar textos assim.

2

Oi! Estou começando nesse caminho, então obrigado por me ajudar. Vou colocar meu código no GitHub assim que conseguir. Eu estava usando o Lorem Ipsum, mas em algum momento do desenvolvimento eu me perdi e comecei a colocar textos escritos e agora vejo como ficou feio.Obrigado pela sua contribuição!

1
3

Parabéns por ter ousado sair da sua zona de conforto e ter feito.

eu estava animado para usar todos os meus conhecimentos adquiridos.

Esse é o caminho correto, sempre aprenda, mas mais importante do que isso, sempre coloque em prática. Erre e aprenda sempre.

Parabéns ;)

1
1

Uma solução pra você não poder baixar o VScode e nem utilizar o terminal é usar o Codespaces do Github.

O Codespaces um ambiente de desenvolvimento em Linux em que vc utiliza os servidores do github pra programar, então você não precisaria baixar o vscode e estaria usando o terminal deles. Da pra acessar ao lado do botão de adicionar arquivo no repositório:

Imgur

Tem um limite mensal, mas da pra usar por bastante tempo

0