code.pablomurad.com — htmlepessoas.com.git (gh-pages): adicionar-um-curriculo/index.html

adicionar-um-curriculo/index.html (view raw)
<!doctype html>

<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <title>Adicionar um currículo</title>

    <meta property="og:title" content="Adicionar um currículo" />
    <meta property="og:description" content="Descubra como dar estrutura a uma página grande, montando um currículo digital em HTML." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/adicionar-um-curriculo/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/adicionar-um-curriculo/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/adding-a-resume/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/adding-a-resume/"
    />
    

    <!-- favicon -->
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/assets/img/design/favicon.png"
    />

    <script>
      /**
       * A global function that the theme toggle can use to apply the current theme.
       * @param {string | undefined} override - The setting that needs to be applied or undefined
       * @returns {string} - The applied theme setting
       */
      window.applyThemeSetting = function (override) {
        const getSystemPreference = () => {
          if (
            window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches
          ) {
            return 'dark';
          }
          return 'light';
        };
        const currentSetting =
          override ||
          localStorage.getItem('user-color-scheme') ||
          getSystemPreference();
        const currentThemeValue =
          document.documentElement.getAttribute('data-theme');
        if (currentSetting && currentSetting !== currentThemeValue) {
          document.documentElement.setAttribute('data-theme', currentSetting);
          localStorage.setItem('user-color-scheme', currentSetting);
        }
        return currentSetting;
      };
      window.applyThemeSetting();
    </script>

    <link rel="stylesheet" href="/assets/css/style.css" />

    <script defer src="/assets/js/app.js"></script>
    
  </head>

  <body class="chapter">
    
      <header class="site-header">
        <div class="logo-wrap">
          <p class="site-title container">
            <a href="/">
              <span class="sr-only">HTML e pessoas</span>
              <?xml version="1.0" encoding="UTF-8"?>
<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>HTML e pessoas</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo" transform="translate(10, 10)">
            <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect>
            <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text>
            <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line>
                <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line>
                <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line>
                <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle>
                <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle>
                <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path>
                <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path>
                <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path>
                <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path>
            </g>
            <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line>
                <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line>
                <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line>
                <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line>
                <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line>
                <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line>
                <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle>
                <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle>
                <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path>
                <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path>
                <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path>
            </g>
        </g>
    </g>
</svg>
            </a>
          </p>
        </div>

        <a href="#main-content" class="skip-link">Pular para o conteúdo</a>

        <div class="container"><details class="main-menu" id="main-menu">
  <summary>Menu</summary>

  <nav>
    <p class="menu-heading">
      <strong>Capítulos</strong>
    </p>

    <ul>
      <li>
        <a href="/introducao" 
          >Introdução</a
        >
      </li>
      <li>
        <a
          href="/do-zero-a-internet-seu-primeiro-site"
          
          >Do zero à internet: seu primeiro site</a
        >
      </li>
      <li>
        <a
          href="/adicionar-conteudo-ao-seu-site"
          
          >Adicionar conteúdo ao seu site</a
        >
      </li>
      <li>
        <a
          href="/intervalo-melhore-seu-editor-de-texto"
          
          >Intervalo: melhore seu editor de texto</a
        >
      </li>
      <li>
        <a
          href="/um-site-com-estilo"
          
          >Um site com estilo</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-sobre"
          
          >Adicionar uma página Sobre</a
        >
      </li>
      <li>
        <a href="/adicionar-um-blog" 
          >Adicionar um blog</a
        >
      </li>
      <li>
        <a
          href="/adicionar-um-curriculo"
          aria-current="page"
          >Adicionar um currículo</a
        >
      </li>
      <li>
        <a
          href="/intervalo-instalar-um-servidor-local"
          
          >Intervalo: instalar um servidor local</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-divertida"
          
          >Adicionar uma página divertida</a
        >
      </li>
      <li>
        <a
          href="/conquista-desbloqueada-hipertextista"
          
          >Conquista desbloqueada: Hipertextista</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Capítulos bônus</strong>
    </p>
    <ul>
      <li>
        <a
          href="/personalizar-o-simple-css"
          
          >Personalizar o Simple.css</a
        >
      </li>
      <li>
        <a href="/basico-de-css" 
          >Básico de CSS</a
        >
      </li>
      <li>
        <a
          href="/html-reutilizavel-com-php"
          
          >HTML reutilizável com PHP</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Demos e recursos</strong>
    </p>

    <ul>
      <li>
        <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/"
          >Demo da homepage do Blake</a
        >
      </li>
      <li>
        <a
          target="_blank"
          rel="noopener"
          href="https://planets.htmlforpeople.com/"
          >Demo Planetas do Sistema Solar</a
        >
      </li>
      <li>
        <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
          >Recursos e links</a
        >
      </li>
    </ul>
  </nav>

  <div class="settings" hidden>
    <p class="menu-heading">
      <strong>Ajustes</strong>
    </p>

    <theme-toggle>
      <label class="checkbox theme-toggle">
        <input type="checkbox" /> Tema escuro
      </label>
    </theme-toggle>

    <code-wrap>
      <label class="checkbox code-wrap">
        <input type="checkbox" /> Quebrar linhas do código
      </label>
    </code-wrap>
  </div>
