Please give me some advice or suggestion to improve my code>.<

I may have misunderstood the question, but normally you would style using CSS.

Now I get it!! https://w.trhou.se/gahc59772v This is my code:)

I see so we shouldn't style the js code in .js file

It looks like you had the right idea to add CSS, and your code to change the color to orange is good, but it's placed on the h2 element which has no contents. If you move it to the body element, however, you will see the results.

You could also add a "style" tag in the "head" section. For example, you could change the font size like this:

  <style>
    body { font-size: 24px; }
  </style>

As you continue learning front-end development, you'll learn a lot more about styling and CSS in other courses.

When I load your snapshot it works fine for me, however, the more professional method would be to make a seperate CSS file for the style.

If you've never worked with CSS before, here's a very short explanation of the basics.

In CSS you always start with a selector as the name implies, a selector selects the element(s) which you want to change. This can be by ID, Class or Tag. (For example, if you want to color all h2 elements orange, you'd target the h2 tag, but if you only want to paint a specific h2 element orange you'd need to give that element an unique ID and then select that ID).

Your snapshot already has a main.css file I can see, here is a piece of the CSS

h1,
h2 {
  font-size: 2.4em;
  font-weight: 400;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;
}

h2 {
  font-size: 1.8em;
}

p {
  color: #8d9aa5;
  font-size: 1.4em;
  margin-bottom: 15px;
  line-height: 1.4;
}

What this piece does is it first selects all the h1 and h2 tags this is what the h1, h2{} does. And than inside the {} curly brackets are the attribute and value pairs. Basically you name the attribute you want to change, and then you set the value you want to set it to. for example color: is the attribute and #384047 is the value.

after that it select h2 again. Weird right, it's already selected, and it even has a conflicting value. That's because in this example, they first select h1 and h2 at the same time, setting some options for both headers, but then they update only h2 again after it (note that the LAST rule it finds overwrites the rules before it). So h2 and h1 will have a similar style, but h2 will be a bit smaller (1.8 em instead of 2.4 em).

Then finally it selects the p tags (paragraphs), which you haven't specified in your html (personally i think it would be a good idea to wrap your story in a p tag).

here's a snapshot https://w.trhou.se/07nmxwziv3 see if you can change the color of it (hint: change the content of the paragraph selector in the main.css file you can find in the css folder).