FreeCodeCamp style Mark Down Previewer. How can I style the code markdown

2 Likes

You can select the elements inside the div with Id Preview

#preview h1{
        ..................
}
1 Like

Tried it. Doesn’t work. Can you please check my code once

Why do you think it doesn’t work? I see the following CSS:

#preview h1{
        color: red
}

And the h1 in the preview window is definitely red.

P.S. I would get into the habit of always adding a semicolon at the end of each property declaration.

Thank you. I see it now maybe it didn’t update before.
I am finding these projects harder each day. Getting really overwhelmed. I was looking at the drum machine project and first thing I had no idea where to get the drum sound, I googled and found out.

Second thing that I found really difficult was how do I set key press events.

Then there’s slider, the turn on off slider switch, I have no idea how to implement all that. It’s so overwhelming/difficult. I only way out I see is taking peeks at the solution codes. :tired_face:

The previous certifications projects were so straightforward everything was already taught in the course but this one we have things and libraries thrown at us and many new things that are not taught

That’s OK, these aren’t supposed to be easy, but this is how you learn, by diving in and doing. And yes, google is the developer’s best friend. Learning how to find things is one of the most important skills you can have.

Welcome to the real world of web development. It is impossible to know everything and you will constantly be learning new things or re-learning things you’ve forgotten about.

1 Like

Can you give me suggestions on how to add the maximize minimize window feature in this project?

You can do it by toggling a class on click.


Also, looking at solutions to problems is perfectly fine as long as your intent is to learn from them. We are all to some degree standing on the shoulders of each other (giants or not). You wouldn’t want someone building a bridge that had never seen how a bridge was built. Most likely in time, you will see code and not want to use it directly but just use it as a jumping-off point, or it will give you an idea as to how you would do it completely differently.

1 Like

Yes I know how to do that learnt it while building the to do list app. So you set a particular class then at the same time you have to change the class of the other thing too right that is if previewer is maximized then editor is not visible and so on?

Thank you for the reply and the suggestions. Yes absolutely I was just looking for idea and not copying.

I think I went though a hard time because I was doing it at the first day on my job in front of 25 other developers , thus I felt like of dumb/my mind was not functioning as fast/normally as it would when I am at home pressure free plus I was doing it in a single go for so many hours/whole day. I was told at job to complete all the projects and show them then I will be given other tasks I guess or maybe be told to learn Node js and APIs/backend next.

Yes, it would likely be using two classes, not just one (or inline styles). The example project has .maximized and .hide classes. It’s basically doing conditional styling by conditionally adding or removing classes.

I can see how that might put some pressure on you. Hopefully, you have more experienced developers that are willing to teach and help you. That is one of the main benefits of learning on the job.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.