🧰 Assignment: HTML Résumé (HTML & CSS)

By

Using HTML & CSS, create a digital résumé. If you are new to HTML, keep the styling simple and clean. Channel your inner Bauhaus with clear hierarchy, generous spacing, and limited color. If you feel ambitious, try a more complex page layout. Treat this as a learning exercise, not a final portfolio piece.

 

Requirements

  • A web font via Google Fonts or Adobe Fonts

    (Adobe has a better selection, Google is easiest to start with.)

  • Headings: at least one <h1>, one <h2>, and one <h3>

  • Paragraphs using <p>

  • An unordered list using <ul> with <li> items

  • Clean, readable structure and semantic tags

 

Suggested Structure

Header with your name and contact info → Sections for Education, Experience, Skills. Keep the document logical and accessible.

Your résumé should make use of the following elements:

A web font via either Google or Adobe ( adobe has a better selection )

At least one; heading one <h1>, heading two <h2> & heading three <h3> tags

Paragraphs tags <p>

An unordered list with list items.

 

Complete this assignment by next Tuesday.

Here’s some sample mark up, to get you started

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My Resume</title>

</head>

<body>

  <header>

    <h1><!-- Your Name --></h1>

    <p><!-- Contact Info (Email, Phone) --></p>

  </header>

  <main>

    <section>

      <h2>Education</h2>

      <!-- Add your school(s), degree(s), dates -->

    </section>

    <section>

      <h2>Experience</h2>

      <!-- Add job titles, companies, dates, bullet points -->

    </section>

    <section>

      <h2>Skills</h2>

      <!-- Add a simple list of skills -->

    </section>

  </main>

  <footer>

    <p><!-- Optional footer info --></p>

  </footer>

</body>

</html>

</ul>

To see an example of a Google web fonts applied to your file, paste these lines into the <head> of your HTML document:

  <!-- Google Fonts -->

  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">

  <style>

    body {

      font-family: 'Open Sans', sans-serif;

      margin: 2rem;

      line-height: 1.5;

    }

    h1, h2, h3 {

      font-family: 'Merriweather', serif;

    }

  </style>

 

Leave a Reply