CSS tutorial series: CSS Challenge 1
Tags: beginners, webdev, tutorial, css
Published: 2023-01-16 18:41:56

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.


![Page Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2krxilf9uo8euf8ixvo.png)

**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 

![end result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aha7b5t9j26150s40m2z.png)

### 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;
}
```