</details>
</div>
      </header>
    

    <main id="main-content" class="container">
      
  <h1 id="adicionar-um-curriculo-ou-cv" tabindex="-1"><a class="header-anchor" href="#adicionar-um-curriculo-ou-cv">Adicionar um currículo (ou CV)</a></h1>
<p>Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV).</p>
<p>Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um <em>curriculum vitae</em>. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho.</p>
<p>Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado.</p>
<p>Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira.</p>
<p>Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo.</p>
<h2 id="criar-o-arquivo-do-curriculo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo-do-curriculo">Criar o arquivo do currículo</a></h2>
<p>Crie um arquivo na raiz do site, <code>resume.html</code>, e copie o conteúdo de uma das outras páginas principais para dentro dele.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você está usando o Visual Studio Code, selecione uma das páginas principais na barra lateral e depois copie e cole. Vai nascer uma cópia da página, e você pode renomear o arquivo.</p>
</aside>
<p>Do jeito que você criar o arquivo, lembre de atualizar o <code>&lt;title&gt;</code>, o <code>&lt;h1&gt;</code> e o <code>&lt;nav&gt;</code>. Eu vou colocar o meu nome no <code>&lt;h1&gt;</code> e a profissão (ou um resumo) logo abaixo, em uma tag <code>&lt;p&gt;</code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resume.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span></code></pre>
<h2 id="um-documento-com-secoes" tabindex="-1"><a class="header-anchor" href="#um-documento-com-secoes">Um documento com seções</a></h2>
<p>Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag <code>&lt;section&gt;</code>. Cada seção deve ter um título, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">segundo a documentação</a>.</p>
<p>Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag <code>&lt;section&gt;</code> para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas.</p>
<p>Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem.</p>
<ul>
<li>Habilidades</li>
<li>Experiência</li>
<li>Projetos selecionados</li>
<li>Formação</li>
</ul>
<h2 id="habilidades" tabindex="-1"><a class="header-anchor" href="#habilidades">Habilidades</a></h2>
<p>Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um <code>&lt;section&gt;</code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Isso aparece assim na tela.</p>
<p><img src="/assets/img/adding-a-resume-1.webp" alt="Captura de tela de uma página “Resume” de Blake Watson. O cabeçalho tem botões de navegação para “Home”, “Blog”, “About” e “Resume” (este último destacado). O título “Blake Watson” aparece em negrito, com o subtítulo “Experienced Frontend Engineer” em itálico menor logo abaixo. Em seguida, uma seção chamada “Skills” lista várias habilidades técnicas em tópicos."></p>
<p>É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver.</p>
<p>Você já viu várias tags usando <em>atributos</em>. Cada página do nosso site tem links com a tag <code>&lt;a&gt;</code>, e cada link tem um atributo <code>href</code>, por exemplo. Outro atributo bem útil é o <code>style</code>. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo <code>style</code> para dividir a lista em colunas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Assim a lista fica mais agradável e aproveita melhor o espaço.</p>
<p><img src="/assets/img/adding-a-resume-2.webp" alt="Captura de tela da página “Resume” atualizada. A seção “Skills” agora está organizada em duas colunas, cada uma com habilidades técnicas em tópicos, num visual mais compacto e equilibrado."></p>
<h2 id="experiencia" tabindex="-1"><a class="header-anchor" href="#experiencia">Experiência</a></h2>
<p>Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais.</p>
<p>Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência.</p>
<p>Por exemplo: você pode ficar tentado a usar um <code>&lt;h6&gt;</code> em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, <code>&lt;h6&gt;</code> não é a melhor escolha.</p>
<p>Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Experience<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&ndash;">&amp;ndash;</span>Present
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>
      Build and maintain a document management system for Collins Aerospace
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>

  <span class="token comment">&lt;!-- ...the rest of the jobs go here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Isso nos dá uma seção com esta cara.</p>
