Avançar para o conteúdo principal

Mais um projeto HTML e CSS

 Olá a todos, a cada dia consigo aprender um pouco mais de como fazer isso funcionar e já consegui colocar meu domínio nesse blog (eu sei, isso é fácil, mas por algum motivo a plataforma de onde comprei meu domínio não tinha tanta compatibilidade assim com o blogger, então demorei um bocado até conseguir fazer a ligação) e agora já podem aceder com o domínio certo.

Como continuação dos meus estudos em Html e Css, fiz um novo projeto e deixarei novamente aqui meu código (que também pode ser acedido pelo meu GitHub (https://github.com/niviadeandrade):

HTML

<!DOCTYPE html>
<html lan="en">
  <head>
    <meta charset="UTF-8"/>
    <meta content="viewport"/>
    <meta name="description" content="freeCodeCamp - test Nivia Andrade - build a tribute page"/>
    <title>Nivia Andrade Evaluation</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
      <main id="main">
        <h1 class="titlep" id="title">HTML AND CSS TEST</h1>
        <p class="italic">Made by Nivia Andrade - Aspirant to backend developer</p>
      <figure  id="img-div">
 <img id="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4PutzxveR2HyC1Zh-4XSILzx7ZqfSfP_OZek2HVYJKbKCFqmLNxEhbC9SAzkHisJmh79vuxfUebO-99umO46E9goZFiK31XvUgc0jj1TpeKA1f7H-NCLmubWY6j3aV395Zka1M2vquU/w640-h424-s-no/?authuser=0"
 alt="computer of a developer with codes" width="80%"/>
   <figcaption id="img-caption">A computer with some code to represent the daily as a developer 
     </figcaption>  
        </figure>
        
   <div id="tribute-info">
   
     <h2>HTML INFORMATION</h2>
     <ul>
       <li>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</li>
     <li>HTML describes the structure of a web page semantically and originally included cues for its appearance.</li>
     <li>It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</li>
     <li>With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.</li>
     <li>A form of HTML, known as HTML5, is used to display video and audio, primarily using the 'canvas' element, together with JavaScript.</li>
     <li>In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.</li>
     <li>The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. </li>
     </ul>
     
     <h2>CSS INFORMATION</h2>
     <ul>
     <li>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).</li>
     <li>CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts.</li>
     <li>The separation provide more flexibility and control in the specification of presentation characteristics.</li>
     <li>Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods. </li>
     <li>The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element.</li>
     <li>The CSS specifications are maintained by the World Wide Web Consortium (W3C).</li>
     <li>Internet media type (MIME type) <b>text/css</b> is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.</li>
     </ul>
     
     </div>  
     
     <div class="endpage"><section class="p"><p>If you want to know more about HTML and CSS, you can acess the links bellow:
<a id="tribute-link" href="https://en.wikipedia.org/wiki/HTML" target="_blank">Wikipedia HTML</a> - to HTML information and <a id="tribute-link2" href="https://en.wikipedia.org/wiki/CSS" target="_blank">Wikipedia CSS</a> - to CSS information.</p> 
  <p>Good studies!</p>
    </section></div>
    
    </main>
        </body>
  </html>

CSS

.titlep{
  text-align: center;
  color: #24445b;
  margin-bottom: 0;
}

.italic {
text-align: center;
font-style: italic;
margin-top: 0;
}

body{
  font-family:  Agency FB, sans-serif; 
  text-align: center;
  display:block;
}

main {
   background-color: #c1d0db;
   line-height: 1.5;
   text-align: center;
   }

figure {
background-color: #ffffff;
justify-content: center;
 }

img {
  padding-top: 1.5rem;
  max-width: 100%;
  display:block;
  margin: auto;
    }

figcaption{
  padding-bottom: 1rem;
  font-size: 15px;
  color: #5b5b5b;
  margin-bottom: 50px;
    }

h2 {
  display: block;
  text-align: left;
  color:#24445b;
  margin: 1rem 5px 1rem 5px;
}

ul {
  text-align: left;
  margin-bottom: 2rem;
}

.endpage {
 text-align: left;
 background-color: #e6e6e6;
 margin: 0;
 border: none;
}

.p {
  margin: 1rem;
}

E essa é a imagem do resultado:














E é isso, ainda está tudo muito básico - eu sei - mas fico feliz de cada dia poder evoluir mais. Meu objetivo principal como já dito no post anterior é ser uma desenvolvedora backend, mas mesmo assim quero chegar em um nível avançado de html/css e javascript, para poder construir o meu próprio "site portfólio".  Avançando cada dia mais e o importante é nunca parar!

Até uma próxima

Comentários

Mensagens populares deste blogue

Meu primeiro jogo em Scratch

    Olá a todos, hoje vou partilhar com vocês meu primeiro jogo feito no Scratch. Mas como saí de códigos HTML/CSS para jogos no Scratch? Então...eu comecei uma formação: a CS50 (Computer science 50), mas como estou a fazer a versão em "Português" se chama CC50 (Ciência da computação 50. Português entre aspas porque tenho assistido às aulas toda em inglês e sem a legenda, porque como entendo acho que me distrai menos).     Comecei essa formação no intuito de aumentar meu conhecimento teórico em Ciência da computação e minha primeira aula foi sobre linguagem binária e Scratch. Esse foi o resultado do que aprendi na aula e que coloquei em prática. O jogo é extremamente simples e o objetivo é chegar ao outro lado sem tocar na linha que se move. Penso em futuramente, por hobby mesmo, criar jogos mais elaborados, mas por agora continuarei a manter meu foco em me aprimorar em linguagens necessárias para exercer minha tão sonhada função em backend. Esse é o link para o meu ...

Updates

 Hi everyone, I started this (initially) blog as a form that I share with you my progress in my future career goal but I having a lot of stuffs to do that I never update anything here! So...I coming here today to share some updates: Firts of all: As this blog will advanced and be transformed to a portfolio (someday), I decided write in english to be more "accessible" (as it were) and also to increase my english write habilities (that is not the best, as you can see) Secondly, I'll try to come here now and then and share some evolutions that I having. To advance: Last semester in my college, I made a system project for an instituition in Access. Was a DB for them store their information. Was pretty interesting and challenger do this and I want to share with y'all. and finally, it pass more than an year since I start this blog and need to confess that I don't evolved so much as I wanted. I have so much to do and I'm not dedicating the time that I need in my stud...