How do I use codepen for personal projects

HTML-CSS
1

I have finished all the lessons in Responsive Web Design and now I am starting my first personal code project. While going through the lessons, I have never seen html, css, and JS in separate windows; 1 for html, 1 for css, and 1 for js.

Does the <style/ ids/classes stuff go in the css window? and the nested header/footer/article stuff go in the html window?

Maybe someone could give me insight into how to use both windows.

Thanks

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36 Edg/99.0.1150.30

Challenge: Build a Tribute Page

Link to the challenge:

2

Hi @Excelsior !

You don’t need to include the style tags for the css section.
You can just write css in there because style tags are html tags.
But for these projects you don’t need to use styles tags at all.

Yes.
You also don’t need to include head, doctype, or body tags because that is already built into codepen.

Here is an example

Screen Shot 2022-03-06 at 10.31.57 AM
Screen Shot 2022-03-06 at 10.31.57 AM953×420 25.5 KB

If you need more help with codepen, then you can read through this article

3

But how do I know what goes in the HTML window and what goes into the CSS window? I went through all the lessons and not once saw how to split it up?

Can I just use the one CSS or the one HTML window for everything?

4

No, you do want to practice using both sections.
I think it will help if I broke down one of the lessons and showed you how to split up the html and css.

Here is a lesson that we can break up into an html and css section.

In codepen, here is all of the html that we want to put inside the html section.

<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

And then everything inside the style tags go into the css section.
Do no include the actual style tags.
Just include the code inside the style tags like this.

  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    padding: 10px;
  }

This is what that same code looks like in codepen broken up into the html and css section.

Screen Shot 2022-03-06 at 11.13.10 AM
Screen Shot 2022-03-06 at 11.13.10 AM1273×499 45.6 KB

Hopefully that is a little bit clearer.

5

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