Confusion on project

So I’m doing the responsive web design project I am confused on how I go about it. Do I just write all the code in the code pen template? I don’t get what the “User Story” is for. Are they supposed to represent different templates? And the code pen template is confusion too, I dont see where to run the code and there’s this white block at the bottom of the screen I cant get rid of. I’ll attach screenshots below. Any clarification would be greatly appreciated.

You will write your HTML in the HTML pane and your CSS in the CSS pane. You probably won’t need the JS pane. If you need to add a library or whatever, you can do that in the settings.

The code/page that you write should show up in that white section at the bottom. If you put <h1>Hello world</h1> in the HTML pane, it should show up in that bottom white section. You see that the green “hamburger” (three horizontal lines) is already there - that is the imported test suite that you will use when you’re done.

The code will run automatically when you enter it. I prefer to go into the settings and tell it not to do that and to give me a “run” button.

Does that help?

yes it does. thank you for explaining !

so I write the hole code in this page, save it, then paste the link onto the project page?


There are other ways to do this other than codepen, but I think for these first projects, codepen saves you a lot of worries when you’re starting out. There will be a slight pain later to break free of codepen’s way of doing things, but I think it is minor.

ok, thanks for answering !

That’s what we do here. If you get blocked on your project, try to google things first (the most important skill a developer can have) and if that doesn’t work, start a new thread and ask the forum. With codepen, just include a detailed explanation of the issue and a link to your pen so everyone can see what you are doing and try things out.

Good luck, have fun.

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