Want to Learn a Skill? Build a Project.

We build practical skills when we put our skills into practice.

April 23, 2024

Sponsored by

Today we’re talking about using projects to build skills. We will also share this week’s cybersecurity news, one of our newest resources, and a popular online Python course.

This Week’s Resources

How Are You Using HTML Right Now?

Last week, we asked about your favorite Python project. We collected the results and we’re excited to share something new in the coming weeks. In the meantime, what’s your favorite way to use HTML?

What's the Most Common Way You Use HTML?

This markup language works in conjunction with a bunch of other languages. How do you use it?

Login or Subscribe to participate in polls.

This Week’s Sponsor

Invest before this company becomes a household name

What if you had the opportunity to invest in the biggest electronics products before they launched into big box retail, would you?

Ring changed doorbells and Nest changed thermostats. Early investors in these companies earned massive returns, but the opportunity to invest was limited to a select, wealthy few. Not anymore. RYSE has just launched in 100+ Best Buy stores, and you're in luck — you can still invest at only $1.50/share before their name becomes known nationwide.

They have patented the only mass market shade automation device, and their exclusive deal with Best Buy resembles that which led Ring and Nest to their billion-dollar buyouts.

If you’re just getting started with HTML, read on for our favorite beginner project (and this week’s job opportunities).

If you find this helpful, please share our newsletter with a friend!

The Best HTML Project for an Absolute Beginner

We regularly share projects on with the community, and we love to hear what you’re working on. For example, here’s our most recent HTML project: It’s a recipe page with CSS formatting.

By tackling this project, you will get some hands-on experience with:

  1. Using <header> and <footer> tags for a semantic HTML5 structure.

  2. Utilizing <section> elements to semantically group content.

  3. Create a list of ingredients with an unordered list and the <ul> tag.

  4. Outline the recipe steps with an ordered list and the <ol> tag.

  5. Embed an image to showcase the final product.

  6. Apply various CSS styles to adjust the layout with padding and margins, and improve typography by changing the font family and colors. 

I really like this HTML project, as it’s a fun and engaging way to reinforce the skills you picked up in the first project while adding more elements and styles to your growing toolkit. 

It’s also a really practical exercise because displaying lists and images in a user-friendly format is a common task in web development.

Here’s the HTML for the recipe page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to make delicious chocolate cupcakes with this simple recipe from Gluten-Free Palate.">
  <title>Chocolate Cupcakes Recipe</title>
  <link rel="stylesheet" href="recipe-styles.css">
</head>
<body>
  <article>
      <header>
          <h1>Chocolate Cupcakes from GFP</h1>
          <img src="cupcakes.jpg" alt="Chocolate Cupcakes" class="recipe-img">
      </header>
      <section class="ingredients">
          <h2>Ingredients</h2>
          <ul>
              <li>1 ½ cups granulated sugar</li>
              <li>2 cups all-purpose gluten-free flour blend</li>
              <li>¾ cup unsweetened cocoa</li>
              <li>1 ½ teaspoons gluten-free baking powder</li>
              <li>1 ½ teaspoons baking soda</li>
              <li>1 teaspoon salt</li>
              <li>2 large eggs</li>
              <li>1 cup milk</li>
              <li>½ cup vegetable oil</li>
              <li>1 ½ teaspoons gluten-free vanilla extract</li>
              <li>¾ cup boiling water</li>
              <!-- More ingredients -->
          </ul>
      </section>
      <section class="instructions">
          <h2>Instructions</h2>
          <ol>
              <li>Preheat oven to 350°F (180°C). Position rack in center of oven. Line two 12-serving cupcake pans with paper liners; set aside.</li>
              <li>In a large mixing bowl, stir together sugar, flour, cocoa, baking powder, baking soda, and salt until there are no visible clumps.</li>
              <li>Add eggs, milk, oil, and vanilla. Beat with a mixer on medium speed for two minutes.</li>
              <li>Stir in boiling water.</li>
              <li>Spoon batter evenly into cupcake wells. Bake for 20 to 22 minutes, or until a toothpick inserted in the center comes out clean.</li>
              <li>Remove from oven and let cool in the pan for 5 minutes, then remove from pan and let cool on a rack.</li>
              <li>Store in an airtight container at room temperature for up to three days, or in the refrigerator for up to a week.</li>
              <!-- More steps -->
          </ol>
      </section>
  </article>
  <footer>
      <p>Recipe by <a href="https://www.glutenfreepalate.com/easy-gluten-free-chocolate-cupcakes/">Gluten-Free Palate</a></p>
  </footer>
</body>
</html>

And remember, you can test the code (HTML and CSS) in the free HTML compiler. Adapt the code, click run, and see your changes in real time.

This Week’s Jobs

Here are a few specific job opportunities you might be interested in.

Did someone forward you this email? Sign up to get them in your inbox. It’s a free subscription, and you can update your preferences anytime.

Rate this Newsletter

The team at Hackr.io aims to provide the best information possible. Please let us know how we're doing!

Login or Subscribe to participate in polls.