Curso Desenvolvimento Web com HTML, CSS e JavaScript > apostila > Capitulo 18

Exercício: Progressive Enhancement

Objetivo

Durante todo o curso aplicaremos um conceito chamado de Progressive Enhancement. O P.E. vai permear todos os nossos códigos.

Nesse primeiro momento, o que é importante para nós:

Passo a passo com código

  1. No arquivo cabecalho.css na pasta css faça as seguintes alterações:

    css/cabecalho.css
     .cabecalho {
    -  b̶a̶c̶k̶g̶r̶o̶u̶n̶d̶-̶c̶o̶l̶o̶r̶:̶ #̶2̶D̶5̶3̶7̶7̶;̶
    +  text-align: center;
    +  font-size: 0.6rem;
    +  font-weight: bold;
    +  text-transform: uppercase;
    +  letter-spacing: 0.23em;
    +
       color: #fff;
    +  background-color: #2D5377;
    +}
    +
    +.cabecalho__logo {
    +  padding: 1.5em 0;
    +  width: 14.5em;
    +}
    +
    +.cabecalho__menu {
    +  background-color: #272B3A87;
    +}
    +
    +.cabecalho__item-menu {
    +  display: inline-block;
    +}
    +
    +.cabecalho__item-menu a {
    +  display: inline-block;
    +  padding: 1.86em 1.42em;
     }
  2. No arquivo index.html na pasta raíz do projeto faça as seguintes alterações:

    index.html
     <!doctype html>
     <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width">
         <title>Musicdot</title>
         <link rel="icon" href="img/favicon.ico">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,&display=block">
         <link rel="stylesheet" href="css/reset.css">
         <link rel="stylesheet" href="css/cabecalho.css">
       </head>
       <body>
    
         <header class="cabecalho">
           <a href="index.html">
    -        <̶i̶m̶g̶ s̶r̶c̶=̶i̶m̶g̶/̶m̶u̶s̶i̶c̶d̶o̶t̶-̶l̶o̶g̶o̶-̶l̶i̶g̶h̶t̶.̶s̶v̶g̶"̶ t̶i̶t̶l̶e̶=̶I̶r̶ p̶a̶r̶a̶ a̶ p̶á̶g̶i̶n̶a̶ i̶n̶i̶c̶i̶a̶l̶ d̶a̶ M̶u̶s̶i̶c̶d̶o̶t̶"̶ a̶l̶t̶=̶M̶u̶s̶i̶c̶d̶o̶t̶"̶>̶
    +        <img class="cabecalho__logo" src="img/musicdot-logo-light.svg" title="Ir para a página inicial da Musicdot" alt="Musicdot">
           </a>
    
           <nav>
    -        <̶u̶l̶>̶
    -          <̶l̶i̶>̶ <̶a̶ h̶r̶e̶f̶=̶s̶o̶b̶r̶e̶.̶h̶t̶m̶l̶#̶c̶o̶n̶t̶a̶t̶o̶"̶>̶ C̶o̶n̶t̶a̶t̶o̶ <̶a̶>̶ <̶l̶i̶>̶
    -          <̶l̶i̶>̶ <̶a̶ h̶r̶e̶f̶=̶"̶#̶"̶>̶ E̶n̶t̶r̶a̶r̶ <̶a̶>̶ <̶l̶i̶>̶
    -          <̶l̶i̶>̶ <̶a̶ h̶r̶e̶f̶=̶"̶#̶"̶>̶ M̶a̶t̶r̶i̶c̶u̶l̶e̶-̶s̶e̶ <̶a̶>̶ <̶l̶i̶>̶
    +        <ul class="cabecalho__menu">
    +          <li class="cabecalho__item-menu"> <a href="sobre.html#contato"> Contato </a> </li>
    +          <li class="cabecalho__item-menu"> <a href="#"> Entrar </a> </li>
    +          <li class="cabecalho__item-menu"> <a href="#"> Matricule-se </a> </li>
             </ul>
           </nav>
         </header>
    
         <main>
           Conteúdo principal
         </main>
    
         <footer>
           Rodapé
         </footer>
       </body>
     </html>