`, o `<h1>` e o `<nav>`. Eu vou colocar o meu nome no `<h1>` e a profissão (ou um resumo) logo abaixo, em uma tag `<p>`. ```html <header> <nav> <a href="index.html">Home</a> <a href="blog/index.html">Blog</a> <a href="about.html">About</a> <a href="resume.html" aria-current="page">Resume</a> </nav> <h1>Blake Watson</h1> <p><em>Experienced Frontend Engineer</em></p> </header> ``` ## Um documento com seções 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 `<section>`. Cada seção deve ter um título, [segundo a documentação](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section). Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag `<section>` para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas. 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. - Habilidades - Experiência - Projetos selecionados - Formação ## Habilidades Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um `<section>`. ```html <section> <h2>Skills</h2> <ul> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / accessibility</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> ``` Isso aparece assim na tela. ![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.](/assets/img/adding-a-resume-1.webp) É 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. Você já viu várias tags usando *atributos*. Cada página do nosso site tem links com a tag `<a>`, e cada link tem um atributo `href`, por exemplo. Outro atributo bem útil é o `style`. 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 `style` para dividir a lista em colunas. ```html <section> <h2>Skills</h2> <ul style="columns: 2"> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / accessibility</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> ``` Assim a lista fica mais agradável e aproveita melhor o espaço. ![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.](/assets/img/adding-a-resume-2.webp) ## Experiência 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. 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. Por exemplo: você pode ficar tentado a usar um `<h6>` em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, `<h6>` não é a melhor escolha. Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação. ```html <section> <h2>Experience</h2> <h3>Frontend Engineer</h3> <p> <strong>MRI Technologies</strong><br> <time datetime="2019-08">August 2019</time>–Present </p> <ul> <li>Build and maintain a spacesuit management app for NASA</li> <li> Build and maintain a document management system for Collins Aerospace </li> <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> </ul>  </section> ``` Isso nos dá uma seção com esta cara. ![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.](/assets/img/adding-a-resume-3.webp) 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 *Experience*). 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. 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. {% aside 'Observação' %} A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente *realmente* 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. {% endaside %} A gente envolve a data numa tag `<time>` e coloca a [data no formato que o computador entende](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values) no *atributo* `datetime`. Eu uso uma *entidade* HTML, `–`, para colocar um traço entre a data de início e a de fim. Isso usa o caractere *en dash* (um traço um pouco mais longo que o hífen comum, `-`). Na [tipografia, ele serve para intervalos numéricos](https://practicaltypography.com/hyphens-and-dashes.html). {% aside 'Observação' %} Dê uma olhada nesta [lista de entidades HTML](https://perma.cc/BEA6-LF46). É um guia de caracteres especiais que você pode usar no HTML. {% endaside %} Por fim, eu uso uma *lista sem ordem* para os tópicos sobre o cargo e as responsabilidades. Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode [ver o currículo de demonstração](https://demo.htmlforpeople.com/resume) e [olhar o código-fonte](https://perma.cc/3WP3-R9XL). ## Projetos selecionados 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. Nesses projetos, vou usar a tag `<h3>` 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. ```html <section> <h2>Selected projects</h2> <h3>Mississippi Gulf Coast Community College</h3> <p> 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. </p> <p><a href="https://mgccc.edu/">mgccc.edu</a></p>  </section> ``` ## Formação Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com `<strong>` para ênfase e `<br>` para quebras de linha manuais. ```html <section> <h2>Education</h2> <p> <strong>Master of Business Administration</strong>, <time>2009</time><br> <em>Mississippi State University, Starkville, MS</em> </p> <p> <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br> <em>Mississippi State University, Starkville, MS</em> </p> </section> ``` ## Exemplo completo Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal. ```html <header> <nav> <a href="index.html">Home</a> <a href="blog/index.html">Blog</a> <a href="about.html">About</a> <a href="resume.html" aria-current="page">Resume</a> </nav> <h1>Blake Watson</h1> <p><em>Experienced Frontend Engineer</em></p> </header> <main> <section> <h2>Skills</h2> <ul style="columns: 2"> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / a11y</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> <section> <h2>Experience</h2> <h3>Frontend Engineer</h3> <p> <strong>MRI Technologies</strong><br> <time datetime="2019-08">August 2019</time>–Present </p> <ul> <li>Build and maintain a spacesuit management app for NASA</li> <li>Build and maintain a document management system for Collins Aerospace</li> <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> </ul> <h3>Web Developer/Interactive Designer</h3> <p> <strong>Mad Genius</strong><br> <time datetime="2015-05">May 2015</time>–<time datetime="2019-08">August 2019</time> </p> <ul> <li>Sketching, prototyping, and UI design</li> <li>WordPress theme and plugin development</li> <li>Reactive UI with Vue and Knockout</li> <li>Third-party API integrations</li> </ul> <h3>Web Developer</h3> <p> <strong>Self employed</strong><br> <time>2007</time>–<time>2015</time> </p> <ul> <li>Communicated with clients</li> <li>Developed usable, standards-based websites</li> <li>Made responsive websites</li> <li>Volunteered on many non-profit projects</li> </ul> </section> <section> <h2>Education</h2> <p> <strong>Master of Business Administration</strong>, <time>2009</time><br> <em>Mississippi State University, Starkville, MS</em> </p> <p> <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br> <em>Mississippi State University, Starkville, MS</em> </p> </section> </main> ``` Você pode ver o resultado no [site de demonstração](https://demo.htmlforpeople.com/resume). Mas aqui vai uma captura da página inteira. ![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.](/assets/img/adding-a-resume-4.webp) ## A seguir A gente tem criado *muito* 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.

--- title: 'Adicionar um currículo' summary: 'Descubra como dar estrutura a uma página grande, montando um currículo digital em HTML.' permalink: 'adicionar-um-curriculo/' originalPath: /adding-a-resume/ tags: chapter layout: 'chapter.njk' --- # Adicionar um currículo (ou CV) 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). Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um *curriculum vitae*. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho. 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. 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. 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. ## Criar o arquivo do currículo Crie um arquivo na raiz do site, `resume.html`, e copie o conteúdo de uma das outras páginas principais para dentro dele. {% aside 'Observação' %} 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. {% endaside %} Do jeito que você criar o arquivo, lembre de atualizar o ``, o `<h1>` e o `<nav>`. Eu vou colocar o meu nome no `<h1>` e a profissão (ou um resumo) logo abaixo, em uma tag `<p>`. ```html <header> <nav> <a href="index.html">Home</a> <a href="blog/index.html">Blog</a> <a href="about.html">About</a> <a href="resume.html" aria-current="page">Resume</a> </nav> <h1>Blake Watson</h1> <p><em>Experienced Frontend Engineer</em></p> </header> ``` ## Um documento com seções 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 `<section>`. Cada seção deve ter um título, [segundo a documentação](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section). Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag `<section>` para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas. 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. - Habilidades - Experiência - Projetos selecionados - Formação ## Habilidades Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um `<section>`. ```html <section> <h2>Skills</h2> <ul> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / accessibility</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> ``` Isso aparece assim na tela. ![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.](/assets/img/adding-a-resume-1.webp) É 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. Você já viu várias tags usando *atributos*. Cada página do nosso site tem links com a tag `<a>`, e cada link tem um atributo `href`, por exemplo. Outro atributo bem útil é o `style`. 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 `style` para dividir a lista em colunas. ```html <section> <h2>Skills</h2> <ul style="columns: 2"> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / accessibility</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> ``` Assim a lista fica mais agradável e aproveita melhor o espaço. ![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.](/assets/img/adding-a-resume-2.webp) ## Experiência 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. 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. Por exemplo: você pode ficar tentado a usar um `<h6>` em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, `<h6>` não é a melhor escolha. Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação. ```html <section> <h2>Experience</h2> <h3>Frontend Engineer</h3> <p> <strong>MRI Technologies</strong><br> <time datetime="2019-08">August 2019</time>–Present </p> <ul> <li>Build and maintain a spacesuit management app for NASA</li> <li> Build and maintain a document management system for Collins Aerospace </li> <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> </ul>  </section> ``` Isso nos dá uma seção com esta cara. ![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.](/assets/img/adding-a-resume-3.webp) 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 *Experience*). 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. 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. {% aside 'Observação' %} A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente *realmente* 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. {% endaside %} A gente envolve a data numa tag `<time>` e coloca a [data no formato que o computador entende](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values) no *atributo* `datetime`. Eu uso uma *entidade* HTML, `–`, para colocar um traço entre a data de início e a de fim. Isso usa o caractere *en dash* (um traço um pouco mais longo que o hífen comum, `-`). Na [tipografia, ele serve para intervalos numéricos](https://practicaltypography.com/hyphens-and-dashes.html). {% aside 'Observação' %} Dê uma olhada nesta [lista de entidades HTML](https://perma.cc/BEA6-LF46). É um guia de caracteres especiais que você pode usar no HTML. {% endaside %} Por fim, eu uso uma *lista sem ordem* para os tópicos sobre o cargo e as responsabilidades. Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode [ver o currículo de demonstração](https://demo.htmlforpeople.com/resume) e [olhar o código-fonte](https://perma.cc/3WP3-R9XL). ## Projetos selecionados 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. Nesses projetos, vou usar a tag `<h3>` 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. ```html <section> <h2>Selected projects</h2> <h3>Mississippi Gulf Coast Community College</h3> <p> 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. </p> <p><a href="https://mgccc.edu/">mgccc.edu</a></p>  </section> ``` ## Formação Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com `<strong>` para ênfase e `<br>` para quebras de linha manuais. ```html <section> <h2>Education</h2> <p> <strong>Master of Business Administration</strong>, <time>2009</time><br> <em>Mississippi State University, Starkville, MS</em> </p> <p> <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br> <em>Mississippi State University, Starkville, MS</em> </p> </section> ``` ## Exemplo completo Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal. ```html <header> <nav> <a href="index.html">Home</a> <a href="blog/index.html">Blog</a> <a href="about.html">About</a> <a href="resume.html" aria-current="page">Resume</a> </nav> <h1>Blake Watson</h1> <p><em>Experienced Frontend Engineer</em></p> </header> <main> <section> <h2>Skills</h2> <ul style="columns: 2"> <li>HTML / CSS</li> <li>JavaScript</li> <li>Web standards / a11y</li> <li>TypeScript</li> <li>Vue</li> <li>PHP</li> <li>Sass</li> <li>Electron</li> <li>Sketch</li> </ul> </section> <section> <h2>Experience</h2> <h3>Frontend Engineer</h3> <p> <strong>MRI Technologies</strong><br> <time datetime="2019-08">August 2019</time>–Present </p> <ul> <li>Build and maintain a spacesuit management app for NASA</li> <li>Build and maintain a document management system for Collins Aerospace</li> <li>Create reactive frontends with Vue, REST APIs, and GraphQL</li> </ul> <h3>Web Developer/Interactive Designer</h3> <p> <strong>Mad Genius</strong><br> <time datetime="2015-05">May 2015</time>–<time datetime="2019-08">August 2019</time> </p> <ul> <li>Sketching, prototyping, and UI design</li> <li>WordPress theme and plugin development</li> <li>Reactive UI with Vue and Knockout</li> <li>Third-party API integrations</li> </ul> <h3>Web Developer</h3> <p> <strong>Self employed</strong><br> <time>2007</time>–<time>2015</time> </p> <ul> <li>Communicated with clients</li> <li>Developed usable, standards-based websites</li> <li>Made responsive websites</li> <li>Volunteered on many non-profit projects</li> </ul> </section> <section> <h2>Education</h2> <p> <strong>Master of Business Administration</strong>, <time>2009</time><br> <em>Mississippi State University, Starkville, MS</em> </p> <p> <strong>Bachelor of Business Admiinistration</strong>, Information Systems, <time>2007</time><br> <em>Mississippi State University, Starkville, MS</em> </p> </section> </main> ``` Você pode ver o resultado no [site de demonstração](https://demo.htmlforpeople.com/resume). Mas aqui vai uma captura da página inteira. ![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.](/assets/img/adding-a-resume-4.webp) ## A seguir A gente tem criado *muito* 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.