<p><img src="/assets/img/adding-a-resume-3.webp" alt="Captura de tela da seção “Experience” numa página de currículo. O título “Experience” está grande e em negrito. Abaixo, o cargo “Frontend Engineer” aparece em destaque, seguido do nome da empresa “MRI Technologies” em negrito e do período “August 2019–Present”. Uma lista com marcadores descreve responsabilidades e conquistas nessa função."></p>
<p>Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 <em>Experience</em>). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha.</p>
<p>Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente <em>realmente</em> quisesse controlar o visual, adicionaria um CSS personalizado. Não vamos fazer isso agora. Veja os capítulos bônus no fim do livro para saber mais sobre CSS.</p>
</aside>
<p>A gente envolve a data numa tag <code>&lt;time&gt;</code> e coloca a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">data no formato que o computador entende</a> no <em>atributo</em> <code>datetime</code>. Eu uso uma <em>entidade</em> HTML, <code>&amp;ndash;</code>, para colocar um traço entre a data de início e a de fim. Isso usa o caractere <em>en dash</em> (um traço um pouco mais longo que o hífen comum, <code>-</code>). Na <a href="https://practicaltypography.com/hyphens-and-dashes.html">tipografia, ele serve para intervalos numéricos</a>.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Dê uma olhada nesta <a href="https://perma.cc/BEA6-LF46">lista de entidades HTML</a>. É um guia de caracteres especiais que você pode usar no HTML.</p>
</aside>
<p>Por fim, eu uso uma <em>lista sem ordem</em> para os tópicos sobre o cargo e as responsabilidades.</p>
<p>Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode <a href="https://demo.htmlforpeople.com/resume">ver o currículo de demonstração</a> e <a href="https://perma.cc/3WP3-R9XL">olhar o código-fonte</a>.</p>
<h2 id="projetos-selecionados" tabindex="-1"><a class="header-anchor" href="#projetos-selecionados">Projetos selecionados</a></h2>
<p>Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção.</p>
<p>Nesses projetos, vou usar a tag <code>&lt;h3&gt;</code> para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Selected projects<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Mississippi Gulf Coast Community College<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development.
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://mgccc.edu/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mgccc.edu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

  <span class="token comment">&lt;!-- ...the rest of the projects go here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<h2 id="formacao" tabindex="-1"><a class="header-anchor" href="#formacao">Formação</a></h2>
