CSS tutorial series: CSS Challenge 1

In this post we're going to put the knowledge we've learned from the previous tutorials we've seen into practice. The webpage we're going to create will be very simple, with nothing fancy with only some colors and fundamental styling.

The following advice will help you get ready for the future before we begin this project.

Try building this project independently after carefully reading the instructions. If necessary, look up any CSS properties using Google or a search engine you prefer. Being a developer means you must put a lot of effort into research and problem-solving.

Since you're reading this CSS tutorial series you must have a good understanding of HTML. Before copying the HTML boilerplate i'll provide you try creating the template yourself, this should put your HTML knowledge into practice.

Guidelines:

• Create your html file.
• Create an external CSS file and link it.

In your HTML file you should have

• your blog title inside a header, articles, article titles.
• In your first article, you should have a title of "About Me" including a paragraph where you introduce yourself.
• In the second article, you should have a title of "My Hobbies" and an ordered list of 3 of your hobbies.
• In the third article, you should have a title of "My Goals", and an unordered list of 3 of the goals you want to achieve.

In your CSS file
Styling your header

• Set arial as the default font for the entire page.
• Set the background color of your header to #E7A405.
• Make your title Italic and underline it.
• Center your blog title.

Styling your main section

• Set the background color of your main section to black using hsl;
• Set your articles' titles should be of hex value of #E7A405 and underline them.
• Set the text color to white so that all the text in your main is white.
• Center all your sections' texts
• Add padding: 10px to your introduction paragraph
• Change the color of your third hobby to this blue color rgb(10,149,255).
• Change your 2nd Goal to this red color rgb(255,60,65).
• Add 10px of padding to your last section, padding: 10px

your end result should look something like this

Tips

To be able to make the same layout you should spend some time researching these properties

1. text-align
2. text-decoration
3. list-style-position
4. font-style
5. font-family

• Use your developer tools to see why your styles aren't the way you want.
• Your body and headings have a default margin, to remove it set the margin to 0
• Use classes.

---

Solution

HTML

<header>
  <h1 class="blog-title">Title of your blog</h1>
</header>
<main>
  <section>
    <article>
      <h2 class="section-title intro">About Me</h2>
      <p class="intro">introduce yourself in this paragraph</p>
    </article>
  </section>

  <section>
    <article>
      <h2 class="section-title">Your Hobbies</h2>
      <ol class="list">
        <li>Hobby 1</li>
        <li>Hobby 2</li>
        <li class="blue">Hobby 3</li>
      </ol>
    </article>
  </section>
  <section class="goals">
    <article>
      <h2 class="section-title">My Goals</h2>
      <ul class="list">
        <li>Goal 1</li>
        <li class="red">Goal 2</li>
        <li>Goal 3</li>
      </ul>
    </article>
  </section>
</main>

CSS

body {
  font-family: arial; 
  margin: 0;
}

header {
  background-color: #E7A405;
  padding: 20px;
  text-decoration: underline;
}

.blog-title {
  margin: 0;
  text-align: center;
  font-style: italic;
}

main {
  background-color: hsl(0, 0%, 0%);
  color: white;
  text-align: center;
  list-style-position: inside;
}

.section-title {
  margin: 0;
  color: #E7A405;
  text-decoration: underline;
  text-align: center;
}

.intro {
  padding: 10px;
}

.blue {
  color: rgb(10,149,255);
}

.red {
  color: rgb(255,60,65);
}

.goals {
  padding: 10px;
}