<p>Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com <code>&lt;strong&gt;</code> para ênfase e <code>&lt;br&gt;</code> para quebras de linha manuais.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Education<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>, Information Systems,
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span></code></pre>
<h2 id="exemplo-completo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo">Exemplo completo</a></h2>
<p>Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resume.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Web standards / a11y<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Experience<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&ndash;">&amp;ndash;</span>Present
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Build and maintain a document management system for Collins Aerospace<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Web Developer/Interactive Designer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Mad Genius<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 2015<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&ndash;">&amp;ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Sketching, prototyping, and UI design<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>WordPress theme and plugin development<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Reactive UI with Vue and Knockout<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Third-party API integrations<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>Web Developer<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Self employed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&ndash;">&amp;ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2015<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Communicated with clients<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Developed usable, standards-based websites<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Made responsive websites<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>Volunteered on many non-profit projects<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Education<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>, Information Systems, <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>Você pode ver o resultado no <a href="https://demo.htmlforpeople.com/resume">site de demonstração</a>. Mas aqui vai uma captura da página inteira.</p>
<p><img src="/assets/img/adding-a-resume-4.webp" alt="Captura de tela da página “Resume” completa. O título “Blake Watson” e o subtítulo “Experienced Frontend Engineer” aparecem em destaque. Abaixo, a seção “Skills” lista habilidades técnicas em duas colunas. A seção “Experience” detalha o histórico de trabalho: Frontend Engineer na MRI Technologies, Web Developer/Interactive Designer na Mad Genius e Web Developer (autônomo). A seção “Education” lista diplomas em administração pela Mississippi State University."></p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>A gente tem criado <em>muito</em> conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.</p>

  
  

  
    <nav
      class="mb-xl"
      style="display: flex; flex-direction: column; gap: 0.5rem;"
    >
      
        <p>
          <strong><span role="presentation">&rarr;</span> Próximo capítulo:</strong>
          <a href="/intervalo-instalar-um-servidor-local/">Intervalo: instalar um servidor local</a>
        </p>
      

      
        <p>
          <strong
            ><span role="presentation">&larr;</span> Capítulo anterior:</strong
          >
          <a href="/adicionar-um-blog/">Adicionar um blog</a>
        </p>
      
    </nav>
  

    </main>

    


    <elevator-button title="Ir para o menu">
      <a href="#main-menu">
        <span class="sr-only">Ir para o menu</span>
      </a>
    </elevator-button>

    <div class="sticky-footer" style="margin-block-start: auto">
      <div class="promo">
        <div class="container">
          <p class="promo-title">Gostou do livro?</p>
          <div class="stack">
            <p>
              <em>HTML e Pessoas</em> é a tradução de um trabalho feito com
              carinho. Se puder, considere enviar uma doação no Ko-fi para o
              autor original, Blake Watson, e compartilhar o livro nas redes
              sociais.
            </p>

            <p>
              <a href="https://ko-fi.com/blakewatson" class="button"
                >Doar no Ko-fi</a
              >
            </p>

            <p>Confira outros projetos do Blake:</p>
            <ul>
              <li>
                <a href="https://afinestart.me"
                  >Uma extensão minimalista de nova aba</a
                >
              </li>
              <li>
                <a href="https://synthwave.live/">Um site de mix synthwave</a>
              </li>
              <li>
                <a href="https://minimalcharactersheet.com/"
                  >Uma ficha minimalista para D&amp;D</a
                >
              </li>
              <li>
                <a href="https://blakewatson.com">O site pessoal dele</a>
              </li>
            </ul>

            <p class="promo-title mt-xl mb-xs">Prefere ler em inglês?</p>
            <p>
              O original <em>HTML for People</em> está em
              <a href="https://htmlforpeople.com">htmlforpeople.com</a>, escrito
              por Blake Watson. Também existe uma versão em espanhol, graças a
              <a
                href="https://victorhckinthefreeworld.com/2024/12/11/aprende-html-desde-cero-y-crea-tu-propio-sitio-web/"
                >Victorhck</a
              >.
            </p>

            <p class="mb-md">
              <a class="button" href="https://htmlforpeople.com">
                Visitar HTML for People</a
              >
            </p>
          </div>
        </div>
      </div>

      <footer class="site-footer">
        <div class="container">
          <p class="mb-sm">
            <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
              >Recursos</a
            >
            &middot;
            <a href="/printable">Versão para imprimir</a>
            &middot;
            <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
            &middot;
            <a href="https://blakewatson.com/about">Sobre o autor</a>
          </p>
          <p>
            Livro original de
            <a href="https://blakewatson.com">Blake Watson</a> —
            <a href="https://htmlforpeople.com">HTML for People</a>. Tradução
            para o português do Brasil oferecida por
            <a href="https://pablomurad.com">Pablo Murad</a> e
            <a href="https://portalidea.com.br">Portal IDEA</a>. Licença
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
              >CC BY-NC-SA 4.0</a
            >.
          </p>
        </div>
      </footer>
    </div>
  </body>
</html>
all repos — htmlepessoas.com @ gh-pages

Venha aprender HTML com um método simplificado.
